앞장에서 배운 <strong>, <em>만 가지고는 문서를 예쁘게 꾸미는 데 한계가 있어.
원하는 자리에 더욱 화려하고 다양하게 꾸미는 방법을 배워 보자구.

인라인 태그에서 span은 문장을 꾸미는 데 아주 중요하게 사용돼.
<strong>, <em> 태그는 문장의 내용의 중요 부분을 강조하는 데 사용되지만 <span>은 디자인적인 꾸밈이 필요할 때 주로 사용돼.
예를 들어 지난번 <li> 태그로 작성한 아래 리스트에서 작가명만 다른 색상이나 폰트로 표시하고 싶다고 치자구.
우선 지금까지 배운 것 중에서 <div>를 생각할 수 있겠지만 <div> 태그는 구역(블록) 태그여서 div로 감싼 부분이 줄 바꿈이 되어 버려.
그럼 다른 태그로 <strong> <em>은 어떨까? 물론 이 태그들을 사용하면 가능해.
그러나 strong, em은 내용을 ‘강조’하는 것인데 여기서는 내용강조를 의미하는 것이 아니야.
또 만일 <em>을 사용했는데 CSS에서 em의 속성을 바꾸면 여기까지 함께 바뀌어 버리겠지?
우리는 단지 요 자리만 디자인적으로 보기 좋게 하는 것이 목적이야.
이렇게 문장의 부분을 꾸미고 싶을 때 사용하는 태그가 바로 <span>이야.

1. lesson.htm의 리스트 내용을 아래와 같이 수정하고 브라우저에서 확인해 봐.

(아래 내용중 <li>~</li> 사이는 그냥 한 줄로 입력해.)

<li>누구를 위하여 종은 울리나: <span style="color:blue; font-weight:bold;">헤밍웨이</span></li>
<li>사랑할때와 죽을때: <span style="color: blue; font-weight: bold;">레마르크</span></li>
<li>천국에서 온 편지: <span style="color: blue; font-weight: bold;">최인호</span></li>  

작가명만 파란색 굵은 글씨로 변했지?
작가명을 <span>~</span> 태그로 둘러쌌어. <div>는 블록 태그이기 때문에 <div>로 둘러싸면 작가명이 아랫줄로 내려가게 되기 때문이야.
이처럼 블록이 아닌 문장 사이의 스타일을 지정하는 태그로 <span>이라는 태그를 사용해.
그리고 각 <span> 태그에 style=명령을 주어서 색상은 파란색 굵은 글씨를 지정했어.
이렇게 문서의 어느 중간 부분도 <span> 태그로 감싸고 스타일을 지정하면 해당 부분의 폰트, 크기, 색상, 바탕색, 강조 등의 디자인 요소를 지정할 수 있어.

물론 이런 문장 내에 직접 삽입하는 스타일은 <span> 태그만 적용하는 것이 아니고 <div>, <p> 등의 블록 태그에도 적용할 수 있음을 배운 바 있지?
또 이렇게 문장 내에 스타일을 직접 입력하는 방식은 결코 좋은 방법이 아니라고 배웠어.
그렇지만 나모, 드림위버 같은 프로그램으로 웹페이지를 무심코 작성하면 생성되는 소스는 위와 같은 방식으로 만들어져.
프로그램이 나빠서가 아니고 사용자가 요구하는 대로 보이려면 이 방법 외에 마땅한 방법이 없기 때문이야.
물론 CSS의 원리를 알고 나서 이들 위지윅프로그램의 기능을 다시 잘 살펴보면 CSS의 속성을 지정하는 방법을 당연히 지원해.
그러나 이 웹표준의 개념을 모르고 드림위버 같은 프로그램을 사용하면 편리하지만 나쁜 습관부터 배우게 되는 거야.
우리들이 학습을 하면서 굳이 편리한 프로그램을 사용하지 않는 이유도 바로 이 때문이야.

2. lesson.html의 리스트 내용을 다시 아래와 같이 수정해.

<li>누구를 위해 종은 울리나: <span class="author big">헤밍웨이</span></li>
<li>사랑할때와 죽을때: <span class="author big">레마르크</span></li>
<li>천국에서 온 편지: <span class="author big">최인호</span></li>

■ 클래스(class)

훨씬 간결해졌지?
그런데 <span> 뒤의 스타일 지정자가 이전에 배운 id가 아니고 class라는 것이 나왔네?
id와 함께 디자인을 책임지는 스타일시트(CSS)에서 또 하나 중요한 개념인 클래스(class)에 대해서 알아 볼거야.

id가 웹문서의 전체 구조와 위치를 담당한다면, class는 부분적인 꾸밈을 담당해.
id 이름은 한 웹페이지에서 딱 한 번만 사용해야 해.
우리는 지금 이 lesson.html에서 사용한 아이디는 header, contents, side, footer 들로 각 이름은 한 번씩만 사용했어.
한 번 만 사용되는 이유는 id는 디자인 요소 외에 위치를 표시해 주는 중요 역할을 하거든.
예를 들어 “요기를 클릭하면 현재 페이지의 어디로 이동해라.” 이런 필요가 있을 때 바로 이동할 위치를 id로 구분하는 거야. 같은 이름의 id 가 여러개 있으면 어디로 이동해야 할지 모르겠지?
또 이 id 식별자는 나중에 자바스크립과 아주 중요한 관계를 가지기도 해.

그런데 지금 class에서 'author'라는 식별명은 3번이나 사용했지?
그러므로 여기서는 class를 사용해야 해. 차이점은 다음과 같아.
표의 마지막에 인자(Parameter)는 id를 쓸때는 <div id="header"> 이렇게 1개만 지정해 줄 수 있는 반면 class에서는 <span class="author big"> 이런 식으로 2개 이상의 속성 이름을 줄 수 있다는 뜻이야.
즉, CSS에서 author 클래스에는 색상 속성을 주고, big 클래스에는 글자 크기 속성을 주었다면 이 두 가지를 모두 반영하게 되는 거야.
CSS를 수정하고 확인해 보아야겠지?

3. style.css의 맨 마지막에 다음 내용을 추가해.

id 속성에서는 구분자에 # 기호를 사용했지만 여기는 class에 대한 속성이므로 마침표(.)기호를 사용하고 내용에 속성과 값을 줘야 해.

.author {
    color: blue;
    font-weight: bold;
}

.big {
    font-size: 1.2rem;
}

4. 제대로 반영되었는지 확인해 볼까?

정확하게 반영되었어.
꾸밈이 많은 홈페이지의 소스를 보면 이 <span>과 class는 정말 많이 사용하는 것을 볼 수 있어.
이제는 다른 사람이 만든 홈페이지의 소스를 보면 “아~ 이런 식으로 만들었구나..” 하고 조금 이해할 수 있겠지?

여기까지 그대로 따라했으면 화면은 아래 링크와 같을 거야.
http://yogibbs.kr/htmlDemo/lesson4.html

태그와 CSS에 대해 어느 정도 알고 난 뒤에 유명한 웹사이트의 소스를 분석해 보는 것은 앞으로 웹을 공부할 때 정말 많은 도움이 돼.
소스에서 보통 <div id=> 태그를 보면 전체적인 구조를 알 수 있을 것이고 <div class=>는 큰 구조 안에서의 부분적인 형태에 많이 사용하며, <span>은 문장 안에서의 부분적인 꾸밈에 사용해.
또 이렇게 다른 홈페이지의 소스를 분석하다 보면 아직도 웹표준을 지키지 않는 홈페이지가 너무나 많다는 것에 아마 놀라게 될 거야.
이제 시작하는 우리들도 그렇게 만들면 안 되겠지?


다음 학습 : 링크와 이미지
이전 학습 : 리스트 태그-ul, ol, li