🍑CSS
-
3차원의 변환효과가 적용이 된 요소(
tranform:rotateY(45deg))의 자식요소에서 또 다른 3차원의 변환효과를 추가하는 것이 기본적으로 허용이 되어있지않다. -
이를 해결하기 위한 속성이 자식요소에 변환효과를 주기 위해 부모요소에 추가하는
transform-style : preserve-3d이라는 속성이다. -
해당 preserve-3d는 자식요소에만 영향을 끼친다. (손자요소까지는 X)
🍑 transform
rotate
rotateX : X축 기준 돌리기
rotateY : Y축 기준 돌리기
rotateZ : Z축 기준 돌리기
perspective의 개념
- 속성 : 관찰 대상의 부모요소
- 함수 : 관찰 대상 자체가 적용 대상
perspective 속성과 함수 예제
첫번째 그림은 container에
perspective : 300px속성을 이용하여 자식요소를 관찰하였고
두번째 그림은 container의 자식인 item의 transform에perspective(300px)를 적용하였다.
둘다 같은 결과이다.
transform
변환효과 2D/3D
transform-origin
기본 : 50% 50%
변환이 일어나는 기준점
perspective
- 함수 : 요소 자체
- 속성 : 요소 상위
perspective-origin
기본 : 50% 50%
변환에 대해서 눈으로 보는 위치 지점
backface-visibility
기본 : visible
그외에 hidden을 사용하여 숨기기도 한다
🍑 position : absolute => 멋대로 움직이기
absolute 속성값은 브라우저가 문서의 흐름과 상관없이 (요소를 수직으로 쭉 놓을지, 수평으로 쭉 놓을지 등을 결정하는 것) left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값
- 즉, 블럭단위로 순차적으로 쌓이던 것이 absolute가 되면 멋대로 요소가 움직이게 된다. (블럭단위에서 빠져나오고)
ex1)
<div class='a'>a</div>
<div class='b'>b</div>
<style>
div{
width:300px;
height:400px;
border:solid 4px;
background-color:orange;
}
.a{
/*position:absolute;*/
}
</style>각각의 div에 의해 a사각형 아래에 b사각형이 쌓이게된다.
ex2)
<div class='a'>a</div>
<div class='b'>b</div>
<style>
div{
width:300px;
height:400px;
border:solid 4px;
background-color:orange;
}
.a{
position:absolute;
}
</style>a사각형이 absolute 속성에 의해 블럭단위를 빠져나와서 해당 위치를 b사각형이 옮겨져 실제 left right top bottm 값을 주지않아 a위치는 변하지않은채로 a사각형이 보이지만 뒤에는 b사각형은 block단위에 의해 같은 위치에 존재한다.
🍑 다단(Multi-columns)
- columns : 너비 개수
1) column-count : 개수 => 기본은 1
2) column-width : 너비 => 최적의 너비 조정- column-rule : 너비 스타일 색생
1) column-width
2) column-style
3) column-color- column-gap( gap으로도 사용 )
🍑 filter 함수
- blur(Apx) => A가 클수록 흐림정도가 높다
- grayScale(A%) => 100%가 생략되어있고 무채색과 관련
- invert(A%) => 100%가 생략되어있고 색상반전
- drop-shadow(x축거리 y축거리 blur정도 색상)
=> 요소의 배경이 있다면 배경에맞게 적용
=> 요소의 배경이 없다면 요소에맞게 적용- brightness(A) => 기본은 1이고 높을수록 밝고 낮을수록 어둡다
- contrast(A%) => 기본은 100%이고 색상대비와 관련
- opacity(A%) => 기본은 100%이고 0~100사이 퍼센트 단위의 투명도
- saturate(A%) => 기본은 100%로 채도와 관련
- sepia(A%) => 기본은 100%로 오래된 사진을 표현 / 0이되면 원래의 사진을 의미
- hue-rotate => 숫자에 따르는 색조를 보인다. 0~360deg 사이
사용법
filter : 해당함수
🍑 backdrop-filter
filter와 비슷하나 요소의 배경에 보여지는 영역을 필터함수로 효과를 적용한다.
ex) 화장실 안의 사람(배경에 보여지는 영역)이 화장실 불투명 유리막(필터함수)에 의해 효과가 적용되어 보이는 것
🍑 CSS 변수 사용하기
- 명시도 : 주어진 CSS 선언에 적용되는 가중치(weight)
:root: HTML의 루트 요소는 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 같다
:root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.
ex
:root{
--color-primary:royalblue
}
.box{
background-color : var(--color-primary)
}
- 만약 container에서 선언된 변수가 자식요소인 item에 적용시키면 다른 list에서의 자식요소인 item에는 적용되지않는다. (유효범위를 가짐)
var(--color-success,orange)의미
기존에 --color-success가 있다면 그 변수값으로 처리하고
만약 존재하지 않는다면 orange(두번째 매개변수)로 처리한다
🍑 supports
지원 여부에 다라 다른 스타일 선언
supports 사용법
@ supports (기능){
사용
}
//기능이 있다면 사용
@ supports not (기능){
사용
}
//기능이 없다면 사용- 해당 기능은 and or 연산으로도 가능하다.
(기능1) and (기능2) - 주의 : not은
not ( ( 기능1 ) and ( 기능2 ) )로 괄호 2개 필요
🍑 미디어 쿼리
사용법
@ media 타입 and (기능) {스타일}
@ media (기능) and (기능) {스타일}
@ media not all and (기능) and (기능)
@ media ___ , tv and () {스타일}
- not의 경우 타입을 생략하지 않고 써야한다.
orientation
- portrait : 가로보다 세로가 길 때 (모바일 평상시)
- landscape : 세로보다 가로가 길 때 (모바일 세로전환)
