컴공생의 다이어리
HTML 태그(TAG) 본문
html
웹페이지의 시작과 끝
구성 : <html>...</html>
cf) <! doctype 문서유형>
문서유형을 지정해서 웹브라우저가 페이지를 어떻게 해석해야 하는지 알려줌
ex) <! doctype html> : 이 페이지는 html로 해석해야 함!
head(머리말)
웹페이지의 정보, 문서에서 사용할 외부 파일들을 링크할 때 사용
구성 : <head>...</head>
body(본문)
브라우저에 실제 표시되는 내용
구성 : <body>...</body>
meta(정보에 대한 정보를 알려줌)
문자 인코딩 및 문서 키워드, 요약 정보
구성 : <meta... />
ex) <meta charset="utf-8"/> : 웹페이지의 문자 인코딩 방식을 utf-8로 지정
title(문서 제목)
<title>안의 내용이 웹브라우저의 제목 표시줄에 표시
구성 : <title>...</title>
p(단락)
<p>를 사용하면 내용 앞 뒤로 빈줄이 생기면서 단락이 생김
구성 : <p>...</p>
h1~h6(제목)
<h1>이 글자 크기가 제일 크며, <h6>로 갈수록 글자 크기가 작아짐
구성 : <h1>...</h1>, <h2>...</h2> 등
cf) 다른 태그를 사용해서 <h1>, <h2> 등의 태그를 대신해서 만들 수 있지만, <h1>과 같은 태그를 사용한다는 것은 해당하는 내용이 제목이 된다는 정보를 주는 것이기 때문에 다른 내용과 구별해서 사용해야 한다.
hr(단락구분)
문서의 구분선
구성 : <hr>
주석태그
주석을 사용하고 싶으면 사용함
구성 : <!-- -->
br(줄바꿈)
<br>태그가 삽입된 위치에서만 줄이 바뀐다.
구성 : <br />
div(문서 영역이나 섹션의 분할을 정의)
컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용하지만, 아무런 의미는 없음
구성 : <div>...</div>
span(문서 영역이나 섹션의 분할을 정의)
컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용하지만, 아무런 의미는 없음
구성 : <span>...</span>
cf) div와 span의 차이
<div>는 줄바꿈이 가능하지만 <span>은 줄바꿈이 불가능하다.
table(표)
표를 사용하고 싶을 때 사용
구성 : <table>...</table>
cf) border, cellpadding, cellspacing, width, summary의 속성값
| border | 테이블의 선 두께 |
| cellpadding | 셀 안쪽 여백 |
| cellspacing | 셀과 셀 사이 간격 |
| width | 테이블의 넓이 |
| summary | 요약 |
caption(캡션)
summary 역할이며, css에서 안보이게 함
구성 : <caption>...</caption>
colgroup(열 그룹)
구조적인 그룹화를 위해 사용
구성 : <colgroup>...</colgroup>
col
빈태그이지만 유일하게 self close가 없음. 열의 속성 값과 스타일을 지정
구성 : <col...>
thead
테이블 헤더 행 그룹
구성 : <thead>...</thead>
tbody
테이블 내용 행 그룹
구성 : <tbody>...</tbody>
tfoot
테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용
구성 : <tfoot>...</tfoot>
th
셀 제목으로 지정해서 강조되게 표시하는 태그
구성 : <th>...</th>
tr
테이블 내의 한행을 정의하는 태그
구성 : <tr>...</tr>
td
각 행에 포함된 셀을 만들 때 사용되는 태그. table data, td의 개수는 th의 개수와 일치해야 함
구성 : <td>...</td>
cf) colspan, rowspan
colspan : 가로 행을 합쳐줌
rowspan : 세로 열을 합쳐줌
ol
olordered list, 순서가 있는 리스트
구성 : <ol>...</ol>
ul
unordered list, 순서가 없는 리스트
구성 : <ul>...</ul>
li
ol과 ul의 세부 항목
구성 : <li>...</li>
a
웹페이지나 외부 사이트 연결
구성 : <a href="연결할 링크의 경로" target="">...</a>
cf) a 태그의 속성
| href | 목적지, url |
| target | 보여질 위치 target의 속성 _blank : 새 창 _self : 이동 _parent : 먼저 띄워진 창 _top : 현재 띄워진 가장 최상단에 위치한 창 |
| name | a태그의 이름 지정(북마크 역할) |
| title | 링크에 대한 설명 |
img
이미지 삽입
구성 : <img src="" alt=""/>
cf) 이미지 속성
| src | 경로 지정, 필수 입력 |
| alt | 이미지를 위한 대체 텍스트를 정의 |
| title | 거의 사용하지 않음 |
script(코드 삽입)
실행 가능한 코드를 웹페이지에 포함시키거나 참조하기 위해서 사용
보통 javascript코드를 넣을 때 사용
구성 : <script>...</script>
style
스타일 정보를 정의할 때 사용하는 태그
구성 : <head>와 </head> 사이에 정의
input
form의 요소 중 하나. 사용자가 정보를 입력하는 부분을 만들어야 할 때 사용
strong
웹페이지의 내용 중 중요한 내용을 강조할 때 사용
egloos.zum.com/fundoodle/v/3131696
HTML 태그 정리표
HTML 태그 정리
명칭구성내용html... head...머리말meta정보에 대한 정보를 알려줌. 빈태그,
egloos.zum.com
www.advancedwebranking.com/html/
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
'Development > Network & Web' 카테고리의 다른 글
| 도메인(Domain)이란? (0) | 2021.10.09 |
|---|---|
| [html, css] <input type="password"> 입력값이 보이지 않을 때 (0) | 2021.08.20 |
| [html, css, js, python] 한번에 들여쓰기, 내어쓰기, 주석지정/해제 단축키 (0) | 2021.05.26 |
| goorm(구름) ide로 html/css/js 실습 환경 만들기 (0) | 2021.05.13 |
| HTML, CSS, JS(JavaScript)의 정의 (0) | 2021.01.26 |
