나디아 성장 일기

📌 Tailwind CSS : 유틸리티 기반의 CSS 프레임워크 미리 정의된 클래스를 활용해 빠르고 쉽게 스타일링할 수 있다. tailwindcss가 정해놓은 클래스 이름을 가져다가 쓰면 되기 때문에 네이밍에 대한 고민을 하지 않아도 된다. 컴포넌트마다 CSS 파일을 생성하지 않아도 된다.   ⏩ 설치 크로스 브라우징을 대응 해주는 postcss autoprefixer를 함께 설치 npm install -D tailwindcss postcss autoprefixer Tailwind CSS 패키지를 함께 설치할 경우https://tailwindcss.com/docs/guides/vitepnpm add postcss autoprefixer tailwindcss postcss-import -D   ✅ 사용 ..

inline-size : 요소의 인라인 방향(문서의 흐름 방향)의 크기 설정 기본적으로 수평 방향    길이 단위 픽셀(px) 퍼센트(%) 등inline-size: 300px; /* 고정 너비 */inline-size: 50%; /* 부모 컨테이너의 너비에 대한 비율 */   min() / max()inline-size: min(100%, 400px);   clamp() : 값의 범위를 제한하는 데 사용 inline-size: clamp(최소값, 중간값, 최대값);너비를 동적으로 조절    fit-content: 요소의 콘텐츠에 맞게 크기를 조정inline-size: fit-content;   min-content: 콘텐츠를 표시하는 데 필요한 최소 크기를 설정inline-size: min-conte..

resize : 사용자가 요소의 크기를 조절할 수 있는 방향을 설정 none: 조절 Xboth: 요소의 너비와 높이 모두 조절 허용horizontal: 요소의 너비 조절 허용 (높이는 조절 X)vertical: 요소의 높이 조절 허용initial: 요소에 적용된 기본 resize 속성 값으로 되돌아감inherit: 부모 요소의 속성 값을 상속.resize-horizontal { resize: horizontal; overflow: auto; border: 1px solid #ccc; padding: 10px;}    resize - CSS: Cascading Style Sheets | MDNThe resize CSS property sets whether an element is resizable..

aspect-ratio: 요소의 가로 대 세로 비율을 설정하여 요소의 크기를 유지하면서 원하는 비율을 유지하는 속성 부모 컨테이너나 뷰포트 크기가 변경되더라도 지정된 가로 대 세로 비율을 유지하면서 요소의 크기를 조정 이미지, 비디오, 미디어 콘텐츠의 반응형에 유용selector {    aspect-ratio: width / height; }    - 16 / 9: 요소를 16:9 비율로 설정 너비를 100%로 설정하면 높이는 자동으로 비율에 맞춰 조정됨.box { aspect-ratio: 16 / 9; width: 100%; background-color: lightblue;}  - 1 / 1: 요소를 1:1 비율로 설정 /* 1:1 비율을 유지하면서 최대 너비가 800px로 설정됨 */.vid..

transition 속성: 요소의 상태가 변경될 때, 변경이 즉시 이루어지지 않고 부드럽게 애니메이션 효과를 통해 이루어지도록 하는 속성  - transition-property: 애니메이션을 적용할 CSS 속성을 지정all: 모든 속성에 효과 지정 (기본값) width, height, background-color 등  a { transition-property: width, background-color, transform;}   - transition-duration: 전환이 완료되는 데 걸리는 시간을 설정 시간 단위는 초(s) 또는 밀리초(ms)a { transition-property: width, background-color, transform;}   - transition-timin..

📌 숨김 컨텐츠마크업은 숨기되 스크린 리더가 접근하고 읽을 수 있어야 함 속성화면스크린 리더기타 사항display: none;❌❌사용 지양 👎aria-hidden ⭕❌ overflow: hidden;❌⭕ visibility: hidden;❌❌ width / height / font-size : 0px;❌스크린 리더에 읽히긴 하나 ⭕ 빈 객체에 초점이 갈 수도 있음 (사용자에게 혼돈을 줌) 👎 black hat의 원인 👎text-indent: -9999px;❌스크린 리더에 읽히긴 하나 ⭕ 요소와 초점이 맞지 않음 ⚠검색 엔진 최적화에 좋지 않음(black hat) 👎opacity: 0;❌스크린 리더 활동에문제가 많음 👎사용 지양 👎clip: rect(0, 0, 0, 0);❌⭕더 이상 권장되지 ..

flex : flex container(부모 요소)가 block 요소 부모 요소가 한 줄을 차지하고, 다음 부모 요소는 그 아래에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되어 가로로 채워진다. 컨테이너 안의 자식 요소들이 반응형으로 동작 ⭕  inline-flex : flex container(부모 요소)가 inline 요소 부모 요소가 다른 인라인 요소와 같은 줄에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되지만, flex와 달리 한 줄을 차지하지 않는다는 점에서 차이가 있다. 컨테이너 안의 자식 요소들이 반응형으로 동작하지 않음 ❌See the Pen iiinlineflexxx by nadia kwon (@nadia-kwon) on CodePen.  참고  display - CSS: C..

📌 tabindex : tab 키로 이동할 때 HTML 요소의 포커스 되는 순서를 지정하는 속성 요소의 포커스 이동 순서를 변경하거나, 포커스를 받을 수 있는 요소를 추가할 수 있다.tabindex가 지정되지 않은 요소는 일반적으로 문서의 순서에 따라 탭 순서에 추가된다.  정수: 숫자 순서대로 포커스 된다. 키보드로 포커스 되며 ⭕, 접근 순서를 해당 값으로 지정 작은 숫자일수록 먼저 포커스를 받는다.  마크업 순서를 거스르기 때문에 주의해서 사용해야 한다. ex. 검색엔진 사이트에서 검색창에 적용 0: 포커스를 받을 수 없는 요소(div, span 등)도 포커스를 받을 수 있도록 한다. (대화형 컨텐츠) 기본값 포커스를 받되 ⭕ 마크업 순서를 따른다.  -1: 포커스를 받을 수 없도록 만든다. 키보..

📌 text-indent : 문단을 들여쓰기 하는 속성 (텍스트 블록의 왼쪽 여백 거리를 제어)양수 값: 첫 줄을 왼쪽 여백 바깥으로 밀어내어 문단을 빼어쓰기로 만듦 (ex. 리스트, 주석)음수 값: 첫 줄을 왼쪽 여백 안쪽으로 밀어 넣어 문단을 들여쓰기로 만듦(ex. 한 줄 제목, 서브 텍스트)See the Pen text-indent by nadia kwon (@nadia-kwon) on CodePen. 참고  text-indent - CSS: Cascading Style Sheets | MDNThe text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a blo..

📌 vertical-align: 부모 요소의 baseline을 기준으로 inline 상자를 정렬하는 속성 inline, inline-block, 테이블 셀 요소에만 적용text-align => block 요소가 갖는 속성 top: 요소의 baseline을 부모 요소의 top 부분에 맞춤bottom: 요소의 baseline을 부모 요소의 bottom 부분에 맞춤middle: 요소의 baseline을 부모 요소의 중앙에 위치See the Pen vertical-align by nadia kwon (@nadia-kwon) on CodePen. baseline: 요소의 baseline을 부모 요소의 baseline에 맞춤 (기본값)text-top: 요소의 top 부분을 부모 요소의 top에 맞춤text-bo..