[CSS] CSS 기초 개념
개요
HTML이 텍스트, 표, 이미지, 영상과 같은 요소들을 이용하여 웹 문서에 정보들을 보여주는 역할이라면, CSS(Cascading style sheets)는 HTML으로 작성된 웹 문서의 디자인을 꾸며주는 역할을 한다.
CSS의 반응형 웹 디자인을 이용하면, PC, 모바일 등 디바이스 종류에 상관없이 해당 디바이스 화면에 알맞게 웹 문서와 웹 요소 배치, 크기들을 자동으로 맞출 수 있다. 이 덕분에 PC용 웹 문서, 모바일용 웹 문서로 각 디바이스 별로 나눠서 중복되는 내용의 웹 페이지를 만들지 않아도 된다.
스타일 문법
CSS 코드는 대게 다음과 같은 형태를 띈다.
li {
color: rgb(76, 0, 139);
margin: 10px;
}
form {
background-color: rgba(100, 219, 237, 0.826);
}
위 코드를 추상화하면 다음과 같이 표현할 수 있겠다
선택자 {
속성: 속성값;
속성: 속성값;
}
선택자에는 HTML에서의 태그 또는 태그 안에 설정한 class, id 값을 넣을 수 있다. 즉, 선택자는 중괄호 안에 정의한 스타일을 적용할 대상을 뜻하며, HTML 태그(또는 태그들 중 설정된 class, id 속성값) 중 하나를 선택한다.
중괄호 안에는 원하는 스타일의 속성 및 속성값들을 나열한다. 속성과 속성값 한 쌍을 스타일 규칙이라 한다. 여러 스타일 규칙들을 구분하기 위해 세미콜론(;)을 반드시 작성해준다. 스타일을 지정하는 속성에는 무수히 많은 종류가 존재한다. 하지만 속성 종류만 많을 뿐, CSS 기본 구조 형태는 예제 1-2의 형태와 같다.
참고로 예제 1-2의 형태는 한 줄로도 표현할 수 있다.
선택자 { 속성: 속성값; 속성: 속성값; }
주석
CSS에서 주석은 /*, */ 기호를 사용하며 해당 기호 사이에 주석을 넣을 수 있다. 해당 주석은 웹 상에서 처리되지 않고 무시된다. 한 마디로 코드가 어떤 기능을 하는 건지 설명하는 용도로 쓸 수 있다.
/*
CSS에서의 주석
*/
스타일 시트와 그 종류
위 예제들처럼 CSS로 작성한 스타일 코드들을 하나로 그룹화한 것을 스타일 시트(stylesheet)라 한다. 스타일 시트에는 여러 종류가 있다.
- 스타일 시트
- 브라우저 기본 스타일 웹 브라우저마다 기본으로 설정된 스타일로, 사용자가 CSS로 직접 지정하지 않아도 웹 브라우저에서 정의한 기본 스타일을 웹 문서에 적용시킨다. 예를 들어 <strong>, <h1> 태그 등을 사용했을 때 CSS를 사용하지 않았음에도 브라우저에서 보면 굵은 글자로 처리되고 글자 크기도 더 커지는데, 이는 브라우저 기본 스타일에 의해서이다.
- 사용자 스타일
- 인라인 스타일
스타일을 적용하고자 하는 HTML 태그에 style 속성값으로 CSS 코드를 삽입하는 형태이다. 주로 적용하고자 하는 스타일 CSS 코드가 짧을 경우에 사용한다. 다음은 그 예이다.
<h1 style="background-color: bisque;">안녕하세요</h1>
예제 2-1 실행결과
- 내부 스타일 시트
인라인 스타일로 스타일을 지정하기엔 CSS 코드가 너무 길어질 때, 또는 HTML 문서 여러 곳에 스타일을 지정할 때 이 CSS 코드들을 하나로 묶어 HTML 문서 내에 작성한 것을 내부 스타일 시트라 한다. 스타일은 웹 문서가 웹 브라우저에 띄우기 전에 결정되어야 하기 때문에 <head> 태그 안에 작성되며, <style>, </style> 태그 안에 작성된다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { background-color:cornflowerblue; } p { background-color: cadetblue; padding: 20px; color:burlywood; } </style> </head> <body> <h1>안녕하세요</h1> <p> 곧 있으면 크리스마스가 다가올 것이고, 그 이후엔내년이군요. 내년엔 지금보다 더 나은 삶, 더 적극적인 삶을 살았으면좋겠습니다. </p> </body> </html>
예제 2-2 실행결과
- 외부 스타일 시트
인라인 스타일, 내부 스타일 시트들은 모두 HTML 문서 안에 CSS 코드를 같이 사용해서 스타일을 지정하는 반면, 외부 스타일 시트는 HTML 문서와 CSS 문서를 따로 분리하여 .css 확장자를 가지는 CSS 문서 파일에 스타일 지정 코드를 정의한다. 그리고 HTML 문서에서 해당 CSS 문서를 불러들여 스타일을 지정하는 방식이다. 이러한 방식은 웹 사이트가 거대해져 하나의 웹 사이트를 구성하는 웹 문서가 여러 개 존재하고, 그 중 같은 스타일을 사용하는 웹 문서들이 많이 존재할 경우 하나의 CSS 파일을 사용하면 인라인 스타일, 내부 스타일 시트를 사용하는 것과 달리 문서마다 중복되는 코드가 발생하지 않는다. 이러면 웹 사이트 관련 파일들이 차지하는 서버 내 용량, 사용자 입장에서 해당 웹 사이트를 보기 위해 다운받아야 할 파일 용량들이 비교적 가벼워져 상대적으로 웹을 더 빠른 속도로 이용할 수 있다. CSS 파일을 HTML 문서로 불러들이기 위해선, HTML 문서의 <head> 태그에 다음의 코드를 삽입한다.
<link rel="stylesheet" href="css파일 경로">
다음은 예제 2-2를 외부 스타일 시트 형태로 바꾼 코드 예제이다. 실행결과는 이전과 똑같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>안녕하세요</h1>
<p>
곧 있으면 크리스마스가 다가올 것이고, 그 이후엔 내년이군요.
내년엔 지금보다 더 나은 삶, 더 적극적인 삶을 살았으면 좋겠습니다.
</p>
</body>
</html>
h1 {
background-color:cornflowerblue;
}
p {
background-color: cadetblue;
padding: 20px;
color:burlywood;
}
References
[1] 고경희 - Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석
This content is licensed under
CC BY-NC 4.0
댓글남기기