책 씹어먹는 즐거움

다른 모든 프로그래밍 언어처럼 HTML에도 주석(comment)을 달 수 있다. 

주석(comment)은 개발자가 작성한 코드에 부가하여 이런 저런 설명을 지칭하는 것으로 브라우저가 해당 텍스트를 실행하거나 표시하지 않게끔 만들어진 형식으로 작성된 텍스트로 나타난다. 가령, 이 코드를 작성했을 때 어떤 생각으로 작성했는지 본인의 기억을 환기하거나 다른 사람이 코드를 봤을 때 이해하기 쉽도록 주석(comment)을 붙인다.

HTML에서 주석은 다음과 같은 형식으로 작성한다. 

주석은 꼭 1개의 행에 있어야할 필요 없이 여러 행에 걸쳐서 주석으로 처리할 수 있다. 

다음과 같이 0030.html을 작성하고 실행해보자. 

실행해보면 아래와 같이 주석 처리된 문단이 전혀 나타나지 않는다.

HTML 문서유형선언(Document type declaration)에서 한 번 설명한 것처럼 왼쪽 꺽쇠(<) 다음에 느낌표(!)가 오면 요소(element)가 아니라는 뜻이다. 오른쪽 꺽쇠(>)에 붙는 것이 아니란 점에 주의하자.

주석은 오직 개발자가 소스코드를 볼 때에만 의미가 있다. 브라우저는 주석 처리된 문장을 표시하지도 않고 내부적으로 어떤 처리도 하지 않으며 완전히 깔끔하게 없는 것으로 무시한다. 

브라우저가 주석을 완전히 깔끔하게 무시하기 때문에 디버깅을 할 때 이러한 주석을 활용하면 매우 유용하다. 가령, 에러를 찾기 위해 코드를 하나하나 뒤져볼 때 해당 코드를 지우지 말고 주석 처리하면 임시적으로 그 코드를 분리시킬 수 있어 에러가 어떤 코드에서 시작된 것인지 찾기 쉬워진다.

그 외에도 주석을 잘 달면 가독성이 좋아지고 다른 사람이 해당 코드로 다시 작업을 할 때에도 접근하기 쉬워진다. 게다가 이러한 주석을 이용하여 자동으로 매뉴얼 등의 문서를 바로 만들어주는 프로그램도 있어 주석이 충실하면 문서화를 쉽게 할 수 있다. 이렇듯 주석을 충실하게 달았을 때 이점이 상당하므로 항상 충실하게 주석을 다는 습관을 갖도록 하자.

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

Ankilog 파일:  0030 HTML 주석(comment) 달기.apkg

HTML에는 순서가 있는(ol), 순서가 없는(ul), 정의(description) 목록(list)이 있다. 앞서 순서가 있는 목록과 순서가 없는 목록은 다루었으니 이번에는 정의 목록(list)을 다룰 차례다.

정의 목록(description list)은 용어나 명칭을 그 설명과 함께 제시한 목록(list)를 말한다.

정의 목록(description list)은 <dl> 요소로 목록을 정의하고 <dt> 요소로 용어나 명칭을 정의하며 <dd> 요소에 구체적인 설명을 작성하게끔 되어 있어 함께 사용해야만 각자 제역할을 할 수 있도록 만들어졌다.

사용 형식은 아래와 같다.

다음과 같이 영단어의 내용을 정의 목록으로 만들어 0029.html

실행 결과는 다음과 같다. 

<dl>, <dt>, <dd> 요소 모두 블록 요소인 것을 알 수 있다. 

정의 목록이라는 명칭은 HTML 4.01까지 사용되던 definition list에서 나온 명칭이고 HTML 5부터는 definition list가 아니라 description list로 이름이 바뀌었다.

description list를 한국어로 단순 번역하면 서술 목록이나 설명 목록으로 번역하게 되는데 정의 목록이라는 말과 큰 차이가 없고 그 내용을 살펴보면 오히려 정의 목록이라는 말이 더 잘 어울리는 것 같다. 또, 여전히 많은 사람들이 이 목록 요소를 정의 목록이라고 부르고 있으므로 description list를 definition list에서와 동일하게 정의 목록이라고 지칭한다.

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

Ankilog 파일:   0029 정의 목록(description list) 요소 다루기.apkg

순서가 있는(ordered) 목록은 개별 항목(item)들이 순서대로 나타나므로 글머리 기호도 어떤 순서가 있는 숫자나 알파벳이 기호가 되어야 한다. 따라서 디폴트로 설정되어 있는 글머리 기호도 숫자(1. 2. 3. 4. ...)인 것이다.

순서가 있는(ordered) 목록의 글머리 기호는  순서가 없는(unordered) 목록과는 달리 CSS를 이용하지 않고 <ol> 요소의 type 속성(attribute)을 이용하여 글머리 기호를 바꾼다. 

다음과 같은 형식으로 작성한다. 

type 속성(attribute)의 속성값 변화에 따른 개별 항목의 글머리 기호는 다음과 같다.

하나하나 사용해보자. 

순서가 있는(ordered) 목록에서는 <ol> 요소에 start 속성을 사용하여 목록의 글머리 기호가 어떤 숫자로 시작하는지 설정할 수 있다. 

사용례는 다음과 같다. 

위에서 제시한 HTML 사례는 0028.html로 작성하였으니 참조하기 바란다.

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

Ankilog 파일:  0028 HTML 순서가 있는(ordered) 목록의 글머리 기호 바꾸기.apkg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

스타일링이라 함은 폰트, 크기, 테두리, 색깔 등을 이용하여 예쁘게 꾸미는 것을 말하고 HTML 문서를 스타일링 할 때는 CSS(Cascading Style Sheet)라는 별도의 언어체계를 이용한다.

이 때,  HTML의 개별 요소(element) 하나를 CSS를 이용하여 꾸미고 싶을 때에는 style 속성을 사용하면 된다.

HTML의 style 속성은 다음과 같은 구문으로 사용된다. 

위 구문에서 속성은 CSS에서 사용하는 속성(property)이고, 속성값도 CSS에서 사용하고 있는 속성값(value)이다. 즉, style 속성은 개별 요소에 CSS를 적용하기 위한 속성인 것이다. 

따라서 이 style 속성을 다루면서 익히게 될 속성(property)과 속성값(value)은 모두 CSS에서도 그대로 사용할 수 있다.

또, 당연히 style은 모든 요소에 적용할 수 있는 전역 속성(global attribute)이다.

추후에 CSS를 공부하면서 상세하게 다룰 내용이지만 참고적으로 간단히 언급하면 CSS를 적용하는 것은 아래와 같이 세 가지 방법이 있는데 그 중 마지막 방법이 이 style 요소를 사용하는 방법이다.

보통 첫 번째와 두 번째 방법으로 CSS를 사용하지만 이러한 방법은 일괄적으로 HTML 페이지의 스타일을 설정하기 때문에 이에 대한 예외적인 스타일이 적용되어야할 요소(element)들은 개별 요소에 style 속성을 이용하여 CSS를 부여하기도 한다(이는 CSS 상속과 적용 범위의 문제이므로 나중에 다시 보도록 하자.).

앞서 0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정에서 <img> 요소의 크기를 style 속성으로 결정하는 예문을 아래와 같이 다루면서 최근 style 속성을 사용하여 이미지의 크기를 결정하는 이유를 CSS 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 피하기 위해서라고 언급한 바 있는데 이것이 바로 위와 같은 이유이다.

위의 예문에서 style 속성으로 CSS 속성인 width와 height를 이용하고 있고 속성값으로 픽셀수(px)를 이용하고 있다. 

배경색(Background Color)

HTML 요소의 배경색을 결정하는 CSS 속성은 background-color 속성이다. 요소의 배경색을 이용하여 앞서 공부한 블록 요소와 인라인 요소의 차이점을 다시 한번 살펴보자.

background-color 속성은 다음과 같이 사용한다.

색상이름은 red, blue, purple, yellow, white, black, powderblue 등 영문의 색상이름이 그대로 적용되고 더 디테일한 색상을 다룰 때에는 색상의 일련번호로 집어넣을 수도 있다.

다음과 같이  0025.html 파일을 만들어 실행해보자.

<body> 요소에 중첩된 각각의 요소에 전부 배경색을 다르게 설정해보았다. 그리고 실행해보면 다음과 같이 나타난다. 

블록 요소와 인라인 요소에 따라서 배경색이 다르게 설정되어 있는 것을 알 수 있다. 블록 요소는 해당 행의 가로폭을 전부 차지하는 요소이므로 실제 내용이 얼마 안되더라도 해당 행의 전체에 배경색이 칠해진다. 반면, 인라인 요소는 배경색이 꼭 필요한 부분으로 한정되는 것을 알 수 있다. 

CSS에서 사용하고 있는 다양한 속성과 속성값을 이 자리에서 전부 살펴보는 것은 적합하지 않은 것 같다. 우선 배경색만 살펴보고. 또, 다른 요소들을 다루면서 관련된 스타일 속성은 그때그때 알아보도록 하자.

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

Ankilog 파일:  0025 HTML style 속성(attribute) 및 배경색 설정.apkg

이제 기본적인 태그와 요소들에 대해서 상당수 알게 되었다. 그런데 요소들 화면에 표시할 때 브라우저가 하는 특이한 행동 하나가 눈에 띈다. 그것은 <body> 요소에서 <h1~6>요소, <p>, <blockquote> 요소들은 브라우저가 화면에 표시할 때 반드시 줄바꿈(linebreak)이 앞뒤로 나타나 행 전체를 차지한다. 반면, <img>, <a>, <strong>, <em>, <q> 등의 요소들은 줄바꿈 없이 나타나 행 전체를 차지하지 않고 딱 해당 요소의 내용이 차지하는 공간만큼만 공간을 차지한다. 

요소(element) 중에서 화면에 표시(display)될 때 항상 새로운 행에서 시작하고 요소가 위치한 가로폭을 전부 차지하는 요소를 블록(block) 요소라고 하고 새로운 행에서 시작하지 않고 딱 요소의 내용이 차지한 가로폭만큼만 차지하는 요소를 인라인(inline) 요소라고 한다. 그리고 모든 HTML 요소는 화면표시(display)를 함에 있어 블록 요소인지 인라인 요소인지가 기본값으로 설정되어 있다. 

가령, 다음처럼  0024.html파일을 만들어 보자.

<img> 요소로 웹페이지에 넣을 사진은 다음과 같다. 

그럼 다음과 같이 나타난다. 

위에 보이는 것처럼 블록 요소는 항상 앞과 뒤에 줄바꿈를 가진 것처럼 표시되며, 인라인 요소는 웹페이지에 있는 텍스트의 흐름에 포함되어 ‘라인 위에(in line)’ 나타난다.

블록 요소와 인라인 요소의 구분이 상당히 중요한 것 같다. 어떤 요소들은 구조적으로는 동일한 구조적 기능을 하지만 블록 요소와 인라인 요소라는 차이점만 존재하는 것 같은 요소들이 있다. 가령 앞서 0023 HTML에서 인용하기(Quotation)에서 공부한 <blockquote>와 <q> 요소는 인용구를 블록 요소로 할 것인가 인라인 요소로 할 것인가 하는 부분이 가장 핵심적인 차이로 보인다. 

또, 앞으로 CSS와 함께 정말 자주 사용하게 될 <div>와 <span> 같은 요소들은 HTML문서에서 섹션을 나누고 해당 섹션의 요소들을 묶는 컨테이너(container) 같은 기능만 하는 요소들인데 이 둘의 차이점은 오직 <div>는 블록 요소이고 <span>은 인라인 요소라는 것뿐이다.

그렇다면 왜 요소들을 블록과 인라인으로 구분하는 것이 중요한 것일까?

여기저기 뒤져본 결과로 개인적으로 추론해본건대, HTML 개발하면서, 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 식의 웹페이지 구축 방법론을 채택한 것으로 보인다. 

그리고 블록 요소와 인라인 요소라는 특성 때문에 HTML에 다음과 같은 규칙들이 생기게 되었다.

또, CSS로 블록 요소와 인라인 요소를 스타일링 할 때 사용할 수 있는 속성들이 다르다. 이 부분은 추후 CSS를 다루면서 다시 다루도록 하자. 일단, 지금은 블록 요소와 인라인 요소가 있고, 웹페이지 구축 방법론으로 블록 요소로 전체 윤곽(lay out)을 구성하고 인라인 요소로 페이지를 세련되게 다듬는 방식을 채택했다는 점, 그리고 인라인 요소 내부에 블록 요소를 중첩시킬 수 없다는 점을 기억해 두도록 하자.

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

Ankilog 파일:  0024 블록(block) 요소와 인라인(inline) 요소.apkg

글을 쓰다보면 소설이나 뉴스 등 다른 글을 인용해야하는 상황이 종종 생긴다. 이런 상황을 위하여 HTML에도 글의 성격이 인용인지 단순한 텍스트인지 등의 요소를 구별할 수 있도록 이에 맞는 요소들을 갖추고 있다. 

<q> 요소가 짧고 핵심적인 인용구라면, <blockquote> 요소는 책이나 시처럼 완전한 문단을 기억하는 인용구이다.

이제 배운 내용들이 실제로 브라우저에 어떻게 나타나는지 확인해보기 위해서 다음과 같이 작성해서 0023.html 파일로 저장하고 실행해보자. 

그러면 크롬 브르우저에서 아래와 같이 나타난다. 

우선 <blockquote> 요소로 인용한 곳은 들여쓰기(indent)가 된 문단처럼 나타났다. 그리고 <abbr> 요소로 집어넣은 내용은 아래에 점선으로 밑줄이 그어졌다. <q>요소는 큰 따옴표("")로 내용을 묶었고, <cite> 요소와 <address> 요소로 묶인 내용들은 이탤릭체로 나타났다.

브라우저에 어떻게 표현되었는지는 별로 중요하지 않다. 중요한 것은 브라우저가 각각의 내용에서 어떤 것이 인용구이고 어떤 것이 두문자이고 어떤 것이 인용된 작품명인지 안다는 사실이 중요하다.그러면 검색엔진은 이 웹 페이지가 말라리아에 대한 신문기사나 공신력 있는 단체의 말을 인용하고 있으며, 말라리아의 씨앗이라는 작품을 소개하고 있다는 것을 알게 되고 저자 자신과 접촉할 수 있는 연락처를 제시하고 있는 신뢰할만한 문서라고 판단하여 적절하게 이 웹 페이지를 소개할 것이다. 또, <abbr> 요소를 적절히 사용함으로써 브라우저와 검색엔진, 번역 시스템 등에 잘못된 단어 사용으로 오해받지 않게 될 것이다.

게다가 CSS를 이용하면 인용구가 전부 적절한 요소로 묶여 있으므로 각각의 요소에 대한 스타일을 명확하게 지정할 수 있게 된다.

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

Ankilog 파일:   0023 HTML에서 인용하기(Quotation).apkg

앞서부터 계속 스타일링은 CSS의 몫이라고 이야기해왔지만 HTML에서도 글자의 형식을 어느 정도 조작할 수 있다. 

이제  0022.html 파일을 다음과 같이 작성하여 실행해보자. 

크롬, 엣지, 파이어폭스 세가지 브라우저로 실행한 결과는 아래와 같이 나타난다.

지금부터는 이제 개발을 공부하기 시작하는 초보의 개인적인 이런 저런 생각이다.

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

Ankilog 파일:  0022 HTML로 글자의 형식 정하기.apkg

HyperText 링크를 클릭하면 목적지 주소(destination address)로 지정된 페이지나 페이지 내의 요소를 열게 된다. 이 때, 어떤 식으로 새로운 페이지를 창(window)에 띄울지 결정하고 싶을 수 있다. 이러한 내용을 선택할 수 있는 것이 target 속성이다. 

즉, 링크된 문서를 어디에 열지 결정하는 속성이 target 이다.

target은 속성값으로 다음의 5가지를 가진다. 

다음의 그림을 보면 target의 속성값의 역할이 조금 명확해진다. 

프레임이라는 것은 웹 페이지 안에 웹 페이지를 넣을 수 있는 틀이다. 나중에 이것에 대해서 자세히 다루는 것으로 하고 이번에는 간단하게만 다루도록 하자.

위의 그림은 전체 웹 페이지가 Frame 1, Frame 2, Frame 3의 3개의 프레임으로 나누어지고 각각의 프레임에 별도의 웹 페이지가 표시되어 있는 것이다. Frame 1과 Frame 2는 별도의 프레임이고 Frame 3은 Frame 2 안에 들어있는 하위(자식) 프레임이다. 

웹 페이지가 이와 같이 짜여져 있는 상황에서 Frame 3에 위치한 링크가 target 속성에 따라서 어떻게 작동하는지 하나하나 살펴보자.

마지막으로 전역 속성(global attribute)인 title 속성과 달리 target 속성은 <a> 요소에서만 사용되는 속성이다.

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

Ankilog 파일:   0021 a요소 03 target 속성.apkg

3. <a> 요소의 title 속성

title 속성은 요소(element)에 대한 추가적인 정보를 보여주기 위하여 사용하는 속성이다.

요소(element)에 title 속성을 부여하면 해당 요소 위에 마우스 포인터를 위치시킬 때 작은 툴팁(tooltip)으로 title 속성에 부여한 문구가 나타난다. 

툴팁(tooltip)은 말풍선이라고도 불리는 그래픽 사용자 인터페이스 중 하나이다. 마우스 포인터라 불리는 커서로 특정 항목을 클릭하지 않고 가리키기만 하면 조그마한 상자가 나타나 보충 설명을 보여준다. 

다음과 같이 <a> 요소에 title 속성을 부여해 보자. 

그러면 아래와 같이 마우스 포인터를 링크에 올렸을 때, 우리가 작성한 title 속성의 문구가 툴팁으로 나오는 것을 확인할 수 있다.

위 예제는 0020.html 파일이다.

title 속성은 <a> 요소에만 부여되는 속성이 아니라 다른 모든 요소들에도 부여될 수 있는 속성이다. 이러한 속성을 전역 속성(global attribute)이라고 한다. 

앞에서 배운 id 속성 lang 속성도 전역 속성(global attribute)이다.

title 속성은 위의 <a> 요소에서 사용된 것처럼 아래의 형식(syntax)으로 사용된다. 

title 속성은 툴팁으로 간단한 문구를 보여주기 때문에 속성값으로 텍스트 형식을 갖는다.

title 속성은 <head> 요소의 <title> 요소가 아니다.

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

Ankilog 파일:  0020 a요소 02 title 추가하기.apkg