css 단위, 선택자, 명시도

기본적인 css 속성들

• CSS(Cascading Sytle Sheets)

  CSS는 스타일스트 언어로 HTML문서 안에있는 요소들에 선택적으로 스타일을 적용하는 기능을 한다.

  • css의 크기 단위

    1. 절대 단위: px, pt 등
    2. 상대 단위: %, em, rem, ch, vw, vh 등

    • 글꼴 사이즈를 정할 때:
      기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px을 사용한다. 그러나 px은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에 적합하지 않다. 고해상도는 1px이 모니터의 한 점보다 크게 업스케일되기 때문에, 뚜렷하지 못한 현태로 출력될 수 있다.

    • 일반적인 경우:
      상대 단위인 rem을 사용할 것을 추천한다. rem은 브라우저(root)의 기본 글자크기를 기준으로 하기 때문에 root의 글자크기에 따라서만 상대적으로 변하기 때문에 em처럼 계산하기 어렵지 않기때문이다.

    • 화면 사이즈를 정할 때:
      반응형 웹의 경우 디바이스의 너비에 따라 유동적인 레이아웃이 적용되야 한다. 이렇게 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh를 사용하는 것이 좋다. 둘에 붙은 v는 viewport 즉, 웹사이트의 보이는 영역을 의미한다. 이는 보이는 영역을 기준으로 하는 단위라는 의미이다. 각 단위는 1~100까지 있으며 1은 보이는 영역에 1%이다.
      

  • 선택자(Selector)의 종류

    • 전체 선택자: *, 전체 선택자는 html패이지 내부의 모든 요소에 같은 css속성을 적용한다.
    • 태그 선택자: 같은 태그명을 가진 모든 요소를 선택한다.
    • 클래스 선택자: ., 클래스 이름 앞에 마침표를 붙여 같은 클래스 이름을 가진 요소들을 선택한다.
    • ID 선택자: #, 아이디 이름앞에 샾을 붙여 같은 이름을 가진 요소들을 선택한다.
    • 복합 선택자:
      1. 자식 선택자와 후손 선택자

      header > p {} /*자식 선택자: 첫번째 입력의 요소(header) 바로 아래 자식인 요소(p)를 선택*/
       header p {} /*후손 선택자: 첫번째 입력의 요소(header) 아래의 모든 요소(p)를 선택*/

      2. 형제 선택자와 인접형제 선택자

      h1 ~ ul {} /*형제 선택자: 같은 부모를 공유하면서, 첫번째 입력요소 뒤에 오는 요소를 모두 선택*/
       h1 + ul {} /*인접형제 선택자: 같은 부모를 공유하면서, 첫번째 입력요소 뒤에 오는 첫번째 요소 하나만 선택*/

      3. 속성 선택자

      a[href] { } /*'href'속성이 포함된 요소a를 선택*/
       p[id="only"] { } /*id속성의 값이 정확하게 only와일치하는 요소p를 선택*/
       p[class~="out"] { } /*class 속성 값에 out이 초함되는 요소p를 선택(공백으로 분리된 값이 일치해야 한다.)*/
       p[class|="out"] { } /*class 속성 값이 정확하게 out이거나 out-으로 시작하는 요소p를 선택*/
       section[id^="sect"] { } /*id 속성 값이 sect로 시작하는 요소를 선택*/
       div[class$="2"] { } /*class 속성 값이 2로 끝나는 요소를 선택*/
       div[class*="w"] { } /*class 속성 값에 w가 포함되는 요소를 선택*/

      4. 가상 클래스 선택자

      a:link { } /*사용자가 방문하지 않은 <a>요소를 선택*/
       a:visited { } /*사용자가 방문한 <a>요소를 선택*/
       a:hover { } /* 마우스를 요소 위에 올렸을 때 선택*/
       a:active { } /* 활성화 된(클릭된) 상태일 때 선택*/
       a:focus { } /* 포커스가 들어와 있을 때 선택*/

      5. ui 요소 상태 선택자

      input:checked + span { } /*체크 상태일 때 선택*/
       input:enabled + span { } /*사용 가능한 상태일 때 선택*/
       input:disabled + span { } /*사용 불가능한 상태일 때 선택*/

  • 명시도(Specificity) 계산법
    우선적으로 !important선언이 우선 순위가 가장 높다. 그렇기에 다른 선언들을 덮을 수 있기에 꼭 필요한 곳에서만 사용한다.

    • ID 선택자의 갯수를 세어 개당 100으로 계산한다. (=a)
    • 클래스 선택자의 갯수를 세어 개당 10으로 계산한다. (=b)
    • 태그 선택자의 갯수를 세어 개당 1로 계산한다. (=c)
    • 공용 선택자는 모두 0으로 계산 (=d)

    a + b + c + d의 값이 높은 순서대로 스타일적용하는 우선순위를 가진다.
    !important > id [100] > class[10] > tag[1] > *[0]