1. 태그 <style>
HTML 요소에 스타일이 너무 많다면, 특별한 요소인 태그 style로 옮길 수 있어. 이건 보통 <head> 태그 안에 넣는데, 이렇게 보임:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 예제</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>이것은 <style> 태그로 스타일을 사용하는 예제야.</p>
</body>
</html>
이제 <body> 태그의 style 속성 안에 긴 스타일 문자열을 쓰지 않아도 되고, style 태그로 옮길 수 있어. 정말 편리하지.
<p> 태그(문단)도 마찬가지야. 더 나아가서, <head> 안에 있는 <style> 태그에 정의된 스타일은 문서의 모든 문단에 적용될 거야, 설령 문단이 수천 개가 있어도. 왜냐하면 <style> 태그 안에서 스타일이 셀렉터 안에 정의되기 때문이야.
5.2 셀렉터
셀렉터는 CSS 속성을 적용할 HTML 요소를 선택하는 방법이야. 다양한 유형의 셀렉터가 있어:
태그 셀렉터
특정 유형의 모든 요소에 스타일을 적용해. 태그 이름을 지정하고 그 뒤에 중괄호를 써.
tagname {
// 스타일
}
tagname은 body, image, a, p 등 어떤 것이든 될 수 있어
클래스 셀렉터
CSS 속성을 특정 태그가 아니라 그룹 이름에 연결할 수도 있어. CSS에서 이런 그룹을 클래스라고 해. 특정 클래스가 있는 모든 요소에 스타일을 적용해. 클래스는 HTML에서 class 속성으로 지정돼.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">이것은 중요한 텍스트야.</p>
<p>이것은 일반 텍스트야.</p>
</body>
</html>
위의 예제에서 굵게 표시되는 것은 첫 번째 문단의 텍스트뿐이야. 스타일/클래스 "important"를 적용했기 때문이지. 두 번째 문단은 이런 스타일이 없어.
<style> 태그에서 스타일을 정의할 때, 3가지 방법으로 할 수 있어:
- tagname { …}
- tagname.classname { …}
- .classname { …}
CSS를 제대로 배울 때 셀렉터 주제를 더 자세히 다뤄볼 거야. 지금은 HTML 예제에서 CSS가 나올 텐데, 종종 style 태그로 옮겨서 특정 HTML 요소에 스타일을 적용하기 위해 셀렉터를 사용할 거야.
GO TO FULL VERSION