즐코

HTML 기초2 + CSS 기초1 본문

HTML, CSS

HTML 기초2 + CSS 기초1

YJLEE_KR 2021. 12. 21. 17:36

*수업 듣고 목차 만들어 공부하기*

1/HTML 기초2

-HTML 파일 생성의 기초

-table 만들기 : tr, td

 

2/CSS 기초1

- css란 무엇이며, html과의 차이는? 

- css 적용방법 3가지
  1. Inline 스타일
  2. style element 사용 (id/class와 selector)
  3. 외부파일 생성 (link 태그와 경로에 대하여)

-대표적인 css들 : margin, padding

 

1/ HTML 기초2

-HTML 파일 생성의 기초

1) HTML 파일 생성 시 주의사항

- 영어로 파일명 만들고, 확장자 .html 로 저장하기

- 특수문자/띄어쓰기 금지

- 예외특수문자: dash(-) & underbar(_)

ex) hello_world.html

2) HTML 파일 생성 후 초기 구성

- 단축키 (!+Enter) 또는 (html:5) 로 시작하면 head부터 body까지 자동설정
- html lang="en" 로 html 언어 설정됨

 

- table 만들기 : tr,td

1) tabel element : 줄부터 생성하고 그안에 칸을 생성하는 게 기본

 

ex) 3x5 table 일 경우

#1. table element 생성

#2. 줄부터 생성 3줄 (<tr></tr> x3)

#3. 각 tr 안에 칸을 생성 5칸 (<td></td> x5)

 -> 기본적으로 아래와 같이 표상에 border가 생기진 않음 / border나 background 는 CSS로 해결

 

 <table>
        <tr>
            <td>번호</td>
            <td>제목</td>
            <td>작성자</td>
            <td>작성일</td>
            <td>조회수</td>
        </tr>
        <tr>
            <td>1</td>
            <td>안녕하세요</td>
            <td>이연정</td>
            <td>2021-12-21</td>
            <td>10</td>
        </tr>
        <tr>
            <td>2</td>
            <td>안녕하세요</td>
            <td>이연정</td>
            <td>2021-12-21</td>
            <td>15</td>
        </tr>
    </table>

 

HTML은 결국 아래 내용들을 이해하고 나면 그 이후의 것들은 CSS에서 다룬다고 보면 된다. 

- element/속성 을 얼마나 잘 이해하고 알고있나

- block/inline의 차이를 아는가

- table을 만들 수 있나 

 

2/CSS 기초1

- CSS는 왜 쓰는가?

: html의 element들을 꾸며주기 위해서 + 기존 갖고 있던 요소를 변경시키기위해 (block->inline 또는 inline->block)

HTML과 CSS의 차이
HTML CSS
데이터의 구분을 시켜주기 위해 쓰는 것 본래 가지고 있는 속성 (디자인적인 부분) 변경시켜주는 것
key="value" 형태를 띈다 (이를 queryString이라고함) key:value; 형태를 띈다. (object 형태와 같음/object 자체는 x)

*세미콜론(;) : 끝나는 부분을 지정해주는 역할/컴퓨터가 이해할수있게끔

 

- CSS 적용방법엔 크게 3가지가 있다.


  1. inline 스타일 

   : 각 element에 직접 style 속성을 주는 방법 -> 그 element가 차지하는 영역만큼만 건드릴수 있다.

      style="css key:value;" 형식으로 들어감

    </span>인라인1</span>
    <span style="background:blueviolet;">인라인2</span>

 

 

2. style element 사용

 : 내용을 저장하는 영역인 <head>파트 안에 <style>css selector</style>를 써준다. 

   이 때, <body> 파트에서 id나 class를 사용하여, 특정 element에 고유한 이름을 부여해준다.

 

자세히 설명하자면, 

 

#1. body 태그 안에서 꾸밈이 필요한 element에 id/class 값을 지정해주어,

      컴퓨터가 그 id/class의 값을 가진 element 선택을 먼저 하게끔  도와줄것

#2. head 태그 안에 <style> selector(선택자) + id이름값 + {css 내용} </style>

#3. 중괄호 {} 안에는 css 내용을 입력해준다.

  • 샵(#) : id가 "footer"인 element들을 찾아주는 선택자 -> #footer{꾸며줄 내용들}
  • 콤마(.) : class가 "practice1" 인 element들을 찾아주는 선택자 -> .practice1{꾸며줄 내용들}

* 중괄호 {} : 특정 선택자가 css를 확실하게 구분지어주기위해서

* class, id 하나로 통일하면 안되나요?

기능적으론 같으나, id는 주로 단일 스타일 (로고, 상단메뉴 등) 정의할 때 사용하고, class는 반복적으로 사용되는 스타일을 정의할 때 쓴다고하는데 잘 이해가 되진 않음.. (암묵적으로 정한 룰인가..?)

<head>
<style>
  #footer{
    background:blueviolet;
    height:137px;
    padding:20px; }
  .practice1{
    font-size:20px;
    color:white;
    background:black;}
</style>
</head> 
<body>
   <div id="footer">bttm_side</div>
   <div class="practice1">what's padding?</div>
</body>

 

# id/class 값 주지 않고, <head> 파트 상에서 element 자체에 직접 css 적용하는 방법도 있음

li {display : inline;} 

ul > li {display : inline;}  ( 상 > 하 : 하위 엘리먼트 표시 방법)

이 때, ul 이 다수로 있을 경우 특정 ul, li만 꾸미고 싶다면, body 상에서 ul의 class를 지정해줘서 아래와 같이 css 적용 가능

.menu2 > li {display : inline;}

 

이때 방금 등장한 CSS 속성을 잠깐 설명하자면, 

block 속성 -> inline 속성으로 바꿀 때 쓰는 CSS => display:inline;

inline 속성 -> block 속성으로 바꿀 때 쓰는 CSS => display:block;

 

3. 외부파일 생성 (주로 사용하는 방법)

확장자 .css 파일 따로 만든 후 .html 파일 상에 <head>파트 안에 link 를 적용하여 css 파일을 불러오기

link : 아래와 같이 3가지의 속성값이 존재한다.

 

         1- href : 파일의 경로 (아래의 경로 찾기 참고할 것)

         2- type : 파일의 형태

         3- rel : stylesheet

+ link는 속성값을 매길 때 queryString 형태를 띄고 있다. (key="value")

      <link href="파일경로" type="text/css" rel="stylesheet">
       

 

경로 찾는 공부 해볼것

파일의 경로, 주소는 . .. \ 로 구성되있다.

 

1- 절대경로 (처음~끝까지 다 적은 경로)

ex) C:\Users\leeyj\Documents\workspace\html\20211221

 

2- 상대경로 (실행하는 파일로부터 경로를 체크) .\파일명

- 마침표(.) : '현재 자기 기준으로부터' 

- 백슬래쉬(\) : 폴더 구분값 (리눅스,mac은 기본슬래쉬 / 사용)

ex).\index2copy.css

 

<link href="C:\Users\leeyj\Documents\workspace\html\20211221" type="text/css" rel="stylesheet">

<link href=".\index2copy.css" type="text/css" rel="stylesheet">

 

+ 상대경로 파악하기

1- cmd 명령 프롬프트 열기

2- cd 한 칸 띄고 다음 폴더명 넣는 것 반복하면 아래 순서대로 최종 폴더가 뜸

3- 마지막 폴더에서 dir 입력하면 해당 폴더 상의 현재 디렉토리가 나옴

4- 반대로, cd 한 칸 띄고 .. 치면 폴더가 역행함

참고사항

3번째 외부 css 파일 생성이 가장 많이 쓰이긴 하지만,

1번째 inline 자체 css 스타일을 먹이는 게 가장 우세해서,

이전 외부 css 스타일은 덮어짐그리고 중복된 css가 있으면 아래에 있는 css가 최종적으로, 우선순위로 나옴 - 절차지향적

별표 (*) 선택자 : 모든 html상의 element의 스타일을 통일시켜줌

*{css selector} 
 
대표적인 CSS : margin & padding
 
margin padding
엘리먼트간 간격 띄울 때 사용 (외부간격)
(기본적으로 엘리먼트끼리는 딱 달라붙어있음)		 컨텐츠의 위치 조절 (내부간격)
margin-bottom:15px; (아래쪽 간격 띄우기)
margin-top:15px; (위쪽 간격 띄우기) 
margin:15px 0 15px 0; (상-우-하-좌 시계방향대로)
margin:15px 0; (상하 좌우 간격)
margin:15px; (상하좌우 모든 간격)
margin:0; (간격 x)
  padding 공부하기

'HTML, CSS' 카테고리의 다른 글

CSS / 햄버거 버튼 만들기 + 간단한 on/off switch 동작 구현  (0) 2021.12.27
CSS / flexbox 에 대하여 - 1  (0) 2021.12.26
CSS / position 에 대하여  (0) 2021.12.26
CSS 기초2 - 학원 홈페이지 따라해보기 (상단파트)  (0) 2021.12.22
Browser + HTML 기초1  (0) 2021.12.20
'HTML, CSS' Related Articles more
Comments