오픈소스웹소프트웨어 CSS Box Model and Layout

CSS Box Model

시험에 나온다

content(width),padding,border,margin

whole size 270px

whole size 시험문제에 나온다

content + padding + border + margin

 

 

 

 

 

 

CSS Display

Set/override display property in CSS

display : bock, inline ... 

 

 

 

visibility : hidden == display : none

 

 

 

 

display : none <----------- remove

실제로 삭제하는 것처럼 보인다

(옆으로 감)

 

visibility : hidden <------------ hide

삭제하는것처럼보이지만

공간은 차지하고 있다

 

 

 

 

 

display : inline-block

compared to inline -> set a width, height

top&bottom margin padding

 

 

 

 

 

CSS Placement

top, bottom, left, right property사용하려면

position property로 적용을 해주어야한다

 

 

position static

흐름대로 쭉쭉쭉 나온다

normal flow

you cannot apply top,left,bottom,right

 

position relative

top,left 적용 가능

normal flow를 따른다

 

 

position absolute

position fixed

 

 

 

 

float left

 

 

 

 

clear:both

break float property

 

 

database 설계할때 er diagram을 먼저만든다

 

 

CSS Layout

div를 통해서 만들자

시험에나온다

 

 

 

width= content

size = box

border빠뜨리는 사람 있는데 꼭 해야합니다

how to calculate box size

 

 

display : none ===remove

visibility :hidden === hide

display: inline-block === set width,height padding/margin