無제

🟢   padding콘텐츠(content)와 테두리(border) 사이의 안쪽 여백(inner space)으로, 요소의 내부 크기를 확장하는 속성.배경색: 요소에 배경색(background-color)이 지정되어 있다면, 패딩 영역도 배경색이 칠해진다.음수 값: 음수(-) 값을 사용할 수 없다.width/height와 합산될 수 있다. 🔹 box-sizing 속성요소의 width와 height가 무엇을 포함하는지를 결정하는 속성.div { width: 200px; padding: 20px; border: 5px solid black; box-sizing: content-box;}content-box: padding과 border는 width/height에 포함되지 않음. (content 크기만..

🟢   margins가장 바깥쪽 공간으로, 요소와 요소 사이의 바깥쪽 여백(공간)을 조절하는 속성.투명 영역: 배경색이나 배경 이미지가 적용되지 않고 투명하다.음수 값: 음수(-) 값을 사용할 수 있다. 요소를 위로 끌어올리거나 겹치게 만들 수 있다. (남용 시 레이아웃 깨짐) ◼️ 가로 가운데 정렬 width 지정 후, 마진을 0(위/아래) auto(좌/우-자동계산)로 설정하면 브라우저가 남는 공간을 좌우로 균등 분배해서 요소를 가운데 정렬하는 방식. .box { width: 1100px; margin: 0 auto;}문법: margin: 0 auto;block 요소여야 한다.적용 가능: div, section, article.적용 불가능: span, a (inline 상태) 📐 개별..

🌟 박스 모델 방향 🌟 ↩️(시계 방향으로)↩️12시 - top09시 - left 03시 - right06시 - bottom 🌟 border-radius 방향 🌟 ↩️(시계 방향으로)↩️10시 30분 01시 30분07시 30분 04시 30분🟢   border padding 바깥, margin 안쪽에 있는 테두리(경계선)을 설정하는 속성. 📦  Box Model 구조(안 → 밖 순서)[ content (내용) ] [ padding (안쪽 여백) ] [ border (테두리) ] [ margin (바깥 여백) ] 🎯 주요 속성 3가지 🎯 🔹  border-width테두리의 두께를 지정..box { border-w..

🔶   Box Model 🔶웹 페이지의 모든 요소는 사각형 박스 모양으로 구성되어 있는데, 이를 CSS 박스 모델(Box Model) 이라고 부른다. 이 박스는 내용(content), 패딩(padding), 테두리(border), 여백(margin) 4가지 영역으로 구성되어 있다. 🔹  Box Model 구성 요소 박스 모델은 안쪽에서 바깥쪽으로 다음과 같은 순서로 이루어져 있다.content (내용): 실제 텍스트, 이미지, 요소가 들어가는 영역.속성: width, height.padding (안쪽 여백): 내용(content)과 테두리(border) 사이의 공간.속성: padding, padding-top, padding-right, padding-bottom, padding-left bord..

🟢  inline-block블록(block) 요소의 속성과 인라인(inline) 요소의 속성을 동시에 가지는 속성. 인라인(inline)처럼 한 줄에 여러 블록 배치가 가능하고, 블록(block)처럼 너비(width)와 높이(height) 조절이 가능하다.📊  (inline) vs (block) vs (inline-block) 비교 📊 특징inlineblockinline-block줄 바꿈 X (옆으로 나열)O (새 줄 차지) X (옆으로 나열) 기본 너비콘텐츠만큼부모의 100%콘텐츠만큼크기 지정XOO상하 여백X (배경만 칠해짐)OO ◼️  텍스트 정렬용 속성 .container { text-align: center;}.box { display: inline-block;} 🔹 text-alig..

🟢  table표의 테두리, 크기, 셀 간격, 정렬 및 레이아웃 방식을 정교하게 제어하는 속성. 🔹 border 표와 셀의 테두리 설정.table, tr, th, td { border: 1px solid black; }문법: border: 두께 스타일 색상;테이블뿐 아니라 모든 요소에 사용 가능하며, th, td에도 각각 적용해야 전체 선이 보인다. 🔹 border-collapse 셀의 테두리 병합 여부 결정./* 기본값 */table { border-collapse: separate; }/* 테두리 합침 */table { border-collapse: collapse; }separate: 셀마다 테두리 따로 존재. (기본값)collapse: 인접한 테두리를 하나로 합침.(실무 시 필수 사용) ..