GIF 출처 : https://giphy.com/gifs/HostGator-webhosting-hostgator-webhost-fuJPZBIIqzbt1kAYVc

🖥 Contents

---

1 ) CSS 란 무엇인가?

2 ) CSS 의 특징

3 ) CSS 의 기본 문법 및 적용

4 ) CSS 선택자

5 ) CSS 우선 순위

---

1 ) CSS 란 무엇인가?

---

• CSS란?
  : HTML이 웹페이지의 정보를 표현하는 언어라면 CSS는 HTML을 보기 좋게 디자인 하는 역할을 하는 언어 이다. CSS는 문서의 컨텐츠와 레이아웃 , 글꼴 및 시작적 요소들로 표현되는 문서의 디자인을 분리하기 위한 목적으로 만들어졌다. 이때 CSS는 특정한 방법과 원칙에 따라 사용되어야 하는데 이를 CSS 명세 ( CSS Specification ) 이라 한다. 이러한 명세는 WWW Consortium에서 관리하며 이에 대해 CSS1 , CSS2 , CSS3 가 정의되어 있다. 명세를 통해 규정된 규칙으로 HTML 요소와 HTML 문서를 제어할 수 있다.

---

2 ) CSS 의 특징

---

• CSS 의 특징
  : CSS는 두드러지는 특징 3가지를 가지고있다. (1) CSS 상속 (2) CSS 캐스케이딩 (3) CSS 오버라이딩이 있다.

  (1) CSS 상속
  : CSS3의 스타일은 부모 요소로 부터 상속받는다. 예시를 통해 이를 이해 해보자.

  < p style="color:blue" > #부모는 파란색 스타일 요소을 가진다.
  < em style="font-size:12px" > #자식은 파란색 스타일 , 폰트 크기 요소를 가진다.

  (2) CSS 캐스케이딩 ( CSS Cascading )
  : CSS 캐스케이딩이란 4가지의 스타일시트가 동시에 적용될 떄 스타일이 합쳐서 적용되는 것을 의미한다. 이때 4가지의 스타일 시트는 다음을 의미한다.
  
  ① 브라우저 디폴트
  ② .css 스타일 시트 파일
  ③ < style > < /style > 태그
  ④ style 속성에 작성된 스타일
  
  (3) CSS 오버라이딩
  : 동일한 CSS3 프로퍼티에 서로 다른 값 설정이 충돌할 때 우선순위가 높은 스타일을 적용하는 규칙이다.

---

3 ) CSS 의 기본 문법 및 적용

---

• CSS 의 기본 문법
  : CSS는 선택자 ( Selector ) 와 선언부 ( Declaration ) 으로 나뉘며 , 선언부는 다시 속성 ( Property ) 와 속성값 ( Value ) 로 나뉜다.

  • CSS 기본 문법 구조
    

    p , td {
    color:blue; font-size:12px;
    }

    이때 p , td 는 선택자 ( Selector ) 이며

    블록 안에 있는 부분을 선언부 ( Declaration ) 이라 한다.

    ① 선택자는 스타일하고 싶은 HTML tag 나 부여한 Class 혹은 ID가 위치하며 여러 선택자를 사용할 경우 콤마 ( , ) 로 구분한다.
    ② 선언부에 여러 개의 속성과 속성값이 있을때 세미콜론 ( ; ) 으로 구분하며 각각의 선언은 속성과 속성값을 콜론 ( : ) 으로 구분한다.
    ③ CSS 주석은 /* */ 으로 둘러 싼다.

  • CSS 의 적용
    : HTML에 CSS를 적용하는 것은 연필이나 팬으로 그린 밑그림에 색을 칠하는 과정과 같다. 그러므로 HTML을 먼저 구성한 후 CSS를 적용하는데 이때 HTML의 태그 중에서 스타일 태그에 지정하면 된다.

    • CSS 적용방법
      ① HTML 태그 내에 스타일 지정 ( Inline Styles )
      : ex)
      
      ② < head > 안에 내부 스타일 시트 ( Internal Style Sheet )
      : ex)
      ③ < head > 안에 링크를 이용한 외부 스타일 시트 ( External Style Sheet )
      : ex)
      ④ < head > 안에 @import 를 이용한 외부 스타일 시트
      : ex )
      ⑤ xml - stylesheet 처리 명령으로 외부 스타일 시트
      : ex )

---

4 ) CSS 선택자

---

• 선택자
  : 앞서 CSS의 기본 문법 및 구조에 대해 알아보았다. 그중 선택자는 CSS의 핵심이 되는 구성요소이다. CSS 선택자는 HTML 요소에 스타일을 적용하기 위해 사용되는 규칙 혹은 패턴으로 특정 요소를 선택하여 스타일을 적용하는데 사용된다. 이를 통해 웹 페이지의 스타일링을 제어 하고 디자인 할 수 있다.

  • CSS 선택자 ( Selectors ) 종류
    
    선택자는 많은 종류가 존재하기 때문에 모든 선택자를 외워서 사용할 수 없다. 백엔드 개발자가 프론트를 이해하는 것을 중점으로 두기 때문에 가볍게 읽고 넘어가자.

---

5 ) CSS 우선 순위

---

• CSS 우선 순위
  : CSS는 기본적으로 선언된 순서에 따라 적용되지만 , 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있다. 앞서 언급한 CSS 오버로딩이 이에 해당한다. 선택자와 삽입 위치에 대한 우선순위는 정해져 있기 때문에 가독성 및 코드의 원할한 전개를 위해 최대한 단순하게 유지하는 것이 중요하다.

  • 선택자 우선순위
    !important > 인라인 스타일 > 아이디 선택자 > 클래스 / 속성 / 가상 선택자 > 태그 선택자 > 전체 선택자
    
    
  • 삽입 위치 우선순위
    1st. < head > 안의 style 요소
    2nd. < style > 안의 @import 문
    3rd. < link > 로 연결된 CSS 파일
    4th. < link > 로 연결된 CSS 파일 안의 @Import ans
    5th. 최종 사용자가 연결한 CSS 파일
    6th. 브라우저의 기본 스타일 시트

---