JAVA 웹개발 과정 국비 36일차 정리

36일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

1. Layout 이어서..

1) Positioning 이어서..

① z-index

z축, 즉, 앞으로 튀어나오는 수치를 정해줄 수 있다.
숫자가 클수록 위에 위치하게 된다.
주의할 점은 position이 static일 경우 z-index는 적용되지 않는다.
hover와 같이 사용하여 마우스에 위치하는 요소를 돋보이게 만들어줄 수 있다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

② position:fixed

absolute와 같이 static이 아닌 조상을 따라 올라가며 부모로 삼고, 그 부모를 기준으로 top, left 등의 위치조정을 할 수 있다.
마찬가지로 float 속성도 가진다.
그러나 fixed는 내용이 많아져서 스크롤이 길어질 때 아래로 스크롤을 내려도 고정되어서 특정 위치에 있다는 것이 가장 큰 특징이다.
엑셀로 따지자면 셀 고정과 같은 것이라고나할까?

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

2) 투명도 설정

칼라를 설정할때, rgb 값이나 칼라 이름을 써서 색을 정할 수 있지만 16진수 앞에 #을 붙여주는 방법으로도 색을 정할 수 있다.
이때 뒤에 2자리수를 붙여주면 투명도를 설정할 수 있다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

3) transform 속성

element에 이펙트를 주는 속성으로 여러가지 함수가 존재한다.
주로 hover와 transition-duration : 시간과 함께 사용하여 변화를 준다.

① transform:translate()

위치를 이동시켜주는 함수.
x, y, z 등의 값을 정해서 이동시킬 수도 있다.
%를 주면 자신의 값을 기준으로 %를 적용하여 거리를 이동시킨다.
translate(x,y(생략가능)) / translateX(x) / translateY(y) / translateZ(z(%불가))

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

② transform:rotate(deg)

원하는 각도만큼 회전시켜주는 함수.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

③ transform:scale(배수)

원하는 배수만큼 크기를 키워주는 함수.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

4) transition-duration: 시간

대상 element에 변화가 생겼을 때 변화에 걸리는 시간.

transform 속성과 같이 잘 사용되는 속성이다.
주로 hover를 이용하여 이펙트효과를 줄 때 이용한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

5) 중앙 정렬하기

중앙 정렬하는 가장 쉬운 방법은 오늘 배운 transform:translate를 이용하는 것이다.
position:absolute를 주고 top, left를 각각 50%씩 준 뒤, transform:translate(-50%, -50%)를 하면 된다.
작동 원리는 absolute로 parent의 50% 지점에 box왼쪽 위 꼭지점이 맞춰지는데, transform:translate로 자기 자신의 사이즈의 50프로만큼 왼쪽과 위로 이동시켜주면 중간지점에 정확히 box의 중간이 맞게 된다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

6) 예제 - 사이드바 만들기

아래와 같이 눌렀을 때 튀어나오는 사이드바를 만드는 실습을 했다.
배워보니 생각보다 간단해서 놀랐다.
핵심 원리는 position 속성으로 위치를 브라우저 왼쪽으로 옮겨서 오른쪽 약간만 보이게 하는 것이다. transform:translate()로 해도 상관 없다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.