Programming

[CSS 기초] 엘리먼트 수직, 수평 중앙 정렬하기 (vertical align, flex, text-align, position...)

🔷 수직 정렬 방법 ( 인라인 요소, 블록 요소 동일하게 적용됨 ) 수직정렬 시키는 요소의 부모 요소에 높이를 준다. (padding 줘도 ok) 🔹 vertical-allign, display 이용 부모 요소에 vertical-allign: middle; display: table-cell; 수직 중앙 정렬 - 결과 vertical-align은 원래 block 요소에 적용할 수 없으나, block 요소의 내부 요소는 적용이 가능합니다. 🔹 flex 활용 (1) align-items: center 이용 정렬시킬 요소의 부모 요소에 display: flex; align-items: center; 수직 중앙 정렬 수직 중앙 정렬 - 결과 (2) flex-direction, justify-content 이용 ..

[CSS 기초] 박스모델 Box Model (margin, padding, border)

css에서 모든 것은 box model로 이루어져있으며 이 box model을 이해해야 CSS로 레이아웃을 구성할 수 있습니다. box model은 margin(외부 여백), border(테두리), padding(내부 여백), content로 구성됩니다. box-sizing: border-box를 입력해줘야 하는 이유 box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다. box-sizing: border-box를 설정하지 않은 박스모델은 지정한 너비와 높이는 요소의 Content 크기에만 적용되므로 요소에 Border나 Padding이 있을 경우 지정한 높이나 너비에서 이것들을 더하여 계산합니다. 예시를 한 번 들어볼게요. div{ width: 300px; height: 200px..

[CSS 기초] 블록 요소(block element) vs 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element)

HTML의 요소는 블록 요소와 인라인 요소, 인라인블록 요소로 분류된다. 블록 요소 (block element) 기본 너비값이 100% (폼 엘리먼트 제외) 너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다. 너비값, 높이값 (width, height)을 가질 수 있다. 상하좌우 마진, 패딩 모두 가질 수 있다. 💡 div, p, h1-h6, ul, ol, blockquote, form, table, figure... 인라인 요소 (inline element) 컨텐츠 너비값이 기본 너비값이 된다. 요소들이 수평으로 쌓인다. 너비값, 높이값을 가질 수 없다. (폼 엘리먼트 제외) 상하 마진을 가질 수 없다. (좌우 마진, 상하좌우 패딩은 가능) block은 inline을 포괄하는 더 큰 개념이..