간만에 Web 관련 포스팅이다.
HTML에 CSS를 적용하는 방법을 2번의 포스팅에 걸쳐 알아보겠다.
이번 포스팅에서는 HTML에 CSS를 적용하는 방법에 대해 간단히 알아보고,
다음 포스팅에서는 CSS가 적용되는 우선 순위에 대해 알아볼 것이다.
HTML에 CSS를 적용하는 방법은 3가지로 분류할 수 있다.
✅ 외부 스타일 시트
✅ 내부 스타일 시트
✅ 인라인 스타일
외부 / 내부 스타일 시트의 경우, 선택자를 지정해줘야 한다.
선택자를 지정하는 방식도 3가지로 분류할 수 있다.
✅ HTML 요소 선택자
✅ id 선택자
✅ class 선택자
하나씩 차근차근 알아보자.
외부 스타일 시트
.css 확장자를 가진 파일을 외부에서 관리하고,
적용할 파일의 <head> 태그 내에서 참조하는 방식이다.
다음과 같은 css 파일을 만들어 준다.
cssTest.css
.test-class {
color: #FF0000;
font-size: 5em;
text-align: center;
}
간단히 텍스트의 색상을 정의했다.
color 속성을 제외하고 아래 2개의 속성은 오늘 공부할 내용은 아니니, 무시해도 된다.
그리고 html 파일에서 위 css 파일을 참조해준다.
cssTest.html
<head>
<link href="/cssTest.css" rel="stylesheet">
</head>
<body>
<p class="test-class">Css Test</p>
</body>
결과는 다음과 같다.
색상이 적용된 것을 확인할 수 있다.
✅ 외부 스타일 시트 특징
웹 페이지의 전체적인 스타일을 일관성있게 관리할 때 주로 사용한다.
최소한의 파일을 건드려 웹 페이지의 전체적인 스타일을 변경할 수 있어 효율적이다.
또한, 내용과 스타일의 분리가 확실하다고 볼 수 있기에
전문적인 웹 페이지는 대부분 외부 스타일 시트를 사용한다.
내부 스타일 시트
적용할 파일의 <head> 태그 내에 스타일을 정의하는 방식이다.
cssTest.html
<head>
<style>
.test-class {
color: #00FF00;
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<p class="test-class">Css Test</p>
</body>
<head> 태그 내 <style> 태그를 만들고, 그 안에 색상을 정의했다.
결과는 다음과 같다.
마찬가지로, 색상이 적용된 것을 확인할 수 있다.
✅ 내부 스타일 시트 특징
해당 HTML 문서에만 적용할 때 주로 사용한다.
하지만 적용할 스타일이 많아질수록
HTML 파일의 <head> 부분이 무거워질 수 있다는 단점이 있다.
인라인 스타일
HTML 요소의 태그 내에 스타일을 정의하는 방식이다.
<div>, <p> 등 모든 태그에 사용할 수 있다.
cssTest.html
<body>
<p class="test-class", style="color:#0000FF; font-size: 5em; text-align: center;">
Css Test</p>
</body>
문법은 위 처럼 해당 태그 내에 style 속성을 작성해 주면 된다.
한 가지 속성은 콜론(:)으로 정의하며,
세미 콜론(;)으로 마치면 된다.
결과는 다음과 같다.
✅ 인라인 스타일 특징 요약
해당 요소(태그)에만 적용할 때 사용한다.
위 2개의 방식보다는 직관적이고 간편하다고 느낄 수 있다.
하지만 코드가 많아질수록 (태그, 스타일 등이 많아지면)
유지·보수가 상당히 불편해지기 때문에 추천하진 않는다.
CSS 선택자
(외부 / 내부 스타일 시트의 경우)
CSS는 적용할 HTML 요소를 지정하는데 선택자를 사용한다.
✅ HTML 요소 선택자
<p>, <h2> 등 HTML에서 기본적으로 지원하는 문법을 통째로 지정할 수 있다.
내부 스타일 시트로 예제를 작성하겠다.
<head>
<style>
p {
color: #FF0000;
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<p>스타일이 이곳에 적용된다.</p>
<p>스타일이 이곳에도 적용된다.</p>
</body>
<style> 태그를 보면 된다.
p { ... } 라고 작성해주었기 때문에
해당 페이지 내 모든 <p> 태그에 동일한 스타일이 적용된다.
✅ class 선택자
특정 집단을 지정할 때 주로 사용하는 방식이다.
<head>
<style>
.test-class {
color: #FF0000;
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<p class="test-class">
스타일이 이곳에 적용된다.</p>
<div class="test-class">
(스타일이 이곳에도 적용된다.)
</div>
</body>
마찬가지로 <style> 태그를 보자.
마침표(.) 뒤에 class 이름을 작성해주면 된다.
.test-class { ... } 라고 작성했다.
동일한 이름의 class에 모두 적용된다.
✅ id 선택자
특정 요소를 지정할 때 주로 사용하는 방식이다.
<head>
<style>
#test-id {
color: #FF0000;
font-size: 5em;
text-align: center;
}
</style>
</head>
<body>
<p id="test-id">
스타일이 이곳에 적용된다.</p>
</body>
id 선택자를 지정할 때는 '#' 을 작성해주면 된다.
✅ class가 id와 뭐가 달라요?
사실, 둘 중 어떤 선택자를 사용하더라도 지장 없다.
차이점을 꼽자면
class는 '집단', id는 '요소'를 지정한다고 표현했다.
프로젝트가 점점 커지면 동일한 class 내에서도
요소를 세부적으로 구분해야 할 경우가 생긴다.
세분화할 수 있는 식별자로서 id를 사용한다고 보면 된다.
<head>
<style>
.test-class1 {
font-size: 5em;
text-align: center;
}
#test-id1 {
color: #FF0000;
}
#test-id2 {
color: #0000FF;
}
</style>
</head>
<body>
<p class="test-class1", id="test-id1">test-id1 선택자</p>
<p class="test-class1", id="test-id2">test-id2 선택자</p>
</body>
동일한 class가 지정된 <p> 태그 내에,
각기 다른 id를 지정해 주었다.
결과는 다음과 같다.
font-size, text-align 속성은 공통적으로 적용되고,
color 속성만 다르게 적용된 것을 확인할 수 있다.
이번 포스팅에서는 CSS를 적용하는 방법에 대해 알아보았다.
정말 기초적인 내용이지만,
위 내용도 숙지하지 않고 Web을 만진다고 끄적거리는 사람이 태반이다.
다음 포스팅은 이어지는 내용으로,
CSS 적용 우선 순위에 대해 알아보겠다.
