티스토리 뷰

HTML and CSS

CSS 강좌 5강 - CSS속성(3/3)

ServerWorld 2016.07.07 10:45

DISPLAY


• 문서 내에서 엘리먼트가 가지고 있는 고유한 렌더링 속성을 변경

• inline요소를 block요소로, block요소를 inline요소로 변경가능

• 그 외에 화면에 표시되지 않게 할 수 있음


display 속성


display : none ;

display : block ;

display : inline ;

display : inline-block ; 


• inline-block : inline요소처럼 배치되면서 block요소의 속성(width, height, margin,

 padding)들을 사용할 수 있는 속성



OVERFLOW


• block요소의 자식 컨텐츠가 부모요소의 사이즈를 변화시킬 때

 숨김 / 스크롤바 표시여부를 지정

• 부모의 사이즈가 지정 되어 있을 경우에 사용가능


overflow 속성


overflow : visible ; (기본)

overflow : hidden ;

overflow : scroll ;

overflow : auto ; 


• overflow : scroll 가로, 세로에 대한 속성을 따로 지정 할 수 있다.

  • overflow-x

  • overflow-y




FLOAT


• 엘리먼트를 block형태로 부유시킬때 사용 (display:block; 을 안해주어도~)

• block형태로 특정방향(left, right)으로 정렬


float 속성


float : inherit ; (기본 : 밖의 float속성을 상속받음)

float : left ;

float : right ;

float : none ; 






CLEAR


• float 를 해제할 때 사용

• 이전 엘리먼트의 float값을 상속받아 같은 방향으로 정렬되는 현상을 막기 위해 사용


Clear 속성


clear : inherit ; (기본)

clear : left ; (왼쪽으로 float된 엘리먼트의 하단에 위치)

clear : right ; (오른쪽으로 float된 엘리먼트의 하단에 위치)

clear : both ; (모든 float의 하단에 위치 – 개념상 float상속을 받지 않음)




POSITION


• 엘리먼트의 상대적인 위치에 대한 속성

• float과는 다르게 왼쪽, 오른쪽 정렬하는 형태가 아닌, 위치하는 곳에 대한 값(오프셋)을 지정


position 속성


position : static ; (기본, offset을 가지지 않음)

position : relative ; (상대적, 원래 위치를 기준)

position : absolute ; (절대적, 부모위치를 기준)

position : fixed ; (화면에서 고정, ie6 지원 불가) 


top : 10px ;

left : 20px ;

bottom : 10px ;

right : 20px ; 




position : static; 




BOX 2

position:relative;

top: 20px;

left: 80px; 




BOX 2

position:absolute;

top: 20px;

left: 80px; 




BOX 2

position:fixed;

top: 20px;

left: 80px; 




BOX 1

position:relative;

top: 20px;

left:80px;


BOX 1-1

position:absolute;

top: 20px;

left: 80px; 




BOX 1

position:relative;

top: 20px;

left: 80px;


BOX 1-1

position:fixed;

top: 0px;

left: 30px; 




Z-INDEX


• 엘리먼트의 입체적인 순서를 정의

• 수치가 작을수록 아래쪽에 있다는 것을 의미


z-index 속성 


z-index : 3 ;

z-index : 10000 ;

z-index : 400 ; 


• box안의 엘리먼트의 z-index가 높아도 상위(부모)엘리먼트끼리의 수치가 낮으면

 아래쪽에 위치함




※ download & Next Menu



저작자 표시 비영리 변경 금지
신고
댓글