- 리스트 스타일 (list-style)
👉 리스트 앞에 붙는 점(●)이나 숫자를 꾸미는 기능
✔ list-style-type (모양)
순서 없는 리스트 (<ul>)
- disc → ● (기본)
- circle → ○
- square → ■
- none → 없애기
순서 있는 리스트 (<ol>)
- decimal → 1, 2, 3
- ower-alpha → a, b, c
- upper-roman → I, II, III
👉 비유
➡️ “문장 앞에 붙는 번호나 체크표시를 바꾸는 것”
✔ list-style-position (위치)
- outside → 글 밖 (기본)
- inside → 글 안쪽 (마커가 본문 영역으로 들어옴, 줄 바꿈이 되면 마커 바로 아래까지 글자 채워줌
👉 비유
➡️ “글 앞에 붙을지, 글 안으로 들어갈지 정하는 느낌”
✔ list-style (한 줄로 쓰기)
👉 비유
➡️ “설정 여러 개를 한 번에 적는 단축키”
리스트 주요 속성 요약표
| 속성 | 설명 | 주요 값 예시 |
| list-style-type | 마커 모양 결정 | disc, decimal, none |
| list-style-image | 커스텀 이미지 마커 | url('icon.png') |
| list-style-position | 마커 배치 위치 | inside, outside |
| list-style | 위 속성들의 축약형 | none, circle inside |
💡 실무 팁
👉 메뉴 만들 때 거의 무조건 씀
👉 불릿 대신 더 세련된 아이콘을 넣고 싶다면 list-style-image보다는 가상 요소(::before)를 활용하는 것이 위치 제어에 더 유리함
- 기본 CSS 세팅 (Reset)
👉 브라우저 기본 스타일을 없애는 작업
* {
margin: 0;
padding: 0;
}👉 비유
➡️ “도화지를 깨끗하게 만든 다음 그림 그리기”
💡 가장 중요한 설정
👉 비유
➡️ “박스 크기를 계산할 때 실수 안 하게 해주는 공식”
- CSS Tables property
👉 CSS 표 만들기
✔ caption-side (표 제목 위치)
- top: 표 위에 제목 (기본)
- bottom: 표 아래에 제목
✔ border (테두리)
테이블(<table>), 행(<tr>), 셀(<th>, <td>)에 테두리를 그립니다.
- 테이블 자체에만 border를 주면 표 전체 외곽선만 생기고, 내부 칸막이를 만들려면 <td>나 <th>에도 각각 테두리를 지정
✔ border-spacing (테두리 간격)
- 이 속성은 뒤에 설명할 border-collapse 속성이 separate일 때만 동작
- 값을 두 개 주면 가로 세로 간격을 다르게 설정 (Ex: 예: border-spacing: 10px 20px;)
✔ border-collapse (테두리 병합)
- separate: 셀마다 독립된 테두리를 가짐. (기본값) 이 경우 셀 사이의 간격이 보입니다.
- collapse: 인접한 테두리를 하나로 합쳐서 깔끔한 실선 형태로 만듦. 현대적인 웹 디자인에서 가장 많이 선호되는 방식입니다.
테이블 주요 속성 요약표
| 속성 | 역할 | 주요 값 |
| caption-side | 표 제목 위치 제어 | top, bottom |
| border-collapse | 테두리 병합 여부 | collapse, separate |
| border-spacing | 셀 사이의 간격 | px, em 등 (separate일 때만) |
| table-layout | 테이블 너비 계산 방식 | auto, fixed |
학습 정리
- 깔끔한 표를 만들고 싶다면 border-collapse: collapse;를 먼저 선언하는 것이 기본 공식
- 테이블은 데이터 표시용으로만 사용하고, 전체 페이지 레이아웃을 잡을 때는 Flex나 Grid를 사용하는 것이 웹 표준에 적합
- display: inline-block
👉 가로로 나열되면서 크기 조절 가능한 요소
특징
- 옆으로 나란히 배치됨
- width, height 가능
👉 비유
➡️ “줄 맞춰 서 있으면서도 각각 크기 조절 가능한 블록”
inline vs block vs inline-block 비교
| 특징 | inline | block | inline-block |
| 줄 바꿈 | 없음 (옆으로 나열) | 있음 (무조건 새 줄) | 없음 (옆으로 나열) |
| 기본 너비 | 콘텐츠만큼 | 부모의 100% | 콘텐츠만큼 |
| 크기 지정 | 불가능 | 가능 | 가능 |
| 상하 여백 | 적용 안 됨 (배경만 칠해짐) | 가능 | 가능 |
- 박스 모델 (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: [가로위치] [세로위치] [흐림정도] [번짐정도] [색상];
박스 모델 핵심 요약
| 키워드 | 역할 | 비고 |
| width/height | 요소의 가로/세로 크기 결정 | box-sizing 설정에 따라 기준이 변함 |
| box-sizing | 박스 크기 산정 기준 설정 | border-box를 쓰면 레이아웃 설계가 편함 |
| box-shadow | 요소에 입체적인 그림자 추가 | 레이아웃 크기에는 영향을 주지 않음 |
💡 핵심
👉 레이아웃 깨짐 방지 필수
- CSS Borders property
✔ box model
03시 - right
06시 - bottom
09시 - left
✔ 보더의 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
이미지 출처
https://honarsystems.com/css-border-radius/
1030 0130
0730 0430
딱딱한 직각형 박스를 부드러운 곡선형으로 바꿀 수 있는 속성
- 원 만들기: 요소의 너비와 높이가 같을 때 border-radius: 50%;를 주면 완벽한 원
- 개별 설정: border-top-left-radius처럼 각 모서리마다 다른 값을 줄 수 있음
보더 관련 주요 속성 요약표
| 속성 | 설명 | 주요 값 예시 |
| 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
👉 요소 바깥쪽 거리
- 투명함: 패딩과 달리 마진 영역에는 배경색이나 배경 이미지가 적용되지 않고 항상 투명
- 음수 값 가능: 마진에는 음수(-) 값을 사용할 수 있다. 이를 통해 요소를 원래 위치보다 이동시키거나 다른 요소와 겹치게 만들 수 있다
- auto 값: 수평 마진을 auto로 설정하면 브라우저가 남은 공간을 반으로 나눠 가져가므로, 요소를 가로 중앙에 배치할 때 자주 쓰임
👉 비유
➡️ “사람 사이 거리 유지”
✔ 개별 속성과 축약형 (Shorthand)
네 방향을 각각 조절하거나 한 번에 선언 가
✔ 개별 속성
- margin-top: 위쪽 여백
- margin-right: 오른쪽 여백
- margin-bottom: 아래쪽 여백
- margin-left: 왼쪽 여백
✔ 축약형 작성법 (시계 방향 원칙)
/* 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;✔ 마진 상쇄
인접한 두 블록 요소의 상하 마진이 만날 때, 두 마진의 합이 아닌 더 큰 쪽의 마진으로 합쳐지는 현상
👉 위아래 마진이 겹치면 큰 값만 적용됨
마진 vs 패딩 핵심 비교표
| 구분 | 마진 (Margin) | 패딩 (Padding) |
| 위치 | 테두리 바깥쪽 | 테두리 안쪽 |
| 음수 값 | 사용 가능 | 사용 불가능 |
| 중앙 정렬 | margin: auto로 가능 | 불가능 |
| 배경 영향 | 항상 투명함 | 배경색이 채워짐 |
학습 정리
- 마진은 요소와 요소 사이의 거리를 두기 위해 사용
- 블록 요소를 가로 중앙에 배치하고 싶다면 너비(width)를 지정하고 margin: 0 auto;를 사용
- 상하 간격이 생각보다 좁다면 마진 상쇄가 일어나고 있지 않은지 확인
🔥 초보자 핵심 요약 (이것만 기억해도 됨)
✔ list-style: none; → 리스트 기본 제거
✔ box-sizing: border-box; → 필수
✔ margin: 0 auto; → 가운데 정렬
✔ border-collapse: collapse; → 표 깔끔하게
✔ display: inline-block; → 가로 배치 가능
✨ 한줄 총정리
👉 CSS는 “박스를 어떻게 배치하고 꾸밀지” 정하는 기술이다