안녕하세요 MIN입니다. 오늘은 HTML의 구조에 대해 알아보려고 합니다.
오늘은 HTML의 구조에 대해 알아보겠습니다.
구조를 말씀드리기 전에 HTML은 우리가 컴퓨터에 폴더를 만들어 파일을 저장하듯이 브라우저에 폴더가 있다고 생각하지면 조금 더 쉽게 이해하실 수 있으실 거예요.
우리가 퍼블리싱을 할때 보면
<!DOCTYPE html>이렇게 시작되는것을 보았을거에요.
예전에는 doctype 은 HTML페이지의 오류검사등 HTML을 의미하였는데 요즘은 잘 신경쓰지 않고 문서형식이라는 정도만 기억하시면 됩니다.
<html lang="ko"></html>html의 모든 콘텐츠를 표하기 위해 기본적으로 사용 하는 태그입니다. html태그 안에는 head와 body를 품고있어야 합니다.
그리고 html은 lang라고 언어 식별값을 넣어주셔야 합니다. 우리나라에서 사용할때는 ko를 사용하시면 됩니다. 추후 접근성을 작업할실때 필수로 아셔야 하는 속성입니다.
<head>
<title>페이지 제목</title>
<meta charset="utf-8">
</head>여러분들이 제일 중요하게 생각해야 되는 영역인 head영역입니다.
여기에는 여러분들이 사용할 CSS,JS, META태그, 키워드, TITLE등 페이지에 대한 다양한 정보들을 정의해 주는 영역입니다.
그중에서 제일 중요한 2가지를 알아볼께요.
제가 위에 코드에 적은 title태그는 페이지의 이름을 뜻하며 우리가 검색을 했을때 나오는 제목 부분에 해당합니다.
우리가 브라우저 탭에 적힌 페이지의 이름을 title태그에서 정합니다.
그리고 meta charset은 HTML의 인코딩 설정을 정의하는 것인데 깊이 들어가게 되면 오히려 복잡하여 개인적으로 한번 자세히 검색하여 정보를 습득 해보시는걸 추천드려요. 예시코드에 적힌 utf-8은 전세계에서 사용되는 언어에 대부분 포함이 되어 있어 특정한 상황이 아니면 utf-8로 사용하시면 될거에요. 사이트를 제작 하였는데 글자들이 전부 이상한 글자로 표현이 된다고 하면 charset의 값을 수정하시면 됩니다.
<body></body>이제 우리가 표현하는 모든 콘텐츠의 내용을 적는 body태그에요
위에 head는 페이지의 정보가 적혀있다면 body는 페이지의 콘텐츠를 적는 영역으로 퍼블리싱 할때 제일 많은 작업영역을 담당하는 부분입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테스트</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
위에 코드가 HTML의 구조의 기본이에요.
코드편집기에서 위의 코드를 적으시면 흰배경에 Hello World라는 글자가 출력 될꺼에요.
아 저는 코드편집기는 VSCode를 사용합니다. 무료이며 편집기도 가벼워서 좋아요.
이제 구조에 대해 알아봤으니 다음시간에는 태그들에 대해 알아볼께요.
'HTML·CSS' 카테고리의 다른 글
| 같이 공부하며 배우는 : 선택자?? (0) | 2023.02.20 |
|---|---|
| 같이 공부하며 배우는 : Display 요소 (0) | 2023.01.24 |
| 같이 공부하며 배우는 : CSS이란? (0) | 2023.01.24 |
| 같이 공부하며 배우는 : HTML 원리 (0) | 2023.01.15 |
