다시 시작하는 CSS😝
Box Shadow
요소에 그림자를 표현할 때 사용하는 속성
어떻게 사용하느냐에 따라서 다양한 느낌을 나타낼 수 있다.
neumorphism(뉴모피즘) 자동 생성 사이트
빛과 그림자로 입체효과를 주는 2020 UI 디자인 트렌드 (참고용)
box-shadow의 속성값은 순서대로 무조건 작성❗해주어야 함을 유의해야 한다.
(Figma와 같은 UI 디자인 툴에서 속성값을 확인할 수 있고, 코드까지 알려줌)
<속성값(px 단위로 나타냄)>
h-offset : x축(가로축)으로 이동시킬 값. +는 오른쪽 방향으로 생성, -는 왼쪽 방향으로 생성
v-offset : y축(세로축)으로 이동시킬 값. +는 아래쪽 방향으로 생성, -는 위쪽 방향으로 생성
blur : 흐린 정도. 0에 가까울수록 면처럼 선명하며, 값이 커질수록 흐려진다.
spread : 그림자 사이즈. 값이 커질수록 넓게 퍼진다.
color : 그림자 색상(투명도를 나타내려면 rgba 단위를 사용)
button {
background-color: #ff4949;
transition: box-shoadow 250ms ease-in; // 자연스럽게 스르륵 애니메이션 효과(box-shadow 속성 변화)
}
button:hover {
box-shadow: 0 10px 16px 0 rgba(255, 73, 73, 0.35);
}Figma에서 spread(그림자 사이즈)는 표현되지 않으며, 실무에서 디자이너분들은 spread 사용을 선호하지 않는다고 한다.🤭 (0으로 작성)
box-shadow 여러개를 동시에 표현이 가능하다.
box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;위의 코드처럼 축약형으로 작성 가능하다. (순서 헷갈리지 않도록 5개 표기하는 방법을 권장)
속성값이 4개인 경우 spread가 생략, 속성값이 3개인 경우 blur와 sprad가 생략된 것이다.
Opacity
투명도를 나타낼 때 사용하는 속성
값 비교: 0(투명) <---> 1(불투명)
0에서 1 사이의 소숫점을 사용하여 투명도를 나타내고,
1에 가까워질수록 설정해준 색상이 선명하게 나타난다.
Overflow
(box)요소 안에 문단이 넘쳐흘러 요소 사이즈를 벗어날 경우 처리해주는 속성
overflow-x는 width값에, overflow-y는 height값에 영향을 준다.
overflow는 x와 y를 합한 것으로 동시에 보여준다.
<속성값>
visible-기본값 : 넘쳐흐르는대로 그냥 요소를 보여줌
요소 안의 내용이 요소 밖으로 나오더라도 '별도로 height 값을 설정해줬다면' 요소는 설정한 크기만큼 영역을 차지한다.
옆에 오는 다른 요소는 흘러내리는 것 무시하고 요소가 차지하는 영역 바로 아래 위치한다.
auto : 넘쳐 흐르는 경우 알아서 처리함(scroll과 유사하여 스크롤 표시됨)
scroll : 넘쳐 흐르는 경우 요소 안에 내용을 집어넣고 스크롤로 표시함
(x축, y축 개별적으로 설정 가능. overflow-x: scroll; => 가로로만 스크롤 가능)
hidden : 넘쳐 흐르는 내용은 무시하고 요소 크기만큼 잘라 숨겨버림(스크롤 없음)
Transform
요소를 2차원, 3차원 공간에서 모양을 변형시키는 속성(자주 사용하지 않음)
(transform에 사용되는 함수는 많지만 자주 사용되는 것만 정리. 이 외에는 MDN 문서 참고)
<자주 사용되는 함수>
translate(x, y) : 원하는 (x축, y축 기준으로)위치로 옮기고 싶을 때 사용하는 함수
translateX() -가로축, translateY() -세로축 을 이용해 개별적으로 설정 가능
🔽 단위가 px일 때
x축 기준으로 부호가 +인 경우, 오른쪽 방향으로 이동 / -인 경우, 왼쪽 방향으로 이동
y축 기준으로 부호가 +인 경우, 아래로 이동 / -인 경우, 위로 이동
(예. translate(20px, 30px)은 오른쪽으로 20px만큼, 아래로 30px만큼 떨어져 이동한다.)
🔽 단위가 %일 때
단위가 px인 경우와 동일한 방식으로 이동한다.
transform 속성을 적용시킨 자기 자신을 기준으로 %(비율)가 계산되어 이동한다.
(예. translate(50%, 100%)은 오른쪽으로 자기자신의 width값의 0.5배만큼, 아래로 자기자신의 height값의 1배만큼 떨어져 이동한다.)
✨ display: absolute; 하고 정가운데 배치할 때 transform: translate(-50%, -50%); 를 자주 사용한다!
scale(N) : 요소 원래 사이즈의 배율만큼 늘리거나 줄일 때 사용하는 함수
(예. scale(2)는 본인 사이즈의 2배, sclae(0.5)는 본인 사이즈의 0.5배)
scale(x, y) : 요소 사이즈의 width값과 height값에 영향을 준다.
(예. scale(0.5, 2)는 원래 사이즈에서 width의 0.5배만큼, height의 2배만큼 늘어난다.)
rotate(Ndeg) : 요소를 특정 각도만큼 회전시킬 때 사용하는 함수
함수 괄호 안에 각도를 뜻하는 단위인 deg를 같이 작성해야 한다.
(예. rotate(45deg)는 오른쪽 방향으로 45도 회전, rotate(-360deg)는 왼쪽 방향으로 한바퀴 회전한다.)
※ transform 관련 모든 함수에 적용되는 점✨ transform 되기 전에 원래의 위치를 기억한다!
즉, 어디에 위치하든 상관없이 주변의 다른 요소들에게 영향을 주지 않는다. transform 된 후의 요소의 모습은 무시한다.
Visibility
요소의 표시 여부를 나타내는 속성
속성값: visible-기본값 | hidden
visibility: hidden; 을 적용해도 요소는 화면에 보이지 않을 뿐 영역은 차지하고 있다.
(opacity: 0;과 유사하나 display: none;과는 다름❗)
※ display: none;은 영역도 차지하지 않고 존재하지 않는 것을 의미한다.
📓 참고
☪ display: none, visibility: hidden, opacity: 0 의 차이점은?
🅰 공통점: 화면에 보이지 않는다.
✴ display: none
영역 존재하지 않음
이벤트(ex.클릭) 작동 안함
tab focus 안됨
✴ visibility: hidden
영역 차지함
이벤트(ex.클릭) 작동 안함
tab focus 안됨
뒤에 있는 요소 클릭 가능
✴ opacity: 0
영역 차지함
이벤트(ex.클릭) 작동 함
tab focus 됨
뒤에 있는 요소 클릭 불가능
☪ transform에 여러 속성을 함께 적용시키려면?
🅰 콤마(,)없이 공백(스페이스)로 구분해 속성을 작성한다.
예. transform: scale(2.5) translate(50px, 100px) rotate(90deg);
