책 씹어먹는 즐거움

앞서부터 계속 스타일링은 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

1. <a> 요소의 기본적인 사용법

HTML은 월드와이드웹(www)에서 웹페이지를 부호화하고 HyperText 링크를 제공하는 언어이다. 이때, HyperText 링크를 제공하는 요소가 바로 앵커(anchor)를 의미하는 <a> 요소이다.

<a> 요소는 링크를 눌렀을 때 다른 페이지가 열려야 하므로 기본적으로 열어야할 목적지 주소와 링크로 제시될 내용이 포함되어 다음과 같은 형식으로 작성한다.

<a> 요소의 내용(contents)은 이미지 요소나 텍스트 형식으로 링크가 어디로 연결될지 보여주는 라벨의 역할을 수행한다. 라벨은 브라우저에서 클릭할 수 있다는 것을 나타내기 위해 밑줄이 처진 상태로 보이고 그 위에 마우스 커서를 올리면 커서가 작은 손 모양으로 바뀐다.

2. href 속성

href 속성은 hypertext reference의 줄임말로 링크가 연결될 목적지 주소(destination address)를 <a> 요소에 부여하는 필수적인 속성이다. 웹 브라우저는 바로 이 href의 속성값을 읽어 목적지의 문서를 연결한다. <a> 요소에 href 속성이 없으면 웹 표준 위반이다.

다음의 HTML 문서를 작성해서 0019.html로 만들고  sun.jpg파일을 같은 디렉터리에 놓고 실행해보자. 

다음은 sun.jpg 파일이다. 

0019.html 파일은 웹 브라우저에 다음과 같이 나타난다. 

href 속성으로 제시할 수 있는 목적지의 형식은 URL, 상대경로, id 이동이 있는데 이를 위의 예제 웹페이지는 전부 집어넣어 보았다. 하나하나 살펴보자. 

① URL로 링크걸기 : 책 씹어먹는 즐거움

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

가장 흔히 볼 수 있는 URL로 링크 걸기이다. 외부 사이트에 링크를 만들 경우에는 URL을 이용하여 링크한다. URL에 대해서는 0015 URL 간략하게 이해하고 연습하기를 참조하길 바란다.

② 이미지에 링크걸기

그 다음은 이미지에 링크를 건 경우이다. 태양 사진이 있고 이를 클릭하면 본 블로그로 이동한다. 이는 <a> 요소 내부에 <img /> 요소를 아래와 같이 중첩시켜 만들었다(0019.html 파일과 sun.jpg 파일이 같은 디렉터리에 있어야 한다.).

③ 로컬 링크를 상대경로로 링크

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

상대경로에 대해서는 앞의 0016 이미지를 보여주는 img 요소 01 사용법 및 src 속성의 하단부에 정리된 src 속성에서 상대경로 작성법과 동일하다.

클릭하면 서버 내에 웹페이지 파일과 같은 디렉터리에 있는 sun.jpg 파일을 브라우저로 열게 된다. 이렇게 같은 사이트 내에서 서버 내부의 파일로 연결하는 링크를 로컬 링크(local links)라고 한다. 

로컬 링크의 경우에는 다음과 같은 이유에서 href 속성의 속성값으로 URL이 아닌 상대경로를 사용하도록 권장된다. 

④ 특정 id를 가진 요소로 이동

이 부분에 해당하는 HTML은 <p> 요소 내부에 다음과 같이 작성된 부분이다.

이를 클릭하면 제목(<h2>요소)으로 되어 있는 “a요소의 href 속성으로 다양한 링크 걸기”로 이동한다. 이는 다음과 같이 제목의 요소(<h2>요소)에 아이디(id) 속성 "first"가 부여되어 있기 때문이다. 즉, href 속성값으로 "#first"가 부여되어 있으면 같은 페이지에 있는 요소 중에 아이디(id)가 "first"인 요소로 이동한다. 

아이디(id) 속성은 원하는 요소(element)를 다른 요소와 구별되어 그 자체로 고유하게 만드는 속성이다. 똑같은 <h1> 요소라고 해도 아이디(id)를 통해서 다른 <h1> 요소와 구별되는 것이다. 나중에는 이 아이디(id) 속성을 이용하여 CSS로 특정 id의 요소만 스타일링 하거나, Javascript로 특정 id의 요소만 조작하는 등으로 응용할 수 있어 가장 많이 사용되는 속성(attribute) 중에 하나이다.

HTML 웹페이지의 요소에 필요한 아이디(id) 속성을 부여하고 이제 <a> 요소의 href 속성에 "#아이디" 형태의 문자열을 속성값으로 부여하면 같은 페이지에 있는 해당 아이디(id)를 가진 요소로 바로 이동할 수 있다. 

아이디(id)로 이동은 같은 페이지 내부의 이동에만 사용되는 것은 아니다. 앞서 배운 URL 뒤에 "#아이디" 형태의 문자열을 붙이거나, 상대경로의 뒤에 "#아이디" 형태의 문자열을 붙여서 다른 페이지의 해당 아이디(id)를 속성으로 가진 요소로 바로 이동할 수 있다. 가령, 다음과 같다.

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

Ankilog 파일:   0019 a요소 01 사용법 및 href 속성.apkg

2019/01/02 am 1:27 본문 및 Ankilog 파일에 id 속성값으로 올 수 있는 문자들 문구 수정

5. HTML 페이지가 이미지를 다루는 법

HTML 페이지는 순수하게 텍스트일 뿐이어서 이미지가 중간에 삽입되거나 하지 않는다. 그렇다면 웹 브라우저는 <img /> 요소를 어떻게 보여주는가?

웹 브라우저는 웹페이지를 위에서 아래로 차례대로 읽으면서 텍스트들은 바로바로 화면에 표시하고 <img /> 요소를 읽으면 일단, <img /> 요소가 표시될 공간을 확보해놓고 다음을 읽으면서 계속 화면을 표시한다.

웹 브라우저는 표시할 이미지 파일을 서버에서 가져와서 해당 이미지를 위하여 확보된 공간에 로딩하기 시작한다. 이 과정은 웹페이지 파일을 읽어서 표시하는 과정과 별도로 이루어진다. 

<img /> 요소로 정의된 이미지들은 기술적으로는 HTML 페이지에 삽입되는 것이 아니라 HTML 페이지에 링크로 연결되는 것이다. <img /> 요소가 하는 일은 참조하려고 하는 이미지가 배치될 공간을 준비하는 것이다.

이 때, <img /> 요소에 속성으로 이미지가 들어갈 공간의 크기(size)를 정하지 않았을 경우 이미지가 나중에 로드되면서 공간이 벌어져 웹 페이지가 출렁거리는 것을 볼 수 있다.

JPEG 형식

PNG 형식

GIF 형식

결론적으로 사진이나 복잡한 그래픽에는 JPEG를 사용하고 단색이나 로고, 기하학적 모양의 이미지에는 PNG나 GIF를 사용하는 것이 적절하다.

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

Ankilog 파일:  0018 이미지를 보여주는 img 요소 03 이미지 다루기.apkg

3. 대체할 문구를 설정하는 alt 속성

alt 속성은 이미지를 대체하는 문구(alternate text)를 부여하기 위한 속성이다. 만약, 어떠한 이유로든지 웹페이지에 이미지를 표시되지 않으면 이 문구가 대신 화면에 나타난다.

alt 속성은 다음과 같이 작성한다. (간단한 예제 파일: img요소alt속성test.html)

이미지로 아름답게 꾸민 웹페이지가 항상 예쁘게 보이는 것은 아니다. 특히, 이미지를 사용할 경우 웹페이지의 용량이 커지기 때문에 느린 인터넷 속도, 열악한 디바이스 등으로 인하여 웹페이지를 제대로 볼 수 없을 때가 있다. 특히 시각장애인의 경우 스크린 리더기로 읽어 웹페이지를 보지 않고 듣는데 이미지로 꾸며진 웹사이트는 이러한 스크린 리더기에 장애로 작용한다. 

이러한 문제점 때문에 웹페이지에 이미지가 나타나지 않거나, 혹은 스크린 리더기로 이미지를 읽기 위하여 HTML5부터는 <img /> 요소에 alt 속성을 필수적으로 부여하도록 되었다.

sun.jpg 파일을 불러오지 못할 경우 아래와 같이 alt 속성으로 부여한 대체 문구가 나타나는 것을 볼 수 있다.

4. 이미지 크기 조절

이미지를 웹페이지에 집어넣으려면 이미지 크기를 조절하는 것이 필수적이다. 어떤 사진은 너무 크고 어떤 그림은 너무 작을 수 있기 때문이다. 

일단은 전통적으로 <img /> 요소에 width와 height 속성을 다음과 같이 부여해 크기를 조절해왔다.

이 때 width와 height 속성의 속성값은 항상 픽셀(px)의 수이다.

이미지의 크기를 특정하지 않으면 웹페이지 레이아웃이 제멋대로이고 이미지가 웹페이지에 로딩되면서 웹페이지가 요동치는 현상이 발생하게 되므로 되도록이면 항상 크기를 특정하도록 하자.

뒤에 언급하겠지만 브라우저는 HTML로 작성된 페이지를 먼저 보여주고 이미지는 그 크기에 따른 공간만 남겨놓고 뒤에 따로 이미지를 로딩하여 이미지를 보여주게 된다. 즉, 페이지의 레이아웃을 만들었다가 이미지를 받은 후 이를 다시 조정하는 것이다. 

따라서 크기가 결정된 이미지를 웹페이지에 집어넣으면, 브라우저는 이에 맞추어 페이지 레이아웃을 만들 수 있게 된다. 하지만 HTML에서 이미지 크기가 결정되지 않으면 브라우저는 페이지에서 이미지를 보여주기 전에 임의로 이미지의 크기를 결정하게 되고 실제 이미지가 페이지에 로딩되면서 그 크기의 변화로 웹페이지가 출렁거리게 되는 것이다.

최근에는 CSS 스타일을 적용하는 sytle 속성을 이용하여 다음과 같이 이미지의 크기를 조절할 수 있다.

최근에 <img /> 요소에 style 속성을 이용하여 이미지의 크기를 결정하는 까닭은 각각의 <img /> 요소에 style 속성으로 이미지의 크기를 규정해놓으면 추후에 배울 CSS의 스타일 시트에서 일괄적으로 이미지의 크기를 조작할 때 그 적용을 받지 않을 수 있기 때문이다.

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

Ankilog 파일:   0017 이미지를 보여주는 img 요소 02.apkg

1. <img /> 요소 사용법

HTML 페이지에 사진이나 그림 등의 이미지를 잘 사용하면 세련된 페이지를 만들 수 있다. 이런 경우 이미지를 집어넣기 위해서 사용하는 요소가 <img /> 요소다.

<img /> 요소는 이미지를 정의하는 빈요소로 보통 다음과 같은 형식으로 작성한다.

<img /> 요소에서는 src, width, height, alt의 4가지 속성을 잘 알아두어야 한다. 

2. <img /> 요소의 src 속성

<img /> 요소는 내용(content)이 없이 이미지를 보여주는 것이므로 속성(attribute)을 이용하여 해당 이미지를 불러와야 한다. 이 때 필요한 것이 src 속성이다. 

src 속성은 이미지 파일의 위치를 명시한다. 파일의 위치는 상대적인 파일의 위치뿐만 아니라, URL을 넣을 수도 있다. 

사용하는 URL에 대해서는 0015 URL 간략하게 이해하고 연습하기 포스팅에서 간단하게 다루었으니 참조하기 바란다. 

아래는 src 속성에 속성값을 URL로 넣은 경우다.

여기서 주의할 점은 URL의 마지막은 파일명이 되고, 웹페이지의 디폴트 파일처럼 디폴트 이미지라는 것이 설정되지는 않기 때문에 파일명까지 정확하게 써야 한다는 점이다. 

웹에서 원하는 이미지를 보았을 때, 보통 아래와 같이 마우스 우클릭으로 이미지 주소 복사를 통해 해당 URL을 얻을 수 있다.

src의 속성값으로 URL말고 상대적인 파일 위치를 넣을 수 있다. 즉, 서버 내의 특정 디렉터리에 있는 파일을 불러오는 로컬 링크(link)의 경우 웹페이지 파일이 속한 디렉터리를 기준으로 원하는 이미지 파일의 위치에 도달하는 경로를 명시할 수 있는데 이를 상대경로(relative path)라고 말한다.

가령, 불러오고 싶은 sun.jpg 라는 이미지 파일이 웹 페이지 파일과 동일한 디렉터리에 있으면 아래와 같이 속성값에 파일의 이름을 그대로 기입하면 된다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리의 하위 디렉터리(가령, images 디렉터리)에 있을 경우 해당 디렉터리의 이름 바로 뒤에 슬래쉬(/)를 붙여 이어서 경로를 작성한다. 이건 운영체제와 상관없이 슬래쉬(/)이다. 그리고 하위 디렉터리가 있는 만큼 얼마든지 슬래쉬로 이어서 하위로 내려갈 수 있다.

sun.jpg 이미지 파일이 웹 페이지가 있는 디렉터리 보다 상위에 있다면 마침표 2개(..)로 나타내면 된다. 이는 최상위 디렉터리인 루트까지 이어질 수 있다.

사례를 한 번 살펴보자. 다음은 서버에 있는 웹사이트 관련 파일들의 디렉터리 구조다. 

각각의 웹페이지 파일의 <img /> 요소에서 src 속성의 속성값으로 sun.jpg 파일에 도달하는 상대경로를 기입한 경우다.

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

Ankilog 파일:  0016 이미지를 보여주는 img 요소 01.apkg

일반적으로 URL이라고 함은 웹 브라우저 주소창에 입력하는 다음과 같은 주소를 말한다.

HTTP(HyperText Transfer Protocol)는 월드와이드웹(WWW)에서 클라이언트와 서버 사이에 정보를 주고받기 위해 만들어진 상호규약(protocol)을 말하고 http://는 HTTP(HyperText Transfer Protocol)로 통신한다는 것을 의미한다.

www.ankilog.com 은 웹 사이트의 이름이다. 

/index.html 은 index.html 이라는 파일이 위치한 루트로부터 절대 경로를 말한다.

URL에서 절대 경로란 루트 디렉터리를 기준으로 특정 파일이나 페이지를 찾아가는 경로를 말한다. 먼저 루트 디렉터리는 슬래쉬(/)에서 시작하고 디렉터리를 넘어갈 때마다 슬래쉬(/)로 구분한다.

즉, 전체적으로 해석해보면 개인 컴퓨터(클라이언트라고 한다.)에서 www.ankilog.com 이라는 웹사이트의 서버에 루트 디렉터리에 있는 index.html 파일을 HTTP로 요청하는 것이다. 이에 서버는 해당 파일을 찾아서 HTTP로 응답할 것이고 파일이 없으면 404 not found 에러를 보여준다.

사례를 들어보자. 아래의 그림은 www.ankilog.com 이라는 가상의 사이트 서버 안에 있는 디렉터리와 파일들이다. 즉, www.ankilog.com 이라는 사이트에 관련된 파일은 전부 그림에 있는 main, about, menu, etc, images 디렉터리에 있는 것이다. 

여기서 루트(/) 디렉터리는 보통 main 디렉터리가 된다. (웹 서버 컴퓨터의 루트 디렉터리가 아니라 웹페이지의 루트 디렉터리라는 점을 주의) 그리고 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 이를 아래와 같이 루트(/)인 main 디렉터리에 접속시킨다. 

웹페이지는 html 파일이므로 디렉터리에 접속한다는 개념은 이상하다. 하지만  사람들이 어디에 어떤 html 파일이 있는지를 전부 알고 개별 파일을 접속하기는 어렵기 때문에 해당 디렉터리에 접속했을 때 그 디렉터리의 웹페이지 파일을 자동으로 보여주게끔 하는데 이 파일을 디폴트 파일(default file)이라고 부른다. 디폴트 파일은 루트에만 적용되는 것이 아니다. 각각의 디렉터리마다 디폴트 파일이 있다. 

디폴트 파일은 기본적으로 'index.html', 'default.htm'이 된다. 이 사례에서는 index.html 파일을 쓰고 있다.

즉, 개인 컴퓨터(클라이언트)에서 웹 브라우저 주소창에 http://www.ankilog.com 이라고 입력하면 웹 서버는 main 디렉터리에 있는 index.html 파일을 자동으로 보여준다.

위의 그림과 같은 디렉터리 구조를 보이는 웹사이트 www.ankilog.com에서 개인 컴퓨터(클라이언트)가 이 웹사이트의 특정 파일에 접근하려고 할 때 URL을 어떻게 작성해야할지 살펴보자. (구분하기 쉽게 색깔과 폰트를 변경함)

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

Ankilog 파일:  0015 URL 간략하게 이해하고 연습하기.apkg

이제까지 배운 요소(element)들은 모두 내용(content)을 시작태그와 종료태그로 감싸는 형식이었다. 하지만 처음부터 내용(content) 없이 어떤 구조적인 기능만 하게끔 만들어진 요소들이 있다. 이런 요소들을 내용없이 비었다고 해서 빈요소(empty element)라고 한다.

내용(content)이 없다고 모두 빈요소가 되는 것은 아니다. 즉, <title></title> 처럼 <title> 요소가 내용을 가지지 않는다고 해서 </title> 종료태그를 붙이지 않아도 된다는 뜻이 아니라 처음부터 빈요소로 설계된 것만 빈요소이니 오해가 없길 바란다.

  <br /> 요소

앞에서 <p> 요소에서 줄바꾸기가 한 칸의 공백으로 나타난다는 점을 언급했다. 이런 줄바꾸기를 해주는 요소가 있는데 그것이 <br> 요소이다. 

<br> 요소는 HTML에서 하나의 줄바꿈(line break)을 삽입하는 요소이다.

<br> 요소는 빈요소이므로 종료태그(</br>)를 쓰지 않는다. 

HTML에서는 빈요소를 시작태그에서 바로 종료태그를 겸하는 방식으로 <br /> 형식으로 작성할 수도 있다. 이러한 방식은 오류가능성이 낮은 좀 더 엄격한 방식이고  XML이나 XHTML에서도 사용하는 방식이므로 개발자들은 시작태그에 종료태그를 겸하는 <br /> 같은 형식을 선호한다. 

<br /> 사용례를 살펴보자.

※ <br />로 인하여 줄이 한 행 바뀐다.

HTML에서 <hr /> 요소는 구조적으로 주제의 변화를 의미하고 수평선으로 나타나는 요소다. 즉, 서로 구별되는 별도의 내용들을 수평선으로 분리해주는 요소이다.

   

<hr /> 요소는 빈요소이므로 종료태그(</hr>)를 쓰지 않는다. 

   

<hr /> 사용례를 살펴보자. 우선, hr요소test.html 파일을 다음과 같이 작성한 후 저장한다. 

그리고 파일을 실행하면 다음과 같이 수평선이 그어지는 것을 확인할 수 있다. 

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

Ankilog 파일:  0014 빈요소(empty element) br과 hr.apkg

HTML의 <p> 요소는 단락을 정의하는 요소이다.

글을 쓸 때는 제목(heading)을 표시하고 이어서 아이디어와 완결된 생각 등을 문단, 단락 등으로 구분지어가며 쓴다. 웹 페이지에서는 이러한 단락을 구조적으로 나타내기 위하여 단락을 의미하는 paragraph의 첫 글자를 의미하는 <p> 요소를 이용한다.

즉, 시작태그 <p>와 종료태그 </p> 사이에 단락으로 작성된 텍스트를 내용(context)으로 집어넣는다. 종료태그를 잊지말자.

앞서 배운 <h> 요소와 <p> 요소를 이용하여 웹 페이지에 다음과 같은 글을 써보자. 

첫 줄은 제목(heading) 요소라면 그 다음부터 나타나는 단락들은 <p> 요소로 묶어주면 되므로 아래와 같이 작성하여 p요소test.html로 저장한다.

이제 파일을 실행해보면 웹 브라우저에 아래와 같이 나타난다.

추가적으로 <p> 요소는 한 칸 이상의 공백(스페이스, 탭)과 줄바꾸기를 모두 한 칸의 공백으로만 나타내므로 공백과 줄바꾸기에 주의해야 한다. 가령, 다음과 같다.

※ 줄바꾸기가 한 칸의 공백으로 나타남

※ 10칸의 공백이 한 칸의 공백으로 나타남

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

Ankilog 파일:  0013 단락(paragraph)을 정의하는 p요소.apkg

HTML 문서의 큰 틀에서 <html> 요소와 <head> 요소 다음에는 <body> 요소가 등장한다. 그리고 이 <body>요소에 중첩되어 들어있는 요소들이 우리가 보는 웹페이지에 실제 나타나는 요소들이다. 하나씩 알아보자.

신문기사에서 볼 수 있는 헤드라인(Headline)이나 글에 붙이는 간단한 소제목 같은 것을 제목(heading) 요소로 묶어서 구조화한다. 사람이 글을 읽을 때도 이러한 제목(heading)들이 도움 되지만 그것보다 검색엔진이 이러한 제목(heading) 요소를 이용하여 웹페이지의 구조와 그 내용을 분류하고 색인화하기 때문에 적절한 제목을 뽑아서 제목(heading) 요소로 묶어주면 검색 엔진이 웹 페이지에서 전하고자 하는 정보를 검색 결과로 적절하게 제시할 수 있게 된다. 

제목 요소는 <h1>에서 <h6>까지 6종류가 있다. 

작성 방식은 다음과 같다. (h1만 대표적으로 작성했지만 나머지도 동일하다.)

즉, 시작태그와 종료태그 사이에 제목으로 사용할 텍스트를 내용(content)으로 집어넣으면 된다.

<h1>이 가장 중요한 메인이고 <h6>로 갈수록 덜 중요하고 지엽적이다.

실무에서는 보통 <h3> 요소까지 사용한다고 한다.

우선, 간단하게 아래와 같이 heading_test.html 파일을 만들어 실행해보자.

똑같은 파일을 구글의 크롬(Chrome)과 마이크로소프트의 엣지(Edge)로 열어본 것이 아래의 그림이다. 

우선, 두 브라우저 모두 공통적으로 <h1> 요소를 가장 크게 하고 <h6> 요소를 가장 작게 표현하고 있지만 글자 폰트와 글자 크기 등이 다름을 알 수 있다.

이는 HTML은 표준화되어도 HTML 문서에서 사용된 요소들을 웹 브라우저가 표시하는 기준은 표준화되어 있지 않아 웹 브라우저들마다 자체적인 기준을 적용하고 있기 때문이다.

따라서 동일한 HTML 문서라도 어떤 웹 브라우저로 표시하느냐에 따라서 그 모양이 달라질 수 있다. 이런 차이가 발생하지 않게 하려면 CSS로 글자의 폰트와 크기를 지정해주어야 한다.

슬쩍 보기에는 <h> 요소로 내용(content)을 감싸면 글자의 크기가 커지고 굵어지는 효과가 있으므로 그러한 효과를 보기 위하여 <h> 요소를 사용할 수 있다. 하지만 그렇게 하지 않아야할 두 가지 이유가 있다.

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

Ankilog 파일:  0012 제목(heading)의 h요소.apkg