Span과 Div 태그
우리가 CSS를 이용해서 문단의 특정 부분에만 스타일을 주어서 강조를 하고 싶다고 해 보자. 이 때 이 부분을 감싸줄 수 있는 HTML 태그가 필요하다.
이를 위해서 우리는 div와 span이라는 태그를 사용한다. 둘 모두 어떠한 특정한 기능이 있는 태그가 아니고, CSS나 Javascript 코드를 삽입하기 위해서 존재하는 태그이다. div 태그는 화면 전체를 사용하기 때문에 줄바꿈이 되고, span은 줄바꿈이 되지 않는다.
이제 이러한 div와 span 태그 안에 style 속성을 부여하면 이 태그로 감싸진 부분에만 디자인이 적용되게 된다.
하지만 이렇게 모든 부분을 div나 span 태그로 감싸려고 한다면 이를 쓰기도 힘들고, 수정하기는 더욱 힘들 것이다. 이를 위해서 CSS에는 선택자라는 기능이 존재한다.
Class
이를 위해서는 <head> 태그 안에 <style>이라는 새로운 태그를 만들어 준다. 이 style 태그 안에는 CSS 코드가 들어가게 된다. 그리고 js라는 class를 생성해 보자.
<head>
<style>
.js {
font-weight: bold;
color: powderblue;
}
</style>
</head>이 때 js 앞에 찍혀있는 점은 js라는 이름이 class 이름이라는 것을 나타낸다. 이렇게 class를 만들었으니, 이를 HTML 코드의 곳곳에 적용시키면 된다. 예를 들어 어떤 문장에서 Javascript라는 단어에만 이 class를 적용시켜서 볼드체로 만들고 싶다면 다음과 같이 쓰면 된다.
<span class="js">Javascript</span> is wonderful!이렇게 하면 이제 js라는 class를 가진 모든 태그를 한 번에 바꿀 수 있다. style 태그 안에 있는 .js만 수정하면 모든 부분을 한 번에 바꿀 수 있는 것이다.
