이 글의 내용은 HTML5를 기준으로 공부한 내용을 정리한 글이다. 아래 태그 중에는 몇 가지 태그를 제외하고 HTML5 외 버전이나 브라우저에서 사용할 수 없는 태그도 존재함을 유의할 것.
태그 정리에 앞서 HTML에서 알아두면 좋은 내용
1. HTML 주석 기호: <!-- 주석 처리 내용 -->
2. VSC(Visual Studio Code)에서 작성하는 경우에 !(느낌표) 하나를 입력한 후, 탭(tap) 키를 누르면 VSC에서 기본적인 구조를 작성해준다.
3. HTML에서 한글을 사용하기 위해서는 <head> 태그 안에 <meta charset="UTF-8"> 입력해야 한다.
1. HTML 기본 태그
태그 작성 방식은 아래와 같다.
<!-- 닫는 태그가 있는 태그 작성 형식 -->
<열린태그 속성="속성값">컨텐츠</닫힌태그>
<!-- 닫는 태그가 없는 태그 작성 형식 -->
<열린태그 속성="속성값">
기본적인 태그는 아래와 같은 태그들이 있다. 모든 태그를 담기에는 태그가 많이 존재하기 때문에 주로 사용하는 태그 위주로 정리했다.
1) <!DOCTYPE html> : HTML5로 문서를 선언하는 태그
2) <html></html> : HTML 문서의 시작과 끝을 의미하는 태그. 모든 태그들은 <html> 태그 안쪽에 입력한다.
3) <head></head> : 문서와 관련된 요약 정보를 담는 태그
4) <body></body> : 눈에 보이는 웹 사이트의 내용과 모든 구조의 설계 내용을 담는 태그
5) <meta charset="UTF-8"> : character setting의 약자로, 모든 문자(한글 등)를 웹 브라우저에서 깨짐 없이 표시할 수 있게 해주는 태그와 속성값
6) <img> : 이미지를 삽입하는 태그
속성="속성값"
src="삽입할 이미지 파일 경로"
alt="이미지의 텍스트 정보"
* 웹 사이트가 이미지를 출력하지 못했을 경우, alt의 속성값 텍스트 정보로 대체(alt 속성은 시각 장애인이 전용 프로그램을 통해 웹 페이지를 들을 때, alt 속성값을 텍스트로 변환해서 들려주기 때문에 접근성 부분에서 중요한 속성이다.)
7) <h></h> : heading의 약자로 제목이나 부제목을 표현하는 태그. h1~h6이 있고, h1이 가장 중요한 제목이다. h1 태그는 하나의 html 문서에서 "한 번만" 사용하는 것이 바람직하다. 보통 회사 로고 같은 경우에 <h1><a><img></a></h1>과 같은 방식으로 작성한다.
8) <p></p> : paragraph의 약자로 본문 내용을 표현하는 태그
9) <ul></ul> : unordered list의 약자로, 순서가 없는 리스트를 생성하는 태그. 내부에는 여러 개의 <li></li> 태그가 오며, 어떤 항목의 메뉴 버튼을 만들 때 자주 사용된다.
10) <ol></ol> : ordered list의 약자로, 순서가 있는 숫자 리스트를 생성하는 태그. <ul> 태그와 마찬가지로 태그 안쪽에 <li></li> 태그가 온다.
11) <a></a> : anchor의 약자로 텍스트, 이미지를 클릭했을 때 다른 웹 페이지로 이동시키는 기능을 갖는 태그.
속성="속성값"
href="연결할 웹 페이지의 url 주소"
target="웹 페이지를 연결하는 방식(_blank: 새 창에서, _self: 현재 창에서)"
12) <button></button> : 클릭할 수 있는 버튼을 정의할 때 사용되는 태그. <a> 태그와 구분 없이 혼용되는 경우가 많지만, 시맨틱 웹을 위해 작은 차이를 알고, 그에 맞게 사용하는 것이 좋다.
<a> 태그는 다른 페이지나 화면으로 이동할 때. 링크를 통해 다른 곳으로 이동할 때 사용하는 것이 좋다. ex) 홈페이지로 가는 버튼, 뒤로 가는 버튼 등
<button> 태그는 사용자가 어떤 액션을 할 수 있도록 하는 버튼을 만들 때 사용하는 것이 좋다. ex) 로그인 버튼, 확인 버튼, 시험 시작 버튼 등
13) <br> : line break에서 break의 약자로, 줄 바꿈 태그
자바스크립트에서 아래와 같이 출력할 때, <br> 태그처럼 닫는 태그가 없는 경우엔 <br/>로 적어주는 것이 표준이다.
document.write('<br/>');
2. HTML에서 구조를 잡을 때 사용하는 태그
보통 HTML은 크게 목차, 본문, 부록으로 구성된다.
1) 목차(상단 부분)
(1) <hearder></header> : 웹 사이트의 머리글을 담는 태그
(2) <nav></nav> : navigation의 약자로, 메뉴 버튼을 담는 태그. 주로 <ul>, <li>, <a> 태그 등과 함께 사용한다.
2) 본문(중간 부분)
(1) <main></main> : 문서의 주요 내용을 담는 태그. IE(Internet Explorer)는 지원하지 않기 때문에, IE를 사용할 경우엔 role="main" 속성을 넣어줘야 했다.
(2) <article></article> : 문서의 주요 이미지나 텍스트 등의 정보를 담고, 구역을 설정하는 태그. 태그 내에 구역을 대표하는 타이틀 <h#></h#> 태그가 반드시 1개 이상은 존재해야 한다. 존재하지 않으면 웹 표준에 어긋나는 것이기 때문에 검색 엔진에 웹 사이트를 노출시킬 경우, 장애를 일으킬 수 있다.
(3) <section></section> : <article> 태그와 비슷한 기능을 하는 태그. 단, 연관 있는 내용들을 하나의 섹션으로 묶어줄 때 사용하는 것이 바람직하다.
<!-- 1개의 아티클 안에 여러 종류의 내용이 있을 경우 -->
<article>
<section></section>
<section></section>
</article>
<!-- 한 종류의 섹션 안에 여러 개의 비슷한 아티클이 있을 경우 -->
<section>
<article></article>
<article></article>
</section>
3) 부록(하단 부분에 주소나 이메일, 사업자등록번호 등의 정보를 표기할 때)
(1) <footer></footer> : 가장 하단에 들어가는 정보를 표기할 때 사용하는 태그
(2) <div></div> : 임의의 공간을 추가적으로 만들 때 사용하는 태그. 꼭 하단이 아닌, 위와 같이 크게 구분된 공간이 아닌 임의의 공간을 추가적으로 만들 때도 <div></div> 태그를 사용한다.
(3) <span></span> : <div>가 구역을 나누고, 텍스트와 주변의 구역까지 감싸는 태그라면, <span> 태그는 마치 스판처럼 태그 안의 내용, 텍스트만을 감싸는 태그이다. 주로 CSS와 함께 사용된다.
4. 기타 태그(Semantic 태그를 위해 알아두면 좋은 차이)
1) <i></i> : 태그 안 텍스트에 italic(기울임꼴)을 적용하는 태그. 시각적으로만 적용된다.
2) <em></em> : 태그 안 텍스트를 강조(기울임꼴)하는 태그. <i> 태그와 기울임꼴을 적용하는 것은 같지만, 내용 자체를 강조하는 태그이며, 스크린 리더를 통해 읽게 된다면 해당 부분이 강조되어 읽힐 것이고, 웹 접근성 부분에서 더 유리하다.
3) <b></b> : 태그 안 텍스트에 bold(굵게)를 적용하는 태그. 시각적으로만 적용된다.
4) <strong></strong> : 태그 안 텍스트를 강조(굵게)하는 태그. <b> 태그와 굵은 글씨를 적용하는 것은 같지만, 내용 자체를 강조하는 태그이며, 스크린 리더를 통해 읽게 된다면 해당 부분이 강조되어 읽힐 것이고, 웹 접근성 부분에서 더 유리하다.
5) <dl></dl> : definition list 또는 description list의 약자로, 설명이나 정의할 목록을 감싸고, 그 안에 용어(<dt>)와 용어 설명 또는 정의(<dd>)를 키-값으로 갖는 태그. 해당 태그는 아래와 같이 어떤 단어를 설명하거나 정의할 때, 1:1로 쌍을 이룰 때 사용하는 것이 바람직하다.
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language의 줄임말</dd>
</dl>
5. HTML의 태그가 가질 수 있는 두 가지 성격
HTML 태그의 성격에는 Block 요소와 Inline 요소가 있다. 각 성격에 따라 HTML 태그의 배치 형식이 바뀌고, 내가 원하는 구조로 설계함에 있어서 중요하기 때문에 알아둬야 한다.
1) Block 요소
(1) y축 정렬 형태로 출력된다.(태그 사이에 줄 바꿈 현상이 발생)
(2) 공간을 만들 수 있고, 상하 배치 작업이 가능하며, 이 글의 대부분의 태그는 Block 요소를 가진다.
2) Inline 요소
(1) x축 정렬 형태로 출력된다.(한 줄에 이어서 출력)
(2) 공간을 만들 수 없고, 상하 배치 작업이 불가능하다. ex) <a>, <span>, <br>, <em>, <strong> 등
3) 요소 성격 변경
이런 성격은 CSS에서 display 속성을 통해 변경이 가능하다. display 속성은 아래와 같은 4가지 속성값이 존재하며, 자신이 선택한 태그의 성격을 변경하여 원하는 배치를 구현하기 위해 사용된다.
요소 {
display: none; /* 보이지 않음. */
display: block; /* 블록 박스 */
display: inline; /* 인라인 박스 */
display: inline-block; /* block과 inline의 중간 형태 */
}'지극히 개인적인 공부 노트 > 웹(Web)' 카테고리의 다른 글
| [CSS] 웹 페이지 레이아웃(feat. 박스 모델, 마진 병합) (0) | 2021.08.15 |
|---|---|
| [CSS] CSS의 선택자와 캐스케이딩(스타일 적용 우선 순위) (0) | 2021.08.15 |
| [HTML] HTML 통계 데이터(feat. 평균 사용 태그 수, 태그 인기도) (0) | 2021.07.23 |
| [Web] 수정한 CSS 파일이 HTML에 적용되지 않을 때 (0) | 2021.07.23 |
| [Web] AWS 가상 서버 이용하기(2) - 가상 컴퓨터에서 서버 파일 실행하기 (0) | 2021.07.02 |