기본 속성

✒️ 2025-07-08 14:37 내용 수정

단위

단위 설명
px 고정 크기. 픽셀 단위
% 상대 크기. 부모 요소의 크기를 기준으로 결정됨
em 폰트 기준 상대 크기. 직속 부모 요소의 폰트 크기를 1em으로 설정함
rem 폰트 기준 상대 크기. html을 기준으로 결정됨(폰트 기본 크기는 16pt = 1rem)
vw 상대 크기. 브라우저(viewport) 너비의 1/100 = 1vw
vh 상대 크기. 브라우저(viewport) 높이의 1/100 = 1vh
대상 단위
고정 전체 px
가변 div 너비 %
padding vw, vh, rem
font vw, vh, rem

color

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style type="text/css">
			h1{color:red;}
			p{color:blue;}
			ul{color:pink}
			li{color:#00A000}
		</style>
	</head>
	<body>
		<h1>h1태그에 style 태그를 테스트합니다.</h1>
		<p>p태그에 style 태그를 테스트합니다.</p>
		<ul> ul에 style 태그를 테스트합니다.
			<li>li에 style 태그를 테스트합니다.</li>
		</ul>
	</body>
</html>

css 예제1.png

:root{
	--green-color-l: #ebfffe;
	--green-color-m: #007a60;
	--green-color-d: #001b19;
}

.container{
	background-color: var(--green-color-l);
}

css_color 1.png

background

속성 속성값 설명
background 모든 background 속성을 설정
background-color 배경색 설정
background-image 배경 이미지를 설정
url(경로) 경로에 지정된 이미지를 background로 설정
background-repeat 설정된 배경 이미지를 수직이나 수평 방향으로 반복 시키는지 설정
no-repeat 반복 없음
repeat 반복(바둑판)
repeat-x 가로 한 줄 반복
repeat-y 세로 한 줄 반복
background-size 배경 이미지 크기
auto 원본 크기로 지정
cover 요소를 완전히 덮도록 배경 이미지를 확대하거나 축소
이미지 일부가 잘릴 수 있음
contain 이미지가 요소 내에 완전히 들어오도록 크기를 조정
length(width height)
percentage(width height)		 크기 단위를 사용하여 배경 이미지의 크기를 지정
background-size: 100px 200px;
background-size: 50% 50%;
background-position 이미지의 상대 위치 설정(키워드 조합, px, %로 지정 가능)
right, left, top, bottom, center 오른쪽, 왼쪽, 위, 아래, 중앙
Xpx Ypx 왼쪽에서 Xpx 떨어지고, 위에서 Ypx 만큼 떨어져 있음
X% Y% 왼쪽에서 X% 떨어지고, 위에서 Y% 만큼 떨어져 있음
background-attachment 배경 이미지를 스크롤 여부와 관계 없이 특정 위치에 고정 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			p{border:1px solid black;
			width:250px;
			height:250px;}
			
			.p1{background: pink url(image/star.png) no-repeat;}
			.p2{background: pink url(image/star.png) repeat;}
			.p3{background: pink url(image/star.png) repeat-x;}
			.p4{background: pink url(image/star.png) repeat-y;}
			.p5{background: pink url(image/star.png) no-repeat right bottom;}
			.p6{background: pink url(image/star.png) no-repeat 30px 50px;}
			.p7{background: pink url(image/star.png) no-repeat center;}
			.p8{background: pink url(image/star.png) no-repeat 40% 80%;}
		</style>
	</head>
	<body>
		<p class="p1">background test</p>
		<p class="p2">background test2</p>
		<p class="p3">background test3</p>
		<p class="p4">background test4</p>
		<p class="p5">background test5</p>
		<p class="p6">background test6</p>
		<p class="p7">background test7</p>
		<p class="p8">background test8</p>
	</body>
</html>

background 예제.png

img 태그의 사이즈 조정

img {
	object-fit: fill;
}
속성 설명
fill 컨텐츠 박스의 크기에 맞춰 이미지의 크기를 조절
이미지가 늘어날 수 있음
contain 이미지가 컨텐츠 박스 내에 들어가도록 크기를 조절
cover 이미지를 컨텐츠 박스 가득 채움
이미지가 일부 잘릴 수 있음
none 이미지 크기를 조절하지 않음
scale-down none과 contain 중 이미지 크기가 더 작아지는 값을 선택

image_objectfit.png

font

/* syntax */
[[ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [<'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar
속성 설명
font 모든 font 속성을 설정
font 크기 '글꼴';
font 크기/줄간격 '글꼴';
font 굵기 크기/줄간격 '글꼴';
font 굵기 기울임 크기/줄간격 '글꼴';
font-family 글꼴 집합을 설정
font-style 글자 스타일을 설정. 주로 이텔릭체 설정 시 사용
font-variant 글에 있는 영문자 중 소문자를 small-caps 스타일로 변경
font-weight 글자를 두껍게 할지 설정
font-size 글자 크기 설정
color 글자 색 지정 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			#a1{font-size:30px}
			#a2{font-style:italic;}
			#a3{font-weight:bold;}
			#a4{font-family:"궁서", "굴림", sans-serif;}
			#a5{font: bold italic 30px "궁서","굴림",sans-serif;}
			#a6{font-size:20px; font-variant: small-caps;}
		</style>
	</head>
	<body>
		<p id="a1">글자크기를 30px로 바꿉니다.</p>
		<p id="a2">글자 스타일을 이텔릭체로 바꿉니다.</p>
		<p id="a3">글자 두께를 굵게 바꿉니다.</p>
		<p id="a4">글꼴을 미리 여러 개 저장합니다. 브라우저에서 지원 되는 글꼴을 적용합니다.</p>
		<p id="a5">font syntax 순서대로 작성해야 적용됩니다.</p>
		<p id="a6">Font-variant property is applied to this paragraph.</p>
	</body>
</html>

css 예제7.png

Text

속성 속성값 설명
color 텍스트의 색을 설정
direction 텍스트가 작성될 방향을 설정
ltr (left-to-right) 기본 방향, 왼쪽에서 오른쪽 순
rtl (right-to-left) 오른쪽에서 왼쪽 순
letter-spacing 글자 사이 간격 설정, px 단위로 지정
word-spacing 단어 사이 간격 설정, px 단위로 지정
text-indent 첫 줄 들여쓰기 여부를 설정, px 단위로 지정
text-align 텍스트 수평 정렬 방향 설정
center, left, right 가운데, 왼쪽, 오른쪽 정렬
text-decoration 텍스트에 여러 효과 지정
overline 윗줄
line-through 텍스트를 관통하는 줄
underline 밑줄
text-transform 텍스트에 포함된 영문자의 대소문자 설정
uppercase 대문자로 변경
lowercase 소문자로 변경
capitalize 단어 첫 문자만 대문자로 변경
line-height 텍스트의 줄 간격 설정, 단위 없이 사용 가능
줄 간격을 줄 때 padding과 margin은 여백을 주는 역할이므로 사용x
text-shadow 텍스트에 그림자 효과 설정
syntax 수평그림자 수직그림자 흐림정도 색 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.a1{color:red}
			.a2{direction:rtl;}
			.a3{letter-spacing: 3px;}
			.a4{word-spacing: 3px;}
			.a5{text-indent:5px;}
			.a6{text-align: center;}
			.a7{text-decoration:overline}
			.a8{text-decoration:line-through}
			.a9{text-decoration:underline}
			.a10{text-transform:uppercase}
			.a11{text-transform:lowercase;}
			.a12{text-transform:capitalize;}
			.a13{line-height:2;}
			.a14{text-shadow: 2px 1px #888888;}
		</style>
	</head>
	<body>
		<p class="a1">색을 설정합니다.</p>
		<p class="a2">텍스트 작성 방향을 설정합니다.</p>
		<p class="a3">글자 간 간격을 설정합니다.</p>
		<p class="a4">단어 간 간격을 설정합니다.</p>
		<p class="a5">들여쓰기를 설정합니다.</p>
		<p class="a6">정렬 방향을 설정합니다.</p>
		<p class="a7">텍스트 위에 선을 추가합니다.</p>
		<p class="a8">텍스트를 통과하는 선을 추가합니다.</p>
		<p class="a9">텍스트 밑줄을 추가합니다.</p>
		<p class="a10">transforming letters to uppercase.</p>
		<p class="a11">transforming letters to lowercase.</p>
		<p class="a12">transforming only first letter of this line.</p>
		<p class="a13">텍스트 줄 간격을 설정합니다.</p>
		<p class="a14">텍스트에 그림자를 추가합니다.</p>
	</body>
</html>

css 예제8.png

.text_hidden{
	/* 초과해도 다음줄로 넘어가지 않게 설정 */
	white-space: nowrap; 
	/* 넘어가는 텍스트는 숨김 */
	overflow: hidden;
	/* 넘어간 텍스트를 ...으로 표시 */
	text-overflow: ellipsis;
}

list-style

속성 속성값 설명
list-style list-style의 모든 속성을 지정
none 스타일 없음
list-style-type 목록의 항목 마커(불렛) 유형을 지정
disc 원형 불렛
circle 원 모양 불렛
square 네모 모양 불렛
decimal 숫자
lower-alpha 소문자 알파벳
upper-alpha 대문자 알파벳
list-style-position 목록의 항목 마커(불렛) 위치 지정
inside 텍스트와 마커가 같은 줄에 위치
outside 텍스트와 마커가 다른 줄에 위치
list-style-image 목록의 항목 마커(불렛)에 이미지를 지정
url(경로) 사용자 정의 이미지를 불렛으로 사용 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			.u1 li{border:1px solid black;
				list-style:none;
				padding-left: 10px;
				background: url(image/arrow.gif) no-repeat 0 50%;}
				
			.u2 li{list-style-type:disc}
			.u3 li{list-style-type:circle}
			.u4 li{list-style-type:square}
			.u5 li{list-style-type:decimal}
			.u6 li{list-style-type:lower-alpha}
			.u7 li{list-style-type:upper-alpha}
			.u8 li{list-style-type:square; list-style-position: inside;}
			.u9 li{list-style-type:square; list-style-position: outside;}
			.u10 li{list-style-image: url(image/arrow.gif);}
		</style>
	</head>
	<body>
		<ul class="u1">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u2">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u3">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u4">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u5">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u6">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u7">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u8">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u9">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
		<ul class="u10">
			<li>항목1</li>
			<li>항목2</li>
		</ul>
	</body>
</html>

liststyle 예제.png

table과 연관된 속성

속성 설명
border-spacing 테두리 간 간격 설정(table에서 주로 사용)
bobrder-collapse 테두리 중첩 옵션(table에서 자주 사용)
collapse : 중첩 허용
seperate : 테두리 분리