CSS 표현하기 #2 CSS 기본 정의

타입 선택자 

  - HTML 요소명, 요소의 클래스 속성 값, ID 값

  ex)

   h1 {color: pink;} - 전체 적용 되어짐

    - 만일 단란 중 특정 단락만 css 적용을 하고 싶다면

      - 클래스 선택자 

       ex) <h1 class="myhtml">
            <h2 class="myhtml">   - 동일 class 가질 수 있다. 그룹으로 묶는 개념으로 보면 된다. 

                                              .myhtml { color: gray; font-weight: blod; } 

     - ID 선택자 

        - 문서 유일의 값

         <h1 id="pink">  - #pink { color: grey; font-weight: blod; }

 

- 그룹 지정하기 

  h1, h2, h3, #pink { color: brown; }  - pink ID도 같은 그룹으로 지정할 수 있다. ,를 사용

 

- 고급 선택자

  - 특정 요소의 하위 요소는 - 자손 요소가 되어진다. 

  - 하위 선택자 : (부모요소) (자손요소)  :ex) a  b : a 하위에 있는 b 요소를 선택 //  a b c { ... }

 

 a h1 { ... } a의 자손 요소인 h1 모두에 적용

 a>h1 a의 직계 자손인 h1에만 적용 

 a* a 요소 아래에 모든 요소에 적용 

 

의사 클래스 

  link 의사 클래스 

   a:link{ ... } : 한 번도 방문하지 않은 링크 선택  a:link{ color: pink; } <-> a:visited{ color: grey; } 

  

   root 의사 클래스 : 문서 최상위 요소 의미

    단독으로 사용 :root { background-color:gray; } HTML 문서의 배경 색을 회색으로 변경

 

p:first-letter : 첫 번째 글자만 효과 적용 할 때!

p:first-line : 첫 번째 줄만 효과 적용 할 때!

p[title] : title 속성이 있는 <p> 요소 선택

 

 미디어 쿼리

   미디어쿼리 값 + 미디어쿼리 속성

     <link rel="stylesheet" href="a.css" media="all">

     <link rel="stylesheet" href="a.css" media="print">

     < link rel="stylesheet" href="a.css"

media=""screen and (max-device-width: 480px) and (min-device-width: 320px)">

 

  all = 모든 미디어에 해당 CSS 스타일 적용

  print 해당 CSS 스타일 파일 인쇄 시 적용 

  media=""screen and (max-device-width: 480px) and (min-device-width: 320px)"

   - 최소 320픽셀에서 최대 480 픽셀의 화면세 HTML 문서가 보일 때 해당 css 파일 이용

 

css 스타일 적용 순서 

 1. 사용자가 선택자를 통해 직접 정의한 스타일

 2. HTML에 스타일 속성으로 적용한 인라인 스타일

 3. 미디어타입에서 지정한 속성

 4. !important 구문을 추가한 CSS 속성

 5. 구체적인 선택자

 6. 우선 순위 : 아이디 > 클래스 > HTML 선택자 (왼쪽부터 우선순위 점차 낮아짐)

 7. 뒷 부분에 정의된 스타일

 8. 부모로부터 상속된 스타일

 9. 웹 브라우저 기본 스타일