css에 대해 배운 내용 요약

초학자가 CSS를 배우는 데 있어서, 처음으로 사용법을 고민할 것에 대해 정리해 본다

a 태그, button 태그에 사용되는 상태를 나타내는 CSS

:link
: visited
:hover
:active
: focus

LVHAF 순서로 설명의 우선 순위를 기억합니다.
:link-:visited-:hover-:active-:focus

:link
정상 상태에서의 표현

: visited
이미 클릭한 (방문된) 링크 상태

:hover
커서를 링크 위에 놓았을 때의 상태

:active
버튼을 누른 상태에서만 상태
첫 번째 버튼, 즉 오른손 마우스에서는 일반적으로 가장 왼쪽 버튼에만 적용해야합니다.

: focus
터치 디바이스로 탭했을 때, tab 키로 이동했을 때 등의 상태
기본적으로는 form 관련, 유저빌리티적으로 있는 것이 좋다

::before,::after

HTML에는 쓰여지지 않은 요소를 CSS로 만들 수 있다.

::before는 요소 바로 앞에 요소가 돌아옵니다.

::after는 요소 바로 뒤에 요소가 돌아옵니다.

구체적인 사용법

출력 결과 : 고배는 고양이입니다.

<h1>猫である</h1>

h1::before {
  content: ‘吾輩は、’;
}

장점

・SEO를 신경쓰지 않고 유저를 위한 자유로운 표현을 할 수 있다
(UI에 내고 싶지만 SEO로서 불필요한 요소를 CSS에서 화면에 맞춘다)
・아이콘이나 폰트를 의사 요소로 표시할 수 있다
・position: absolute로 절대 배치로 하고, 자신이 좋아하는 위치에 배치가 가능

구체적인 사용법

블로그 또는 카드 요소의 오른쪽 상단 레이블에 사용됩니다.

블로그 : 진정한 파티에서 인용

::backdrop-filter(IE 미대응)

배경에 필터를 사용할 수 있습니다.

구체적인 사용법

배경 슬리퍼 유리 표현 등

사용할 수 있는 코드 종류

코드
의미


blur
흐림(px로 지정)

brightness
밝기(단위 없음)

contrast
대비(%로 지정)

grayscale
모노톤(%로 지정)

invert
계조 반전(%로 지정)

hue-rotate
색조(deg로 지정)

opacity
불투명도(%로 지정)

세피아
세피아조(%로 지정)

saturate
채도(%로 지정)

drop-shadow
드롭섀도우(px로 지정)

장점

하나의 이미지의 별도 부분에 별도의 필터를 사용할 수 있습니다 (표현성이 풍부)
내부 요소에 영향이 없음
::filter와 코딩법은 동일

단점

대응 브라우저가 적고, 실험 상태

calc

css에서 계산 가능

구체적인 사용법

가로폭이 1/6이 된다

.hoge{
     width: calc(100% / 6);
}

장점

calc() 는 마진 설정을 가지는 박스 배치, 폼 요소의 사이즈 변경 등