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







0026 HTML 목록(list) 요소 만들기


메뉴나 물건 리스트처럼 종종 리스트나 목록을 쓰는 경우가 있다. 그런 경우 그냥 <p> 요소로 리스트를 나열해서 보여줄 수 있지만 적합한 구조에 맞는 요소를 선택해서 사용해야 한다는 HTML마크업적인 측면을 고려목록(list)에 맞는 요소를 사용해주어야 한다. 

    

HTML의 목록은 순서가 있는 목록(ordered list)순서가 없는 목록(unordered list)의 두 가지가 있다. 그리고 목록에 속하는 개별 항목(item)들은 <li>요소로 만든다. 

    

순서가 없는 목록 → <ul></ul>

순서가 있는 목록 → <ol></ol>

개별 항목(item) → <li></li>


실제로 작성할 때는 다음과 같은 형식으로 작성한다.

    

<ol> or <ul>

 <li>항목(item)</li>

 <li>항목(item)</li>

 <li>항목(item)</li>

</ol> or </ul>


순서가 없는(unordered) 목록을 작성한 것은 다음과 같다. 



순서가 있는(ordered) 목록은 다음과 같이 작성한다. 


<ol>, <ul>, <li> 모두 줄바꿈(linebreak)이 있는 블록 요소이므로 각각 독립적으로 배치된다. 

    

<ol> 요소는 목록(list)의 앞에 목록 번호가 순서대로 주어지고 <ul> 요소는 목록(list) 앞에 순서가 없는 글머리 기호가 붙는다.

    

<li> 요소는 각 항목을 식별하는 데 사용되며, <ol>이나 <ul> 요소는 그 항목들을 묶는 데 사용되는 것으로 반드시 같이 사용되어야 한다. 

    

<ol>이나 <ul> 요소 안에 다른 요소를 넣고 싶다면 아래와 같이 <li> 요소 안에 중첩시켜 넣어야 하고 <li> 요소가 아닌 텍스트나 다른 요소를 넣지 말아야 한다. 

    

<ol> or <ul>

 <li><strong>항목(item)</strong></li>

 <li><em>항목(item)</em></li>

 <li><a href="URL">항목(item)</a></li>

 <img src="sun.jpg" /> 

</ol> or </ul>


물론, 목록(list)를 아래와 같이 중첩해서 넣을 수는 있다. 이런 것을 중첩(nested) 목록이라고 한다.


목록을 중첩할 경우에는 내부에 중첩된 목록이 각각 하나의 <li> 요소 안에 중첩되는 것을 주의해야 한다. 


위에서 제시한 HTML 들은 0026.html로 작성하였으니 참조하기 바란다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0026 HTML 목록(list) 요소 만들기.apkg





+ Recent posts