2_css3_(레이아웃스타일,트랜지션)

레이아웃스타일

@인라인 스타일로 바꾸기

-display: inline;

width, height 무시

-display: inline-block

width, height 사용

@블럭 스타일로 바꾸기

-display: blck;

@border-style

@radius : 휘어짐

@box-shadow : 박스그림자

★★여백관련속성★★

@content area

@padding

테두리와 콘텐츠 사이의 거리를 나타내는 영역

(left, right, top, bottom)

@border

요소의 테두리 두께, 모양, 색을 지정하는 속성

@margin

다른 요소들간의 간격을 조절하는 속성

(left, top)

★★배치관련스타일(position)★★

요소의 위치를 지정하는 속성

@relative / absolute

position : relative

속성이 설정된 요소 내 하위 요소들은 left, right, top, bottom속성을 이용하여 위치를 지정할 수 있음

position: absolute

속성은 기본적인 요소의 배치 순서를 무시하고 지정된 절대위치(절대좌표)에 요소를 표시하게 하는 속성

단, 상위요소가 relatvie 또는 absolute속성을 가지고 있는 경우 상위요소를 기준으로 상대적인 위치를 가지게됨

@fixed(고정위치)

브라우저 창을 기준으로 요소가 항상 고정된 위치를 가지게 하는 속성

@@요소 Stack 순서 지정 스타일(z-index)

요소가 쌓이는 순서를 지정하는 속성

지정된 숫자가 클수록 위쪽에 쌓임

*주의사항 : z-index는 relative, absolute, fixed position이 설정된 요소에만 정상 동작함

-> z-index를 사용하였는데 정상 동작하지 않은 경우 상위 요소에 position:relative를 추가하면

해결될 가능성이 높음

@요소 표시 여부 지정 스타일(visivility)

페이지에 특정 요소를 보이거나 보이지 않게 하는 속성

-visibility : hidden

> 요소는 보이지 않지만 페이지 공간을 차지하고 있음

-display : none

> 요소도 보이지않고, 공간도 차지하고 않음

@요소 정렬 스타일(float/ clear)

float : 요소를 띄어서 정렬하는 속성

요소들이 float로 설정된 방향으로 흐르듯이 정렬되어 배치됨(left, right)

clear : float로 인해 요소들이 띄어져 흐르는 상태를 해제하는 속성

해제할 float 방향을 지정하면 해제됨(양쪽모두:both)

2차원변형

cursor: pointer; 손가락모양으로 바뀜

transform

-옵션

translate 좌우이동

scale 확대

rotate(~~deg) 회전 #디그리

skew(~~deg) 뒤틀림 #스크류바

트랜지션(transtion)

시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 의미

transition-duration : 2s; (2초뒤에)

@트랜지션 진행별 시간 설정

transition-property: 적용할속성1, 적용할 속성2 ...;

transition-duration: 변화할초1, 변화할초2, ...;

@트랜지션 시간 지연하기

transition-delay