HTML 기본 태그

박은아·2023년 7월 12일
0

1. HTML: Hyper Text Markup Language의 줄임말 즉, 웹에서 웹사이트를 만드는 언어이다.

1) HTML의 기본형식

<!DOCTYPE HTML> ->문서의 형식을 선언
<html lang="ko"> ->문서의 시작, 주언어를 표시함 -> 그언어에 맞게 번역되어 올바른 해석으로 정보를 전달 할 수 있게된다
<meta charset="uft-8"> -> 문자셋팅, 다국어용으로 모든 언어 가능
<head>
...
<title>...</title> -> 웹브라우저의 제목바에 표시되는 글자 
cf)link태그로 안에 제목바에 표시될 이미지까지 넣을 수 있다.
...
</head>
<body> ->본문의 시작
...
</body> ->본문의 마침
</html>- >문서의 끝

2. block형식 & inline형식 태그

1) block형식 : 내용의길이에 상관없이 "가로 한줄을 모두 차지"하는 요소

div , h1~h6 , p, hr, ul, ol, dl, table, tr, td, form, fieldset, figcaption, figure

(1) h1~h6 : 제목을 뜻하는 heading태그, 자동 줄바꿈 기능이 있다. (=p와 동일)

(2) div : block형식으로 공간으로 분할, 자동 줄바꿈 기능이 있다.(문단을 묶을때 사용)

**문단을 묶을때 사용하는 태그 (div, span, p)
차이점: div, p는 자동줄바꿈 기능이 있지만, p는 문단을 띄워준다.
span은 자동줄바꿈 기능이 없음

(3) ol+li : 순서가 있는 목록 만들기

(4) ul+li : 순서가 없는 목록 만들기

(5) dl+dt+dd : 정의하기 위한 목록 만들기

dt: 소제목 / dd:소제목에 대한 내용 

(6) table : 표의 시작과 끝

tr: 줄(행) / td: 칸(열) / th: 표의 제목을 쓸떄 사용(가운데정렬, 진하게) / 
rowspan: 행병합 / colspan: 열병합 /
thead, tbody, tfoot으로 표를 구분해줌 

2) linline형식 : 줄바꿈없이 "내용의길이만큼 영역차지"하는 요소

span, a, b, strong, i, em, img, iframe, audio, video, input, textarea, label, button, select...

(1) a : 하이퍼링크 연결

외부사이트 연결 : <a href="http://www.naver.com">
html문서 연결 : <a href="./index.html">
html내 특정위치 연결 : <a href="#id이름">

3. 웹에서 특수문자 사용

1) & : & + amp;

2) < : & + lt;

3) > : & + gt;

4) 공백 : & + nbsp;

0개의 댓글