[TIL] CSS: 리스트, 테이블, 박스 모델과 마진/보더 정리

• CSS list-style - 마커 디자인 제어
• CSS table - 표의 가독성을 높이고, 테두리 제어
• display: inline-block - 블록과 인라인의 장점을 합친 가로 나열 및 크기 제어 속성
• CSS Box Model - 웹 요소의 크기를 결정하는 Content, Padding, Border, Margin의 상호작용
• CSS Borders 속성 - 테두리의 두께, 스타일, 색상 지정 및 모서리 곡률(border-radius) 제어
• CSS Margins 속성 - 요소 간의 바깥 여백 조절, 중앙 정렬 기법 및 마진 중첩 현상 이해

 

---

 

 

CSS list-style property

정보를 구조화하여 보여주는 CSS 리스트  속성

list-style-type (마커의 모양)

목록 아이템 앞에 붙는 마커(불릿이나 숫자)의 종류를 지정한다.

• 순서 없는 리스트(ul)의 경우 disc(기본 원형), circle(빈 원형), square(사각형), none(제거) 등을 사용한다.
• 순서 있는 리스트(ol)의 경우 decimal(숫자), lower-alpha(소문자 알파벳), upper-roman(대문자 로마자) 등을 사용한다.

 

list-style-position (마커의 위치)

마커가 목록 아이템의 안쪽(inside)에 위치할지, 바깥쪽(outside)에 위치할지 결정한다.

• outside는 마커가 본문 영역 밖에 위치하며, 글자가 길어져 줄 바꿈이 되어도 마커의 위치는 고정되어 깔끔하게 정렬된다. (기본값)
• inside는 마커가 본문 영역 안으로 들어오며, 줄 바꿈이 되면 마커 바로 아래까지 글자가 채워진다.

 

list-style (축약형 속성) 및 실무 활용

위에서 설명한 type, position, image 세 가지 속성을 한 줄로 줄여서 쓸 수 있다.

• 구문: list-style: [type] [position] [image];
• 보통은 이미지까지 쓰기보다는 list-style: none;을 사용하여 기본 스타일을 제거한 뒤, 커스텀 디자인을 입힐 때 가장 많이 활용합니다.

실무에서는 브라우저의 기본 스타일을 없애기 위해 list-style: none;을 정말 자주 사용한다.

불릿 대신 더 세련된 아이콘을 넣고 싶다면 list-style-image보다는 가상 요소(::before)를 활용하는 것이 위치 제어에 더 유리하다.

 

[표] 리스트 주요 속성 요약표

속성	설명	주요 값 예시
list-style-type	마커 모양 결정	disc, decimal, none
list-style-image	커스텀 이미지 마커	url('icon.png')
list-style-position	마커 배치 위치	inside, outside
list-style	위 속성들의 축약형	none, circle inside

 

 

[예제 코드] 기본 불릿 제거 및 위치 설정

CSS

 

/* 기본 불릿 제거 및 커스텀 마커 설정 */
.custom-list {
  list-style: square inside;
  background-color: #f9f9f9;
  padding: 20px;
}

/* 내비게이션 바 등을 만들 때 불릿 아예 제거 */
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px;
}

 

---

 

CSS Tables property

최신 레이아웃 시스템 이전부터 데이터를 구조화하는 데 사용된 CSS 테이블 속성

 

 

테이블 속성은 표의 가독성을 높이고, 테두리가 겹치는 방식이나 제목의 위치 등을 정교하게 제어하는 데 사용된다.

 

caption-side (표 제목 위치)

<caption> 태그로 작성된 표의 제목을 표의 위나 아래 중 어디에 배치할지 결정한다.

• top: 표의 윗부분에 제목을 표시한다. (기본값)
• bottom: 표의 아랫부분에 제목을 표시한다.

 

 

border (테두리) 및 border-spacing (보더 스페이싱) (간격)

테이블<table> 본체, 행(tr), 셀(th, td)에 테두리를 그린다.

 

테이블 자체에만 border를 주면 표 전체 외곽선만 생기므로 내부 칸막이를 만들려면 셀에도 각각 테두리를 지정해야 한다.

border-spacing은 인접한 셀의 테두리 사이 거리를 설정하며, border-collapse가 separate일 때만 동작한다.

값을 두 개 주면 가로 세로 간격을 다르게 설정할 수 있다.

 

 

border-collapse (보더 콜랩스)  (테두리 병합)

테이블의 테두리를 하나로 합칠지, 떨어뜨려 놓을지 결정하는 가장 중요한 속성이다.

• separate(세퍼레이트)는 셀마다 독립된 테두리를 가지며 기본값이다.
• collapse는 인접한 테두리를 하나로 합쳐서 깔끔한 실선 형태로 만들며, 현대 웹 디자인에서 가장 선호된다.

 

 

 

깔끔한 표를 만들 때는 border-collapse: collapse;를 먼저 선언하는 것이 기본 공식이다.

테이블은 데이터 표시용으로만 사용하고, 전체 페이지 레이아웃을 잡을 때는 Flex나 Grid를 사용하는 것이 웹 표준에 적합하다.

 

 

 

 

[표] 테이블 주요 속성 요약표

속성	역할	주요 값
caption-side	표 제목 위치 제어	top, bottom
border-collapse	테두리 병합 여부	collapse, separate
border-spacing	셀 사이의 간격	px, em 등 (separate일 때만)
table-layout	테이블 너비 계산 방식	auto, fixed

 

 

[예제 코드] 테두리 병합과 제목 위치 제어

CSS

 

table {
  width: 100%;
  /* 테두리를 하나로 깔끔하게 합침 */
  border-collapse: collapse; 
}

th, td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

/* 제목 위치를 아래로 설정 */
caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

 

---

 

 

CSS display: inline-block

 

CSS 인라인의 특징과 블록의 특징을 모두 가지고 있는 하이브리드 성격의 속성 

주요 특징과 사용하는 이유

요소를 한 줄로 나열하면서도 크기를 자유롭게 조절하고 싶을 때 사용하는 하이브리드 성격의 속성이다.

inline-block은 주변 요소들과의 관계에서는 inline처럼 행동하고, 자기 자신의 크기를 결정할 때는 block처럼 행동한다.

 

한 줄에 나열: 블록 요소(예: div)와 달리 줄 바꿈 없이 다른 요소와 같은 라인에 가로로 나열된다.

크기 설정 가능: 인라인 요소(예: span)와 달리 width, height, margin, padding 속성을 모두 완벽하게 적용할 수 있다.

텍스트 정렬 영향: 부모 요소의 text-align: center; 속성의 영향을 받아 간편하게 가로 중앙 정렬이 가능하다.

 

 

사용 시 주의할 점 (공백 현상)

HTML 코드 상의 줄 바꿈이나 띄어쓰기가 브라우저 화면에서 약 4px의 미세한 틈으로 나타나는 현상이 있다.

이는 브라우저가 코드의 빈 공간을 하나의 문자로 인식하기 때문이며, 부모 요소에 font-size: 0;을 주거나 HTML 태그 사이의 공백을 제거하여 해결할 수 있다.

 

 

가로 메뉴바를 만들 때 과거에는 float이나 inline-block을 썼지만, 최근에는 Flex를 사용하는 추세이다.

 

 

[표] inline vs block vs inline-block 특징 비교표

특징	inline	block	inline-block
줄 바꿈	없음 (옆으로 나열)	있음 (무조건 새 줄)	없음 (옆으로 나열)
기본 너비	콘텐츠만큼	부모의 100%	콘텐츠만큼
크기 지정	불가능	가능	가능
상하 여백	적용 안 됨	가능	가능

 

 

[예제 코드] inline-block을 활용한 박스 나열

CSS

 

.box {
  display: inline-block; /* 핵심 속성 */
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
}

 

---

 

 

 

CSS Box Model

 

웹 페이지의 모든 요소는 사각형 상자 모양으로 구성되며, 이를 CSS 박스 모델

 

 

이미지 출처 https://www.w3schools.com/css/css_boxmodel.asp

CSS에서 "박스 모델"이라는 용어는 웹 디자인과 레이아웃을 다룰 때 사용된다. CSS 박스 모델은 본질적으로 모든 HTML 요소를 감싸는 **상자(Box)**와 같다. 모든 상자는 **콘텐츠(Content), 패딩(Padding), 테두리(Border), 마진(Margin)**의 네 가지 부분으로 구성된다.

박스 모델의 구성 요소 (가장 안쪽부터 바깥쪽 순서):

• 콘텐츠(Content): 텍스트나 이미지가 나타나는 상자의 실제 내용물이다.
• 패딩(Padding): 콘텐츠 주변의 영역을 비워준다. 패딩은 투명하다.
• 테두리(Border): 패딩과 콘텐츠를 감싸는 테두리 선이다.
• 마진(Margin): 테두리 바깥쪽의 영역을 비워준다. 마진은 투명하다

 

width와 height (너비와 높이)

요소의 크기를 결정하는 기본 속성

• 기본적으로 width와 height는 Content 영역의 크기만을 의미한다.
• 따라서 패딩이나 보더가 추가되면 브라우저가 계산하는 실제 요소의 전체 크기는 우리가 지정한 width보다 더 커지게 된다.

 

box-sizing (크기 계산 방식)

패딩과 테두리가 추가될 때 요소의 전체 너비가 변하는 것을 제어하는 매우 중요한 속성

• content-box (기본값): width를 100px로 설정하고 패딩을 20px 주면, 전체 너비는 140px(100 + 20 + 20)이 된다.
• border-box (권장): 패딩과 테두리 두께를 width 안에 포함시킵니다. width를 100px로 설정하면 패딩을 아무리 늘려도 전체 너비는 100px로 고정되어 레이아웃 계산이 훨씬 쉬워진다.

 

 

box-shadow (박스 그림자)

물리적인 크기에는 영향을 주지 않고 테두리 바깥이나 안쪽에 그림자 효과를 주어 시각적인 깊이감만 부여한다.

 

• 구문: box-shadow: [가로위치] [세로위치] [흐림정도] [번짐정도] [색상];

박스 그림자의 좌표는 X(3시 방향으로 이동), Y(6시 방향으로 이동), 번짐의 정도, 그림자의 색상 순으로 값을 선언한다.

 

 

블록 레벨 I (혼자 있고 싶어요)
인라인 레벨 E (우린 모두 칭구칭긔) 대표적 태그 span, img

가로 레이아웃은 Flex, 세로는 고정(Fix)하는 방식을 주로 쓴다.

 

 

[표] 박스 모델 핵심 요약표

키워드	역할	비고
width/height	요소의 가로/세로 크기 결정	box-sizing 설정에 따라 기준이 변함
box-sizing	박스 크기 산정 기준 설정	border-box를 쓰면 레이아웃 설계가 편함
box-shadow	요소에 입체적인 그림자 추가	레이아웃 크기에는 영향을 주지 않음

 

 

[예제 코드] box-sizing과 그림자 적용 방법

CSS

 

.box {
  width: 200px;
  height: 100px;
  
  /* 크기 계산 방식 변경 (실무 필수) */
  box-sizing: border-box; 
  
  padding: 20px;
  border: 5px solid #34495e;
  
  /* 그림자: X축(3시), Y축(6시), 흐림정도, 색상 */
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

 

---

 

 

CSS Borders property

요소의 테두리를 결정하는 CSS 보더 속성

 

보더의 3대 핵심 속성과 방향 지정

테두리를 정의할 때는 보통 두께, 스타일, 색상 세 가지를 설정한다.

• border-width: 테두리의 두께를 지정한다. (px, em 등의 단위나 thin, medium, thick 키워드 사용)
• border-style: 테두리의 모양을 결정한다. (가장 중요하며, 이 속성이 없으면 테두리가 보이지 않습니다.)
  • solid (실선), dashed (파선), dotted (점선), double (이중선) 등
• border-color: 테두리의 색상을 지정한다.

 

 

보더 축약 속성 (Shorthand)

각각의 속성을 따로 적는 대신, 한 줄로 간단하게 표현하는 방식을 가장 많이 사용한다.

• 구문: border: [두께] [스타일] [색상];
• 예시: border: 2px solid red;

또한, 특정 방향에만 테두리를 줄 수도 있습니다.

• border-top, border-right, border-bottom, border-left

 

 

 

테두리 둥글게 하기 (border-radius)

직각형 박스의 모서리를 부드러운 곡선으로 만든다.

원 만들기: 박스가 정사각형일 때 border-radius: 50%;를 주면 완벽한 원이 된다.

개별 설정: border-top-left-radius처럼 각 모서리마다 개별 곡률을 줄 수 있다.

방향은 10시 30분(좌상단), 1시 30분(우상단), 4시 30분(우하단), 7시 30분(좌하단) 순서로 기억하여 값을 세팅한다.

 

 

테두리가 화면에 나타나지 않는다면 border-style을 빼먹지는 않았는지 가장 먼저 확인해야한다

border: none;은 버튼이나 입력창의 기본 테두리를 제거할 때 자주 쓰인다.

보더 역시 패딩처럼 요소의 전체 크기에 영향을 주므로, 레이아웃이 틀어지는 것을 막으려면 box-sizing:border-box;를 함께 사용하는 것이 좋다.

 

 

[표] 보더 관련 주요 속성 요약표

속성	설명	주요 값 예시
border-style	테두리 모양 (필수 속성)	solid, dashed, none
border-width	테두리 두께	1px, 0.5rem
border-color	테두리 색상	#000, transparent
border-radius	모서리 곡률 설정	8px, 50%

 

 

[예제 코드] 테두리 축약형과 특정 방향 강조선 적용

CSS

 

.card {
  width: 250px;
  padding: 20px;
  background-color: #fff;
  
  /* 축약형 테두리 설정: 두께 모양 색상 */
  border: 1px solid #ddd;
  
  /* 아래쪽에만 강조선 추가 (6시 방향) */
  border-bottom: 5px solid #3498db;
  
  /* 모서리를 부드럽게 */
  border-radius: 10px;
}

 

---

 

 

CSS Margins property

요소와 요소 사이의 바깥쪽 여백을 결정하는 CSS 마진 속성

 

정의 및 특징 (음수 값과 auto)

마진은 테두리 바깥의 공간

• 투명함: 다른 요소와의 거리를 조절하며, 배경색 없이 항상 투명하다.
• 음수 값 가능: 음수(-) 값을 사용하여 요소를 끌어당기거나 겹치게 만들 수 있다.
• auto 값: 너비가 지정된 블록 요소에서 좌우 마진을 auto로 설정하면 브라우저가 남은 공간을 반으로 나누어 요소를 가로 중앙에 배치한다.

 

 

개별 속성과 축약형 (Shorthand)

네 방향을 각각 조절하거나 한 번에 선언할 수 있다.

개별 속성

• margin-top: 위쪽 여백
• margin-right: 오른쪽 여백
• margin-bottom: 아래쪽 여백
• margin-left: 왼쪽 여백

축약형 작성법 (시계 방향 원칙)

적는 값의 개수에 따라 적용되는 방식이 달라진다.

마진 역시 12시(top), 3시(right), 6시(bottom), 9시(left)의 시계 방향 원칙을 따른다.

 

 

마진 상쇄 (Margin Collapsing) 현상

마진을 다룰 때 가장 주의해야 할 독특한 특징

 

인접한 두 블록 요소의 상하 마진이 만날 때, 두 마진의 합이 아닌 더 큰 쪽의 마진으로 합쳐지는 현상을 말합니다.

• 언제 발생하나요?: 위아래로 인접한 요소 사이, 또는 부모와 첫 번째/마지막 자식 요소 사이에서 주로 발생
• 왜 발생하나요?: 리스트나 문단 사이의 간격이 너무 벌어지는 것을 막기 위한 브라우저의 기본 동작

마진은 요소와 요소 사이의 **"거리"**를 두기 위해 사용한다.

블록 요소를 가로 중앙에 배치하고 싶다면 **너비(width)를 지정하고 margin: 0 auto;**를 사용

상하 간격이 생각보다 좁다면 마진 상쇄가 일어나고 있지 않은지 확인하기

 

 

 

[표] 마진 vs 패딩 핵심 비교표

구분	마진 (Margin)	패딩 (Padding)
위치	테두리 바깥쪽 (요소 간 거리)	테두리 안쪽 (내용과 테두리 사이)
음수 값	사용 가능 (겹침 효과 등에 쓰임)	사용 불가능
중앙 정렬	margin: auto로 가능	불가능
배경 영향	항상 투명함	요소의 배경색이 채워짐

 

 

[예제 코드] 중앙 정렬과 음수 마진 겹침 효과

CSS

 

.box {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  
  /* 상하 50px 여백, 좌우 auto로 가로 중앙 정렬 */
  margin: 50px auto; 
}

.overlap {
  background-color: #2ecc71;
  /* 음수 마진을 사용해 위의 박스와 70px 겹치게 함 */
  margin-top: -70px; 
  margin-left: 50px;
}