5. CSS (Cascading Style Sheets)

1. CSS?

CSS(casecading Style Sheets)는 웹 문서의 스타일을 정의하는 언어로, HTML 문서의 내용을 꾸며주는 역할을 한다. CSS는 웹 페이지의 디자인, 레이아웃 및 시각적 표현을 제어한다.

 

1-1 CSS의 기본 구조

 - 선택자(Selector) : 스타일을 적용할 HTML 요소`를 선택한다. 선택자는 HTML 요소의 이름, 클래스, ID 등으로 지정할 수 있다.

 - 스타일 속성(Style Property) : 스타일을 정의할 특성을 나타낸다. ex) 글자색, 배경색, 폰트크기

 - 스타일 속성 값(Style Property Value) : 스타일 속성 값을 지정한다. ex) 글자색을 지정할 때는 'red' 또는 '#FF000000'

선택자 {
  스타일 속성: 스타일 속성 값;
}

p{ color : red; }

p{
  color: red;
}

p{
color: red;
font-size: 32px;
text-align: center;
}

 

1-2. CSS 주석

CSS주석은 코드 내에 설명을 추가하는데 사용된다. 주석은 웹 브라우저에는 표시되지 않으며 코드를 이해하고 유지보수하기 위해 사용된다.

/* 이 부분은 주석입니다. 웹 브라우저에는 표시되지 않는다. */

 

1-3. 스타일 적용 우선 순위

CSS에는 여러 스타일 규칙이 적용될 때 적용 우선순위에 따라 스타일이 결정된다. 

  1) 인라인 스타일(Inline Styles) : HTML 요소의  style 속성에 직접 스타일을 지정한 경우, 이 스타일이 가장 높은 우선순위를 가진다.

   2) 내부 스타일 시트(Internal Stylesheet) : HTML 문서 내부의 style 태그를 사용하여 스타일을 정의한 경우 적용된다.

   3) 외부 스타일 시트(External Stylesheet) : 별도의 CSS 파일을 생성하고 HTML 문서에서 링크한 경우, 이 스타일을 적용된다.
   4) 브라우저 기본 스타일 : 브라우저는 기본적인 스타일을 가지고 있으며, 이러한 기본 스타일은 가장 낮은 우선순위를 가진다.

 

1-4. CSS의 캐스케이딩(Cascading)

CSS의 "Cascading"이란 용어는 스타일 규칙이 충돌할 때 어떤 스타일 규칙은 다음과 같은 순서로 적용된다.

  - 1. 중요성(importance) : !important를 사용한 스타일 규칙은 다른 모든 규칙보다 우선권을 가진다,

  - 2. 특수성(Specificity) : 선택자의 특수성에 따라 스타일이 적용된다. 보다 구체적인 선택자가 우선권을 가진다.

  - 3. 소스 순서(Source Order) : 동일한 중요성과 특수성을 가진 규칙 중에서 마지막에 선언된 규칙이 우선권을 가진다.

CSS는 HTML 문서를 더 강력하게 스타일링할 수 있도록 해주는 중요한 웹 기술 중 하나다. 스타일을 효과적으로 관리하고 웹 페이지의 디자인을 개선하는데 필수적이다.

 

2. CSS 문서

CSS 문서는 웹페이지의 스타일을 정의하는 데 사용되며 HTML 문서와 함께 작동하여 웹 페이지의 외관과 레이아웃을 제어한다.

   1) 독립적인 문서 : CSS 문서는 HTML 문서와 독립적으로 존재할 수 있다. 즉 CSS 코드는 HTML 코드와 별개의 파일로 저장될 수 있다. 웹 페이지의 스타일을 일관되게 관리하고 여러 웹페이지에서 재 사용할 수 있도록 한다.

   2) HTML과 연결 : CSS 문서의 주된 목적은 HTML 문서에 스타일을 제공하는 것이다. HTML 문서와 CSS 문서를 연결하는 방법은 주로 <link> 태그를 사용하여 외부 CSS 파일을 HTML 문서에 연결하는 것이다.

   3) 스타일 정의 : CSS문서에는 스타일 선언 문이 포함되며, 이러한 선언문은 웹 페이지의 요소에 대한 스타일을 정의한다. 스타일 선언문은 선택자와 중괄호 {} 내에 스타일 속성과 값으로 구성된다.

   4) 선택자 : 선택자는 스타일을 적용할 HTML 요소를 선택하는 역할을 한다. 선택자는 요소의 이름, 클래스, ID 등을 사용하여 지정할 수 있다.

   5) 스타일 속성과 값 : 스타일 속성은 웹페이지 요소에 적용할 스타일을 정의하며, 속성 값은 해당 스타일의 설정 값을 나타낸다. 예를 들어 color: blue에서 color는 스타일 속성이며 blue는 속성 값이다

   6) 계단식(Cascading) 스타일 : CSS는 계단식 스타일을 가지고 있다. 이것은 여러 스타일 규칙 중 어떤 것이 우선시 되는지를 나타낸다. 일반적으로 더 구체적인 스타일 규칙이 더 일반적인 것보다 우선시 된다.

   7) 스타일 시트의 분리: 스타일 시트를 독립적으로 관리함으로써 웹 페이지의 구조(HTML)와 스타일(CSS)을 분리할 수 있다. 코드 유지보수와 협업이 더 쉬워진다.

  8) 주석 : CSS 문서에 주석을  추가하여 코드에 설명을 달거나 메모를 남길 수 있다. 주석은 코드 실행에 영향을 주지 않으며, 코드의 가독성을 높이는데 도움 된다.

 

2-1. CSS 문서의 구분

CSS 스타일을 웹페이지에 추가하는 방법에서 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트, 세 가지가 있다. 

 

   1) 인라인 스타일(Inline Styles) : HTML 태그 내부에 직접 스타일 속성을 사용하여 스타일을 정의한다.

    - 장점 : 특정 요소에 직접 스타일을 적용할 수 있으며 우선순위가 높다.

    - 단점 : 가독성이 떨어지며 여러 요소에 같은 스타일을 적용하기 어려울 수 있다.

<p style="color: blue;">This is a blue text.</p>

 

    2) 내부 스타일 시트(Internal Stylesheet) : HTML 문서 내부에 <style> 태그를 사용하여 스타일을 정의한다.

    - 장점 : HTML 문서 내부에서 스타일을 관리할 수 있으며, 여러 요소에 스타일을 적용하기 용이하다.

    - 단점 : HTML 문서와 스타일이 섞야 가독성이 낮을 수 있다.

<style>
  p {
    color: green;
  }
</style>

 

   3) 외부 스타일 시트 (External Stylesheet) : 별도의 CSS 파일을 생성하고, HTML 문서에서 <link> 태그를 사용하여 연결한다.

    - 장점 : 스타일과 콘텐츠가 분리되어 관리 용이하며, 여러 HTML 문서에서 동일한 스타일을 사용할 수 있다.

    - 단점 : 별도의 파일로 관리되어야 하며, 외부 리소스를 가져오므로 로딩 시간이 소요될 수 있다.

<!-- HTML 파일 -->
<link rel="stylesheet" type="text/css" href="style.css">

/* style.css 파일 */
p {
  color: green;
}