1. HTML이란
Hypertext Markup Language의 약자로 사용자가 인터넷에서 클릭을 통해 자유롭게 이동하면서 해당 정보를 확인할 때 보는 웹 문서입니다. 대부분의 사용자들은 웹 사이트에 접속하여 정보를 얻는데, 이때 눈으로 보면서 얻는 정보의 형태는 대부분 HTML 언어로 작성되어 있습니다.
2. 웹 표준
초창기 인터넷은 텍스트 정보, 간단한 이미지로 구성되었지만 사용자가 점점 늘며 더 많은 정보를 표현하게 되었습니다. 따라서 실용적인 태그와 다양한 브라우저를 이용한 접속에 대한 보편화된 웹 표준 정의가 필요하게 되었습니다.
웹 표준은 HTML4를 거쳐 현재 HTML5까지 발전했습니다. HTML5의 기본 목표는 모든 웹 표준을 지향하는 브라우저에서 웹 페이지가 동일하게 보이는 것으로 합니다.
문서를 웹 표준으로 제작하기 위해선 HTML5를 이해해야 합니다. HTML5는 HTML 태그로 구성되어 있고 CSS3를 통해 다양한 레이아웃을 만들 수 있습니다.
3. HTML 문서의 기본 구조와 문법
HTML 문서에서 활용되는 태그는 문서의 구조가 어떤 부분인지를 나타내며, 태그를 작성할 경우 정해진 명령어를 <>로 묶어서 표현합니다.
HTML 문서 안에는 기본적으로 작성하고 시작해야 하는 구조가 있습니다. 코드를 사용할 땐 시작과 끝을 반드시 표기해야 합니다.
1) <!DOCTYPE html>
현재 웹 페이지가 HTML5로 작성되었다는 뜻입니다. <html> 태그보다 먼저 사용하는 것은, HTML 형식을 사용한다는 '문서 유형'에 대한 설명입니다.
2) <html> ~ </html>
HTML 문서의 시작과 끝을 알리며 HTML 문서 전체를 의미합니다.
사진에 나와있는 <html lang="ko">는 <html>에서 lang 속성을 사용하여 문서에서 사용할 언어를 지정함을 뜻합니다.
lang는 휴먼랭귀지로 language의 약자입니다. 우리나라는 korean의 약자 ko를 사용하고 이때 '웹 문서 콘텐츠는 한국어로 되어있다'라는 뜻입니다.
| lang=" ~ " | |
| 한국(korean) | ko |
| 영어(english) | en |
| 일본(japan) | ja |
| 중국(china) | zh |
3) <head> ~ </head>
head는 브라우저에 정보를 주는 태그입니다. 직접 표시되는 랜더 내용이 아닌, 화면 랜더를 위한 정보를 세팅하는 공간입니다. 쉽게 말해 문서의 두뇌 역할이라고 생각하면 좋습니다. 디자인을 담당하는 CSS파일, 소스가 표시되고 동적인 요소를 구현하기 위한 스크립트 파일이 위치하는 곳이기도 합니다. 그 외 웹 폰트 관련 소스, 문서 전체를 지휘하는 태그입니다.
<meta> 태그로는 화면에 글자를 표시하는 문자 인코딩 방법을 비롯해 웹 페이지 키워드 등을 지정할 수 있습니다. 화면처럼 언어 캐릭터셋을 지정할 수 있습니다. 'utf-8'은 유니코드를 위한 가변 길이 문자 인코딩 방식 중 하나로 HTML5의 웹 표준화와 맞물려 한글, 영문을 비롯해 모든 언어를 표시할 수 있습니다.
'euc-kr'은 한글과 한국에서 통용되는 한자와 영문을 표현할 수 있습니다. 그러나 일본식 한자, 중국어 간체 등은 표현할 수 없어 HTML5에서는 utf-8의 사용을 권장합니다.
<head> 태그 안에서 <title> ~ </title> 태그로 문서의 제목을 지정할 수 있습니다. 문서를 열었을 때, 탭에 표시되는 제목입니다.
4) <body> ~ </body>
모든 본문 내용을 표시하는 공간입니다. 웹 페이지에서 보여줘야 하는 것들을 표시합니다.
<body>와 </body> 사이에서 작성된 내용들은 웹 페이지 상으로 랜더링되는 영역입니다.
4. HTML 유효성 검사기
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
W3C의 HTML 유효성 검사기로, 웹 문서의 Markup 유효성을 검사해줍니다. URL 입력, 파일 업로드, 직접 입력의 3가지 방법으로 검사를 진행할 수 있습니다. 문제점이 발생하면 에러 부분을 확인할 수 있습니다.
5. HTML 주석 작성
주석이란, 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문입니다. 이러한 주석은 다른 HTML 코드와는 달리 웹 브라우저에 표시되지 않습니다.
HTML에서 주석을 표현하는 방법은 <!-- 주석내용 --> 입니다.
HTML 주석 단축키
- Visula Studio
- Ctrl + K + C 주석 지정
- Ctrl + K + U 주석 해제
- Visual Studio Code
- Ctrl + / 한줄 주석 처리, 해제
- Ctrl + K + C 주석 지정
- Ctrl + K + U 주석 해제
- Eclipse
- Ctrl + Shift + / 블록을 주석 처리, 해제
- Ctrl + / 한줄 주석 처리, 해제
+ CSS 주석 단축키
CSS에서는 주석 작성법이 조금 다른데, 다음과 같습니다.
/* 주석 내용 */
6. HTML 요소의 타입 (block과 inline)
HTML의 모든 요소는 해당 요소가 웹 페이지에 어떻게 보이는가를 결정하는 display 속성을 가집니다. 이러한 display 속성값으로 두 가지가 있습니다. block과 inline 값입니다.
- block element(블록 요소)
- 하나의 태그가 브라우저에서 새로운 라인에서 시작하며, 해당 라인의 좌우 공간을 모두 차지합니다. 한 라인이 독립적인 덩어리 같은 요소입니다.
- width, height로 크기를 지정할 수 있습니다. 또한, padding, margin으로 상하좌우 여백을 지정할 수 있습니다.
- 여러 개의 블록 요소들이 있을 때 아래로 나열됩니다. (사진 참고)
- div, h1~h6, p 등의 태그가 속합니다.
- 참고: {width: 100%; heigh: auto}와 같은 css 속성을 기본으로 가진다고 생각하면 됩니다.
- inline element(인라인 요소)
- 하나의 태그가 새로운 라인에서 시작하지 않으며, 브라우저에서 해당 HTML 요소의 내용 영역만 차지합니다. 따라서, 좌우로 다른 태그가 나란히 위치할 수 있는 요소입니다. 행 안의 일부분으로 보면 됩니다.
- width, height로 크기를 지정할 수 없습니다. padding, margin으로 좌우에만 여백을 지정할 수 있습니다. (상하 여백은 불가능)
- 여러 개의 인라인 요소들이 있을 때, 옆으로 나열됩니다. (사진 참고)
- span, img 등의 태그가 속합니다.
- 참고: {width: auto; height: auto}와 같은 css 속성을 기본값으로 가진다고 생각하면 됩니다.
'HTML, CSS' 카테고리의 다른 글
| [HTML] 링크 태그 - <a>와 href 속성 (2) | 2024.01.21 |
|---|---|
| [HTML] 이미지 태그 - <img>, 경로, <figure>, <figcaption> (0) | 2024.01.20 |
| [HTML] inline 요소 텍스트 (0) | 2024.01.20 |
| [HTML] block 요소 텍스트(2) - <blockquote>, <pre>, <address> + Entity(엔티티) (0) | 2024.01.19 |
| [HTML] block 요소 텍스트(1) - <h#>, <p>, <br>, <hr> (2) | 2024.01.18 |
