### CSS Advanced
border-radius: ;
px, % 단위로 둥글기를 조절 할 수 있다.
1 개의 값을 적는 경우 : 네 모서리 모두에 적용된다.
2 개의 값을 적는 경우 : 각각 왼쪽 상단과 오른쪽 아래, 오른쪽 상단과 왼쪽 아래 모서리에 적용된다.
3 개의 값을 적는 경우 : 각각 왼쪽 상단, 오른쪽 상단과 왼쪽 아래 , 오른쪽 아래 모서리에 적용된다.
4 개의 값을 적는 경우 : 각각 왼쪽 상단, 오른쪽 상단, 오른쪽 하단 모서리, 왼쪽 하단 모서리에 적용된다.
border-image: url() (숫자) (타입) ;
일반 테두리 대신 사용할 이미지를 지정할 수 있다.
타입
round : 이미지의 중간부분이 반복되어 테두리가 만들어진다.
stretch : 이미지의 중간부분이 확장되어 테두리가 만들어진다.
다중 background
background-image: ;
이미지의 url을 여러 개 추가하면 다중 배경을 만들 수 있다.
ex) url(이미지링크1), url(이미지링크2)
background-position: ;
이미지를 추가한 순서대로 위치를 정해 준다.
ex) left top, left bottom, right top, right bottom
background-repeat: ;
이미지를 추가한 순서대로 이미지 반복 여부를 정해 준다.
ex) no-repeat, repeat
속성으로 설정하기
background: ; <- 이 안에 이미지링크 배치위치 반복여부, 이미지링크 배치위치 반복여부 이런 식으로 기입하면 빠르게 설정할 수 있다.
background-size: ;
안에 배경 사이즈값을 넣어준다. (px단위)
contain/ cover를 넣어준다.
contain : 컨텐츠 영역의 폭에 맞게 이미지 크기를 조정한다.
cover : 컨텐츠 영역의 높이에 맞게 이미지 크기를 조정한다.
둘 다 조정한 크기에 맞추어 폭이나 높이가 일부 보이지 않을 수 있다.
브라우저 전체 페이지를 이미지로 채우기
style에서 html의 background와 background-size를 설정해 준다.
background-origin: ;
배경 이미지의 위치를 지정한다.
border-box : 테두리의 왼쪽 상단에서 이미지 시작
padding-box : 패딩 왼쪽 상단에서 이미지 시작
content-box : 컨텐츠의 왼쪽 상단에서 시작
background-clip: ;
배경 이미지가 덮는 영역을 지정한다.
border-box : 테두리의 바깥 쪽 가장자리까지 덮는다.
padding-box : 패딩의 바깥 쪽 가장자리까지 덮는다.
content-box : 컨텐츠 안을 덮는다.
그라디언트
선형 그라디언트(위->아래 기본값) :
background-image: linear-gradient(방향,시작색,...,끝색);
방향
to right : 왼쪽에서 오른쪽으로 그라디언트
to bottom right : 왼쪽 상단에서 오른쪽 하단으로 그라디언트 (대각선)
반복 선형 그라디언트( 그라디언트 반복됨):
repeating-linear-gradient(); 사용
원형 그라디언트(방사형, 안->밖 기본값) :
radial-gradient(모양, 시작색,...,끝색); 사용
모양
기본값은 타원이다.
circle: 원형
closest-side
farthest-side
closest-corner
farthest-corner
반복 원형 그라디언트
repeating-radial-gradient(); 사용
text-overflow: ;
clip : 오버플로우된 텍스트를 자른다.
ellipsis : 오버플로우된 텍스트가 ...(말줄임표) 로 렌더링된다.
word-wrap: ;
break-word : 긴 한 단어가 화면 밖으로 나가지 않게 잘라서 다음 줄에 쓴다.
word-break: ;
break-all : 단어를 테두리에 맞게 다 자른다.
keep-all : 하이픈(-)을 끊는다.
writing-mode: ;
horizontal-tb : 기본값이다. 왼쪽에서 오른쪽으로 수평
vertical-rl : 고개를 오른쪽으로 90도 기울여서 볼때 잘 읽히게 수직으로 텍스트를 나열한다.
2D 변환
transform: ;
translate(x,y) : 현재 위치에서 이동한다. (px단위)
rotate(Xdeg) : 시계방향으로 X 도만큼 회전한다(-는 반시계로_
scaleX(x) : 요소의 너비를 늘리거나 줄인다. (배수)
scaleY(y) : 요소의 높이를 늘리거나 줄인다. (배수)
scale(x,y) : 요소의 크기를 늘리거나 줄인다.(가로,세로)
skewX() : 요소를 x축을 따라 각도만큼 기울인다.
skewY() : 요소를 Y축을 따라 각도만큼 기울인다.
skew(xdeg,ydeg) : 요소를 x,y 축을 따라 각 각도만큼 기울인다.
matrix(): 위의 모든 방법을 하나로 결합한다.
(scaleX,skewY,skewX,scaleY,translateX,translateY)
3D 변환
transform: ;
rotateX() : x축을 중심으로 주어진 각도만큼 회전시킨다.
rotateY() : y축을 중심으로 주어진 각도만큼 회전시킨다.
rotateZ() : z축을 중심으로 주어진 각도만큼 회전시킨다.
전환
transition: 효과를 넣을 CSS속성 , 지속 시간 ;
hover을 사용하여 적용할 효과에 대해 작성한다.
transition-timing-function: ;
ease : 느리게 시작한 다음 빠르게 전환 한 다음 천천히 종료하여 전환 효과를 지정한다. (기본값).
linear : 처음부터 끝까지 같은 속도로 전환 효과를 지정한다.
ease-in : 느린 시작으로 전환 효과를 지정한다.
ease-out : 느린 끝으로 전환 효과를 지정한다.
ease-in-out : 느린 시작과 끝으로 전환 효과를 지정한다.
cubic-bezier(n,n,n,n) : 사용자 정의 값을 정의할 수 있다.
transition-delay: ;
효과로 전환되기 전 지연 시간을 지정한다. (s단위)
애니메이션
@keyframes (name): 안에 적은 애니메이션을 name을 적은 요소에 바인딩한다.
ex)
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
animation-duration : 애니메이션을 완료하는 데 걸리는 시간.(기본값 0초)
animation-delay : 애니메이션 시작 지연시간을 지정한다.(음수 값도 허용)
animation-interaction-count : 애니메이션 실행 횟수를 지정한다.(횟수 또는 infinite 사용 가능(무한반복))
animation-direction: ;
normal : 애니메이션이 정상적으로 재생된다. 기본값
reverse : 애니메이션이 역방향으로 재생된다.
alternate : 애니메이션이 정상적으로 재생된 뒤, 역으로 재생된다.
alternate-reverse : 애니메이션이 역방향으로 재생된 뒤, 정상적으로 재생된다.
animation-timing-function: ;
ease : 느리게 시작한 다음 빠르게 재생 한 다음 천천히 종료한다. (기본값).
linear : 처음부터 끝까지 같은 속도로 애니메이션을 지정한다.
ease-in : 느린 시작으로 애니메이션을 지정한다.
ease-out : 느린 끝으로 애니메이션을 지정한다.
ease-in-out : 느린 시작과 끝으로 애니메이션을 지정한다.
cubic-bezier(n,n,n,n) : 사용자 정의 값을 정의할 수 있다.
animation-fill-mode: ;
none : 스타일을 적용하지 않는다. 기본값
forwards : 요소는 마지막 키 프레임에서 설정 한 스타일 값을 유지한다. (애니메이션 방향 및 애니메이션 반복 횟수에 따라 다름)
backwards : 요소는 첫 번째 키 프레임에 의해 설정된 스타일 값을 가져오고 (애니메이션 방향에 따라 다름) 애니메이션 지연 기간 동안 이를 유지한다.
both: 애니메이션은 앞뒤로 규칙을 따라 애니메이션 속성을 양방향으로 확장한다.
툴팁
오른쪽 툴팁 :
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
왼쪽 툴팁 :
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
위쪽 툴팁
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
아래쪽 툴팁
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}
아래쪽 화살표 툴팁
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
위쪽 화살표 툴팁
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
왼쪽 화살표 툴팁
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
오른쪽 화살표 툴팁
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
객체 맞춤
object-fit: ;
cover : 설정한 이미지의 크기대로 이미지를 잘라서 보여준다.
fill : 설정한 크기대로 이미지가 보여진다. 비율이 안맞을 수 있음. 기본값.
contain : 컨텐츠 상자에 들어가면서 가로세로 비율을 유지한다.
none : 크기가 조정되지 않음
scale-down : 내용이 없거나 포함되지 않은 것처럼 크기가 조정된다.
사용자 인터페이스
resize: ;
사용자가 요소의 크기를 조정할 수 있다.
horisontal : 사용자가 요소의 너비만 조절할 수 있다.
vertical : 사용자가 요소의 높이만 조절할 수 있다.
both : 사용자가 요소의 너비와 높이 모두 조절할 수 있다.
변수
:root에서 --로 시작하는 변수를 선언하고, 사용시 var(변수이름)으로 사용할 수 있다.
flexbox
display 속성을 flex로 해주면 flex container이 유연해진다.
flex-direction: ;
컨테이너가 플렉스 항목을 쌓을 방향을 정의한다.
column : 위에서 아래로 수직 정렬
column-reverse : 아래에서 위로 수직 정렬
row : 왼쪽에서 오른쪽으로 수평 정렬
row-reverse : 오른쪽에서 왼쪽으로 수평 정렬
flex-wrap: ;
wrap : flex 항목을 래핑한다.
nowrap : flex 항목을 래핑하지 않는다.
wrap-reverse : flex 항목을 역방향으로 래핑한다.
flex-flow: ;
flex-dirextion과 flex-wrap 을 속성으로 설정하기 위한 옵션이다.
justify-content: ;
center : flex 항목을 컨테이너 중심에 맞추어 정렬한다.
flex-start : 컨테이너 시작부분에 맞추어 flex 항목을 정렬한다.
flex-end : flex 항목을 컨테이너 끝에 맞추어 정렬한다.
space-around : flex 항목의 전 후, 항목간의 사이에 공간을 두어 정렬한다.
space-between : flex 항목간의 사이에 공간을 두어 정렬한다.
align-items: ;
center : flex 항목을 컨테이너 중심에 맞추어 정렬한다.
flex-start : 컨테이너 상단부분에 맞추어 flex 항목을 정렬한다.
flex-end : flex 항목을 컨테이너 하단에 맞추어 정렬한다.
stretch : flex 항목을 컨테이너 크기에 맞게 늘려 정렬한다.
baseline : flex 항목을 기준선에 맞추어 정렬한다.
align-content: ;
space-around : flex 항목의 전 후, 항목간의 사이에 공간을 두어 정렬한다.
space-between : flex 항목간의 사이에 공간을 두어 정렬한다.
stretch : flex 항목을 컨테이너 크기에 맞게 늘려 정렬한다.
center : flex 항목을 컨테이너 중심에 맞추어 정렬한다.
flex-start : 컨테이너 상단부분에 맞추어 flex 항목을 정렬한다.
flex-end : flex 항목을 컨테이너 하단에 맞추어 정렬한다.
justify-content 와 align-items 속성을 둘 다 center로 하면 flex 항목이 완별하게 가운데에 배치된다.
flex 항목의 속성
order : flex 항목의 순서를 지정한다.
flex-grow : 나머지 flex 항목에 비해 확대되는 지정한다.(기본값 0)
flex-shrink : 나머지 flex 항목에 비해 축소되는 정도를 지정한다.(기본값 1)
flex-basis : flex 항목의 초기 길이를 지정한다.(px 단위)
flex: ; 를 사용하면 위 3 개 항목을 속성으로 설정할 수 있다.
align-self: ;
특정 항목의 정렬을 지정한다. align-items로 설정된 것보다 우선순위가 높다.
