CSS 출력
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() 는 마진 설정을 가지는 박스 배치, 폼 요소의 사이즈 변경 등
Reference
이 문제에 관하여(CSS 출력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/minioyan/items/1a90dd1144c95991c044
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<h1>猫である</h1>
h1::before {
content: ‘吾輩は、’;
}
.hoge{
width: calc(100% / 6);
}
Reference
이 문제에 관하여(CSS 출력), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/minioyan/items/1a90dd1144c95991c044텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)