이 글은 드림코딩 HTML강의를 보고 정리한 글 입니다.
HTML 정의
- HTML은 브라우저에서 실행가능한 가장 기본적인 파일.
Markup language로, 태그들을 사용해 구조적으로 annotating 된 언어이다.- html 상위태그는
Head와Body로 나뉨.
HEAD
- 사용자에게 보여지는 UI적인 요소가 전혀 없는 부분
- 구글에서 검색할때 나오는 타이틀이나 부가설명, 북마크추가할때 나오는 제목이나 아이콘들이 정의됨
- css파일 주로 연결하는 파트
BODY
Body안에 작성한 내용이 유저한테 보여짐
HTML 기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--UTF-8은 현존하는 모든 언어를 지원함 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--device screen 너비를 다 사용한다고 정의한 것 -->
<title>Document</title>
<!-- 브라우저 검색, 북마크 추가시 보여지는 타이틀 -->
</head>
<body>
<h1>Hi</h1>
<h2>Bye</h2>
<button></button>
</body>
</html> 웹페이지는 박스로 구성되어 있다.
반드시 이런 구조를 가진 것은 아니지만 이런 박스 형식으로 구성되어 있다.
header
navigation bar
main content
sidebar
footer
숙제는 위키피디아 사이트를 박스로 나누어보는 것이다!
나는 처음에 너무 잘게 박스를 나누었는데, 너무 세세하게 나누면 브라우저 성능이 나빠진다고 한다.
영상에 나오는 디자인과 약간 다른 점이 있어서 영상 참고하여 내가 다시 나눠보았다.
HTML 공부할 때 유용한 사이트
- HTML elements reference: https://developer.mozilla.org/en-US/d...
- Document and website structure: https://developer.mozilla.org/en-US/d...
개발자로 성장하는 과정을 담아보자