☀️ [UIUX] 1219 HTML + CSS Coding, 코딩 중급 17
✏️ 2024. 12월 19일 / html + css 언어, 코딩 중급 17
👀 position:sticky 속성에 대해 알아봅시다.
📋 sticky
sticky의 영문 뜻은 끈적거리는, 스티커 같은 뜻을 가지고 있습니다.
이처럼 태그의 이름은 보다 직관적인 형태로 구성되어 있답니다!
이런 뜻과 함께 대조하여 공부하다보면 기억하기에도 쉽고, 공부하기에도 재밌더라구요.
이번 단락에서 알려드릴 속성은 마치 원하는 부분에 포스트잇을 딱 붙인 것처럼
특정 섹션이 나왔을 때 자식 속성이 고정된 듯한 효과를 내는 속성입니다.
sticky는 처음에는 relative처럼 원래 출력되어 있는 태그 위치에 있다가
특정 섹션(부모)이 나왔을 때 fixed처러 동작하는 속성입니다.
즉, 부모 섹션이 브라우저의 윗 부분과 만나면 fixed처럼 동작하게 됩니다.
sticky를 원활하게 사용하려면 아래 규칙에 따라야 합니다.[sticky 사용 규칙] 1. 부모 박스에 반드시 height 속성이 있어야 합니다. 2. 부모 박스에 overflow 속상이 없어야 합니다. 3. 속성을 입력한 후 좌표값을 입력해주어야 합니다.<section>섹션1</section> <section> <h2>sticky</h2> </section> <section>섹션1</section><style> * { margin: 0; padding: 0; } section { width: 100%; height: 2000px; text-align: center; font-size: 50px; box-sizing: border-box; padding: 100px 0; } section:first-child { background-color: lavenderblush; } section:nth-child(2) { height: 3000px; background-color: lavender; } section:nth-child(3) { background-color: linen; } h2 { position: sticky; top: 0px; } </style>
👀 변형속성에 대해 알아봅시다.
📋 transform
변형 속성은 박스 요소의 모양을 변형시키는 속성으로 x축과 y축을 이용하는 2차원 변형 속성과
x축,y축,z축을 사용하는 3차원 변형 속성으로 나눠집니다.
z축은 모니터로부터 사용자 쪽으로 가까워질수록 양수이며, 멀어질수록 음수값을 쓰는 입체축입니다.
2차원 변형 함수는 x축과 y축을 사용하여 태그의 모양을 변형시킵니다.
2차원 변형 함수
태그의 모양을 변형시킬때 2차원 변형 함수나 3차원 변형 함수를 이용합니다.
함수들은 transform의 속성 값으로 사용되고, ()사이에 올바른 값을 넣어줍니다.- translate(x, y) : 특정 크기만큼 x축과 y축으로 이동시킵니다. 단위는 px이나 %, vw, vh 단위를 사용합니다. - translateX(x축) : 특정 크기만큼 x축으로 이동시킵니다. - translateY(y축) : 특정 크기만큼 y축으로 이동시킵니다.- scale(x, y) : 특정 크기만큼 확대 및 축소합니다. 단위 없이 배수를 씁니다. ex) 1 = 100%, 1.2=120% 확대되거나 축소될때 박스의 중앙을 기준으로 확대/축소 되며 안에 있는 컨텐츠(글자나 이미지)도 함께 확대/축소 됩니다. - scaleX(배수) : 특정 크기만큼 X축으로 확대시킵니다. (넓이) - scaleY(배수) : 특정 크기만큼 y축으로 확대시킵니다. (높이)- skew(x, y) : 특정 각도만큼 비틉니다. 마름모꼴 혹은 사다리꼴처럼 비틀어서 변형시킵니다. 각도의 단위는 deg으로 표현하고, top위치가 0도 이면 시계 방향으로 돌아가면서 적용됩니다. - skewX(각도deg) : 특정 크기만큼 x축으로 비틉니다. - skewY(각도deg) : 특정 크기만큼 y축으로 비틉니다. - rotate(angleZ) : 특정 각도만큼 회전합니다. 단위는 deg을 사용합니다.<section> <div class="example">box</div> </section> <div class="translate_xy">translate(x, y)</div> <div class="translate_x">translateX(x축)</div> <div class="translate_y">translateY(y축)</div> <div class="scale_xy">scale(x, y)</div> <div class="scale_x">scaleX(배수)</div> <div class="scale_y">scaleY(배수)</div> <div class="skew_xy">skew(x, y)</div> <div class="skew_x">skewX(각도deg)</div> <div class="skew_y">skewY(각도deg)</div> <div class="rotate">rotate(angleZ)</div><style> * { margin: 0; padding: 0; } section { width: 300px; height: 300px; border: 5px solid rgb(222, 202, 236); margin: 200px; } /* div 공통 속성 */ div { width: 300px; height: 300px; text-align: center; line-height: 300px; font-size: 30px; margin: 100px; } .example { background-color: lavender; /* 회전시킨다 deg > 각도 */ transform: rotate(45deg); margin: 0; } .translate_xy { background-color: lightsteelblue; transform: translate(100px, 50px); } .translate_x { background-color: lightsteelblue; transform: translateX(200px); } .translate_y { background-color: lightsteelblue; transform: translateY(-50px); } .scale_xy { background-color: lavenderblush; transform: scale(1.5); } .scale_x { background-color: lightyellow; transform: scaleX(2); } .scale_y { background-color: lightcyan; transform: scaleY(0.5); } .skew_xy { background-color: lightpink; transform: skew(45deg, 15deg); } .skew_x { background-color: lightskyblue; transform: skewX(70deg); } .skew_y { background-color: lightskyblue; transform: skewY(20deg); } .rotate { background-color: lightgreen; transform: rotate(60deg); } </style>
👀 중심축 변환하기에 대해 알아봅시다.
📋 transform-origin
transform-origind은 중심축을 변환하는 속성으로
transform으로 태그가 변형되는 기본 중심축은 박스의 가로 세로 중앙입니다.
이때 중심축을 옮기고 싶다면 transform-origin을 사용할 수 있습니다.
transform-origin은 x축, y축, z축을 각각 지점을 지정하여 축을 옮길 수 있고
단위는 px이나 %나 정해진 키워드를 사용하여 옮길 수 있습니다.[기본형] transform-origin : x축, y축, z축; - x축 : px, %(백분율), left, center, right - y축 : px, %(백분율), top, center,bottom - 축 : px, %처럼 길이값만 사용이 가능합니다.
👀 3차원 변형 함수에 대해 알아봅시다.
📋 transform-origin
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-origin
transform3d를 이용해서 3차원 변형을 했을 때
해당 속성을 적용하기 전까지는 입체가 아닌 평면으로 보입니다.
이때, preserve-3d값을 사용하면 3d처럼 입체적으로 보이게 만들 수 있습니다.
👀 3차원 변형 함수에 대해 알아봅시다.
📋 transition
사용자가 태그위에 마우스를 올리거나 클릭했을 때
바뀌는 모양을 부드럽게 움직이며 풀어주는 모션 효과를 만드는 속성입니다.
아래 속성들과 함께 적용이 가능합니다.- 위치속성(position의 좌표들) : left, right, bottom, top - 크기속성 : width, height - 박스속성 : padding, margin - 테두리속성 : border-width, border-color, border-radius - 색상 속성 : color, background-color - 투명도 속성 : opacity, rgba - 변형속성 : transform
transition의 하위 속성들
트랜지션의 모션을 섬세하게 컨트롤할때 아래 속성들을 함께 사용할 수 있습니다.1. transition : transition의 하위 속성들을 한꺼번에 선언할 때 사용합니다. 공백으로 구분하여 여러 속성을 한꺼번에 선언합니다. 2. transition-duration : "~초 동안"이라는 뜻으로, 모션 효과를 몇 초동안 적용할지 정합니다. 초 단위는 s로 표기합니다. 3. transition-delay : "~초 기다렸다가"라는 뜻으로, 모션 효과가 바로 적용되지 않고 선언된 초 동안 기다렸다가 그 후에 모션을 진행합니다. 지연시간을 말하며 초단위인 s를 사용합니다. 4. transition-property : 태그에 적용된 여러 속성중 일부만 transition효과를 주고 싶을 때 사용합니다. 즉, 어떤 속성을 트랜지션 시킬것인지 정하는 속성입니다. 속성값으로는 변형시키고자 하는 속성의 이름을 씁니다. 속성끼리는 ,(콤마)로 구분합니다. 5. transition-timing-function : 정해진 키워드에 따라 모션 속도를 조절합니다. 가속도와 같은 의미입니다. 쓸 수 있는 속성 값은 아래와 같습니다. 1. linear : 처음부터 끝까지 일정한 속도로 움직입니다. 2. ease: (기본값)가속도, 처음에는 천천히 시작했다가 점점 빨라지면서 마지막에는 천천히 끝내는 값. 3. ease-in : 천천히 시작한다. 4. ease-out : 천천히 끝난다. 5. ease-in-out : 천천히 시작했다가 천천히 끝낸다.
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
