html 문서 기본 구조 세우기
HTML 문서
기본 구조 세우기
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>HTML문서의 기본구조</title> </head> <body> </body> </html> | cs |
1.<!DOCTYPE html>
이 문서는 최신 HTML언어로 작성될 문서라는 것을 선언해주는 코드입니다. 가장 위에 작성합니다.
2.<html lang="ko">
HTML 설정 전체를 마크업 하는 코드이고, 속성으로는 한국어로 설정하였습니다.
3.<head>
웹페이지의 특성에 대해 작성합니다. 실제로 브라우저에서는 표시되지 않지만, 웹페이지의 특성을 설정할 수 있습니다. 사람으로 치면 소속, 이름등과 같다고 볼 수 있습니다.
4.<meta charset="UTF-8">
HTML 파일의 인코딩의 종류를 설정하는 코드입니다.
5.<meta name="viewport">
스마트폰이나 태블릿과 같은 디바이스에서 페이지를 출력할수 있게 해주는 코드입니다. 저는 반응형 웹페이지 만드는것을 목표로 하기에 꼭 사용해야하는 코드입니다
6.<link rel="stylesheet">
html 문서내에 css를 작성하는 것이 아닌 파일을 따로 두어 작성하고, 그 파일과 html문서를 연결해주는 역할을 합니다.
7.<title>
페이지의 이름을 설정합니다.
8.<body>
실제 브라우저 화면에 표시되는 공간입니다. 즉 이곳을 통해 웹페이지의 구조를 설계할 수 있습니다.
결과
▲ <head>에 작성된 내용 중 실제로 브라우저에서 확인할 수 있는것은 <title> 태그뿐이다. 상단 탭에서 내가 만든 페이지의 제목을 확인할 수 있습니다. 앞으로 <body> 태그 내에 내용을 작성하면 브라우저에서 보이는 웹페이지가 변하는 것을 확인할 수 있습니다.