HTML에 대해 알아보자
웹페이지는 HTML, CSS, JS (CSS, JS는 뒤에 나온다) 세가지 요소로 구성되는데
HTML이란 웹페이지의 뼈대가 되는 기본구조이다
HTML이 선행되고 CSS, JS는 후행되어진다
HTML의 구조
HTML을 생성하면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>이런식의 코드가 생성된다
안에 여러가지 요소가 생성되는데 그 중에 가장 중요한 것은
- head
- body
라고 생각한다
head에는 보통 웹페이지의 제목이 되는 title태그가 들어가고
body에는 우리가 실제로 눈으로 보고 사용하는 웹페이지의 요소들이
전부 들어간다고 생각하면 된다
HTML 속의 여러 특징들
html의 내용을 보면 <p></p>, <br></br> 이런식의로 부등호가 단어를 감싸고 있는데
이것을 태그라고 부른다
물론 <head></head>, <body></body>는 보통 헤드태그, 바디태그라고 부르진 않고
그냥 헤드, 바디라고 부른다
우리가 적고 싶은 내용을
<title>내용</title>
<p>내가 적고 싶은 내용</p> (p태그 안에 내용을 적은 모습)
이런식으로 각 태그 안에 내용을 적어 넣는다
태그를 보면 뒷태그에는 ' / ' 슬래시 기호가 들어가는데 이것은 태그가 끝났다는 마침표와 같은 의미이다.
태그의 종류
대부분은 <body></body> 바디 안에 적용한다
그 바디 안에서 각 영역들을 지정하는 태그들을 쓰는데
그 종류는 다음과 같다
| <header> | 헤더 영역 |
| <main> | 메인 영역 |
| <section> | 콘텐츠 영역 |
| <aside> | 사이드 바 영역 |
| <footer> | 푸터 영역 |
| <nav> | 내비게이션 영역, 문서 내 다른 위치, 다른 문서로 연결할 때 사용 |
| <article> | 독립적인 콘텐츠를 사용할 때 |
| <section> | 콘텐츠 영역 |
| <div> | 여러 소스 묶기 |
다음은 우리가 흔히 '태그' 라고 부르는 것들이다
간단한 문서 형식으로 작성할 때 이정도면 아무 무리 없다
| <h1>, <h2>, ... | 제목, 숫자가 커질수록 글자는 작아진다 |
| <p> | 단락을 나눈다, paragraph |
| <br> | 줄 바꿈 태그, </br> 태그는 쓰지 않는다 |
| <blockquote> | 인용문, 들여쓰기 적용됨 |
| <strong> | 텍스트 굵게, 주로 중요한 내용일 때 |
| <b> | 텍스트 굵게, 단순히 굵게 표시할 때 |
| <em> | 텍스트 기울임, emphasis, 강조할 때 |
| <i> | 텍스트 기울임, italic의 준말, 단순히 기울여 표시할 때 |
| <u> | 텍스트 밑줄 |
| <s> | 텍스트 취소선 |
이미지 태그
| <img> | 이미지 삽입 | ||
| src= | 이미지 파일 경로 | ||
| alt= | 대체용 텍스트 | ||
| width= height= |
가로, 세로 크기 조절 | ||
| % | 브라우저 창의 크기 단위 | ||
| px | 픽셀 단위 | ||
a 태그
| <a> | 하이퍼 링크 삽입 | |
| href= | 링크 주소, hypertext reference의 준말이다 | |
| target="_blank" | 새 탭에서 열기 | |
이외에도 많은 태그들이 있으나 여기까지 정리하겠다
