2021. 10. 16. 01:03ㆍ나만의 웹사이트 만들기/HTML 정복하기
어떤 바보라도 컴퓨터를 사용할 수 있다.
그래서 많은 사람들이 컴퓨터를 사용한다.
(Ted Nelson, HTML을 만든 사회 과학자)
개념 정리
TAG 태그
태그는 브라우저가 웹 문서를 잘 이해할 수 있도록 콘텐츠를 목적에 맞게 분류한 규칙입니다.
<h1>내용</h1>이처럼 여는 태그와 닫는 태그로 구성되어 있습니다. 닫는 태그는 슬래시(/)를 넣어서 구분합니다.
부모 태그 & 자식 태그
<html>
<head>
</head>
<body>
</body>
</html>웹 문서를 구조적으로 분류하기 위해 부모태그 안에 자식 태그를 넣어서 정리해줍니다. 부모태그 밑에 자식태그를 들여쓰기하기 위해서는 TAB을 눌러주면 됩니다.
여기에선 <html>과 </html>이 부모태그고 그 안에 들여쓰기한 나머지 태그들은 자식태그입니다.
HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>egofolio</title>
</head>2021.10.14 - [나만의 웹사이트 만들기/VScode] - [01] 웹 페이지 만들기의 첫 단추: 준비 및 세팅
[01] 웹 페이지 만들기의 첫 단추: 준비 및 세팅
비전공자로서 혹은 디자이너로서 코딩을 해내기란 쉽지 않을 것이라 예상할 것입니다. 처음 "Hello world"를 썼을 때만 기억이 나는 사람들이 많을거라 생각합니다. 코딩을 제대로 공부하지 않아
aram5.tistory.com
이전 포스팅에서 html 기본 구조를 만들었죠.
하나하나 뜯어보기로 하겠습니다.
- <!DOCTYPE html>: 문서의 타입을 지정해줍니다.
- <meta charset="UTF-8">: 웹 문서의 인코딩 방식입니다. "UTF-8"은 세계 표준 인코딩 방식으로 외국에서 한국어를 보았을 때 외계어처럼 깨지는 현상을 막아준다고 합니다.
- <meta http-eauiv="X-UA-Compatible" content="IE=edge">: 사용자가 익스플로러를 이용하려 할 때 최신 버전인 엣지로 화면을 보여 주는 기능입니다.
- <meta name="viewport" content="width=device-width, initial-sacle=1.0">: 반응형 웹 페이지를 만들 때 쓰는 코드로 디바이스 종류별로 화면에 출력할 방식을 지정합니다.
- <title> Document </title>: 문서의 제목을 정해주는 태그입니다. Document 자리에 제목을 달면 웹 브라우저의 상단 탭에 표시됩니다.
태그 정리
01. 시맨틱 태그
| 종류 | 설명 | 예 |
| <header> | 머리말 영역 | |
| <nav> | 메뉴 영역 | 링크 |
| <figure> | 멀티미디어 영역 | 동영상, 사진 |
| <main> | 본문 영역 | |
| <aside> | 외부 영역 | 장바구니, 팝업창 |
| <section> | 영역 그룹화 | |
| <article> | 기사나 개별 콘텐츠 담는 영역 | |
| <footer> | 꼬리말 영역 |
01. 서식 태그
| 종류 | 설명 | 구분 |
| <h1>~<h6> | 숫자가 커질수록 제목의 중요도가 떨어집니다. | [block] 제목 태그 |
| <p> | 글을 묶어서 나타냅니다. | [block] 문단 태그 |
| <div> | 콘텐츠를 그룹화합니다. | [block] 그룹 지정 태그 |
| <strong>,<em> | 특정 문장이나 단어를 강조합니다. | [inline] 강조 태그 |
| <a> | 페이지를 이동하는 링크를 설정합니다. | [inline] 링크 태그 |
| <span> | 인라인 요소를 그룹화합니다. | [inline] 그룹화 태그 |
| <img> | 이미지를 삽입합니다. | [inline] 이미지 태그 |
| <br> | 강제로 줄을 바꿉니다. | [inline] 줄 바꿈 태그 |
여기서 block과 inline 요소의 차이점을 알고 가야합니다.
- 블록 요소: 특정 영역을 구분 지을 때 사용하며 주로 레이아웃 제작과 관련된 태그입니다.
- 인라인 요소: 특정 구문을 부분적으로 선택하여 링크 설정이나 글자 강조 같은 서식을 꾸미거나 기능을 부여하는 속성 태그입니다.
오늘은 기본적인 HTML 태그들을 알아봤습니다. 사실 이것보다 수많은 태그들이 존재하지만 쓸 필요가 없는 경우에는 굳이 알 필요는 없다고 생각합니다. 대신에 웹 페이지에 구현하고 싶은데 알고 싶은 태그가 있다! 하는 경우에는 우리에겐 'Google'이라는 사수가 있다는거 아시죠? 검색하면 다 나오더라구요.
https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
html 태그를 친절하게 잘 설명해주는 사이트입니다. html 뿐만 아니라 css, javascript 등 여러 코딩 정보들이 있으니 참고바랍니다! 다음 포스팅에서 만나뵙겠습니다.
사진출처(source): https://www.filfre.net/2016/09/the-freedom-to-associate/ted-nelson/
'나만의 웹사이트 만들기 > HTML 정복하기' 카테고리의 다른 글
| [02-4] HTML 필수태그 정리 4: 사진, 영상, 음악 태그 (0) | 2021.10.19 |
|---|---|
| [02-3] HTML 필수태그 정리 3: 폼태그 (0) | 2021.10.18 |
| [02-2] HTML 필수태그 정리 2: 목록 태그 (0) | 2021.10.18 |