본문 바로가기

CSS

 (48)
white-space 👩‍💻 개요 개행문자, 스페이스, 탭, 자동 줄바꿈, 줄 끝의 공백과 같은 공백 문자들을 어떻게 처리할 지 지정하고 싶을 때 사용하는 속성. 👩‍💻 문법 white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; (initial: 기본값으로 설정. inherit: 부모 요소의 값을 상속받음.) 👩‍💻 동작 정리 개행문자 스페이스, 탭 자동 줄 바꿈 줄 끝의 공백 normal 병합 병합 예 제거 nowrap 병합 병합 아니오 제거 pre 유지 유지 아니오 유지 pre-wrap 유지 유지 예 넘침 pre-line 유지 병합 예 제거..
Transition 보호되어 있는 글입니다.
transform 보호되어 있는 글입니다.
reset css * { box-sizing: border-box; margin: 0; } body { font-family: "DM Sans", sans-serif; } /* Reset CSS */ a { text-decoration: none; color: inherit; } button, input, textarea { font-family: "DM Sans", sans-serif; font-size:16px; } button:focus, button:active, input:focus, input:active, textarea:focus, textarea:active{ box-shadow:none; outline:none; } ol, ul, li { list-style:none; padding-left:0; mar..
:root 색상 정리 보호되어 있는 글입니다.
button hover했을 때 아래줄 생기게 하기 button::after { content: ""; width: 0; height: 2px; background-color: #0066ff; position: absolute; bottom: 0; left: 0; transition: width 250ms ease-in; } button:hover::after { width: 100%; }
button, input, textarea의 font-family body에 font-family를 줘도 button이나 input, textarea에는 폰트가 안먹고 system ui 그대로일 수 있으니 따로 font-family 한번 더 선언해 줄 것.
열거한 아이템들 사이 CSS로 ·(점) 넣기 span::after { content: "·"; margin: 0 6px; } span:last-child::after { content: ""; margin: 0; } ::after로 만든 요소는 inline > margin top/bottom은 가질 수 없어도 margin left/right은 가질 수 있으니 margin: 0 6px 괜찮다 열거된 아이템 마지막에는 점을 넣고 싶지 않으니까 span의 가장 마지막 child의 뒤에는 content 없애버림.

티스토리툴바