[CSS] 스타일 속성 - font, text, layout, float, box

1. 폰트 (Font)

• font 속성
  • font-style, font-variant, font-weight, font-size, line-height, font-family, caption, icon, menu, message-box, smallcaption, status-bar 등을 지정,
  • 값을 지정할 때 순서를 지켜야함.

속성	설명
font	여러 폰트 속성을 한 번에 지정
font-family	글꼴 지정
font-size	글자 크기
font-style	글자 스타일 (italic 등)
font-variant	작은 대문자 표시
font-weight	글자 두께

p {
  font: italic small-caps bold 16px Arial;
}

p {
  font-family:Arial;
  font-size:16px;
  font-weight:bold;
}

 

2. 텍스트 (Text)

속성	설명
color	글자 색
direction	글자 방향
line-height	줄 간격
letter-spacing	글자 사이 간격(자간)
text-align	정렬
text-decoration	밑줄, 취소선 등
text-indent	들여쓰기
text-transform	대소문자 변환
white-space	공백 처리 방식
word-spacing	단어 간격

p {
  color:blue;
  text-align:center;
  line-height:1.5;
}

 

3. 배경 (Background)

속성	설명
background	배경 속성 한번에 지정
background-attachment	배경 고정 여부
background-color	배경색
background-image	배경 이미지
background-position	배경 위치
background-repeat	배경 반복

body {
  background-color:lightgray;
  background-image:url(bg.png);
  background-repeat:no-repeat;
}

 

4. 목록 (List)

속성	설명	예시
list-style	목록 스타일을 한 번에 설정 (type, position, image)	list-style: square inside;
list-style-image	목록 마커를 이미지로 지정 (url() 함수 사용)	list-style-image: url("icon.png");
list-style-position	목록 마커 들여쓰기 여부 (inside, outside)	list-style-position: inside;
list-style-type	목록 모양 지정 (disc, circle, square, decimal 등)	list-style-type: square;

ul {
  list-style-type: square;
}

ul {
  list-style-image: url("icon.png");
}

 

5. 표 (Table)

속성	설명	예시
border-collapse	테이블 경계를 하나로 합칠지 분리할지 설정	table { border-collapse: collapse; }
table-layout	테이블 열 너비 계산 방식 설정 (auto, fixed)	table { table-layout: fixed; }
border-spacing	셀과 셀 사이의 간격 설정	table { border-spacing: 10px; }
caption-side	테이블 캡션 위치 지정 (top, bottom)	caption { caption-side: bottom; }
empty-cells	내용이 없는 셀 표시 여부 (show, hide)	td { empty-cells: hide; }

table {
  border-collapse:collapse;
}

 

6. 레이아웃 (Layer)

속성	설명	예시
top	요소의 위쪽 위치 지정	top: 10px;
left	요소의 왼쪽 위치 지정	left: 20px;
right	요소의 오른쪽 위치 지정	right: 10px;
bottom	요소의 아래쪽 위치 지정	bottom: 0;
position	요소의 위치 지정 방식 (static, relative, absolute, fixed, sticky)	position: absolute;
clip	요소의 보이는 영역 지정 (일부만 표시)	clip: rect(0px,50px,50px,0px);
vertical-align	요소의 수직 정렬	vertical-align: middle;
z-index	요소의 쌓임 순서 지정 (숫자가 클수록 앞)	z-index: 10;

div {
  position:absolute;
  top:10px;
  left:20px;
}

 

7. 박스 (Box)

속성	설명	예시
border	테두리를 한 번에 설정 (두께, 스타일, 색)	border: 1px solid black;
border-style	테두리 스타일 지정 (solid, dashed, dotted 등)	border-style: solid;
border-color	테두리 색상 지정	border-color: red;
border-width	테두리 두께 지정	border-width: 2px;
border-radius	모서리를 둥글게 처리	border-radius: 10px;
margin	요소 바깥 여백	margin: 10px;
padding	요소 안쪽 여백	padding: 20px;
display	요소 표시 방식 설정 (block, inline, none 등)	display: block;
float	요소를 왼쪽 또는 오른쪽으로 배치	float: left;
position	요소의 위치 지정 방식	position: relative;
z-index	요소의 겹침 순서 지정	z-index: 5;

div {
  border:1pxsolidblack;
  margin:10px;
  padding:20px;
}

 

8. float과 clear

/* float 예시 */
.left-box {
  float: left;
  width: 200px;
}

.right-box {
  float: right;
  width: 200px;
}

/* clear 예시 */
.clear-both {
  clear: both;
}

<div class="left-box">왼쪽으로 띄운 박스</div>
<div class="right-box">오른쪽으로 띄운 박스</div>
<div class="clear-both">float 해제 후 아래에 위치</div>

1) float

• 요소를 왼쪽 또는 오른쪽으로 띄워 배치하는 속성
• 요소가 띄워지면 뒤에 오는 요소들이 그 옆으로 이어짐
• 일반 문서 흐름(normal flow)에서 빠진 것처럼 동작

값	의미
none	float 적용 안함 (기본값)
left	요소를 왼쪽으로 띄움
right	요소를 오른쪽으로 띄움

 

⚠️float의 부작용
float가 적용된 요소는 normal flow(일반 문서 흐름) 에서 빠지기 때문에 부모 요소가 높이를 계산할 때 포함되지 않는 경우가 있음.

 

2) clear

• float 속성을 가진 요소 옆에 배치되지 않도록 하는 속성
• 즉, float 속성을 가진 요소의 아래에 내려가도록(위치하도록) 하는 속성

값	의미
none	clear 적용 안함
left	float:left 요소 옆에 배치되지 않음
right	float:right 요소 옆에 배치되지 않음
both	모든 float 옆에 배치되지 않음

 

9. 다단 속성 (Multi-column Layout)

• 하나의 요소 안에 있는 내용을 여러 열(column)로 나누어 표시하는 속성

속성	역할
column-count	열의 개수 지정
column-gap	열 사이 간격(여백) 지정
column-rule	열 사이 구분선 추가

div {
  column-count: 3;
  column-gap: 30px;
  column-rule: 2px solid black;
}