-CSS list-style property
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;을 사용하여 기본 스타일을 제거한 뒤, 커스텀 디자인을 입힐 때 가장 많이 활용합니다
예제 코드
HTML
<style>
/* 1. 기본 불릿 제거 및 위치 설정 */
.custom-list {
list-style: square inside;
background-color: #f9f9f9;
padding: 20px;
}
/* 2. 내비게이션 바 등을 만들 때 불릿 제거 */
.nav-menu {
list-style: none; /* 불릿을 아예 없앰 */
padding: 0;
margin: 0;
display: flex;
gap: 20px;
}
</style>
<ul class="custom-list">
<li>첫 번째 항목 (안쪽 사각형)</li>
<li>두 번째 항목 (안쪽 사각형)</li>
</ul>
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>리스트 주요 속성 요약표
| 속성 | 설명 | 주요 값 예시 |
| list-style-type | 마커 모양 결정 | disc, decimal, none |
| list-style-image | 커스텀 이미지 마커 | url('icon.png') |
| list-style-position | 마커 배치 위치 | inside, outside |
| list-style | 위 속성들의 축약형 | none, circle inside |
학습 정리
- 실무에서는 브라우저의 기본 스타일을 없애기 위해 list-style: none; 을 정말 자주 사용
- 불릿 대신 더 세련된 아이콘을 넣고 싶다면 list-style-image보다는 가상 요소(::before)를 활용하는 것이 위치 제어에 더 유리함
- 코딩을 처음하는 분들을 위한 Default CSS 코드 추천
필자의 코드
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
word-break: keep-all;
overflow-wrap: break-word;
outline: 0px solid silver;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 0.9rem;
line-height: 1rem;
letter-spacing: 0.1px;
color: #999;
}
a:link {
color: #666;
text-decoration: none;
display: block;
}
a:visited {
color: #666;
}
a:hover {
color: red;
}
a:focus {
color: red;
}
a:active {
color: red;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
}
h1 {
font-size: 4rem;
line-height: 6rem;
text-transform: uppercase;
}
h2 {
font-size: 3rem;
line-height: 5rem;
text-transform: uppercase;
}
h3 {
font-size: 2.4rem;
line-height: 4rem;
}
h4 {
font-size: 1.8rem;
line-height: 4rem;
}
h5 {
font-size: 1.6rem;
line-height: 4rem;
}
h6 {
font-size: 1.2rem;
line-height: 4rem;
}
p {
line-height: 1rem;
}
button {
font-size: 0.7rem;
text-transform: uppercase;
padding: 10px 30px;
border: 1px solid #ccc;
background: white;
transition: 0.3s;
}
button:hover {
background: crimson;
color: white;
cursor: pointer;
}
article {
margin: 64px 5%;
border: 1px solid #bbb;
}
section {
padding: 56px 5%;
}
div {
padding: 40px;
}
img {
width: 100px;
}
/* mobile start */
.p-title {
font-family: 'Oswald', sans-serif;
font-size: 6rem;
line-height: 8rem;
text-transform: uppercase;
}
/* pc start */
@media screen and (min-width: 1366px) {
body {
background: #ccc;
}
article {
background: white;
}
}
제미나이가 추천한 코드입니다.
모던 웹 CSS 초기 세팅 (Modern Reset)
/* 1. 박스 모델 설정 및 기본 여백 초기화 */
*, *::before, *::after {
box-sizing: border-box; /* 요소의 너비에 패딩과 테두리를 포함시켜 계산을 직관적으로 만듦 */
margin: 0;
padding: 0;
}
/* 2. 폰트 부드럽게 렌더링 및 텍스트 크기 조정 방지 */
html {
-webkit-text-size-adjust: none; /* iOS 장치에서 가로 모드 시 텍스트 크기 자동 조절 방지 */
-moz-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth; /* 내부 링크 이동 시 부드러운 스크롤 적용 */
}
/* 3. 바디 설정: 높이 확보 및 서체 가독성 향상 */
body {
min-height: 100vh; /* 화면 전체 높이를 기본으로 확보 */
line-height: 1.5; /* 가독성을 위한 기본 행간 */
-webkit-font-smoothing: antialiased; /* macOS/iOS에서 글꼴을 더 부드럽게 표현 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-rendering: optimizeLegibility;
}
/* 4. 이미지 및 미디어 요소 최적화 */
img, picture, video, canvas, svg {
display: block; /* 하단에 생기는 미세한 공백 제거 */
max-width: 100%; /* 부모 요소 밖으로 나가지 않게 조절 */
height: auto; /* 비율 유지 */
}
/* 5. 폼 요소 스타일 통일 */
input, button, textarea, select {
font: inherit; /* 부모 요소의 폰트 설정을 그대로 상속 */
}
/* 6. 목록 스타일 제거 (선택 사항) */
ul, ol {
list-style: none;
}
/* 7. 링크 스타일 초기화 */
a {
text-decoration: none;
color: inherit;
}
/* 8. 버튼 배경 및 테두리 초기화 */
button {
cursor: pointer;
background: none;
border: none;
}
왜 이 코드를 사용해야 할까요?
- box-sizing: border-box: 웹 디자인의 생명입니다. 예를 들어 너비 100px인 박스에 패딩을 10px 줘도 전체 너비가 100px로 유지됩니다. (기본값은 120px가 되어 레이아웃이 깨집니다.)
- min-height: 100vh: 페이지 내용이 적어도 배경색이나 푸터 위치가 어색하지 않게 화면 전체를 꽉 채우도록 돕습니다.
- System UI Font: 사용자의 기기에 내장된 폰트를 사용하여 로딩 속도를 높이고 OS와 이질감 없는 경험을 제공합니다.
추가 팁: CSS 변수 활용
프로젝트 전체에서 사용할 색상이나 간격은 아래와 같이 변수로 관리하면 수정이 매우 간편해집니다.
:root {
--primary-color: #007bff;
--text-dark: #333;
--bg-light: #f8f9fa;
--gap-standard: 1rem;
}
body {
background-color: var(--bg-light);
color: var(--text-dark);
}
- CSS list-style property example
list-style-type는 순서 목록의 번호 스타일이나 순서 없는 목록의 불릿 스타일을 지정해주는 속성입니다.
disc : 속이 찬 원형 블릿
circle : 속이 빈 원형 블릿
square : 속이찬 사각형 블릿
decimal : 1부터 시작하는 10진수
decimal-leading-zero : 01부터 시작하는 십진수
lower-roman : 로마숫자의 소문자
upper-roman : 로마숫자의 대문자
lower-greek : 고대 그리스문자의 소문자
lower-alpha : 알파벳의 소문자
lower-latin : 라틴어의 소문자
upper-alpha : 알파벳의 대문자
upper-latin : 라틴어의 대문자
hebrew : 헤브라이 숫자
armenian : 아르메니아 숫자
georgian : 그루지아 숫자
cjk-ideographic : 한자의 숫자
hiragana : 일본어의 히라가나
katakana : 일본어의 카타카나
hiragana-iroha : 일본어 히라가나의 '이로하'순
katakana-iroha : 일본어 카타카나의 '이로하'순
none : 지정하지 않는다.
Edit fiddle - JSFiddle - Code Playground
Our CSS Flexbox generator lets you create a layout, and skip knowing the confusing properties and value names (let's be honest the W3C did not make a good job here). Not gonna lie, this was heavily inspired by flexer.dev but coded completely from scratch.
jsfiddle.net
- CSS Tables property
caption-side (표 제목 위치)
<caption> 태그로 작성된 표의 제목을 표의 위나 아래 중 어디에 배치할지 결정합니다.
- top: 표의 윗부분에 제목을 표시합니다. (기본값)
- bottom: 표의 아랫부분에 제목을 표시합니다.
border (테두리)
테이블(<table>), 행(<tr>), 셀(<th>, <td>)에 테두리를 그립니다.
- 테이블 자체에만 border를 주면 표 전체 외곽선만 생기고, 내부 칸막이를 만들려면 <td>나 <th>에도 각각 테두리를 지정해야 합니다.
border-spacing (테두리 간격)
인접한 셀(Cell)의 테두리 사이의 거리를 설정합니다.
- 이 속성은 뒤에 설명할 border-collapse 속성이 separate일 때만 동작합니다.
- 값을 두 개 주면 가로 세로 간격을 다르게 설정할 수 있습니다. (예: border-spacing: 10px 20px;)
border-collapse (테두리 병합)
테이블의 테두리를 하나로 합칠지, 아니면 각각 떨어뜨려 놓을지 결정하는 가장 중요한 속성입니다.
- separate: 셀마다 독립된 테두리를 가집니다. (기본값) 이 경우 셀 사이의 간격이 보입니다.
- collapse: 인접한 테두리를 하나로 합쳐서 깔끔한 실선 형태로 만듭니다. 현대적인 웹 디자인에서 가장 많이 선호되는 방식입니다.
실전 예제 코드
<style>
table {
width: 100%;
/* 1. 테두리를 하나로 합침 */
border-collapse: collapse;
/* 2. 병합하지 않을 경우 간격 설정 (collapse 시 무시됨) */
/* border-spacing: 10px; */
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
/* 3. 제목 위치를 아래로 설정 */
caption {
caption-side: bottom;
padding: 10px;
font-weight: bold;
}
</style>
<table>
<caption>2026년 프로젝트 일정표</caption>
<thead>
<tr>
<th>단계</th>
<th>내용</th>
<th>기간</th>
</tr>
</thead>
<tbody>
<tr>
<td>기획</td>
<td>요구사항 분석</td>
<td>2주</td>
</tr>
<tr>
<td>개발</td>
<td>프론트엔드 구현</td>
<td>4주</td>
</tr>
</tbody>
</table>
테이블 주요 속성 요약표
| 속성 | 역할 | 주요 값 |
| caption-side | 표 제목 위치 제어 | top, bottom |
| border-collapse | 테두리 병합 여부 | collapse, separate |
| border-spacing | 셀 사이의 간격 | px, em 등 (separate일 때만) |
| table-layout | 테이블 너비 계산 방식 | auto, fixed |
학습 정리
- 깔끔한 표를 만들고 싶다면 **border-collapse: collapse;**를 먼저 선언하는 것이 기본 공식입니다.
- 테이블은 데이터 표시용으로만 사용하고, 전체 페이지 레이아웃을 잡을 때는 Flex나 Grid를 사용하는 것이 웹 표준에 적합합니다.
- CSS display: inline-block
주요 특징 (Why use it?)
inline-block은 주변 요소들과의 관계에서는 inline처럼 행동하고, 자기 자신의 크기를 결정할 때는 block처럼 행동합니다.
- 한 줄에 나열: block 요소(예: div)와 달리, 줄 바꿈 없이 다른 요소와 같은 라인에 가로로 나열됩니다.
- 크기 설정 가능: inline 요소(예: span)와 달리, width, height, margin, padding 속성을 모두 완벽하게 적용할 수 있습니다.
- 텍스트 정렬 영향: 부모 요소의 text-align: center; 속성을 사용하면 inline-block 요소들을 간편하게 가로 중앙으로 정렬할 수 있습니다.
inline vs block vs inline-block 비교
| 특징 | inline | block | inline-block |
| 줄 바꿈 | 없음 (옆으로 나열) | 있음 (무조건 새 줄) | 없음 (옆으로 나열) |
| 기본 너비 | 콘텐츠만큼 | 부모의 100% | 콘텐츠만큼 |
| 크기 지정 | 불가능 | 가능 | 가능 |
| 상하 여백 | 적용 안 됨 (배경만 칠해짐) | 가능 | 가능 |
실전 예제 코드
보통 가로로 나열되는 메뉴 버튼이나 카드를 만들 때 자주 활용됩니다.
HTML
<style>
.box {
display: inline-block; /* 핵심 속성 */
width: 100px;
height: 100px;
margin: 10px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 100px;
}
</style>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
주의할 점: 공백(Gap) 문제
inline-block 요소를 사용하면 HTML 코드 상의 줄 바꿈이나 띄어쓰기가 화면에서 **약간의 미세한 틈(약 4px)**으로 나타나는 현상이 있습니다.
- 원인: 브라우저가 코드의 빈 공간을 하나의 문자로 인식하기 때문입니다.
- 해결법: 부모 요소에 font-size: 0;을 주거나, HTML 태그 사이의 공백을 제거하면 해결됩니다.
학습정리
- inline-block은 "크기 조절이 가능한 인라인 요소"라고 이해하면 가장 쉽습니다
- 가로 메뉴바를 만들 때 과거에는 float을 많이 썼으나, inline-block을 거쳐 현재는 flex를 사용하는 추세입니다
- 하지만 단순한 버튼 나열이나 간단한 레이아웃에서는 여전히 직관적이고 강력한 도구입니다
- CSS Box Model
이미지 출처
https://www.w3schools.com/css/css_boxmodel.asp
박스 모델의 구성 요소
박스 모델은 안쪽에서 바깥쪽으로 다음과 같은 순서로 이루어져 있습니다.
- 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: [가로위치] [세로위치] [흐림정도] [번짐정도] [색상];
- 이 속성은 박스 모델의 물리적인 크기(너비, 높이)에는 영향을 주지 않으므로 레이아웃을 망가뜨리지 않고 시각적인 깊이감만 부여합니다.
실전 예제 코드
<style>
.box {
/* 1. 크기 설정 */
width: 200px;
height: 100px;
/* 2. 크기 계산 방식 변경 (강력 추천) */
box-sizing: border-box;
padding: 20px;
border: 5px solid #34495e;
background-color: #3498db;
color: white;
/* 3. 그림자 효과 (가로 10, 세로 10, 흐림 15, 색상 반투명 검정) */
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
</style>
<div class="box">Box Model</div>
박스 모델 핵심 요약
| 키워드 | 역할 | 비고 |
| width/height | 요소의 가로/세로 크기 결정 | box-sizing 설정에 따라 기준이 변함 |
| box-sizing | 박스 크기 산정 기준 설정 | border-box를 쓰면 레이아웃 설계가 편함 |
| box-shadow | 요소에 입체적인 그림자 추가 | 레이아웃 크기에는 영향을 주지 않음 |
- CSS Borders property
이미지 출처
박스 모델 방향은 딱 이것 하나만 기억하세요.
12시 - top
03시 - right
06시 - bottom
09시 - left
이미지 출처
https://honarsystems.com/css-border-radius/
border-radius 방향은 딱 이것 하나만 기억하세요.
1030 0130
0730 0430
보더의 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처럼 각 모서리마다 다른 값을 줄 수 있습니다.
실전 예제 코드: "카드 스타일 만들기"
HTML
<style>
.card {
width: 250px;
padding: 20px;
background-color: #fff;
/* 테두리 설정: 1px 두께의 회색 실선 */
border: 1px solid #ddd;
/* 아래쪽에만 강조선 추가 */
border-bottom: 5px solid #3498db;
/* 모서리를 부드럽게 */
border-radius: 10px;
text-align: center;
}
</style>
<div class="card">
<h3>CSS Border</h3>
<p>테두리 속성을 활용하면 깔끔한 카드 UI를 만들 수 있습니다.</p>
</div>
보더 관련 주요 속성 요약표
| 속성 | 설명 | 주요 값 예시 |
| border-style | 테두리 모양 (필수) | solid, dashed, none |
| border-width | 테두리 두께 | 1px, 0.5rem |
| border-color | 테두리 색상 | #000, transparent |
| border-radius | 모서리 곡률 | 8px, 50% |
| outline | 테두리 바깥의 외곽선 | 보더와 달리 공간을 차지하지 않음 |
학습 정리
- 테두리가 화면에 나타나지 않는다면 **border-style**을 빼먹지는 않았는지 가장 먼저 확인하세요.
- **border: none;**은 버튼이나 입력창의 기본 테두리를 제거할 때 자주 쓰입니다.
- 보더 역시 패딩처럼 요소의 전체 크기에 영향을 주므로, 레이아웃이 틀어지는 것을 막으려면 **box-sizing: border-box;**를 함께 사용하는 것이 좋습니다.
- CSS Margins property
이미지 출처
정의 및 특징
마진은 테두리(Border) 바깥의 공간을 의미합니다.
- 투명함: 패딩과 달리 마진 영역에는 배경색이나 배경 이미지가 적용되지 않고 항상 투명합니다.
- 음수 값 가능: 마진에는 음수(-) 값을 사용할 수 있습니다. 이를 통해 요소를 원래 위치보다 이동시키거나 다른 요소와 겹치게 만들 수 있습니다.
- auto 값: 수평 마진을 auto로 설정하면 브라우저가 남은 공간을 반으로 나눠 가져가므로, 요소를 가로 중앙에 배치할 때 자주 쓰입니다.
개별 속성과 축약형 (Shorthand)
네 방향을 각각 조절하거나 한 번에 선언할 수 있습니다.
개별 속성
- margin-top: 위쪽 여백
- margin-right: 오른쪽 여백
- margin-bottom: 아래쪽 여백
- margin-left: 왼쪽 여백
축약형 작성법 (시계 방향 원칙)
적는 값의 개수에 따라 적용되는 방식이 달라집니다.
CSS
/* 1개: 상하좌우 모두 20px */
margin: 20px;
/* 2개: 상하 / 좌우 (위아래 10px, 양옆 20px) */
margin: 10px 20px;
/* 3개: 상 / 좌우 / 하 (위 10px, 양옆 20px, 아래 30px) */
margin: 10px 20px 30px;
/* 4개: 상 / 우 / 하 / 좌 (시계 방향: 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px) */
margin: 10px 20px 30px 40px;
마진 상쇄 (Margin Collapsing) 현상
마진을 다룰 때 가장 주의해야 할 독특한 특징입니다.
인접한 두 블록 요소의 상하 마진이 만날 때, 두 마진의 합이 아닌 더 큰 쪽의 마진으로 합쳐지는 현상을 말합니다.
- 언제 발생하나요?: 위아래로 인접한 요소 사이, 또는 부모와 첫 번째/마지막 자식 요소 사이에서 주로 발생합니다.
- 왜 발생하나요?: 리스트나 문단 사이의 간격이 너무 벌어지는 것을 막기 위한 브라우저의 기본 동작입니다.
실전 예제 코드: "중앙 정렬과 간격 조절"
HTML
<style>
.box {
width: 200px;
height: 100px;
background-color: #e74c3c;
color: white;
/* 상하 50px 여백, 좌우 auto로 가로 중앙 정렬 */
margin: 50px auto;
/* 텍스트 정렬용 */
display: flex;
justify-content: center;
align-items: center;
}
.overlap {
background-color: #2ecc71;
/* 음수 마진을 사용해 위의 박스와 20px 겹치게 함 */
margin-top: -70px;
margin-left: 50px;
}
</style>
<div class="box">중앙 박스</div>
<div class="box overlap">겹친 박스</div>
마진 vs 패딩 핵심 비교표
| 구분 | 마진 (Margin) | 패딩 (Padding) |
| 위치 | 테두리 바깥쪽 | 테두리 안쪽 |
| 음수 값 | 사용 가능 | 사용 불가능 |
| 중앙 정렬 | margin: auto로 가능 | 불가능 |
| 배경 영향 | 항상 투명함 | 배경색이 채워짐 |
학습 정리
- 마진은 요소와 요소 사이의 **"거리"**를 두기 위해 사용합니다.
- 블록 요소를 가로 중앙에 배치하고 싶다면 너비(width)를 지정하고 margin: 0 auto;를 사용하세요.
- 상하 간격이 생각보다 좁다면 마진 상쇄가 일어나고 있지 않은지 확인해 보세요.