CSS란?
CSS는 HTML 만으로 표현할 수 있는 디자인의 한계를 극복하기 위해 만들어진 언어이다.
물론 새로운 디자인을 위해서 HTML에 새로운 태그를 추가하는 방법도 있다.
하지만 디자인의 한계 외에도 태그로 구성된 HTML 문법으로는 극복할 수 없는 한계가 존재한다.
<ul>
<li><font color="black">HTML</font></li>
<li><font color="black">CSS</font></li>
<li><font color="black">JavaScript</font></li>
</ul>
예를 들어 위와 같이 3개의 목록을 가진 리스트가 있다고 하자.
지금은 사용되지 않는 font 태그를 이용하여 각각의 아이템의 글자를 검은색으로 설정하였다.
이 때, 모든 아이템의 글자색을 빨간색으로 바꾸려면, 아이템 하나하나의 속성을 바꿔주어야 한다.
위 리스트의 경우, 아이템이 3개 뿐이기 때문에 짧은 시간 안에 바꿀 수 있지만,
아이템이 1억개라면 단순한 작업임에도 엄청난 시간이 소모될 것이다.
이런 HTML의 디자인과 기능적 한계들을 극복하기 위해 새로 만들어진 언어가 CSS이다.
CSS 정의하기
CSS를 정의하는 방법은 크게 3가지가 있다.
1. style 속성으로 정의하기
<p style="/* CSS Code */">Content</p>HTML 내에서 바로 CSS 코드를 작성하면 브라우저는 해당 부분이 CSS 코드임을 알지 못한다.
따라서 위와 같이 CSS를 적용하고 싶은 태그에 style 속성을 정의하고 그 안에 코드를 작성해주어야 한다.
하지만 이 경우 많은 양의 CSS 코드를 작성하기에는 적합하지 않다.
2. style 태그를 사용하여 정의하기
<style>
/* CSS Part */
</style>style 속성과 비슷하게 브라우저는 <style> 태그로 감싼 부분을 CSS 코드로 인식한다.
일반적으로 <head> 태그 안에 <style> 태그를 넣고, <style> 태그로 감싸진 부분에 CSS 코드를 작성하여 사용한다.
3. 별도의 파일로 저장한 뒤, HTML 파일에서 불러와 사용하기
<link rel="stylesheet" href="style.css">CSS 코드가 너무 길다면 .css 파일로 정의한 뒤, <link> 태그를 통해 해당 파일을 불러와 사용할 수 있다.
CSS 작성하기
CSS는 어떤 대상에게 속성을 지정할 지 선택하는 selector(선택자)와,
지정할 속성을 선언하는 declaration(선언)으로 구성되며,
선언은 property(속성)와 value(값)으로 이루어진다.
<style>
a {
color:black;
}
</style>위 코드에서 a는 CSS를 적용할 대상(선택자)이며, <a> 태그에 CSS를 적용할 것임을 의미한다.
그리고 선택자 뒤에는 중괄호로 선언들을 감싸준다. 위 경우는 글자(속성)를 검은색(값)으로 설정한다는 뜻이다.
종합해보면 위 코드는 모든 <a> 태그 내의 글자를 검은색으로 설정하는 CSS 코드라는 것을 알 수 있다.
<a style="color:black;">link</a>모든 <a> 태그가 아닌 하나의 <a> 태그만 글자색을 바꾸고 싶다면, 위처럼 직접 속성을 지정해도 된다.
선택자 (Selector)
그렇다면 대상을 선택하는 방법, 즉 선택자의 종류를 좀 더 자세히 알아보자.
선택자에는 많은 종류가 있지만, 대표적으로 가장 많이 사용되는 tag, class, id 선택자를 살펴보자.
<style>
a {color:black;}
.saw {color:gray;}
#active {color:red;}
</style>CSS 코드에서 키워드 앞에 아무런 기호가 없으면 tag 선택자이며, 태그 이름을 기준으로 선택한다.
키워드 앞에 점(.)이 있으면 class 선택자이며, 태그 내 class 속성의 값을 기준으로 선택한다.
키워드 앞에 샾(#)이 있으면 id 선택자이며, 태그 내 id 속성의 값을 기준으로 선택한다.
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<style>
a {
color:black;
text-decoration:none;
}
.saw {
color:gray;
}
#active {
color:red;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html" class="saw" id="active">JavaScript</a></li>
</ol>
</body>
</html>그렇다면 위처럼 하나의 태그에 서로 다른 속성 3가지를 정의하면 어떻게 될까?
이럴 때에는 우선순위에 따라 적합한 속성이 부여된다.
기본적으로 id 선택자 > class 선택자 > tag 선택자 순으로 우선순위가 높다.
선택의 범위가 좁은 선택자가 높은 우선순위를 갖는 것이다.
id 속성의 값은 기본적으로 웹 페이지 내에 고유한 값으로 설정하도록 권장하고 있다.
따라서 1개만 선택할 수 있는 id 선택자가 가장 우선순위가 높은 것이다.
이는 웹 페이지를 편리하게 설계하기 위해 정의된 내용이다.
위 코드를 브라우저를 통해 살펴보면 다음과 같이 우선순위에 따라 속성이 적용되는 것을 볼 수 있다.
이 외에 더 다양한 선택자의 종류는 아래의 CSS Selectors Reference 에서 찾아 사용하자.
속성 (Property)
위에서 다뤘던 color 외에도 CSS에는 아주 많은 속성들이 있다.
따라서 HTML 태그들을 모두 외우지 않듯이, 아래 reference를 통해 그때 그때 필요한 속성들을 찾아 사용하자.
CSS Selectors Reference
CSS Selectors Reference
CSS Selector Reference CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. Use our CSS Selector Tester to demonstrate the different selectors. Selector Example Example description .class .intro Selects all elements
www.w3schools.com
CSS Properties Reference
CSS Reference
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
www.w3schools.com
Reference
[생활코딩] WEB
'Web > HTML&CSS' 카테고리의 다른 글
| HTML Semantic Elements (0) | 2021.07.16 |
|---|---|
| 자주 사용되는 HTML 태그 정리 (0) | 2021.07.15 |
| Media Query를 이용하여 반응형 웹 구현하기 (0) | 2020.08.02 |
| CSS Box Model이란? (0) | 2020.07.23 |
| HyperText Markup Language (HTML) (0) | 2020.07.20 |
