HTML, CSS, JAVASCRIPT에 관한 내용은 '이지스퍼블리싱' 출판사의 "Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석"이라는 책을 공부하고 요약 및 정리한 것입니다.
오늘날의 시대는 웹 브라우저만 있다면 어느 기기에서나 인터넷과 연결되는 사물 인터넷 시대라고 할 수 있습니다. 여기서 다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어가 바로 HTML이다. HTML은 Hyper Text Markup Language의 약자, 여기서 Hyper Text라는 것은 웹에서 자유롭게 오갈 수 있는 링크를 말하는데 쉽게 말해 인터넷에 링크만 클릭하면 다른 페이지나 웹 사이트로 연결할 수 있다는 의미이다. Markup이라는 것은 꼬리표(tag)라고 생각하면 된다. 꼬리표를 붙여주면 그 부분을 약속된 형태로 보여주게 되는 것. 요약하면 HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.
<h1>제목</h1>
<p>텍스트</p>
<table>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
<tr>
<td>내용3</td>
<td>내용4</td>
</tr>
</table>위의 예시처럼 제목은 <h1>이라는 꼬리표, 텍스트는 <p>라는 꼬리표, 표는 <table>이라는 꼬리표를 통해 구별해준다.
이제 HTML 문서의 기본 구조에 대해 더 자세히 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HTML 문서는 일반 문서와 달리 정해진 형식에 맞춰 내용을 입력해야 하는데, 웹 문서는 일반적으로 <!DOCTYPE html>로 시작하여 <html>, <head>, <body>라는 3개의 영역으로 이루어져 있다.
<!DOCTYPE html>의 의미는 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻이다. 4에서는 이것보다 더 복잡한 태그가 사용되었었는데 간단하게 한 줄로 바뀌었다. 반드시 첫 번째 줄에 작성되어야 한다.
<html> ~ </html>으로 쌓여 있는 단락은 웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시한다. </html>뒤에는 아무것도 오면 안된다. html 태그 안에 lang="ko"라는 것이 있는데 이는 이 웹 문서가 한글로 작성되어 있다는 뜻이다. ko를 넣어주면 검색 엔진에서 한글로 검색을 하거나 한국어로 된 문서를 찾는다든지 한다면 찾기가 쉬워진다.
<head> ~ </head>는 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다. <head>영역의 내용은 대부분 웹 브라우저 화면에는 보이지 않는다. 또한 문서에서 사용할 스타일 시트 파일도 이곳에서 연결해준다.
<head>에 들어가는 내용 중에 <meta>라는 태그가 있는데, 여기에는 문서 정보들이 들어가는데 그 중에서 캐릭터 세트라는 것이 있다. 이는 문자 세트인데 이때 charset는 utf-8이라고 지정해주어야 한다. utf-8은 화면에 한글을 보여주기 위한 문자 세트를 지정하는 부분이다. 원래 컴퓨터가 한글에 최적화되어 있는 기계가 아니기 때문에 한글을 화면에 보여주기 위해서는 utf-8로 문자 세트를 지정해줘야 한글 파일이 깨지지 않고 표시된다. 이외에도 다양한 문서 정보를 지정할 수 있는데 keywords를 통해 웹 문서의 키워드, description은 웹 문서의 설명, author은 웹 문서의 소유자나 제작자를 표현할 수 있다.
<head>에는 <title>이라는 태그를 통해 문서의 제목을 나타낼 수 있다. 문서 제목은 웹 브라우저를 보면 탭 부분에 들어가는 내용이다. <title>태그 안에다가 정확하게 웹 문서의 내용을 구별지어서 넣어야 한다. 웹 접근성 같은 경우 굉장히 중요하게 생각하는 부분인데, 화면 낭독기에서 그 문서로 구별짓는데 아주 중요한 역할을 하기 때문에 이 부분은 정확하게 넣어주는 것이 중요하다.
<body>태그는 실제 웹 브라우저에 내용을 표시한다. <body> ~ </body> 태그 안에 실제 웹 브라우저 화면에서 보여 주고 싶은 내용을 작성하면 된다.
※VS Code에서 html 파일을 만들고 확장자명을 .html로 해주고 !를 입력하면 편집기에서 알아서 기본적인 틀을 작성해준다. 위의 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 이 부분은 나중에 반응형 웹을 만들기 위한 소스 코드이니 지금은 알아만 두자.
'Front - End > Html' 카테고리의 다른 글
| HTML(3) (0) | 2023.06.30 |
|---|---|
| HTML(2) (0) | 2023.06.22 |
| 웹 개발에 들어가기 앞서... (0) | 2023.06.16 |