기초 CSS

기초 CSS

2023. 3. 8. 09:45ㆍ공부/HTML／CSS

a[target= _blank] : [속성=값] 일치하는 요소
[class ~= button] : [속성 ~= 값] 여러 속성중에서 해당 값이 포함된 요소. 반드시 값과 정확히 일치해야 한다.

.button은 가능하지만 .on-button은 불가능
[class |= button] : [속성 |= 값] 특정 값이 포함 된 요소. 속성 값은 일치해야 한다. 값의 경우 정확히 일치하거나 지정한 값을 하이픈(-)으로 연결되도 포함이다.

a title="on-button"이 |= 경우 가능 ~=의 경우 불가능
[class ^= button] : [속성 ^= 값] 속성값으로 시작, 일치하지 않아도 가능하다.

class="buttononbox" 의 경우 가능하다
[class $= button] : [속성 $= 값] 속성값으로 끝나는 요소. ^=에서 끝으로 바뀐 선택자
[class *= button] : [속성 *= 값] 어느 위치 상관없이 속성값 포함. 즉 값이 끝에 있든 중간이든 상관 없다.

구조가상클래스

:only-child : 부모안에 자식요소가 하나일 때 자식요소
a:only-child-of : 부모안에 A요소가 하나뿐일 때
:first-child, :last-child, a:first-of-type, a:last-of-type, :nth-child(n), :nth-last-child(n), a:nth-of-type(n), a:nth-last-of-type(n),

가상요소

::first-line, ::first-letter : 요소의 첫번째 줄, 첫번째 글자에 스타일 적용. 첫번째 글자는 반드시 첫째줄에 있어야 한다. 만약 <br>태그로 첫번째 글자가 첫번째 줄에 없으면 사용 불가
::before, ::after

transform : 2차원은 가로 X, 세로 Y. 3차원은 X,Y에 더하여 Z축이 있고 앞뒤로 움직인다.

scale : 1보다 크면 확대

pre spective : 현재 위치에서 밀거나 잡아당김

property(대상지정) : all | none | <속성이름> (대상지정)

all : 생략할 경우 모든 속성속성이름 : 적용할 속성 지정, 속성이 여러개 일 경우 쉼표(,)로 구분

name : 아무 속성도 안바뀜
duration(실행할 시간) : <시간>

두개를 합쳐서 transition-property : width, height; transition-duration 2s, 1s; 로 쓸 시 넓이는 2초 높이는 1초 동안
timing-function(실행형태) : linear | ease | ease-in | ease-out | ease-in-out | cubric-bezier
delay(지연시간) : <시간>

기본값 0, 지정한 시간만큼 기다린 후
축양 방법 : transition : <property> | <duration> | <timing-function> | <delay>

시간값이 2개면 앞은 duration 뒤는 delay

@keyframes : 애니메이션이 바뀌는 지점 지정
name : @keyframes로 설정한 중간 상태 지정
```
//@keyframes를 여러개 정의할 수 있기에 이름을 지정해 구분한다.

animation-name : <키프레임 이름> | none;

@keyframes{
	<선택자>{<스타일>}
}
```
keyframe의 선택자는 속성값이 바뀌는 지점. 0%, 100% 또는 form, to
delay : 시작 시간
duration : 실행시간. 기본 값은 0
diretion (종료 후 처음 부터 시작 또는 역방향 진행) : normal | reverse | alternate | alternate-reverse

normal : from - to, 기본값

reverse : to - from

alternate : 홀수 normal, 짝수 reverse

alternate-reverse : 홀수 reverse, 짝수 normal
iteration-count (반복횟수) : <숫자>|infinite
timing-function : 키프레임 전환형태. 시작, 중간, 끝에 속도를 지정하여 곡선을 만들 수도 있다. transtion과 동일
축약 : animation : <name> | <duration> | <timing-function> | <delay> | <iteration-count> | <direction>

두 가지 이상의 애니메이션은 콤마로 나눈다

한줄 일 때 : text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
여러줄 일 때 : display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;

BORANA