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 새로운 쌓임 맥락 생성(→ 방지하고 싶..
css 속성 css 변수 root css파일에 :root 가상클래스를 만들어 유지보수를 손쉽게 할 수 있다.(색상, 폰트) :root { --color-black: ##0D0D0D; } vmin Viewport의 가로와 세로 길이 중 짧은 길이 vmax Viewport의 가로와 세로의 길이 중 긴 길이 z-index z축 정렬. 형제 요소의 z-index끼리 비교하여 숫자가 크면 앞 작으면 뒤에 배치 - auto 기본값 - -1(음수) 가장 아래(부모 요소 뒤로 감) filter - blur() 블러 - brightness() 밝기 - contrast() 대비 - drop-shadow() object에 그림자 주기 - grayscale() 흑백 - hue-rotate(0deg~360deg) 색상 변경 -..
와이어프레임(Wireframe) : 와이어로 설계된 모양 단순한 선이나 도형으로 웹/앱의 인터페이스를 시각적으로 묘사한 것 레이아웃과 구조를 보여주는 용도 목업(Mock-up) : 실제 작동하는 모습과 동일하게 하드코딩 와이어프레임> 목업> JavaScript 이 단계를 따르지 않으면 설계도 없이 건물을 짓는 것과 같다. Flexbox 속성 * 부모요소에 적용 display: flex; flex-direction 정렬축 정하기 - row 가로 정렬(기본값) - column 세로 정렬 - row-reverse 가로 역순 정렬 - column-reverse 세로 역순 정렬 flex-wrap 줄 바꿈 설정하기 : 하위 요소 크기가 상위 요소 크기를 초과하면 줄바꿈을 할지 여부 설정 - nowrap 줄바꿈하지 ..