html 태그(1)

 

오늘은 html태그에 대해서 알아보기로 했다

 

html 버전이 업그레이드되면서 태그가 새로 추가되기도 하고 삭제되기도 한다.

현재 태그의 개수 대략 130여 개 정도 된다.

 

1. 제목 태그 

제복 태그는 문서 내에 제목을 표현할 때 사용하는 태그이다.

태그 이름은 heading을 줄여서 h로 쓰고, 제목의 레벨에 따라서 <h1>~<h6>까지 있다.

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

<h1>역사</h1>
<h2>개발</h2>
<h2>최초 규격</h2>

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

 

2. 단락 태그

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

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

 

3. 개행

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 된다.

<p>내부에서 임의로 개행을 하려면 <br>태그를 사용하면 개행이 된다.

 

4. 텍스트 표현 태그

• <b> : bold 태그는 글자를 굵게 표현.
• <i> : italic 태그는 글자를 기울여서 표현.
• <u> : underline 태그는 글자의 밑줄을 표현.
• <s> : strike 태그는 글자의 중간선을 표현.

5. <a> 태그

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

<a href="http://www.naver.com/" target="_blank">네이버</a>

1) href 속성

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

 

2) target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성이다. 

속성 값 종류

• _self : 현재 화면에 표시한다는 의미. target 속성이 선언되지 않으면 기본적으로 self와 같이 동작.
• _blank : 새로운 창에 표시한다는 의미. 외부 페이지가 나타나게끔 하는 속성이다.
• _parent와 _top : 프레임이라는 특정 조건에서만 동작하는 속성. 최근에는 프레임을 잘 쓰지 않음.

3) 내부 링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아니다.

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 한다.

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

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

... 중략.

<h1 id="some-element-id">회사 소개</h1>

6. 의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그이다. 가장 태표적으로 많이 쓰이는 의미 없는 태그는 <div>, <span>이다.

 

1) <div>태그와 <span>태그

div 태그는 블록 레벨 태그이다. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다.

span 태그는 인라인 레벨 태그이다. 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들이다.

 

예를 들어 <p>는 블록 레벨 태그이고 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그이다.

<div>
    <span>Lorem</span> ipsum dolor sit.
</div>

7. 리스트 요소

1) <ul>

ul태그는 순서가 없는 리스트를 표현할 때 사용.

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

2) <ol>

ol태그는 순서가 있는 리스트를 표현할 때 사용.

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

3)<dl>

dl태그는 용어와 그에 대한 정의를 표현할 때 사용.

<ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어진다.

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

• <dt> : 용어를 나타내는 태그
• <dd> : 정의나 설명을 나타내는 태그

8. <img>

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

1) src 속성

이미지의 경로를 나타내는 속성.

 

2) alt 속성

이미지의 대체 텍스트를 나타내는 속성. src 속성과 더불어 반드시 들어가야 하는 속성이다.

 

3) width/height 속성

이미지의 가로/세로 크기를 나타내는 속성. 자동으로 픽셀 단위로 계산된다.

 

4)상대경로와 절대경로

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

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

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