본문 바로가기

CSS22

[CSS] Transform transform transform 속성은 이동, 회전, 축소 등의 효과를 지정하는 속성이다. 속성 설명 단위 translate(x,y) X축으로 x, Y축으로 y 이동 px, %, em translateX(x) X축으로 x 이동 px, %, em translateY(y) Y축으로 y 이동 px, %, em scale(x,y) X축으로 x배, Y축으로 y배 확대/축소 0, 양수 scaleX(x) X축으로 x배 확대/축소 0, 양수 scaleY(y) Y축으로 y배 확대/축소 0, 양수 skew(x, y) X축으로 x 각도, Y축으로 y 각도 기울임 +, - deg skewX(x) X축으로 x 각도 기울임 +, - deg skewY(y) Y축으로 y 각도 기울임 +, - deg rotate(x) x 만큼 회.. 2022. 3. 13.
[CSS] Transition transition transition 속성은 CSS 속성이 변화할 때 서서히 변화시키는 속성이다. 속성 설명 기본값 transition-property transition이 적용될 속성 지정 all transition-duration transition이 일어나는 지속시간(초, 밀리초) 0s transition-delay 속성이 변화한 시점과 transition이 실제시작하는 사이에 대기 시간(초, 밀리초) 0s transition-timing-function transition 효과를 위한 함수 지정 ease transition transition 축약형 transition-property transition-property 속성은 transition이 적용될 CSS 속성을 지정한다. 속성 설명 no.. 2022. 3. 12.
[CSS] Gradient Gradient gradient 속성은 2가지 이상의 색상을 혼합하여 색감의 배경을 생성하는 속성이다. gradient에는 2가지 종류가 있다. Lineal-gradient(선형) Radial-gradient(원형) linear-gradient linear-gradient 속성은 선형 그라데이션 효과를 만든다. linear-gradient(direction, color1, color2 ...) direction 은 방향을 의미하며 값은 아래와 같다. 값 설명 to bottom 위에서 아래로(기본값) to top 아래에서 위로 to left 오른쪽에서 왼쪽으로 to right 왼쪽에서 오른쪽으로 to bottom right 대각선, 좌상단에서 우하단으로 n deg n도의 방향 linear-gradient .. 2022. 3. 11.
[CSS] Float float float 속성은 레이아웃을 구성할 때 요소들을 정렬하기 위해서 사용하는 속성이다. "떠 있다"라는 의미로써 해 당 요소를 다음 요소 위에 떠 있게 하는, 다른 요소들이 float 속성을 지는 태그요소의 존재를 무시하도록 하는 것이다.(공간은 차지) float 속성을 통해 float 요소 주위로 다른 컨텐츠가 물 흐르듯이 배치가 된다. float 속성 사용 시에는 position 속성의 absolute 를 사용하면 안된다. center 속성이 없다. 가운데 정렬 시에는 margin을 이용하여 정렬한다. 속성 값 설명 none 요소를 떠 있게 하지 않는다.(기본값) left 요소를 왼쪽으로 이동 right 요소를 오른쪽으로 이동 div 태그는 block 요소로 한 줄을 모두 차지하도록 되어 있다.. 2022. 3. 10.
[CSS] Position position HTML 문서 상에서 요소가 배치되는 방식을 결정하는 속성이다. static static 은 position 속성의 기본값으로 부모 요소 내에 자식 요소로 존재할 경우 부모 요소의 위치를 기준으로 배치된다. 좌표 속성(top, bottom, left, right)이 적용되지 않는다.(사용할 경우 무시) parent me me 라는 자식요소에 left, top 값을 지정해주었지만 적용되지 않았다. relative relative 는 기본 위치(static)를 기준으로 좌표 속성(top, bottom, left, right) 만큼 위치한다. 상대적 위치인 만큼 자식 요소의 경우 부모 위치를 기준(기본 위치)으로 이동한다. parent me me 라는 자식 요소에 position: relati.. 2022. 3. 8.
[CSS] z-index / overflow z-index z-index 속성은 어느 요소가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성이다. static을 제외한 position 속성이 적용된 요소에서만 작동한다. 미적용 시 가장 마지막에 작성한 요소가 가장 상위에 배치된다. 양수, 음수 입력이 가능하며 값이 클수록 상위에 배치된다. 속성 값 설명 auto z-index를 지정하지 않은 값(기본값) number 배치 순서를 결정, 클수록 상위에 배치 initial 기본값으로 설정 코드 상 나중에 입력한 순서대로 맨 위에 배치된다. x y z x와 z 요소에 z-index 값을 지정하며 배치 순서를 변경하였다. x y z overflow overflow 속성은 자식 요소가 부모 요소의 영역을 벗어났을 때 처리하는 속성이다. 속성 값 설명.. 2022. 3. 7.
728x90

티스토리툴바