CSS Positioning Tutorials #7-12 > CSS

CSS

CSS 관련 공부 및 자료 공유 소모임 게시판 입니다.

CSS Positioning Tutorials #7-12 정보

CSS Positioning Tutorials #7-12

본문

7. Text columns

 

float를 사용안하고..

-webkit-column-count:  3;

column-count: 3;

-webkit-column-gap: 50px;

column-gap: 50px;

-webkit-column-rule:  1px solid #ccc; witdth, type, color 

column-rule: 1px solid #ccc;

text-align: justify;

 

 

8. Position relative

 

Position property의 종류: Static, Relative, Absolute, Fixed, Inherit

 

relative는

normal document flow에서 offset

 

 

9. Absolute Position

 

배너 사진 중간에 배너글을 넣을 때..

사진은 relative로 하고 글씨를 absolute로 해서..

글씨가 사진 top-left가 기준되게..

 

 

10. fixed Position

fixed는 다큐먼트에 고정됨 왼쪽위부터 시작.

navigation 메뉴를 상단에 고정시킬때

 

nav{

  background: #333;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%

}

nav ul:after{

  content: "";

  display: block;

  clear: both;

}

nav li{

  list-style-type: none;

  margin: 0 10px;

  color: #fff;

  float: right;

}

 

 

11. Z-index & Stacking Order

 

nav위치를 위쪽으로 옮기면, 우선순위가 낮아 지므로 사진이 위로 올라감.

 

z-index: 1; 로 우선 순위를 바꿔줌.

 

12. clipping content

 

max-height: 150px;

over-flow: hidden;

auto, scroll, visible

 

 

추천
0

댓글 0개

전체 88 |RSS
CSS 내용 검색

회원로그인

진행중 포인트경매

  1. 참여0 회 시작24.03.28 11:15 종료24.04.04 11:15
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT