position -

 

 

박스=콘텐츠

박스와 박스사이간격 = margin

박스 사이드 부풀리기= padding

 

 

옆으로...?

float 속성.실수형 부동소수점

 

(앱솔루트와 픽스는 마진 패딩속성 x 스태틱, 릴레티브만 )

중앙으로? margin:10px auto;

마진 음수 입력 가능

패딩 음수 x

 

 

1200화면

margin:50% =화면의 딱절반-

콘텐츠 크기(ex300) - [margin-left:150px]

=450

 

[float:left] [float:right]

folat 해제= clear(-both)

 

static

왼쪽에서 오른쪽

위부터 아래

지정 - "콘텐츠의 크기" 만큼 자동쌓임

빈칸 채우기

 

 

relative - 겹칠 수 있다.

지정 값 설정

 

 

"주어진 크기" 만큼 쌓임

원본 -

 

앱솔루트

absolute- 중첩

-콘텐츠 고정

 

 

fixed- 화면고정

 

위쪽 또는 아래쪽

왼쪽 또는 오른쪽 가까운쪽으로 거리 넓히기

 

 

position:absolute

left:100px;

top:200px;

 

z-index: auto (배경)0 ~

 

 

static margin

relative padding width:X

float margin:0 auto;

clear

 

 

 

 

 

absolute(절대) -width:X

margin:-(w/2)

fixed(부동) left:50%

 

 

 

div.wrap

 

 

 

 

 

 

 

----

 

각각의 내용들이 콘텐츠 순서대로 배치된다.

 

 

----------------

 

각각의 사이즈가 다른 원본 파일들이 첫 콘텐츠부터 배치 된다.

콘텐츠 크기와 원본 사이즈의 크기가 클 경우 다른 콘텐츠 영역을 침범 할수 있다.

콘텐츠 크기보다 워본 사이즈가 작을 경우 다음 파일은 다음 콘텐츠에 배치된다.

 

----------------

 

하나의 콘텐츠에 여러 레이아웃을 사용하여 중복 배치가 가능하다.

 

'텍스트 화일' 카테고리의 다른 글

홈페이지 설계시 고려할 것들  (0) 2021.03.30
트랜스폼  (0) 2021.03.30
웹 메타 필기  (0) 2021.03.30
화면설계 필기  (0) 2021.03.30
필기 한거  (0) 2021.03.30

+ Recent posts