웹 문서를 작성하는 마크업 언어다.
구성요소
•
Document : 한페이지를 나타내는 단위
•
Element : 하나의 레이아웃을 나타내는 단위
◦
시작 태그, 끝태그, 텍스트로 구성
•
Tag : 엘리먼트의 종류
◦
시작 태그(속성값), 끝 태그
•
Attribute : 시작태그에서 태그의 특정 기능을 하는 값
◦
id : 웹 페이지에서 유일한 값
◦
class : 동일한 여러개의 값 사용 가능 : element를 그룹핑할 때 사용
◦
attr : id와 class를 제외한 나머지 속성들
•
Text : 시작태그와 끝태그 사이에 있는 문자열
•
엘리먼트는 서로 계층적 구조를 가질 수 있다.
<< 직방의 서현동 원룸 매물 페이지 HTML 예시 >>
- <!DOCTYPE html> : 문서의 종류를 선언하는 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset='utf-8'> : 웹페이지에 대한 정보를 넣음
<title></title> : 웹페이지의 제목 정보를 넣음
</head>
<body>
화면을 구성하는 엘리먼트를 작성
</body>
</html>
HTML
복사
2. CSS Selector
CSS 셀렉터는 CSS 스타일을 적용시킬 HTML 엘리먼트를 찾기 위한 방법이다.
2-1. Tag Selector
태그 이름을 이용해 element를 선택할 때 사용
2-2. ID Selector
아이디를 이용해 element를 선택할 때 사용
#(아이디 이름) 으로 선택
여러 개를 선택할 때는 ‘,’ 로 구분 → ex) #ds2, #ds3
2-3. Class Selector
클래스를 이용해 element를 선택할 때 사용
.(클래스 이름) 으로 선택
2-4. Attribute Selector
id, class 속성을 제외한 속성값을 이용해 element를 선택할 때 사용
[속성키=’속성값’] 으로 선택 → [val = ‘ds2’]
2-5. Not Selector
셀렉터로 엘리먼트를 하나만 제거하고 싶을 때 사용
:not(선택에서 제거하고 싶은 셀렉터) 로 선택
ex) .ds:not(.ds2) → ds1, ds3, ds4, ds5 선택됨
<p class="ds ds1">ds1</p>
<p class="ds ds2">ds2</p>
<p class="ds ds3">ds3</p>
<p class="ds ds4">ds4</p>
<p class="ds ds5">ds5</p>
HTML
복사
2-6. nth-child Selector
엘리먼트로 감싸져있는 n번째 엘리먼트가 설정한 셀렉터와 일치하면 선택
ex) .ds:nth-child(3), .ds:nth-child(4) 는 ds4, ds5를 선택한다.
<div class="wrap">
<span class="ds">ds2</span>
<p class="ds ds1">ds3</p>
<p class="ds ds2">ds4</p>
<p class="ds ds3">ds5</p>
<p class="ds ds4">ds6</p>
<p class="ds ds5">ds7</p>
</div>
HTML
복사
2-7. 모든 하위 depth(공백) Selector
공백문자로 하위 엘리먼트를 셀렉트 했을 때, 모든 하위 엘리먼트를 선택
ex) .contants h1 → inner_1, inner_2 가 모두 선택
<div class="contants">
<h1>inner_1</h1>
<div class="txt">
<h1>inner_2</h1>
</div>
</div>
HTML
복사
2-8. 바로 아래 depth(>) Selector
‘>’ 문자로 하위 엘리먼트를 셀렉트 했을 때, 바로 아래 엘리먼트를 선택
ex )_ .contants>h1 → inner_1 만 선택됨
<div class="contants">
<h1>inner_1</h1>
<div class="txt">
<h1>inner_2</h1>
</div>
</div>
HTML
복사
2-9. first-child Selector
엘리먼트로 감싸져있는 가장 처음 엘리먼트가 설정한 셀렉터와 일치하면 선택
ex ) .ds:first-child → ds1 선택됨
<body>
<p class="ds" id="ds1">ds1</p>
<p class="sc" id="ds2">ds2</p>
<div class="ds">
<p class="ds ds1">ds3</p>
<p class="ds ds2">ds4</p>
<p class="ds ds3">ds5</p>
<p class="ds ds4">ds6</p>
<p class="ds ds5">ds7</p>
</div>
</body>
HTML
복사
2-10. last-child Selector
엘리먼트로 감싸져 있는 가장 마지막 엘리먼트가 설정한 셀렉터와 일치하면 선택
ex) .ds:last-child → div.ds가 선택되어 ds3 ~ ds7 선택됨
<body>
<p class="ds" id="ds1">ds1</p>
<p class="sc" id="ds2">ds2</p>
<div class="ds">
<p class="ds ds1">ds3</p>
<p class="ds ds2">ds4</p>
<p class="ds ds3">ds5</p>
<p class="ds ds4">ds6</p>
<p class="ds ds5">ds7</p>
</div>
</body>
HTML
복사