label, input처럼 함께 있어야하는 짝꿍 요소이지만 화면에서 안보이게 하고 싶을 때 - display:none처럼 화면에서 완전히 없애거나 - visibility: hidden처럼 자리 차지하지 않고 화면에 존재는 하지만 공간 배정을 없앰 .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; } * 참고 github visually-hidden 2023.04.17
box-shadow로 내부 모서리 만들기 box-shadow: 0 0 0 3px #000 inset; /* 가로, 세로, 블러정도, 크기, 색상 */ word-break 단어 기준 줄바꿈 word-break: break-all; /* 모든 문자 분리 */ word-break: keep-all; /* 단어마다 분리 */ overflow-wrap 라인 기준 줄바꿈 overflow-wrap: normal; /* 공백이 있어야 줄바꿈 */ overflow-wrap: break-word; /* 필요 시 언제든 줄바꿈 */ overflow-wrap: anywhere; /* break-word와 비슷한데 지원안되는 브라우저 있음 */ align-self로 요소의 위치 지정하기 align-self: start; /* ..
[CSS] 이미지를 정사각형 크기로 배치시키기
1. 이미지 컨테이너(div)를 생성하여 정사각형으로 만들어줌 2. 이미지를 컨테이너 내부에 위치시키기 /* html */ /* css */ div { position: relative; width: 100%; /* 가로 100% */ padding-bottom: 100%; /* 패딩으로 세로 100% 만들기 */ background-color: var(--white); /* 기본 배경색 */ } img { position: absolute; max-width: 100%; /* 최대 너비 */ max-height: 100%; /* 최대 길이 */ top: 50%; /* div 기준 세로 중간에 위치 */ left: 50%; /* div 기준 가로 중간에 위치 */ transform: translateY(..
Position static 기본값 요소를 일반적인 문서 흐름에 따라 배치 relative 요소를 일반적인 문서 흐름에 따라 배치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶다면 z-index: auto; 설정) absolute 요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간을 배정하지 않음 가장 가까운 위치 지정 조상 요소에 상대적으로 배치 (위치 지정 조상 요소는 position: static;이 아닌 요소, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준) 최종 위치는 top, right, bottom, left 값이 지정 z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶..