-
HTML 기본 태그 정리Front-end/HTML 2019. 12. 18. 00:11
191217 수업 내용 정리
기본 태그
<!doctype html> : html문서임을 선언하는 태그
<html> : html문서의 시작과 끝을 알리는 태그- html의 거의 모든 태그는 여는 태그와 함께 닫는 태그를 동반함
- ex) <html><head></head> .... <body></body> </html>
- 위와 같이 닫는 태그 없이 독립적으로 사용되는 태그들은 '빈 태그'라고 함
<head> : 현재문서의 타이틀(탭에 표시되는 문자열), 캐릭터셋 등이 포함됨
<head>에 들어가는 내용은 페이지에 출력되지 않음
<meta> : <head> 안에서 여러가지 값들을 설정하기 위해 사용되며 빈 태그임
▷속성 - 1. charset : 문자의 인코딩을 지정함, "UTF-8"로 지정해줘야 한글이 깨지지 않음2. http-equiv : refresh로 지정하면 새로고침하도록 할 수 있음
3. content : "시간(초 단위);url=이동할 페이지/사이트 주소"를 부여하면,
정해둔 시간 뒤에 해당 사이트로 이동,
예제: <meta http-equiv="refresh" content="3"> : 3초마다 현재 페이지 새로고침
<body> : 본문의 시작과 끝을 알리는 태그
문자 태그
<h1> ~ <h6> : 문자열을 제목으로 강조할 때 사용, 숫자가 커질수록 글자는 작아짐
<strong>, <b> : 정해진 문자를 굵게 표시
<em>, <i>: 이탤릭체, 기울여쓰기
- <b>, <i> 두 태그는 html5에서 잘 쓰지 않음
<u> : 지정된 문자열 아래 밑줄을 표시
<font> : 문자열의 다양한 속성 설정 가능
▷속성 - 1. size : pixel, pt 단위 사용 가능, 기본은 pixel
2. color : 색 이름, #RGB(16진수)사용 가능
3. face : 글씨체
=> 요즘은 CSS로 해결하기 때문에 잘 쓰이지 않음<p> : 문자열을 문단으로 묶어주는 태그, 닫는 태그 없이 사용하면 엔터를 두 번 친 것과 같은 효과를 나타냄
<br> : 한 줄 바꾸기(엔터 한 번 친 것과 같은 효과), 빈 태그
이미지 태그<img> : 사진이나 그림과 같은 이미지 파일을 다룰 때 사용
▷속성 - 1. src : 이미지 경로를 지정, src="이미지 경로"
경로 지정 방법 - 상대경로: 현재폴더(.), 상위폴더(..), 하위폴더, 파일(/) "../images/road1.jpg"
- 절대경로: "c:\webtest\1.client\images\road2.jpg"
2. width/height : 이미지 크기 지정, pixel 단위'pixel'이란 모니터에 출력하는 점의 개수 => 선명도와 관련
3. border : 테두리 선의 굵기, 0으로 지정하면 테두리가 없음
4. alt : 이미지에 대한 설명문, 요즘엔 잘 안 쓰임 => html5에서 <figcaption>으로 대체
이미지 태그 - HTML5
<figure> : 이미지를 감싸주는 태그
<figcaption> : 이미지에 제목 또는 설명을 다는 태그, figure태그 안에 사용한다.
목록 태그
<ul> : 순서 없는 목록, 상단메뉴 만들 때 많이 씀
▷속성 - type="disk"(디폴트, 검정색 원), "square"(사각형), "circle"(테두리만 있는 원)
<ol> : 순서 있는 목록, 많이 안 씀
▷속성 - type="1"(디폴트, 숫자), "I"(로마 숫자 대문자), "i"(로마 숫자 소문자), "A"(대문자), "a"(소문자)
<li> : 각 목록의 세부 항목
시멘틱(semantic) 구조 태그 - 레이아웃을 의미있게 나눠주는 역할
HTML4까지는 주로 <div>태그를 사용하여 영역을 분할하였으나,
HTML5에서는 여러가지 의미를 가진 태그들이 등장
1. <header> : 머리말, 메인 메뉴(상단), 사이트로고
2. <nav> : 사이트의 메뉴, 링크 문자열과 같이 연결해서 많이 사용, header랑 연결해서 상단메뉴 만들 때도 활용
3. <section> : 본문, 실제 문서 내용이 나오는 영역 -> 소제목이 있는 단락을 논리적인 단위로 구분 지워줌
4. <article> : 실질적인 자세한 문서내용, 소제목에 해당하는 문서들이 들어감(여러 개를 넣어줄 수 있음)5. <aside> : 블로그 형식의 사이드바에 쓰임, 우측에 많이 활용
6. <footer> : 꼬리말, 작성자, 저작권, 고객문의 등 포함,
<address>로 작가의 이메일 표기(이탤릭체), <time>으로 문서 작성 날짜를 나타내기도 함 // 생략 가능
기타 태그
<hr> : 수평선을 그어주는 태그, 빈 태그
학원에서 배운 것들을 기초로 기본적인 내용부터 정리해 나갈 예정입니다.
잘못된 내용이 있다면 피드백 부탁드립니다.
'Front-end > HTML' 카테고리의 다른 글
HTML - Video, Audio 태그 정리 (0) 2019.12.18 HTML - Form, Input 태그 정리 (0) 2019.12.18 HTML - Table 태그 정리 (0) 2019.12.18