-
5. CSS 기본 문법개발자 수업/HTML5 2021. 11. 1. 14:28
1. 선택자
1) HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)임
2) 선택자 {
속성 : 값; <- 들여쓰기(Indent), 내어쓰기(Outdent)
속성 : 값;
}
선택자는 스타일(CSS)을 적용할 대상 (Selector)
속성은 스타일의 종류 (Property)
중괄호{}는 스타일 범위의 시작과 끝
2. CSS 선택자
1) 기본, 복합, 가상 클래스, 가상 요소, 속성
3. 기본 선택자
1) 전체 선택자 (Universal Selector)
- *
- 모든 요소를 선택
2) 태그 선택자 (Type Selector) <- 태그로 찾기
- 태그 이름이 AAA인 요소 선택
3) 클래스 선택자 (Class Selector) <- 클래스로 찾기
- HTML class 속성의 값이 AAA인 요소 선택
- .
4) 아이디 선택자 (ID Selector)
- HTML id 속성의 값이 AAA인 요소 선택
- #<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> * { color: blue; } li { color: red; } .orange { color: green; } #oran { color: purple; } span.orange { color: yellow; } </style> </head> <body> <div> <ul> <li>사과</li> <li>딸기</li> <li id="oran" class="orange">오렌지</li> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> </div> </body> </html>
4. 복합 선택자
1) 일치 선택자 (Basic Combinator)
- 선택자 AAA와 BBB를 동시에 만족하는 요소 선택
2) 자식 선택자 (Child Combinator)
- 선택자 AAA의 자식 요소 BBB 선택
- >
3) 하위(후손) 선택자 (Descendant Combinator)
- 선택자 AAA의 하위 요소 BBB 선택
- '띄어쓰기'가 선택자의 기호
4) 인접 형제 선택자 (Adjacent Sibling Combinator)
- 선택자 AAA의 다음 형제 요소 BBB 하나를 선택
- +
5) 일반 형제 선택자 (General Sibling Combinator)
- 선택자 AAA의 다음 형제 요소 BBB 모두를 선택
- ~<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> ul >.orange { color: red; } div .orange { color: green; } .orange + li { color: yellow; } .orange ~ li { color: maroon; } </style> </head> <body> <div> <ul> <li>사과</li> <li>수박</li> <li id="oran" class="orange">오렌지</li> <li>망고</li> <li>딸기</li> </ul> <div>당근</div> <p>토마토</p> <span class="orange">오렌지</span> </div> <span class="orange">오렌지</span> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../css/child.css"> </head> <body> <ul> <li>자식 요소 <ol> <li>자손 요소</li> <li>자손 요소</li> <li>자손 요소</li> </ol> </li> </ul> </body> </html>@charset "UTF-8"; /* border : 1px solid blue */ /* 자손(하위, 후손) 선택자 */ ul li { border: 1px solid blue; } ul > li { border: 1px solid black; }
'개발자 수업 > HTML5' 카테고리의 다른 글
6. CSS 기본 문법2 (0) 2021.11.02 HTML5/src/main/webapp/lab03 (0) 2021.11.02 4. HTML 문서 구조 (0) 2021.11.01 3. Review (0) 2021.11.01 2. HTML 문서 (0) 2021.10.29