(43) [CSS] 1일 텍스트 및 배경 관련 스타일

글꼴

font-family : 웹 문서의 글꼴을 지정하며, 시스템 내 폰트 이름 중 하나를 사용한다.
Web Fonts : 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할수 있게 하는 기술이다.
font-size : 폰트의 크기를 지정한다
font-weight : 폰트의 굵기를 지정한다.
white-space : 공백 처리 방법을 결정한다
letter-spacing : 글자와 글자 사이의 간격을 지정한다.
word-spacing : 단어의 간격을 조정한다.
text-overflow : white-space:nowrap; 로 지정하여 텍스트가 영역을 넘쳐도 줄 바꿈이 일어나지 않을 때 넘치는 텍스트를 처리하는 방법을 지정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
}

.normal{
	white-space: normal;
}

.nowrap{
	white-space: nowrap;
}
.pre{
	white-space: pre;
}

.pre-wrap{
	white-space: pre-wrap;
}

.pre-line{
	white-space: pre-line;
}





</style>

</head>
<body>

<h3>white-space : 해당 요소의 공백 처리 방법을 결정한다.</h3>

<div class="box normal">
    <b>normal</b>
    javascript     html      css
    java     spring
    oracle    mysql 
</div>

<div class="box nowrap">
    <b>nowrap</b>
    javascript     html      css
    java     spring
    oracle    mysql 
</div>

<div class="box pre">
    <b>pre</b>
    javascript     html      css
    java     spring
    oracle    mysql 
</div>

<div class="box pre-wrap">
    <b>pre-wrap</b>
    javascript     html      css
    java     spring
    oracle    mysql 
</div>

<div class="box pre-line">
    <b>pre-line</b>
    javascript     html      css
    java     spring
    oracle    mysql 
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
}

.ls1{letter-spacing: 3px;}
.ls2{letter-spacing: .2rem;}
.ls3{letter-spacing: -2px;}


</style>

</head>
<body>

<h3>letter-spacing : 글자와 글자사이의 간격을 조정한다.</h3>

<div class="box">
<b>기본값</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ls1">
<b>3px</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ls2">
<b>.2rem</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ls3">
<b>-2px</b>
javascript html css
java spring
oracle mysql 
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px;
	height: 150px;
	padding: 10px;
	margin: 30px;
	border: 3px dotted gray;
}

.ws1{word-spacing: 10px;}
.ws2{word-spacing: 130%;}
.ws3{word-spacing: -3px;}


</style>

</head>
<body>

<h3>word-spacing : 단어의 간격을 조정한다.</h3>

<div class="box">
<b>기본값</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ws1">
<b>10px</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ws2">
<b>130%</b>
javascript html css
java spring
oracle mysql 
</div>

<div class="box ws3">
<b>-3px</b>
javascript html css
java spring
oracle mysql 
</div>

</body>
</html>

배경

background-color : 요소의 배경 색을 설정한다. 하나의 <color>값을 사용해 설정한다.
background-image : 요소의 배경 이미지를 설정한다.
background-repeat : 배경 이미지를 어떻게 반복할지 설정한다.
background-position : 각 배경 이미지의 초기 위치를 설정.
background-size : 요소 배경 이미지의 크기를 설정한다.
background-attachment : 배경 이미지의 위치가 뷰포트 내에서 고정되는지 또는 포함하는 블록으로 스크롤 되는지 여부를 설정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	margin: 30px;
	border: 2px dotted gray; 
}

.bg1{background-image: url("../img/bg1.png");}
.bg2{background-image: url("../img/bg1.png"); background-repeat: repeat-x;}
.bg3{background-image: url("../img/bg1.png"); background-repeat: no-repeat;}
.bg4{background-image: url("../img/bg1.png"); background-repeat: no-repeat; background-position: right center;}



</style>

</head>
<body>

<h3>background-image</h3>

<div class="box bg1">배경이미지가 적으면 기본적으로 반복한다.</div>
<div class="box bg2">x 축 반복</div>
<div class="box bg3">반복하지 않으면 좌측 최상단</div>
<div class="box bg4">반복하지 않고 오른쪽 중앙</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
	width: 300px;
	height: 300px;
	padding: 10px;
	margin: 30px;
	border: 2px dotted gray; 
}

.bg1{background: url("../img/bg1.png")no-repeat;}
.bg2{background: url("../img/bg1.png")no-repeat, url("../img/bg2.png")}
.bg3{background: url("../img/bg3.png")no-repeat left top,
				 url("../img/bg3.png")no-repeat right top,
				 url("../img/bg3.png")no-repeat left bottom,
				 url("../img/bg3.png")no-repeat right bottom;}

</style>

</head>
<body>

<h3>background</h3>

<div class="box bg1">배경이미지</div>
<div class="box bg2">여러개의 배경이미지를 설정한 경우 먼저 설정한 이미지가 전면에 배치</div>
<div class="box bg3">여러개의 배경이미지</div>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
	width: 600px;
	height: 150px;
	margin: 30px;
	border: 2px dotted gray; 
	
	background-image: url("../img/bg4.png");
}

.bg1{background-repeat: no-repeat;}
.bg2{background-size:300px 300px;}
.bg3{background-size: 100% 100%;}
.bg4{background-size: cover;}
.bg5{background-size: contain;}


</style>

</head>
<body>

<h3>background-size</h3>

<div class="box bg1">배경이미지</div>
<div class="box bg2">지정된 px값 그대로 설정</div>
<div class="box bg3">지정된 %값에 비례하여 설정. 화면을 줄이거나 늘리면 배경이미지의 크기도 따라서 변경되어 찌그러지는 현상이 나타난다.</div>
<div class="box bg4">배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 width, height 중 큰값에 배경이미지를 맞춘다. 따라서 이미지의 일부가 보이지 않을 수 있다.</div>
<div class="box bg5">배경이미지의 크기 비율을 유지한 상태에서 부모 요소의 영역에 배경이미지가 보이지 않는 부분없이 전체가 들어갈 수 있도록 이미지 스케일을 조정한다. 높이를 150으로 변경하면 확인 가능</div>

</body>
</html>

'💻 > CSS' 카테고리의 다른 글

(45) [CSS] 3일 반응형 웹(Responsive Web) (1)	2024.04.18
(45) [CSS] 3일 레이아웃과 포지셔닝 - Grid (0)	2024.04.18
(44) [CSS] 2일 레이아웃과 포지셔닝 - flex (0)	2024.04.17
(44) [CSS] 2일 레이아웃과 포지셔닝 (0)	2024.04.17
(43) [CSS] 1일 CSS 기초 (0)	2024.04.16

Power Up!

(43) [CSS] 1일 텍스트 및 배경 관련 스타일

글꼴

배경

'💻 > CSS' 카테고리의 다른 글

티스토리툴바

(43) [CSS] 1일 텍스트 및 배경 관련 스타일

글꼴

배경

'💻 > CSS' 카테고리의 다른 글

관련글

티스토리툴바