8주 : html, css언어 : position, transform
position
웹페이지를 작업할때 요소의 위치를 2가지 방법으로 설정한다.
위치를 설정할때에는 x축과 y축 좌표를 이용하여 설정할 수 있다.
position을 사용할때에는 '상대위치'로 요소의 위치를 정하거나
'절대위치'로 요소의 위치를 지정할 수 있다.
- 상대위치 : 태그가 출력된 위치를 기준으로 새롭게 위치를 지정한다.(상대적으로 지정한다.)
- 절대위치 : 태그가 0점을 기준으로 새롭게 위치를 지정한다.
[속성값]
- relative : 상대적으로 위치를 잡는다. 태그가 출력된 현재 위치를 기준으로 상하 좌우로 움직인다.
- absolute : 절대적인 위치로 이동한다. (무조건 0점을 찾아간다.) 부모박스가 relative라면 부모의
0점으로 이동한다.
- static : 태그가 위에서 아래로 출력되며(block) 좌표를 인식할 수 없다. 기본값.
- fixed : 화면을 기준으로 절대위치 좌표를 잡는다. 문서의 길이와는 상관없이 화면을 기준으로 한다.
postion을 relative나 absolute나 fixed를 적용하게 되면 그때부터 해당 태그는 좌표를 인식할 수
있게 된다. static은 position의 기본값으로 좌표를 인식할 수 없기 때문에 위치를 설정하려면
margin이나 padding이나 flex를 이용해 위치를 잡을 수 있다. 즉, position:static은 position속성을
안쓴것과 같다.
static을 제외한 나머지 속성값을 쓰게 되면 좌표를 인식할 수 있고, 좌표속성에 따라 태그의 위치를
지정할 수 있다.
[좌표속성]
- left : 부모박스 또는 브라우저의 왼쪽을 기준으로 좌우로 움직일 수 있다. 양수를 쓸 경우 오른쪽으로
이동한다.
- right : 부모박스 또는 브라우저의 오른쪽을 기준으로 좌우로 움직일 수 있다. 양수를 쓸 경우
왼쪽으로 이동한다.
- top : 부모박스 또는 브라우저의 위쪽을 기준으로 상하로 움직일 수 있다. 양수를 쓸 경우
아래쪽으로 이동한다.
- bottom : 부모박스 또는 브라우저의 아래쪽을 기준으로 상하로 움직일 수 있다. 양수를 쓸 경우
위쪽으로 이동한다.
position:relative의 경우 left, top좌표만 사용 가능하다.
position:absolute, fixed의 경우 left, top, right, bottom좌표 모두 사용이 가능하다.
div:first-child {
background-color: lightblue;
/* 절대좌표. 브라우저의 0점을 찾아감 */
position: absolute;
/* 좌표 */
left: 400px;
top: 400px;
}
div:nth-child(2) {
background-color: lightcoral;
/* 절대좌표 */
position: absolute;
/* 좌표 */
right: 400px;
bottom: 400px;
}
div:nth-child(3) {
background-color: sandybrown;
/* 절대좌표 */
position: fixed;
right: 200px;
bottom: 200px;
}
z-index
position을 이용해 요소의 위치를 잡을때 특정박스끼리 좌표를 이용해 겹칠 수 있다. 겹쳐져있는 박스의 순서를 바꾸고 싶을때 z-index속성을 사용한다. z-index의 값은 단위 없이 숫자만 사용하고, 숫자가 클수록 앞에 나온다. z-index의 기본값은 0이고, 9999까지 쓸 수 있다. 만약 박스들에 z-index가 지정되지 않았다면 모두 기본값으로 0을 갖는다.
div:nth-child(1) {
background-color: salmon;
/* 좌표 */
left: 0;
top: 0;
z-index: 2;
}
div:nth-child(2) {
background-color: sandybrown;
/* 좌표 */
left: 100px;
top: 100px;
z-index: 1;
}
div:nth-child(3) {
background-color: seagreen;
/* 좌표 */
left: 200px;
top: 200px;
}
position:sticky
sticky는 처음에는 relative처럼 원래 출력된 태그 위치에 있다가
특정 섹션(부모)이 나왔을때 fixed처럼 동작하는 속성이다.
즉, 부모섹션이 브라우저의 윗부분과 만나면 fixed처럼 동작한다.
sticky를 사용하려면
1.부모박스에 반드시 height속성이 있어야 하고
2.부모박스에 overflow속성이 있지 않아야 한다.
transform
변형속성은 박스요소의 모양을 변형시키는 속성으로
x,y축을 이용하는 2차원 변형속성과
x,y,z축을 이용하는 3차원 변형속성으로 나뉜다.
z축은 모니터로부터 사용자쪽으로 가까워질수록 양수이며,
멀어질수록 음수값을 쓰는 입체축이다.
2차원 변형
태그의 모양을 변형시킬때 2차원 변형함수나 3차원 변형함수를 이용한다.
함수들은 transform의 속성값으로 사용되고 ()사이에 올바른 값을 넣어주면 된다.
2차원 변형함수는 x축과 y축을 이용하여 태그의 모양을 변형시킨다.
- translate(x, y)
: 특정 크기만큼 x축과 y축으로 이동시킨다.
단위는 px이나 %, vw, vh단위를 쓴다.
- translateX(x축)
: 특정 크기만큼 x축으로 이동시킨다.
- translateY(y축)
: 특정 크기만큼 y축으로 이동시킨다.
- scale(x, y)
: 특정 크기만큼 확대 및 축소시킨다. 단위없이 배수를 쓴다.
1이 100%이며 만약 1.2라고 쓰면 120% 크게 태그가 늘어난다.
확대되거나 축소될때 박스의 중앙을 기준으로 확대/축소되며 안에 들어있는
컨텐츠(글자나 이미지)도 함께 확대/축소된다.
- scaleX(배수)
: 특정 크기만큼 x축으로 확대시킨다.(넓이)
- scaleY(배수)
: 특정 크기만큼 y축으로 확대시킨다.(높이)
- skew(x, y)
: 특정 각도만큼 비튼다. 사다리꼴처럼 비틀어 변형시킨다.
각도의 단위는 deg으로 표현하고, top위치가 0도이며 시계방향으로 돌아가면서 적용된다.
- skewX(각도deg)
: 특정 크기만큼 x축으로 비튼다.
- skewY(각도deg)
: 특정 크기만큼 y축으로 비튼다.
- rotate(angleZ)
: 특정 각도만큼 회전한다. 마찬가지로 단위는 deg을 사용한다.
transform-origin
transform-origin은 중심축을 변환하는 속성으로 transform으로 태그가 변형되는 기본 중심축은 박스의 가로 세로 중앙이다. 이때 중심축을 옮기고 싶다면 transform-origin을 사용할 수 있다. transform-origin은 x축, y축, z축을 각각 지점을 지정하여 축을 옮길 수 있고 단위는 px이나 %나 정해진 키워드를 사용하여 옮길 수 있다.
[기본형]
transform-origin : x축 y축 z축;
- x축 : px, %(백분율), left, center, right
- y축 : px, %(백분율), top, center, bottom
- z축 : px, %처럼 길이값만 사용가능하다.
div {
background-color: salmon;
opacity: 0.5;
width: 300px;
height: 300px;
transform: rotate(10deg);
/*
x축으로 100%(width:300px지점)
y축으로 100%지점(height:300px지점)
*/
transform-origin: 100% 100%;
/*
x축으로 100px(width:100px지점)
y축으로 100px(height:100px지점)
*/
transform-origin: 100px 100px;
/*
div박스의 가로 중앙, 세로 아랫쪽 기준
*/
transform-origin: center bottom;
}
3차원 변형함수
3차원 변형함수는 x,y,z축을 이용하여 태그의 모양을 변형시킨다. 입체효과를 만들때 주로 사용한다.
- translate3d(x,y,z)
: 특정 크기만큼 이동시킨다.
- translateX(x축)
- translateY(y축)
- translateZ(z축)
- scale3d(x,y,z)
: 특정 크기만큼 축소/확대시킨다.
- scaleX(x축)
- scaleY(y축)
- scaleZ(z축)
- rotate3d(x,y,z)
: 특정 각도만큼 회전시킨다.
rotate변형함수의 3차원 변형 형태는 조금 다르다.
지정한 각도만큼 시계방향(deg)이나 반시계방향(-deg)
으로 회전을 시키는데, 이때 x,y,z축의 방향성을 조정할
수 있다.
- rotateX(x축)
- rotateY(y축)
- rotateZ(z축)
transform-style
transform3d를 이용해서 3차원 변형을 했을때 해당 속성을 적용하기 전까지는 입체가 아닌 평면으로 보인다. 이때 preserve-3d값을 사용하면 3d처럼 입체적으로 보이게 만들 수 있다.
움직이는 입체 정육면체 만들기
section {
width: 300px;
height: 300px;
margin: 200px;
position: relative;
animation: rint 3s linear 0s infinite;
/* 후손의 3차원 속성을 유지 */
transform-style: preserve-3d;
}
div {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
opacity: 0.3;
}
/* 옆면 */
div:nth-child(1) {
background-color: salmon;
transform: rotateY(0deg) translate3d(0px, 0px, 100px);
}
div:nth-child(2) {
background-color: sandybrown;
transform: rotateY(90deg) translate3d(0px, 0px, 100px);
}
div:nth-child(3) {
background-color: seagreen;
transform: rotateY(180deg) translate3d(0px, 0px, 100px);
}
div:nth-child(4) {
background-color: skyblue;
transform: rotateY(270deg) translate3d(0px, 0px, 100px);
}
/* 윗면과 아랫면 */
div:nth-child(5) {
background-color: slateblue;
transform: rotateX(90deg) translate3d(0px, 0px, 100px);
}
div:nth-child(6) {
background-color: palevioletred;
transform: rotateX(270deg) translate3d(0px, 0px, 100px);
}
/* 애니메이션 효과 */
@keyframes rint {
/* 0초 지점 */
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
/* 3초 */
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
