본문 바로가기
Web/HTML5 & CSS

HTML5(5) - CSS 기본문법

by SeleniumBindingProtein 2022. 1. 28.
728x90
반응형

1. 선택자
    1) HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)임.
    2) 
                스타일의 종류 (Property)
                ---
       선택자 { 속성: 값; }
       ------
       스타일(CSS)을 적용할 대상(Selector)

       선택자 {                                 <-- 스타일 범위의 시작
                속성: 값;                       <-- 들여쓰기(Indent), 내어쓰기 (Outdent)
                속성: 값; 
       }                                        <-- 스타일 범위의 끝

2. CSS 선택자 
    1) 기본, 복합, 가상 클래스, 가상 요소, 속성   

3. 기본 선택자
    1) 전체 선택자 (Universal Selector)
        - * 
        - 모든 요소를 선택.
    2) 태그 선택자 (Type Selector)          <--태그로 찾기
        - 태그 이름이 AAA인 요소 선택.
    3) 클래스 선택자 (Class Selector)       <--클래스로 찾기
        - HTML class 속성의 값이 AAA인 요소 선택.     
        - .
    4) 아이디 선택자 (ID Selector)   
        - HTML id 속성의 값이 AAA인 요소 선택.
        - #      

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 모두를 선택.
                                        ----
        -  ~
                                        

728x90
반응형

'Web > HTML5 & CSS' 카테고리의 다른 글

HTML5(7) - BS  (0) 2022.01.28
HTML5(6) - CSS 기본문법2  (0) 2022.01.28
HTML5(4) - 문서구조  (0) 2022.01.28
HTML5(3) - review  (0) 2022.01.28
HTML5(2) - 문서  (0) 2022.01.28

댓글