0039 클래스(class) 속성 사용해보기
바로 앞의 0038 클래스(class) 속성 포스팅에서 클래스(class) 속성에 대해서 알아보았으니 이제 이를 간단하게 사용해보자.
다음은 같이 전 세계의 주요 여행지들 중에서 가고 싶은 곳을 추려 가나다순으로 나열해 놓은 
0039_1.html
<!DOCTYPE html>
<html>
<head>
<title>여행지들(가나다순)</title>
<link rel="stylesheet" type="text/css" href="0039.css" />
</head>
<body>
<ul>
<li>경주</li>
<li>광주</li>
<li>교토</li>
<li>뉴욕</li>
<li>뉴저지</li>
<li>도쿄</li>
<li>런던</li>
<li>몬트리올</li>
<li>부산</li>
<li>북경</li>
<li>상해</li>
<li>서울</li>
<li>시카고</li>
<li>아테네</li>
<li>워싱턴</li>
<li>오사카</li>
<li>파리</li>
<li>홍콩</li>
</ul>
</body>
</html>
실행한 결과는 다음과 같다.
여행지를 찾기 좋게 가나다순으로 나열해 놓았지만 조금 심심해 보인다. 만일 여행지를 고른다면 각 여행지가 도시인지 아니면 아름다운 자연과 전통적인 문화를 즐길 수 있는 시골인지에 따라 다를 것 같다.
따라서 일단 도시인 "urban"과 시골인 "rural"로 나누어 나타내고 싶다. 그렇다면 이를 어떻게 HTML 요소에 반영할 수 있을까?
단순히 HTML로만 만든다고 한다면 중첩된 목록(nested list)을 이용하여 전체 여행지들을 도시인 "urban"과 시골인 "rural"로 나누어 다음과 같이 만들어 볼 수 있을 것이다. 0039_2(중첩된목록).html 참조
그런데 이렇게 분류해보니 조금 부족해 보인다. 일단, 가나다순으로 나열하겠다는 원칙이 무너진 것도 그렇고, 시골(rural)인 곳도 3군데 밖에 없어 좋은 분류가 아닌 것 같다. 차라리 원래의 가나다순으로 돌려놓고 각각의 여행지들 별로 특색을 표시해보는 것이 좋을 것 같다.
바로 이런 경우에 필요한 것이 클래스(class) 속성이다. 전체 여행지들을 urban 클래스(class)와 rural 클래스(class)로 분류하여 다음과 같이 0039_3.html을 만들어 보자.
<!DOCTYPE html>
<html>
<head>
<title>여행지들(가나다순)</title>
<link rel="stylesheet" type="text/css" href="0039.css" />
</head>
<body>
<ul>
<li class="rural">경주</li>
<li class="urban">광주</li>
<li class="rural">교토</li>
<li class="urban">뉴욕</li>
<li class="urban">뉴저지</li>
<li class="urban">도쿄</li>
<li class="urban">런던</li>
<li class="urban">몬트리올</li>
<li class="urban">부산</li>
<li class="urban">북경</li>
<li class="urban">상해</li>
<li class="urban">서울</li>
<li class="urban">시카고</li>
<li class="urban">아테네</li>
<li class="urban">워싱턴</li>
<li class="rural">오사카</li>
<li class="urban">파리</li>
<li class="urban">홍콩</li>
</ul>
</body>
</html>
아직, CSS를 만들지 않았으므로 바로 다음과 같이 
0039.css 파일을 작성하여 0039_3.html 파일과 같은 디렉터리에 저장한다.
.urban { color: blue; }
.rural { color: green; }
CSS는 간단하게 도시(urban)는 파란색 글씨로, 시골(rural)은 녹색 글씨로 스타일을 적용해보았다.
이제 실행해보면, 경주, 교토, 오사카의 글자색이 녹색(green)으로 바뀐 것을 확인할 수 있다.
구별해놓고 보니 온통 파란색으로 여행지가 전부 도시(urban) 일색이다. 그렇다면 도시의 종류를 조금 나누어 보자. 도시 중에는 각국의 수도인 서울, 워싱턴 같은 곳들도 있고, 그저 번화한 도시인 곳들도 있다. 이번에는 각국의 수도에 경계선(boder)을 주어 다른 도시와 구별해보도록 하자.
우선, 각국의 수도인 여행지는 "main" 클래스(class)에 속하도록 다음과 같이 0039_4.html 파일을 작성한다. CSS를 적용할 파일도 변경할 것이므로 <link /> 요소의 href 속성도 "0039_1.css"로 수정한다.
<!DOCTYPE html>
<html>
<head>
<title>여행지들(가나다순)</title>
<link rel="stylesheet" type="text/css" href="0039_1.css" />
</head>
<body>
<ul>
<li class="rural">경주</li>
<li class="urban">광주</li>
<li class="rural">교토</li>
<li class="urban">뉴욕</li>
<li class="urban">뉴저지</li>
<li class="urban main">도쿄</li>
<li class="urban main">런던</li>
<li class="urban">몬트리올</li>
<li class="urban">부산</li>
<li class="urban main">북경</li>
<li class="urban">상해</li>
<li class="urban main">서울</li>
<li class="urban">시카고</li>
<li class="urban">아테네</li>
<li class="urban main">워싱턴</li>
<li class="rural">오사카</li>
<li class="urban main">파리</li>
<li class="urban">홍콩</li>
</ul>
</body>
</html>
그리고 다음과 같이 0039_1.css 파일을 작성하여 0039_4.html 파일과 같은 디렉터리에 저장한다.
.urban { color: blue; }
.rural { color: green; }
.main { border: 2px solid red; }
실행 결과는 다음과 같다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 0039 클래스(class) 속성 사용해보기.apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0041 CSS로 텍스트의 폰트 설정하기(font-family 속성) (0) | 2018.12.19 |
|---|---|
| 0040 글꼴, 서체, 폰트 개요 (0) | 2018.12.18 |
| 0038 클래스(class) 속성 (0) | 2018.12.14 |
| 0037 HTML 요소의 아이디(id) 속성과 CSS의 아이디(id) 선택 (0) | 2018.12.12 |
| 0036 External 방식의 CSS 적용 (0) | 2018.12.11 |