HTML 한 페이지에 정리하기

요즘 드림코딩의 엘리님이 하시는 프론트엔드 강의를 듣고 있다.

이제 막 강의 2개를 들어서 강의를 들으며 정리한 것들을 여기에 써놓으려고 한다.

HTML (Hypertext Markup Language)

정의

웹을 이루는 가장 기본적인 building block
- css와 javascript는 웹을 더 풍부하게 만들어주는 부가적인 요소들
Markup Language
- 태그들을 이용해 어느정도 구조적으로 쓰는 것

구조

<!DOCTYPE html> // 관습적으로 html임을 알림
<html>
	<head>  // 사용자에게 보여지는 요소 X, 메타 데이터만 있음
		<meta charset="utf-8"> // 페이지에서 쓰여질 글자 포맷을 얘기함 (utf-8은 모든 언어를 지원함)
		<meta name = "viewport" content = "width=device-width">
		<title>JS Bin</title>
	</head>

	<body>
		// 이 안에 작성되는 것들이 유저에게 보여짐
		<h1>Heading1</h1>
		<h2>Heading2</h2>
		<button>Clickable Button</button>
	</body>
</html>

w3c
- 웹의 표준화를 추진하는 곳
- w3c에서 정한 표준화에 따라 각 브라우저가 html 태그를 해석함
브라우저는 어느 정도 스스로 에러를 회복해서 콘텐츠를 보여줌
- 즉, 태그가 틀려도 그 안에 들어있는 콘텐츠를 보여줌
- validator.w3.org 를 통해 오류를 체크할 수 있음
header / navigation / sidebar / main content / footer 로 웹사이트를 구조화하는 것이 좋음

더 자세한 것은 아래에서 공부

Document and website structure

At this point you should have a better idea about how to structure a web page/site. In the last article of this module, we'll study how to debug HTML.

developer.mozilla.org

각종 태그들은 mdn 사이트에서 체크하고 공부할 수 있음

mdn 사이트

MDN Web Docs

MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문

developer.mozilla.org

박스 모델

React와 같은 framework를 쓸 때 가장 작은 단위로 나눠서 생각해야 performance가 더 좋아짐
비슷한 요소끼리 묶어서 저장하면 나중에 이해하기가 쉽다.
태그는 박스가 되는 것 & 아이템이 되는 것 -> 2가지로 나뉨
- 박스가 되는 것: 보이지 않음
- 아이템이 되는 것: 보임

박스가 되는 것

header
footer
nav
aside
main
section
article
div - 아무렇게나 쓸 수 있음 (묶고 싶을 때 div를 이용해 묶음)
- block level
span
- inline level
form

아이템이 되는 것

a - anker (링크를 걸 수 있음)
- <a href = "링크" target = _blank>Click</a>
- href = hyper reference
- target = 페이지를 어떻게 열 것인지
button
input
label
img
video
audio
map
canvas
table

--> Block과 inline으로 나누어질 수 있다.

ol
- ordered list
- 간단하게 ol > li * 3으로 하면 list가 자동으로 3개가 형성되어서 나온다.
ul
- unordered list
- ol과 마찬가지로 ul > li * 3으로 리스트를 자동으로 만들 수 있다.
li
- list item
input
- 보통 <label> 과 같이 사용한다
  - label로 정확히 어떤 값을 받고 싶은지 알려줌
- label 과 input 모두 inline element이다.
- 여러 input이 있을 수 있기 때문에 id를 주는 것이 좋다.

저작자표시 (새창열림)

'Study Log > Software Engineering' 카테고리의 다른 글

Ruby on Rails 공부하기_wsl2 환경 설정하기 (1) (0)	2021.08.20
CSS 정리하기 (0)	2020.09.21
데이그램 따라하기 - 4. Realm DB (0)	2020.08.19
데이그램 따라하기 - 3. 커스텀 리스너 인터페이스 (0)	2020.08.19
데이그램 따라하기 - 2. RecyclerView 다루기 (0)	2020.08.09

HZie's DevLog

HTML 한 페이지에 정리하기

HTML (Hypertext Markup Language)

정의