[CSS] 4장: 웹 스타일링을 위한 CSS 기초 배우기

개요

이번 장에서는 CSS의 기본 문법과 스타일을 웹 페이지에 적용하는 방법에 대해 다룬다. CSS는 웹 페이지의 디자인을 담당하는 언어로, HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조에 시각적 스타일을 입힌다. 초기에는 HTML의 style 속성을 사용해 개별 요소에 스타일을 적용했으나, 구조와 디자인을 분리하여 효율성을 높이고 유지 보수를 용이하게 하기 위해 CSS가 독립된 언어로 발전하게 되었다.

이 장에서는 CSS의 기초 문법을 배우고, HTML과 분리된 이유를 설명하며, 실제로 HTML에 스타일을 적용하는 방법을 단계별로 살펴볼 예정이다.

CSS 문법 살펴보기

선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역.

선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역.

만약 속성이 여럿이라면, 줄바꿈을 통해 가독성을 높일 수 있다. 

주석은 대부분의 컴퓨터 언어와 같이 /* */ 를 사용한다.

CSS 적용하기

내부 스타일 시트 사용하기

HTML 문서 내부에 작성하는 방법.

<style>
 /* CSS 코드 */
 </style>

정해진 위치 기준은 없지만, 보통 head 태그 안에 사용한다.
    장점 : body가 사용자에게 노출되기 전에 CSS를 불러오기 때문에 빠르게 디자인을 적용할 수 있다
    단점 : 웹에서 HTML 문서를 해석할 때마다 CSS를 매번 다시 읽기 때문에 성능상 좋지 못하다

외부 스타일 시트 사용하기 (권장)

CSS를 작성한느 별도 파일을 만들어 HTML 문서와 연결하는 방법.

h1 {
	color:red;
}

/*
html에서는 다음으로 불러온다 :
<link rel="stylesheet" href="css 파일경로"
>*/

 

 

이 외에도 CSS 코드를 그냥 HTML의 style 속성의 값에 대입하여 인라인으로 스타일을 적용하는 방식이 있다. 하지만 실무에서는 거의 사용되지 않는다.

마무리

오늘은 내일이 주말이라 그런지 학습량이 3, 4일차에 비해 훨씬 적었다. 간단하게 CSS로 스타일을 적용하는 법을 배웠고, 다음 장에서는 본격적으로 CSS를 활용하는 방법을 다룰 것 같다. 예전에 문서를 작성할 때는 주로 인라인 스타일만 사용했지만, 이제는 HTML과 CSS를 분리하는 것이 더 나은 방식이라는 사실과 그 이유를 제대로 이해하게 되었다.