( ) MCGUFFIN ARCHIVE, CSS 문법 (1) : CSS의 정의, HTML와의 연결 방법

CSS는 마크업 언어, 즉 HTML을 꾸며 주는 표현용 언어다. HTML이 문저의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인한다. CSS는 HTML과는 독립된 다른 언어이지만 표현을 하기 위한 언어이기 때문에 마크업 문서 자체가 존재하지 않다면 무용지물이 된다. 때문에, 보통 CSS는 HTML과 묶어 얘기한다.

전 세계의 많은 웹 사이트들은 전부 HTML 태그를 이용해 만들어진다. 하지만 웹 사이트를 구축하는 데 자주 사용하는 HTML의 개수는 십여 개밖에 되지 않는다. 이 모든 사이트를 각각 다양하고 독창적인 디자인으로 표현될 수 있게 해 주는 게 CSS다. 이번 포스트에서는 기본적인 CSS 문법에 대해 알아본다. <해당 포스트는 비전공자를 위한 HTML/CSS 강의 기반으로 작성됐다>

CSS 구문

h1 { color: yellow; font-size:2em; }

선택자selector : "h1"

속성property : "color"

값value : "yellow"

선언declaration : "color: yellow", "font-size: 2em"

선언부declaration block : "{ color: yellow; font-size:2em; }"

규칙rule set : "h1 { color: yellow; font-size:2em; }"

CSS 파일은 여러 개의 규칙으로 이루어져 있다. 구문을 작성할 때는 개행에 주의해야 하는데, 선택자와 선언부 사이나 선언과 선언 사이는 개행 해도 상관 없으나 속성이름과 속성값 사이에는 개행해선 안 된다.

/* 올바른 예 */

h1
{ color: yellow; font-size:2em; }

h1 {
    color: yellow;
    font-size:2em;
}

/* 잘못된 예 */

h1 {
    color:
    yellow;
}

CSS와 마크업 문서 연결 방법

(1) 인라인Inline 방식

<div style="color:red;"> 내용 </div>

인라인 방식은 해당 요소에 직접 스타일 속성을 사용해서 규칙들을 선언하는 방법을 뜻한다. 해당 요소에 직접 입력하기 때문에 선택자는 필요 없고, 선언부에 내용만 스타일 속성의 값으로 넣어 주면 된다. 인라인 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지는 않는다.

(2) 인터널Internal 방식

<style> div {color: red;} </style>

인터널 방식은 <head>에 <style> 태그를 활용해 문서마다 스타일을 선언해 주는 방법이다. 이 방식을 활용하면 문서 내의 모든 <div>에 같은 스타일을 줄 수 있다. 다만, 많은 페이지가 있을 경우 까다로운 건 매한가지다.

(3) 익스터널External 방식

div {color: red;}

익스터널 방식은 외부 스타일 시트 파일을 이용하는 방법이다. 한 개 문서를 만들어 거기에 전체 문서가 공용으로 사용할 스타일 규칙을 만들어 넣고, .css 확장자로 저장한 후 페이지마다 링크로 CSS 파일을 연결해 주면 된다.

<link rel="stylesheet" href="css/style.css">

이렇게 <head> 내부에 <link>를 선언한 후 href 속성을 이용해 경로를 적어주면 되는데, 이 때 rel 속성은 연결되는 파일이 문서와 어떤 관계인지를 명시하는 속성으로, CSS 파일은 'stylesheet'라고 적어야 한다. 이 방식으로 스타일을 선언하면 많은 페이지가 있더라도 이 한 줄로 모든 페이지에 같은 스타일을 적용할 수 있으며, 수정할 때도 한 번에 모든 페이지에 반영할 수 있다. 이러한 익스터널 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용된다.

'TOOLS > Frontend' 카테고리의 다른 글

CSS 문법 (3) : 가상 클래스/ 요소, 선택자 간의 구체성 정의 (0)	2024.03.14
CSS 문법 (2) : 선택자의 유형 및 조합, 문서 구조의 이해 (0)	2024.03.11
HTML 요소별 문법 태그 정리 (0)	2024.03.10

CSS 문법 (1) : CSS의 정의, HTML와의 연결 방법

CSS 구문

CSS와 마크업 문서 연결 방법

'TOOLS > Frontend' 카테고리의 다른 글

티스토리툴바