테스트 사이트 - 개발 중인 베타 버전입니다

CSS Positioning Tutorials #1-6

· 6년 전 · 944

1. Introduction

 

배울것

box model, nomal document flow, floats, postion property, stacking order and Z-index

overflowing Content, text columns

 

 

2. Box Model Review

 

box, inline형 elements

width, height, padding, border, margin

 

 

3. nomal document Flow

 

순서대로 표시함

 

 

4. Floating elements

 

img{

  float: left:

  margin: 10px}

}

 

float left, right을 하면 normal document flow에서 벗어남.

 

 

5. Clearing Floats

 

clear: left or right or both;

 

margin을 주어도 float도 된 곳으로 올라감. 

 

empty div를 넣은 방법도 있겠지만. HTML에 쓸데 없는 코드가 들어감.

 

float되는 class에 after를 상요함.

 

.service:after {

  content: "";

  display: block;

  clear: both;

}

 

 

6. Floating columns

 

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

CSS

CSS 관련 공부 및 자료 공유 소모임 게시판 입니다.
글쓰기
🐛 버그신고