코딩을 시작하고 많은 책들과 영상들을 봐왔지만 정리를 하지 않아서 이번부터 블로그로 정리하면서 기록하려 한다.
HTML문서 작성을 위한 기본 내용을 정리하고 실무에서 자주 사용되는 필수 태그를 정리하려 한다.
1. HTML의 기본 구성 요소
1-1. 태그: <태그명>
- 웹페이지를 구성하는 요소(텍스트, 이미지, 버튼 등)를 정의하는 역할
- 형식은 홀화살괄호<> 사이에 태그명을 넣는 형태
1-2. 속성: <태그명 속성명="속성값">
<html lang = "ko">- 태그에 의미나 기능을 보충하는 역할
- 속성을 사용해도 되고 안해도 되지만 단독으로는 사용할 수 없고 속성명과 속성값으로 구성
- 속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 쉼표로 구분해 값을 나열
1-3. 문법: HTML은 태그와 특성으로 문법을 구성, 크게 콘텐츠가 있는 문법과 없는 문법으로 나뉨
콘텐츠가 있는 문법
<title>나의 첫 웹 페이지</title>- 콘텐츠의 앞뒤를 태그로 감싸며 앞에 있는 태그는 시작 태그(open tag), 뒤에 있는 태그는 종료 태그(close tag)
- 종료 태그는 태그명 앞에 슬래시가 있다는 것만 다르고 시작태그와 같음
- 시작 태그, 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 함
콘텐츠가 없는 문법
<br>- 콘텐츠가 없는 문법은 감싸야 할 콘텐츠가 없어 시작 태그만 사용, 그래서 빈 태그(empty tag)라고 함
1-4. 주석
<!-- 주석 내용 -->- 웹에는 표시되지 않지만, 코드에 메모나 설명을 기록 하고 싶을 때 사용
- 웹 브라우저의 소스보기로는 주석을 볼 수 있어 보안에 관련된 내용은 넣으면 안됨
2. 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>Document</title>
</head>
<body>
</body>
</html>기본적인 HTML의 구조는 이렇게 형성되며 DTD, html 태그, head 태그, body 태그를 설명하며 정리하겠다.
2-1. DTD
<!DOCTYPE html>- 문서형 정의(DTD: Document Type Definition)는 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따르는지 알려 주는 것이며 HTML의 처음에 넣어야 함
- DTD 작성 시 웹 브라우저는 HTML5 문서 형식으로 해석
2-2. html 태그: HTML의 문서의 시작과 끝을 의미하며, 모든 태그는 html 태그 안에서 작성해야 함
<html lang="ko">
</html>- lang 속성은 웹 접근성(검색엔진 및 브라우저 지원 목적)에 관한 내용이다.
- 예를 들어 lang 설정과 접속자 크롬 브라우저의 언어 설정이 다른 경우, 크롬 자동번역 인터페이스에 뜨게 설정
- body 태그 안 개별 요소에 다른 언어 사용 시 해당 요소에 별도로 적용
2-3. head 태그: HTML 문서의 메타데이터를 정의하는 영역
<head>
</head>- 메타데이터란 HTML문서에 대한 정보이며 웹에 직접적으로 노출되지 않음
- 주로 meta, title, link, style, script 등의 태그를 사용하여 문서의 여러 정보를 정의함
meta 태그: 메타데이터를 정의하는 데 사용
<meta charset="UTF-8">- HTML 문서에서 허용하는 문자 집합(charset)을 정의하는 메타데이터 태그
- 과거에는 EUC-KR을 주로 사용했지만, 최근엔 주로 UTF-8 사용
<meta http-equiv="X-UA-Compatible" content="IE=edge">- 인터넷 익스플로어의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터
- 구 버전의 렌더링 엔진을 사용하는 프로젝트가 아니라면 해당 태그를 정의하는 편이 좋다
viewport 태그: 뷰포트는 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 뷰포트를 쉽게 설명하자면 해상도 960px인 화면에서 보는 1px과 360px인 화면에서 보는 1px의 크기는 다르다. 그러나 HTML은 어떤 기기에 접속하더라도 기본 980px의 값을 보여주게 설정되어 있어서 해상도가 작은 스마트폰기기에는 보기 힘든 화면이 구성된다. 이러한 현상을 해결하기 위해 위 코드를 입력하면 HTML이 기기의 해상도를 인식하여 올바른 화면을 구성해줌
- 컨텐트의 속성값은 width, helght, initial-scale, minimum-scale, maximum-scale, user-scalable이 있지만 이 부분의 자세한 내용은 css에서 다시 할 예정
title 태그: HTML 문서의 제목을 지정
<title>Document</title>- 모든 HTML 문서에 1개의 title 태그를 사용하여 제목을 지정해야함
- 제목은 HTML 문서마다 중복되지 않는 것이 좋음(검색 엔진 사이트에서 사이트를 찾을 때 title 태그에 작성된 제목으로 찾는데, 중복된 제목을 발견하면 검색엔진이 해당 웹사이트는 신뢰성이 부족하다고 판별하여 검색 엔진 노출 시 불이익을 준다고 함)
body 태그: 웹 브라우저에 노출되는 내용을 작성하는 영역
3. HTML의 특징 파악하기
3-1. 블록 요소와 인라인 요소
- body 태그에 사용되는 태그 중 div 태그나 p 태그처럼 사용할 때마다 줄 바꿈이 되는 태그가 있는데 이러한 태그들을 블록 요소(block element) 라고한다
- 이와 반대로 a 태그나 span 태그 같이 공간이 부족할 때만 줄 바꿈이 되는 태그는 인라인 요소(inline element)라고 한다
3-2. 부모, 자식, 형제 관계
- 위의 HTML의 기본 구조를 보면 html 태그 안에 head 태그와 body 태그가 있는데 html은 head와 body의 부모가 되는 것이고 반대로 head와 body는 html의 자식이 되는 것이다
- head와 body는 같은 형제 관계과 된다
3-3. 줄 바꿈과 들여쓰기
- 코드의 가독성을 편리하게 하기위해 사용 하는 것
- 가독성이 불편하면 수정할 시에 불편함을 주고 부모, 자식 관계도 쉽게 알아 볼 수가 없음
프로그래밍 공부하는 찬우입니다👋