HTML 1. 구조 분석

Kanon·2021년 9월 11일

HTML 큰 그림 이해하기

목록 보기

1/2

오늘은 처음 벨로그에 글을 올려보고 드림코딩 강의의 첫 스타트인 날이다!
2달 안에 팀프로젝트를 하기로 했기 때문에 발에 🔥붙은 것 처럼 자스 강의를 CLEAR 해야한다!!
하지만 그전에 HTML 강의도 들어야 될까싶어서 같이 듣고 강의 내용을 정리할 것이다.

HTML 1. 구조 분석

✍html 이란?

HTML은 브라우저에서 실행가능한 가장 기본적인 파일.
HTML은 마크업 언어로 구조적으로 태그들을 이용하여 보여진다.

✍html의 구조?

html5는 크게 <html>이라는 큰 틀 안에
<head></head>
<body></body>
로 나뉘어 진다.

head부분은 표면상에 보이지 않는 상세한 부분. css파일을 불러올 수 있다.
body부분은 표면상의 부분. 사용자에게 보여지는 태그들로 이루어져 있다.

✍head의 구조

그럼 head부분 안에 태그를 자세히 살펴 보도록하자.
헤드 안에 웹페이지에 표시되는 메타정보가 들어간다. 이를 토대로 봐보자.

<meta charset="utf-8">: 현재 지원하는 글자의 포맷이 "utf-8"이며
이 utf-8은 현존하는 모든사람이 쓰는 언어를 지원해준다.

<meta name="viewport" content="width=device-width">:
viewport에 대한 정의로 width=device-width는 이 디바이스의 스크린의 너비를 다 사용한다고 정의하는것.
(외울필요❌)

<title>JS Bin</title>: 브라우저를 검색하거나 북마크를 추가할 때 보여지는 타이틀을 의미.

✍body의 구조

이어서 오늘 배운 body부분에 있는 태그를 알아보자.

1.h1부터 h6을 이용해서 제목을 표현할 수 있다

⌨ 입력

<h1> 첫 번째 수준 제목 (h1) </h1>
<h2> 두 번째 수준 제목 (h2) </h2>
<h3> 세 번째 수준 제목 (h3) </h3>
<h4> 네 번째 수준 제목 (h4) </h4>
<h5> 다섯 번째 수준 제목 (h5) </h5>
<h6> 여섯 번째 수준 제목 (h6) </h6>

💻 출력

첫 번째 수준 제목 (h1)

두 번째 수준 제목 (h2)

세 번째 수준 제목 (h3)

네 번째 수준 제목 (h4)

다섯 번째 수준 제목 (h5)

여섯 번째 수준 제목 (h6)

2.<button>태그

⌨ 입력

<button>버튼</button>

💻 출력

이렇게 클릭할 수 있는 버튼을 생성하는 태그이다.

📌MDN : 모질라에서 추진해서 만든 웹사이트.
전세계의 개발자들이 정보를 확인하는 곳. 빨리 업데이트됨.
정보와 예제를 통해 배울 수 있음! [구글에 mdn html을 통해 검색 가능]
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

저 사이트에서 HTML elements reference에 들어가면 현재 쓰여지는 태그들에 대해 설명이 되어있다.

몇가지 부분을 살펴봐보자!

Main root 부분은 최상위요소. 즉, 부모 노드이다.

그 밑에 오는 메타데이터 관련된 정보들은

<base>,<head>,<link>,<meta>,<style>,<title>이 있다는 것을 알 수 있다.

사용자에게 보여지는 태그는 body태그임을 알 수 있다.

body 안에 들어가는 태그이다.

이 외의 태그들에 대해서 다음시간에 이어서 학습할 것임! 지금 당장 쓰지 않아도 유용한 태그가 많으니 다음에 참고해도 좋을 것 같다.

만약 video 태그를 클릭하였다 하면

그 video 태그는 무엇이고 어떻게 써야하는지 알려준다.
또한 속성값에는 무엇이 있는지 대체적으로 예제가 잘 나와있다

태그와 함께 쓸 수 있는 속성(Attributes)들도 설명이 잘 되어있다.

발생하는 이벤트

예제

브라우저 호환가능성!
⭐제일중요함⭐

video와 autoplay의 경우 모든 브라우저에서 지원 가능한 것을 확인할 수 있는 반면
intrinsicsize의 경우 ❌표시가 되어있으므로 지원되지 않는 것을 알 수 있다. (update가 될수 있음. 강의 화면에는 몇몇만 지원안됬는데 현재는 다 안되는거같음.)
아무 태그나 쓰는게 아니라 이 태그가 모든 브라우저에서 지원되는지 확인하면서 태그를 사용하여야한다!

뒤로 돌아가면(HTML elements)더이상 지원하지 않고 쓰면 안되는 태그도 자세히 나와있다. [사용❌ 주의]

📌mdn 라스트에 없는 태그를 사용하게 된다면?

<randomRandom>Click Me!</randomRandom>
에서 <randomRandom>은 유효하지 않는 태그이다.
하지만 브라우저 특성상 에러가 나서 원하는데로 보여지지 않을지어도
회복하는 성질이 있기 때문에 태그안에 있는 content는 보여진다.
따라서 Click Me!는 보여지는것.

유효한 코드인지 아니인지 알 수 있는 사이트를 소개해보려 한다.
https://validator.w3.org/

원래 뜨는 화면에서 Validate by direct input 탭에 들어가면
코드를 칠 수 있는 곳이 나오는데 여기서 코드를 입력하고 Check를 누르면 된다.

시도해보자.

이와 같이 나오는 것을 알 수 있다.

우선 Warning 은 에러는 아니다. lang이라는 것을 html 시작부분에 넣으라는 것으로 html에서 사용하고 있는 언어를 표기해주면된다.

다음으로 Error는 randomrandom이라는 태그를 body안에 쓸 수 없다는 것을 의미한다.이는 수정해야하며 옳지 않은 태그임을 알 수 있다.
이렇게 오류를 확인하고 싶은 경우에는 validator 웹사이트에서 체크를 해보면된다!
이는 코드뿐만 아니라 URI나 File 형태로도 검사가 가능하다.

mdn에서는
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
이와 같이 문서나 웹사이트에 구조에 대한 정보도 제공하고 있다.

여기 보면 Document body안에도 어느정도 구조를 나눠서 작성해야된다라고 나와있는데
이는 크게 header, navigation bar, main content, sidebar, footer로 나뉘어 지는 것을 확인 할 수 있다!(✨무조건 이렇게 해야한다는 건 아니고 이런식으로 나누면 된다라고 작성되어있는것임✨)

예시에서 확인하여 보자면
위에 메뉴부분이 Header
Article heading이라는 컨텐츠박스가 main content
Related 부분이 sidebar
맨 밑에 ©Copyright 부분이 footer인 것을 알 수 있다.

이런식으로 body에 모든 태그를 넣는 것이 아니라
header는 header대로 main content는 main content대로 구획을 정하여
어떻게 나눌 수 있을지 생각해보는 태도가 필요하다!

어떻게 구획을 나눌수 있을지에 대한 설명은 위 🔗링크에 있으니 나중에 자세히 읽어보기!(예제,웹페이지 기획할 때 어떻게 내용을 구상할 수 있을지에 대해서도 자세하게 나와있음)

📦BOX에 초점을 맞춰보자!

웹사이트를 개발하기 위해서는 웹사이트를 보자마자 눈에서 박스가 그려져야 한다!

네이버 웹사이트를 예시로 들어보자! 😆

위 이미지를 보면 body로 크게 이루어져 있는데 body에서도 각 구획이 나눠진다.
위에서 부터 banner(웨일), header, main, sidebar(오른쪽) 으로 나뉘는 것을 알 수 있다.
또한 header안에서도 시작페이지를 설정하는 부분, 네이버로고와 서치바가 있는 부분, 네비게이션 바가 있는 부분 으로 나뉠 수 있으며
다른 파트도 마찬가지이다.