엘리님의 드림코딩에서 배운 내용들을 다시 한 번 정리해본다. HTML과 CSS에서 놓치기 쉬운 부분들을 복습해보자.
HTML의 기본구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<head>
<body>
<h1>Heading1</h1>
<h2>Heading2</h1>
<button>Click Me!</button>
</body>
</html>HTML은 브라우저에서 실행가능한 가장 기본적인 파일이고 markup 언어로, 구조적으로 tag를 이용해서 보여진다. HTML 상위tag 안에는 총 두 가지 head와 body 파트가 있는 데 head에는 상세설명이 들어가고 body에는 사용자에게 보여지는 tag들로 이루어져있다.
기본적인 주석 표시는 다음과 같다.
<!-- 주석입니다. -->Website Structure
좋은 웹사이트를 개발하려면 전체적인 구조를 box로 나눠서 바라보는 연습을 해야한다. 웹사이트는 커다란 box로 구성되어 있고 그 안에서도 여러 작은 box들로 구성되어져 있다. 웹사이트를 바라볼 때 작은 단위로 나눌 수 있어야 css 스타일링을 할 때 조금 더 구조적으로 만들 수 있다. 나중에 React를 다룰 때도 가장 작은 단위로 쪼개어서 작은 단위부터 구현하는 연습을 하는 것이 굉장히 중요하다.
BOX vs ITEM
태그는 크게 두 분류로 나눌 수 있다.
box는 섹션을 나누는 태그를 말한다. item은 사용자에게 보여지는 태그이다.
HTML Element Reference
<h1>~<h6>콘텐츠의 중요도 차이를 줄 수 있다. (폰트 크기)<p>paragraph<b>bold<u>underline<strong>강조(bold)<i>italic<em>강조(italic)<ol>ordered list<ul>unordered list<li>list<div>generic container : new line (block level)<span>generic container : same lind (inline container)
