[CSS] CSS 기본구조 및 선택자 종류와 우선순위

CSS(Cascading Style Sheets)는 HTML문서의 스타일을 꾸밀때 사용하는 스타일 시트 언어이다.

HTML에서 CSS가 분리된 이유는 정보(HTML)와 디자인(CSS)의 분리, 유지 및 보수의 편의성, 효율적인 재사용성 때문이다.

 

기본구조

h1(선택자 selector){

    color(스타일 속성 property) : red(속성값 value);

}

 

태그 정리

 

폰트 속성

font : 요소가 화면에 보이는 방식 지정

• font - famliy : 글꼴
• font -  size :  글자 크기
• font - weight :  글자 두께
• font - style : 글자 스타일 

 

선택자 조합해서 사용하기

1. OR 연산

쉼표 (,)를 활용하면 OR 연산이 됩니다. 두 CSS 선택자 중 하나라도 해당되면 선택합니다.

CSS 선택자의미

#login, .left	아이디가 login이거나 클래스가 left인 태그
p, i	모든 p 태그와 모든 i태그

2. AND 연산

두 CSS 선택자를 붙여쓰면 AND 연산이 됩니다. 두 CSS 선택자에 모두 해당되는 요소만 선택합니다.

CSS 선택자의미

.favorite.private	favorite 클래스와 private 클래스를 모두 가진 태그
p.favorite	favorite 클래스를 가진 p 태그

 

선택자 종류

전체선택자 : *로 표시, 웹 문서 내 모든 요소 선택

태그선택자 : 요소 이름으로 사용하여 요소 선택

아이디선택자 : #기호로 표시, 특정한 요소 선택, HTML구조의 공간분할 적용할때 사용, id

클래스선택자 : 마침표(.)기호로 표시, 특정한 요소 선택, 공통되는 스타일을 적용할 경우 사용, class

계층선택자 : 특정위치의 요소를 계층적 구조로 요소 선택

• 자식선택자 : 형식 = >
• 자손선택자 : 형식 = 빈값
• 인접형제(근접후행)선택자 : 형식 = +
• 형제(후행)선택자 : 형식 = ~

 

아이디 & 클래스 선택자 차이점
아이디 선택자	클래스 선택자
body 태그안에 한개만 존재	여러개 태그에 동시 적용
정의한 후 한 페이지에서 한번만 사용	재사용 가능
로고, 상단메뉴, 하단정보 등 스타일 정의할때 사용	세부 스타일 정의할 때 사용

 

선택자 우선순위

아이디 > 클래스 > 타입 > 전체선택자 순이다.

우선 순위가 동일하면 마지막에 정의한 스타일이 반영된다

 

명시도 계산으로 스타일 우선 적용할 때

아래 숫자별 할당 한후 숫자가 높을 수 록 우선순위가 높다. 

• 전체 선택자 : 0
• 타입 선택자 : 1
• 클래스 선택자 : 10
• 아이디 선택자 : 100

 

명시도 계산 예시) 

   #box p span{} ---> 102점

   body #box .my_color span{}  ---> 112점

   #box .my_color span{} ---> 111점

으로 점수는 112점인 두번째꺼가 제일 높으므로 적용이된다면 두번째 선택자가 적용된다.

 

예제1

 

See the Pen 선택자1 by 정혜선 (@Diligent-milk) on CodePen.

 

예제2

 

See the Pen 선택자2 by 정혜선 (@Diligent-milk) on CodePen.

 

details : 열고 닫기하여 열림상태 일때만 내부정보를 보여준다.

디폴트는 닫힘상태이고 처음부터 열림상태로 보여주고 싶으면 <details open>을 하면된다.

 

예제3

See the Pen 선택자3 by 정혜선 (@Diligent-milk) on CodePen.

 

예제4

 

See the Pen ExWbwyd by 정혜선 (@Diligent-milk) on CodePen.

 

반응 선택자 

• hover : 마우스를 올린 요소 선택
• active : 마우스를 클릭한 요소 선택
  •  반응 선택자의 속성중 text-decoration: none는 밑줄을 제거해준다.

 

그룹선택자

아래와 같이 공통된 설정을 주고싶을때 선택자를 " , "으로 구분하여 사용할 수 있다. 

h1, p ,h2{

    color: crimson;

}

 

See the Pen 반응선택자 by 정혜선 (@Diligent-milk) on CodePen.