본문 바로가기

CSS/learned_it_today

 (34)
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 없애버림.
.sr-only 스타일링 display:none을 해버리면 편할 것 같지만 display:none의 치명적 단점은 screen reader마저도 저 요소가 존재하지 않는 요소라고 생각해서 읽어주지 않는다. 그럼 sr-only를 만드나 마나...하게 됨 .sr-only{ position:absolute; z-index:-100; } position:absolute를 주면 아예 집나간 자식이 되서 부모 요소는 이 친구가 어디 갔는지 모르고 형제들도 모름.. 그리고 z-index를 줘서 아주 아래로 꺼져버리게(.. )만들었다. 이것만으로 부족하다고 생각이 된다면 .sr-only{ position:absolute; z-index:-100; width:1px; height:1px; overflow:hidden; opacity:0; } w..
작은 아이콘, 이모지가 옆의 글자들과 높이 맞춰주기 .badge{ position:relative; top:2px; } position:relative -원래 자신의 위치 기준. -뒤에 따라오는 다른 요소에 영향을 미치지 않음 옆에 따라오는 text에 비해 넣어준 아이콘이나 이미지가 너무 위에 있으면 position:relative를 이용해서 top,bottom,right,left 조정을 살짝씩 해준다.
세로가 긴 이미지, 가로가 긴 이미지 div에 맞추기 .img-container { width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .img-container img.vertical { width: 100%; height: auto; } .img-container img.horizontal { width: auto; height: 100%; } 임의로 가로 300px 세로 200px인 div에 딱 맞는 이미지를 넣으려고 할때 (마치 배경이미지처럼) div보다 세로가 긴 이미지인 경우 (.vertical) width:100%주고 height는 자기가 원래 가지고 있는 비율대로 나오게 하기 위해 auto를 준다. ..

티스토리툴바