align-content🔹Flexbox 또는 Grid 컨테이너에서 여러 행(row) 또는 여러 열(column) 간의 정렬을 제어하는 속성 ✔️ 여러 줄을 정렬 할 때 사용 (단일 행/열에는 align-items 사용)✔️ 컨테이너 내의 여유 공간이 있을 때만 작동 속성stretch (기본값) - 컨테이너의 크기에 맞게 아이템을 늘림.flex-start - 아이템을 컨테이너의 시작 부분에 정렬.flex-end - 아이템을 컨테이너의 끝 부분에 정렬.center - 아이템을 컨테이너의 중앙에 정렬.space-between - 아이템 사이의 간격을 동일하게 배치.space-around - 아이템 주위에 동일한 간격.space-evenly - 아이템과 컨테이너의 여백을 포함하여 동일한 간격을 배치. 예시Fl..

선택자(selector)·선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.·선택자의 종류는 type선택자, id선택자, class선택자, 전체선택자, 하위선택자, 자식선택자, 인접선택자, 형제선택자, 그룹 선택자, 속성 선택자, 가상 클래스 선택자, 가상 요소 선택자, 종속 선택자, 선택자의 우선순위 가있습니다.·CSS로 속성을 부여하는 형식은 다음과 같습니다. type선택자 선택자중 가장 간단한 선택자입니다.html문서의 태그 이름을 선택자로 사용할 수 있습니다. 태그를 선택자로 지정하여 빨간색으로 바꾸었다.결과id선택자 ※html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.※html 요소에id로 이름을 붙일 때에는..

- max-widthmax-width는 이 안에 지정한 속성들이 max-width 로 지정해놓은 최대 넓이보다 커진다면 적용되는 것이다.- index.html Card Heading or Title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Assumenda deserunt vel nostrum tempore exercitationem dicta ipsum pariatur, cupiditate architecto. Totam nostrum natus in tempora ipsa perspiciatis, quos eaque quas q..

절대 단위 vs 상대 단위절대 단위px, cm, mm, in, pt, pc화면 크기에 상관없이 고정된 크기상대 단위em, rem, %, vw, vh, vmin, vmax 등다른 요소나 뷰포트 크기 기준으로 결정됨1. px (픽셀)절대 단위화면의 실제 픽셀 기준1px ≈ 0.26mm (96DPI 기준)✅ 고정된 디자인에 적합font-size: 16px; /* 약 4.2mm */ 2. em상대 단위 (부모의 font-size 기준)1em은 부모 요소의 폰트 크기와 같음누적될 수 있음1em = 보통 16px = 약 4.2mmfont-size: 1.5em; /* 약 6.3mm (16px 기준) */ 3. rem (root em)상대 단위 (html의 font-size 기준)중첩 구조에서도 일관된 크기기본값: 1..

position 엘리먼트에 CSS 속성으로 position을 지정하여 속성의 상대적, 절대적 위치를 지정할 수 있게됩니다. div { position: static; top: 10px; left: 50px; } position 요소는 위와 같은 형식으로 지정하며, 지정한 속성값에 따라 위치를 조정합니다. positiondescription static 기본값. 부모 요소를 기준으로 한 위치로써, 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되게 됩니다. left, top, right, bottom과 같은 offset은 무시됩니다. relative 자기 자신의 위치를 기준으로한 상대적인 위치로서, top, left, right, bottom 등의 속성값을 지정해 기준 위치로부터 얼마나..

[1] CSS 박스 모델 - 모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 - 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖음 박스 모델 용어 content(내용) 텍스트나 이미지 등 박스 내의 실제 내용 border(테두리) 박스의 테두리(내용과 패딩이 안에 포함) padding(패딩) content와 border 사이의 간격(안쪽 여백) margin(마진) border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성 width 박스의 넓이(default: display 속성에 의해 결정) height 박스의 높이(default: 일반적으로 콘텐츠의 높이) background 박스의 배..