2022. 2. 6. 19:21ㆍFront-end/HTML&CSS
HTML(Hypertext Markup Language)은 웹 페이지의 구조를 지정하는 웹 페이지를 만들기 위한 언어로 웹 브라우저 위에서 동작하는 언어다.
HTML5는 웹 상에서 콘텐츠(content)를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.
HTML5는 HTML 4.01, XHTML 1.1 등을 대체하는 HTML의 차세대 표준이다.
아무튼 현재 사용하는 HTML 문서는 모두 HTML5 라고 보자. (2022년 기준)
HTML 문서는 요소(element)로 구조화한 일반 텍스트 문서다. 요소는 한 쌍의 태그로 열고 닫으며, 각각의 태그는 부등호(<>)로 감싸서 사용한다. <img>처럼 텍스트를 감싸지 못하는 태그도 있다.
HTML은 보통 (파일이름).html 확장자로 저장해 웹 서버로 제공하며, 아무 브라우저로 렌더링할 수 있다.
HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성되며 기본 구조는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<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>
<h1>Hello HTML!</h1>
</body>
</html>HTML 문서를 작성하려면 문서 타입이라는 것이 필요하다. (위 구조 최상단에 위치한 <!DOCTYPE html>)
문서 타입을 DTD(DOCTYPE or Document type Definition)라고 하며 HTML 문서의 최상단에 위치해야 한다.
- DTD 정의를 생략하는 경우 웹 브라우저가 표준 모드가 아니라 쿼크 모드로 렌더링 되어 크로스 브라우징에 어려움을 겪을 수 있다.
*크로스 브라우징 - 최대한 많은 종류의 웹 브라우저에서 정상적으로 작동하는 웹 페이지를 만드는 방법론
<!DOCTYPE html> 은 태그가 아니라 선언문으로서의 역할이기 때문에 HTML 문서 최상단에 위치하며 종료하는 태그가 없고 HTML 문서의 구성 요소는 아니다.
그리고 <html> 태그가 오고 <html> 태그 안에는 <head>와 <body>로 나뉘어져 있다.
<html> 태그의 속성으로 문서에서 다룰 언어를 지정해야 한다. "en"은 영어고 한국어는 <html lang="ko">
<head> 태그는 콘텐츠를 표현하고 꾸미거나 기능을 넣어주기 위한 내용(CSS, JavaScript 등)들을 포함한다.
<meta> 태그는 문서를 설명하는 정보로 브라우저와 검색엔진에게 이 웹 페이지가 어떤 정보를 가지고 있는지 알려준다.
문서 자체를 설명하는 정보를 담고 있는 것으로 그 문서의 핵심 키워드나 언어 설정 등의 정보를 담고 있는 태그다.
<title> 태그는 문서의 정보를 브라우저에 표시하는 태그다. (브라우저 탭에 표시되는 타이틀 텍스트)
<body> 태그는 문서의 본문 영역으로 웹 페이지의 본 내용이다.
우리가 보는 웹 페이지의 모습은 <body> 태그 안에 있는 내용을 웹 브라우저가 해석하여 표현해 주고 있는 것이다.
HTML 학습하기
https://opentutorials.org/course/3084
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
opentutorials.org
https://developer.mozilla.org/ko/docs/Learn/HTML
HTML - Web 개발 학습하기 | MDN
웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 HTML에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지
developer.mozilla.org
https://github.com/techhtml/html-best-practices
GitHub - techhtml/html-best-practices: For writing maintainable and scalable HTML documents
For writing maintainable and scalable HTML documents - GitHub - techhtml/html-best-practices: For writing maintainable and scalable HTML documents
github.com
https://github.com/kwakhyun/front-end-practice/tree/main/html
GitHub - kwakhyun/front-end-practice: HTML/CSS, JavaScript, Data structure, Algorithm, Problems
HTML/CSS, JavaScript, Data structure, Algorithm, Problems - GitHub - kwakhyun/front-end-practice: HTML/CSS, JavaScript, Data structure, Algorithm, Problems
github.com
'Front-end > HTML&CSS' 카테고리의 다른 글
| 반응형 웹을 위한 CSS @media (0) | 2022.02.20 |
|---|