HTML 태그

mandoo·2022년 10월 26일
0

HTML/CSS

목록 보기
3/12

비전공자를 위한 HTML/CSS 강의 공부 기록입니다.

1. 제목과 단락 요소

1) 제목 태그(heading tag)

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

<h1>역사</h1>
<h2>개발</h2>

2) 단락 태그(paragraph tag)

태그 이름은 paragraph를 줄여 p로 쓰며 하나의 문단을 만들 때 사용한다.
<p> 태그의 위쪽과 아래쪽에 약간의 여백을 추가하며 개행이 된다.
<p> 내부에서 강제로 개행을 하기 위해서는 <br> 태그를 사용한다.

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

2. 앵커 요소

1) 앵커(anchor) 태그

<a>앵커 태그는 다른 페이지로 이동하거나 현재 페이지 내에서 특정 위치로 초점을 이동시킬 때 사용한다.
HTML의 가장 큰 특징이 되는 태그로 중요도가 높고 자주 사용된다.

<a href="http://velog.io/" target="_blank">벨로그</a>

2) href 속성

<a>의 필수 속성으로 링크의 목적지가 되는 URL을 속성 값으로 갖는다.

3) target 속성

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

  • _self: 현재 화면의 표시한다는 의미로, target 속성의 기본 값
  • _blank: 새로운 창에 표시하다는 의미로 외부 페이지가 나오게 하는 속성 값
    등이 있다.

참고 링크: 기타 속성

그 밖의 속성들


3. 컨테이너 요소

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

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그이다.
스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 사용된다.
가장 대표적으로 많이 쓰이는 의미가 없는 태그는 <div>, <span>이 있다.

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

div(division) 태그는 블록 레벨 태그로 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다.
span 태그는 인라인 레벨 태그로 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들입니다.
<div>, <span>는 모두 아무 의미가 없으므로 실제 브라우저도 별다른 스타일을 적용하지 않는다.


4. 리스트 요소

1) ul 태그

ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다.
<ul>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타낸다.

<ul> 
    <li>항상</li> 
    <li>책상</li> 
    <li>세상</li> 
    ... 
</ul> 

2) ol 태그

ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용한다.
<ol>을 선언한 후 그 안에서 <li>를 사용해 각 항목을 나타낸다.

<ol>
    <li>사람이 살고 있는 모든 사회를 통틀어 이르는 말.</li>
    <li>사람이 태어나서 죽을 때까지의 기간. 또는 그 기간의 삶.</li>
    <li>어떤 개인이나 단체가 마음대로 활동할 수 있는 시간이나 공간.</li>
    ...
</ol>

3) dl 태그

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용한다.
<dl><ul>이나 <ol> 태그와는 달리 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조이다.

<dl>
    <dt>항상</dt>
    <dd>언제나 변함없이.</dd>
    <dt>책상</dt>
    <dd>앉아서 책을 읽거나 글을 쓰거나 사무를 보거나 할 때에 앞에 놓고 쓰는 상.</dd>
    <dt>세상</dt>
    <dd>1. 사람이 살고 있는 모든 사회를 통틀어 이르는 말.</dd>
  	<dd>2. 사람이 태어나서 죽을 때까지의 기간. 또는 그 기간의 삶.</dd>
  	<dd>3. 어떤 개인이나 단체가 마음대로 활동할 수 있는 시간이나 공간.</dd>
</dl>
  • dt: 용어를 나타내는 태그
  • dd: 용어에 대한 정의 또는 설명을 나타내는 태그
    용어 하나에 여러 정의가 들어갈 때, <dd>를 2개 이상 쓸 수 있다.

5. 이미지 요소

1) <img> 태그

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

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

2) src 속성

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

  • 상대 경로: 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로
  • 절대 경로: 실제 그 이미지가 위치한 곳의 전체 경로
<!-- 상대경로 -->
<img src="./images/pizza.png" alt="피자">
<!-- './'는 페이지가 있는 현재 폴더를 나타냅니다. -->

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

3) alt 속성

<img>의 필수 속성으로 이미지의 대체 텍스트를 나타내는 속성이다.
대체 텍스트란 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성이다.

4) width/height 속성

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

  • width/height 속성이 모두 없을 경우 이미지 원본 크기대로 노출
  • width/height 속성이 둘 중 하나만 있을 경우 선언한 속성의 크기에 맞춰 비율에 맞게 변경
  • width/height 속성이 모두 있을 경우 비율과 무관하게 선언한 크기대로 변경

5) 이미지 파일 형식

  • gif : 제한적인 색을 사용하고 용량이 적으며 투명 이미지와 애니메이션 이미지를 지원하는 형식
  • jpg : 사진이나 일반적인 그림에 쓰이며 높은 압축률과 자연스러운 색상 표현을 지원하는 형식(투명을 지원하지 않는다.)
  • png : 이미지 손실이 적으며 투명과 반투명을 모두 지원하는 형식

6. 기타 html 태그

HTML 태그

profile
매일 조금씩이라도 꾸준히

0개의 댓글