[HTML/CSS] HTML 기본 태그 - <h1>, <p>, <a href target>, <div>, <span>, <ul>, <ol>, <dl>, <img src alt>

https://www.advancedwebranking.com/html/#overview

The average web page from top twenty Google results

위 통계 사이트를 보면, 실제로 대다수의 웹 페이지는 대략 25개 정도의 서로 다른 태그가 사용된다.

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference

---

1) 제목과 단락요소

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그다. 태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있다.

 

보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 된다.

 

하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없다.

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
... 이하 생략

예시 코드에서는 역사가 가장 큰 제목이기 때문에 <h1>를 사용했고, 개발과 최초 규격에는 그보다 아래 단계인 <h2>를 사용했다.

​

제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데 이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다. 제목이라는 의미에 맞게 기본적으로 좀 더 굵고 크게 표현이 된다.

​

​

단락 태그

단락(paragraph) 태그는 paragraph를 줄여서 p로 쓴다.

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
    ... 이하 생략
</p>

화면에는 별다른 변화는 없지만, 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조라고 볼 수 있다.

​

​

개행

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 된다. 그럼 <p> 내부에서 임의로 개행을 하려면 어떻게 해야 할까? HTML 문법 중 공백 시간에 배운 대로, html은 한 칸 이상의 공백 및 개행을 무시하기 때문에 실제 코드창에 개행을 하더라도 화면에 나타나지는 않는다.

​

따라서 개행을 위해 쓰이는 태그가 바로 <br>이다. (linebreak 를 줄여서 br 이라고 한다.)

​

<br>은 닫기 태그와 내용이 존재하지 않는 빈 태그인데, 개행하고자 하는 곳에서 <br>을 선언하면 개행이 된다.

​

이처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을 하기 위해서는 <br>을 이용해야 한다.

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

 

---

2) 텍스트를 꾸며주는 요소

텍스트 표현 태그

웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리했다. 그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았다.

​

그 중 <b>, <i>, <u>, <s>에 대해 살펴보자면,

● <b> : bold 태그는 글자를 굵게 표현하는 태그

● <i> : italic 태그는 글자를 기울여서 표현하는 태그

● <u> : underline 태그는 글자의 밑줄을 표현하는 태그

● <s> : strike 태그는 글자의 중간선을 표현하는 태그

(예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없다.)

​

HTML5 버전에서는 <i> 태그가 단순 표현용 태그에서 의미를 가지는 태그로 변경됐는데, 특정 이유(기술적인 용어, 외국어 문구, 소설속 인물의 생각 등)로 다른 글자와 구분하기 위해 사용된다.

<p>
    <b>글자를 굵게</b> <i>글자를 기울여</i> 다음줄로 개행<br>
    <u>글자에 밑줄</u> <s>글자의 중간선</s>
</p>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics

HTML elements reference

---

3) 앵커 요소

<a>

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불린다.

<a href="http://www.blog.naver.com/wook2124" target="_blank">블로그</a>

href 속성

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 하고, href 속성의 값은 링크의 목적지가 되는 URL이다.

​

​

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성이고, 속성값으로는 _self, _blank, _parent, _top이 있다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다.

_blank는 새로운 창에 표시한다는 의미로, 외부 페이지가 나타나게끔 하는 속성이다.

_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성으로, 최근에는 프레임을 잘 쓰지 않기 때문에 따로 다루지 않는다.

​

​

내부링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아니고, <a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 한다.

​

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

<a href="#some-element-id">블로그 소개로 이동하기</a>

... 중략.

<h1 id="some-element-id">블로그 소개</h1>

보통 페이지에 내용이 많아 스크롤이 길어질 경우, 빠르게 화면 최상단으로 이동하고자 할 때 내부 링크를 주로 사용하는데, 웹페이지에서 화면 하단에 있는 'top' 또는 '맨 위로 이동하기' 버튼이 이에 해당한다.

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

: The Anchor element

---

4) 의미가 없는 컨테이너 요소

의미가 없는 컨테이너 요소는 태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그다. 스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용되고, 이런 의미 없는 태그의 사용빈도는 매우 높다.

​

그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화되어 있는 의미를 지니는데, 현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문이다. 다행히 HTML 버전이 업그레이드되면서 웹에 알맞은 태그들이 많이 생겼고, 그 대표적인 의미가 없는 태그가 <div>, <span>이다.

​

​

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그다. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다. 반면, span 태그는 인라인 레벨 태그다. 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소다.

 

<p>는 블록 레벨 태그이며, 그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그다.

<div>
    <span>This is span</span> and this means nothing.
</div>

<div>, <span>는 모두 아무 의미가 없으므로, 실제 브라우저도 별다른 스타일을 적용하지 않는다.

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

 

---

5) 리스트 요소

<ul>

ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다.

<ul> 
    <li>콩나물</li> 
    <li>파</li> 
    <li>국 간장</li> 
    ... 
</ul> 

콩나물국에 들어가는 일부 재료들을 나열한 리스트다. 각 재료는 나오는 순서가 바뀌어도 상관이 없으므로 이러한 것은 순서가 없는 리스트로 표현할 수 있다. <ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

​

​

<ol>

ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용합니다.

<ol>
    <li>냄비에 국물용 멸치를 넣고 한소끔 끓여 멸치 육수를 7컵(1,400ml) 만든다.</li>
    <li>콩나물을 넣고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
    <li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
    ...
</ol>

콩나물국을 끓이는 순서를 나열한 리스트다. 이 순서는 서로 바뀌면 안 되기 때문에 순서가 있는 <ol>을 사용해야 한다. <ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타내서 사용한다.

​

​

<dl>

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용하는데, <dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다르다. <ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조다.

<dl>
    <dt>리플리 증후군</dt>
    <dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
    <dt>피그말리온 효과</dt>
    <dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
    <dt>언더독 효과</dt>
    <dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
    <dd>또는 약자로 연출된 주체에게 부여하는 심리적 애착을 의미</dd>
</dl>

● <dt> : 용어를 나타내는 태그

● <dd> : 용어에 대한 정의 또는 설명을 나타내는 태그

용어 하나에 여러 정의가 들어갈 때, <dd>를 한 개 이상 쓰는 것이 가능하다.

​

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

 

---

6) 이미지 요소

<img>

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그다.

<img src="./images/pizza.png" alt="피자">

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성이다.

​

​

alt 속성

이미지의 대체 텍스트를 나타내는 속성으로, 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성으로 src 속성과 더불어 반드시 들어가야 하는 속성이다. 시각 장애인분들의 경우 스크린 리더기를 통해 이미지에 대한 설명을 들을 수 있는 속성이기도 하다.

​

​

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성으로, 값의 단위는 필요하지 않으며 값을 입력하면 자동으로 픽셀 단위로 계산되는 속성이다. width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋다.

​

width/height 속성이 없으면 이미지는 원본 크기대로 노출되며, width/height 속성 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다. 반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.

​

​

상대경로와 절대경로

src 속성에는 이미지의 경로가 들어가며, 이미지에는 상대경로와 절대경로가 있다.

​

상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고, 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로다.

<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">

<!-- 절대경로 -->
<img src="C:/users/document/images/pizza.png" alt="피자">
<img src="http://www.naver.com/pizza.png" alt="피자">

상대 경로에서의 './'는 페이지가 있는 현재 위치의 폴더를 나타낸다. 그리고 '../'은 상위 폴더로 한번 이동하는 명령이다. 폴더를 두 번 위로 이동하려면 '../../'로 적으면 된다.

​

반대로 현재 폴더에서 하위 폴더로 갈 때는 'folder명/img파일'처럼 단순히 폴더명과 img파일만 적어주면 된다.

​

즉, "./images/pizza.png"는 './' 현재 위치에서 'images' 폴더에 있는 '/pizza.png' 파일을 불러오는 상대경로다.

​

​

이미지 파일 형식

● gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식

● jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식

(투명을 지원하지 않는다.)

● png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

​

https://developer.mozilla.org/ko/docs/Web/HTML/Element/

HTML 요소 참고서

---

https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33588

[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith

위 6개의 내용은 부스트코스 무료 강의에서 들을 수 있다🥰