-
HTMLFront/HTML 2021. 5. 10. 23:06
개인 공부 후 정리 목적인 글입니다.
HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>타이틀</title>
</head>
<body>
내용
</body>
</html>
Tag : <HTML>, <HEAD>, <BODY> 등을 각각 태그라고 한다, 대소문자를 가리지 않는다.
시작, 종료태그 : <HEAD>, </HEAD> <BODY>, </BODY>
태그의 구성
- Element(요소) : <title> 문서의 제목 </title>
'<'와‘>’로 묶인 명령어로서 <태그>... </태그> 형태로 작성한다. - Attribute(속성) : <p align="center">문서의 내용<p>
시작태그에 필요에 따라 속상이라는 옵션을 사용한다. - Argument(속성값) : <p align="center">문서의 내용<p>
속성에 대한 값을 의미하며“ ” 또는 ‘ ’ 안에 넣어 표시한다.
HTML 문서의 기본 구조
1. <!DOCTYPE> : 웹 문서의 유형을 지정하는 선언문. 웹 브라우저가 페이지를 어떻게 해석해야 하는지 알려준다.
ex) <! doctype html> : 이 페이지를 html로 해석하라
2. <html> : 웹페이지의 시작과 끝, <html>로 시작해서 </html>로 끝난다.
3. <head> : 웹 페이지의 정보, 문서의 정보를 담는다/한 번만 사용 가능
<title>, <meta> 등이 들어간다.
4. <meta> : 문자 인코딩 및 문서 키워드, 요약 정보
ex): 웹 페이지의 문자 인코딩 방식을 utf-8로 지정해라
5. <title> : 문서 제목
페이지를 방문하는 방문자나 검색겐진은 제목 표시줄의 제목을 보고 내용을 예측하기 때문에 잘 써야된다.
6. <body> : 브라우저에 실제 표시되는 내용
7. 주석
html의 주석 : <!-- 내용 -->
css의 주석 : /* 내용 */
텍스트 입력하기
8. <hn> : 제목으로 <h1> 글자가 제일 크고 <h6>로 갈수록 크기가 작아진다.
9. <p> : 텍스트 단락, 사용하면 내용 앞뒤로 빈 줄이 생기면서 단락이 생긴다.
10. <br> : 줄 바꿈
11. <blockquote> : 인용할 때 쓰는 태그로 안으로 들여 사용한다.
12. <strong> : 중요한 내용을 굵게 강조하듯 나타나짐
<b> : 굵게만 표시 가능(bold)
13. <em> : emphasis의 줄임말로 특별하게 강조할 때 사용
<i> : italic의 줄임말로 마음속의 생각이나 용어, 관용구 등 그냥 기울이는 용도로 사용
14. <aside> : 본문 이외의 내용으로 블로그 양 옆의 광고나 링크 같은 사이드 바를 표시할 때 사용한다.
15. <abbr> : 줄임말을 표시하고 title 속성을 함께 사용할 수 있다.
16. <cite> : 웹 문서나 포스트에서 참고 내용을 표시한다.
17. <code> : 컴퓨터 인식을 위한 소스 코드이다.
18. <small> : 부가 정도처럼 작게 표시해도 되는 텍스트
19. <sub> : 아래 첨자를 표시한다.
<sup> : 위 첨자를 표시한다.
20. <s> : 취소선을 표시한다.
21. <u> : 밑줄을 표시한다.
22. <ins> : 공동 작업 문서에서 새로운 내용을 삽입한다.
<del> : 공동 작업 문서에서 기존 내용을 삭제한다.
시멘트 태그(semantic tag)
사용하는 이유 1) 웹 브라우저가 HTML의 소스 코드만 봐도 어느 부분인지 쉽게 알 수 있기 때문이다.
2) 문서 구조가 정확하게 나눠지므로 다양한 화면에서 웹 문서를 표현하기가 쉽다.
3) 웹 사이트를 검색할 때 필요한 내용을 바로 찾을 수 있다.23. <header> : 문서의 제목 요소 또는 로고나 아이콘, 저자 정보를 나타낸다.
24. <nav> : 문서의 메뉴 모음을 정의한다.
25. <section> : 문서에서 콘텐츠의 주제 그룹으로 hn과 함께 사용한다.
26. <article> : 독립적인 콘텐츠이다.
27. <aside> : 문서의 주요 부분을 제외한 나머지 콘텐츠로 본문 이외의 내용으로 블로그 양 옆의 광고나 링크 같은
사이드 바를 표시할 때 사용한다. 주로 왼쪽, 오른쪽, 아래쪽에 사이드 바를 만든다.28. <footer> : 문서의 꼬리말, 저자, 저작권 등의 정보를 표시한다.
29. <hgroup> : 제목과 부제목을 묶어준다.
header nav -section- aside article article footer 30. <div> : 의미 x, 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용(줄 바꿈O)
<span> : 아무런 의미 x, 컨텐츠들을 어떤 목적에 따라 묶어야 할 때 사용(줄 바꿈X)
하이퍼링크
31. <a> : anchor, 웹 페이지나 외부 사이트 연결
<a href="연결할 링크의 경로“>내용</a>
_blank 새로운 탭 or 창 _self 현재 탭 or 창 _parent 현재 화면을 불러낸 부모 탭 or 창, 없으면 현재 탭 or 창 _top 최상위 탭 or 창, 없으면 현재 탭 or ckd 32. <script> : 코드 삽입, 실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해 사용
33. <link> : 외부 파일을 연결할 때 사용한다.
<link>는 외부 css 파일을 연결할 때, <style>은 css 설정을 같은 웹 페이지 안에서 정의할 때 사용
이미지 삽입
34. <img> : 이미지 삽입, 웹페이지에 이미지를 넣을 때 사용한다. <img>태그 하나당 1개의 이미지 삽입 가능
<img src="이미지 경로“ alt="대체용 텍스트">이미지 파일 형식 종류
- GIF
- JPG/JPEG
- PNG
이미지 크기 조절
- width(너비)
- height(높이)
- alt(대체 텍스트)
- title(커서를 올리면 나오는 설명)
- usemap(이미지 맵)
목록 만들기
순서 목록
35. <ul> : unordered list, 순서가 없는 list로 글자 앞에 ●같은 불릿이 붙는다.
( css 설정으로 없앨 수 있다. ex) list-style:none; )36. <ol> : olordered list, 순서가 있는 list로 글자 앞에 숫자, 영어 대,소문자, 로마숫자 대,소문자
- start : 중간부터 시작해야 할 때 이 속성을 사용한다.
- reversed : 역순으로 할 때 사용한다.- <li> : <ul>과 <ol>안에서 각 항목을 나열할 때 사용
<ul> <ol[속성=“속성 값”]>
<li>내용</li> <li>내용</li>
<li>내용</li> <li>내용</li>
</ul> </ol>
설명 목록
37. <dl> : 설명 목록을 만든다.
<dt> : 설명 목록의 단어명
<dd> : 설명을 나타내는 값테이블 만들기
<table> : 이차원 격자 모양의 표를 나타낸다.
- <caption> : 표의 상단/하단에 제목을 넣는다.
- <th> : 진하게 표시되어 주로 표 내부의 제목으로 쓰인다.
- <tr> : 표의 행을 만든다.
- <td> : 표의 열을 만든다.
- <thead> : 행 그룹에서 제목 부분
- <tbody> : 행 그룹에서 내용 부분
- <tfoot> : 행 그룹에서 꼬리 부분
- <rowspan> : 행을 합칠 때 쓰는 속성
- <colspan> : 열을 합칠 때 쓰는 속성
- <col> : 표에서 열의 스타일을 지정
- <colgroup> : 표에서 여러 열을 함께 묶어서 스타일을 지정
35. <style> : 스타일 정보를 정의할 때 사용하는 태그
36. <iframe> : 웹 페이지 안에 다른 웹 페이지를 삽입할 때 사용, 속성을 이용해서 원하는 형태로 표시
외부 페이지 삽입 <iframe src="삽입할 페이지 주소“[속성=”속성값”]></iframe>
'Front > HTML' 카테고리의 다른 글
HTML 입력 양식 (0) 2021.05.11 - Element(요소) : <title> 문서의 제목 </title>