2019-04-18

Study / HTML-CSS

3분 read (About 410 words)

box-sizing

box-sizing과 box model

box의 크기를 어떤 기준으로 계산 할 것인가?

HTML은 Box로 이루어져 있으며 문서의 레이아웃을 계산 할 때 박스 모델에 따라 박스의 사이즈가 달라지게 됨

box의 크기는 어떤 요소들로 이루어 지는가?

box의 크기에 영향을 주는 요소는 box의 width, height, border, padding, margin이 됨

각 요소의 값이 동일 할 때 box의 크기는 달라지는가?

1 2	<div class="div content">content-box</div> <div class="div border">border-box</div>

2019-04-16

fast campus / HTML-CSS

몇 초 read (About 41 words)

2019-04-16 TIL

picture

<picture> 내에 <img>를 사용하는 것은 필수

<div class="rwd-wrapper">
    <picture>
        <source srcset="images/image-1x.png 1x, images/image-2x.png 2x"       
    </picture>
</div>

2019-04-15

fast campus / HTML-CSS

1분 read (About 145 words)

2019-04-15 TIL

img

마크업

내 마크업

div.footer-bg
    footer.footer
        a
            img
        
        ul.footer-menu
            li
        div.copyright
            p
                a
            p
        div.badge
            img.badge-html
            img.badge-css

2019-04-12

fast campus / HTML-CSS

2분 read (About 225 words)

2019-04-12 TIL

2019-04-11 TIL

새소식

마크업

내 마크업

section.news
    h2.news-header
    a.news-link
        article.news-item        
            h3.news-item-subject
            time
            p.news-item-brief                
                span
                img                
    a.news-more

강사님 마크업

section.news
    h2.news-heading
    article.news-item
        h3.news-item-subject
        time.news-item-date
        p.news-item-brief
        figure.news-item-thumbnail
            img
            figcaption
    a.news-more

2019-04-09

fast campus / HTML-CSS

몇 초 read (About 67 words)

2019-04-09 TIL

time

datetime 필요
time[datetime=”2019-04-09T11:18:27”]

2019-04-08

fast campus / HTML-CSS

1분 read (About 125 words)

2019-04-08 TIL

시멘틱 마크업

article.term
    h2.term-head
    div.term-body
        h3.term-title
        img.term-img        
        span.term-content


section.term
    h2.section-heading{웹 관련 용어}
    dl.term_list
        div
            dt.term-list-subject
                a
            dl.term-list-thumbnail
                img
            dd.term-list-brief
                text

2019-04-05

fast campus / HTML-CSS

1분 read (About 191 words)

2019-04-05 TIL

form

상호작용
필수 요소로 action을 가짐(주소)

fieldset : 연관성 있는 서식의 묶음

legend : fieldset의 목적

label : 입력서식에 대한 표시, 모든 입력서식은 label을 가져야 함

암묵적 label : label 안에 input을 넣는 방법
명시적 label ; label에 for를 이용하여 input의 id를 입력

required

논리속성
submit의 action으로 데이터 전송 전 browser에서 필수값을 확인

placeholder

안에 들어올 값 이나 값의 힌트를 미리 입력 / label과 동일하게 많이 사용하나 다름

inputtype

https://seulbinim.github.io/WSA/form.html#input-%EC%9A%94%EC%86%8C
https://miketaylr.com/pres/html5/forms2.html

2019-04-04

fast campus / HTML-CSS

4분 read (About 546 words)

2019-04-04 TIL

그라데이션

background-image: linear-gradient(red, green) : 위에서 아래, 레드에서 그린

background-image: linear-gradient(to right, red, green)

https://webgradients.com/

https://leaverou.github.io/css3patterns/

http://www.colorzilla.com/gradient-editor/

2019-04-03

fast campus / HTML-CSS

3분 read (About 432 words)

2019-04-02 TIL

css 중요도

상속
<br겹침
<br우선순위

HTML 중요도 = box model

position
float
display
block

inline

brinline-block

flex

gird

box-sizing과 box model

box의 크기를 어떤 기준으로 계산 할 것인가?

box의 크기는 어떤 요소들로 이루어 지는가?

각 요소의 값이 동일 할 때 box의 크기는 달라지는가?

picture

footer

img

마크업

인기 사이트

마크업

새소식

마크업

time

시멘틱 마크업

form

fieldset : 연관성 있는 서식의 묶음

label : 입력서식에 대한 표시, 모든 입력서식은 label을 가져야 함

required

placeholder

inputtype

그라데이션

css 중요도

HTML 중요도 = box model

최근 글

링크

카테고리

태그 클라우드

아카이브

태그

링크

카테고리

태그 클라우드

아카이브

태그

Your browser is out-of-date!