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

Content

1

2

3

4

1

Text

2

3

BOX-MODEL

<div class="box_1"></div>

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

이 박스의 넓이는?

<span class="box_2"></span>

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

이 박스의 넓이는?

?

display 속성

Block Level

<div>block</div>

Inline Level

<span>inline</span>

block

inline

block

block

inline

inline

inline

h1~6 / p / div / ul / li

span / a / strong / em  / img

inline-block 속성

- 컨텐츠 영역만큼

- width, height

- margin

Made with Slides.com