반응형
이번에는 프론트엔드에서 사용하는 HTML에 대해 공부하고 정리한 내용을 올리려 합니다.
백엔드 개발자를 지망하지만 전체적인 흐름을 아는것이 중요하다 생각해 프론트엔드 공부도 같이 하고 있습니다.
HTML이란?
- Hyper Text Markup Language
- Hyper Text 는 하이퍼링크를 통해 현재 문서에서 다른 문서로 접근할 수 있는 텍스트라는 의미이다.
- Markup 은 (콘텐츠) 표시한다는 의미이다.
- Language 는 사람과 웹 브라우저 사이의 소통하는 언어라는 의미이다.
- 확장자로 *.html과 *htm을 사용한다.
HTML 활용 방법
- 파일 수정시 (텍스트 편집기로 열기) : 기본 메모장, Brackets, VSCode ...
- 결과 확인시 (웹 브라우저로 열기) : 크롬, 파이어폭스, 사파리, 익스플로러, 엣지 ...
쉽게 말해 HTML은 하이퍼텍스트와 콘텐츠를 표시해주는 언어라는 것이다!
개발자도구란?
- 웹사이트 개발용 도구이다.
- 최신 웹 브라우저에는 대부분 탑재되어 있다.
- 개발자의 편의 제공을 위한 것이다.
- 다양한 기능 : HTML과 CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 ...
개발자 도구 사용하는 법 (크롬 기준)
- 브라우저가 열려있는 상태에서 F12를 누르기
- 우측 상단 점 세개 >> 도구 더보기 >> 개발자도구 선택
위와 같이 개발자도구를 실행시키면
위와 같은 개발자도구를 볼 수 있다.
개발자도구의 역할
- 원하는 웹사이트의 HTML 코드를 확인가능하다.
- 내가 작성한 HTML코드도 기능 제공 받을 수 있다.
코드 에디터란?
- 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어이다.
- 코드는 결국 텍스트이므로 이 텍스트를 더 빠르고 편하게 작성하기 위해 사용한다.
텍스트 자동완성 기능과 하이라이팅 기능이 추가된 메모장이라고 생각하면 편하다!
HTML 태그 사용법
기본
- 태그는 < >와 </ >를 사용하여 콘텐츠의 시작과 끝을 표시한다.
- 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타낸다.
<태그명> 콘텐츠 </태그명> 으로 나타내게 된다.
단일태그
- 콘텐츠를 감쌀 필요가 없어 시작과 끝을 구분할 필요가 없는 태그이다.
<태그명/> OR <태그명> 으로 나타내게 된다.
속성
- 태그의 부가적인 기능을 정의하며 선택적 요소이다.
- 시작 태그 내부에 속성을 정의한다.
- 속성의 개수는 특별한 제한이 없다.
- 태그명과 속성 정의는 공백으로 구분하며 큰 따옴표를 사용한다.
<태그명 속성명 = "속성값"> 콘텐츠 </태그명> OR <태그명 속성명 = "속성값" />으로 나타내게 된다.
주석
- 사람에게는 인식되지만, 웹 브라우저에게 인식되지 않는 코드이다.
- 주로 코드에 대한 메모를 남기기 위한 용도로 사용한다.
- 형식이 다르지만 주석 또한 기호를 통해 시작과 끝을 구분한다.
- 총 7개의 기호로 나타낸다.
<!--주석내용--> (총 7개)으로 나타내게 된다.
HTML 문서의 구조
예시를 통해 보는 기본 구조
<!DOCTYPE html> = HTML 최신 표준 문법으로 작성된 문서
<html> = html 문서의 시작
<head> = head 태그의 시작, HTML의 태그, HTML에 대한 설정 및 정보가 담겨있음
<meta charset = "UTF-8"> = 문자 인코딩
<title> 문서의 제목 </title>
</head> = head 태그의 끝
<body> = body 태그의 시작, HTML의 태그, 실제로 표시될 정보들이 들어감
"실제로 웹페이지에 표시할 내용"
</body> = body 태그의 끝
</html> = html 문서의 끝
!DOCTYPE html
- 문서의 첫 부분에서 문서 유형을 지정하는 단일태그이다.
- 문서 유형은 브라우저에게 문서의 종류를 알려주는 메세지 같은 역할이다.
- HTML은 여러 버전 변경을 거쳐 현재에 이르렀는데 현재 표준으로 사용하고 있는 버전이 html 이다.
html ~ /html
- 문서 유형 지정 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.
- 이 사이에 다양한 태그들이 포함되어 문서의 내용을 구성한다.
head ~ /head
- 웹브라우저 화면에는 표시가 되지 않는다.
- 웹 브라우저가 알아야할 정보들이 담겨있다.
meta charset="utf-8"
- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다.
- utf-8은 영문과 한글 모두 사용하기 위해 입력한다.
문자 인코딩이란?
한글을 표시하기 위한 문자 세트 지정 작업을 말한다!
body ~ /body
- 실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.
주로 입력되는 태그
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스 (버튼, 입력란, 드롭다운 메뉴 ...)을 나타내는 태그
태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할수 있다!
다음편에서는 다양한 태그와 그 활용법에 대해 포스팅 해보려고 합니다.
반응형
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
|---|---|
| HTML 기초 5편 - 전역 속성 (0) | 2023.07.08 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
| HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그 (0) | 2023.07.06 |
| HTML 기초 2편 - 텍스트 태그 (0) | 2023.07.03 |
