BEGIN CSS

Remind

data

HTML (마크업)

<div>

</div>

초코 마카롱 만들기

태그 시작~

~태그 끝

컨텐츠

Tag 이름

HTML (마크업)

대표 태그

<h1> ~ <h6>
<p>
<br>
<a>
<img>
<strong> / <em>
<ul> / <li>
<button>
<div>
<span>

HTML (마크업)

<h1>초코 마카롱 만들기</h1>
<p>"초코마카롱 레시피 입니다."</p>

<h2>재료</h2>
<ul>
    <li>계란 흰자 65g</li>
    <li>설탕 20g</li>
    <li>슈가파우더 105g</li>
    <li>아몬드가루 65g</li>
    <li>코코아가루 5g</li>
</ul>

HTML (마크업)

HTML (마크업) + CSS

<img> 태그

추가

<img >

속성 & 값

img 태그

src="이미지 경로"

alt="이미지 이름"

CSS 는요!

HTML

CSS

개발자 도구

(= inspecter)

User Agent Sheet

CSS Reset

Header

Footer

Content

Text

BOX-MODEL

.box_1 {
    width: 100px;
    height: 100px;
    border: 10px solid steelblue;
}

이 박스의 넓이는?

.box_2 {
    width: 100px;
    height: 100px;
    border: 10px solid steelblue;
}

이 박스의 넓이는?

display 속성

Block Level

<div>block</div>

Inline Level

<span>inline</span>

block

inline

block

inline

h1~6 / p / div / ul / li

span / a / strong / em / img

inline-block 속성

- 컨텐츠 영역만큼

- width, height

- margin