CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기

프로그래밍/HTML & CSS 2021. 9. 21.

white-space = 요소의 공백 처리 방법 선택

<!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; } /* 기본. 여러 공백중 하나만 표시. br태그로 라인넘김. 영역을 넘어가면 라인을 넘김 */
.nowrap { white-space: nowrap;} /* normal과 동일하지만 영역을 넘어가면 라인을 넘기기 않음 */
.pre { white-space: pre; } /* 여러 공백 그대로 표시. 줄바꿈은 개행문자와 br태그. 영역을 넘어가면 라인을 넘기기 않음 */
.pre-wrap { white-space: pre-wrap; } /* pre와 동일하지만 영역을 넘어가면 라인을 넘김 */
.pre-line { white-space: pre-line; } /* pre-wrap 와 동일하지만 여러공백은 하나만 표시 */
</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>

- white-space: normal; = 영역을 넘어가면 알아서 라인을 넘김 / <br>태그로라인넘김

- white-space: nowrap; = normal과 똑같지만 알아서 라인 넘기는 기능 없음

- white-space: pre; = 코드에 입력한 그대로 공백 다 표시함 / 영역 넘어가면 라인 알아서 넘기는 기능 없음

/ 줄 바꿈은 개행문자나 <br>

- white-space: pre-wrap; = pre와 동일하지만 영역 넘어가면 알아서 라인을 넘김

- white-space: pre-line; = wrap와 동일하지만 공백이 여러개면 하나만 표시함.

letter-spacing = 글자와 글자 사이의 간격을 조정한다.

<!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>

글자 사이를 얼마나 띄울지 결정 할 수 있다.

word-spacing = 이건 단어와 단어 사이의 간격을 조정하는 기능 이다.

<!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>

글자가 아니라 단어의 간격을 조절함.

한 단어의 길이가 길어서 부모의 영역을 벗어난 텍스트를 처리해야 할 때

<!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; 
}

.word-wrap { word-wrap : break-word; }
.word-break { word-break : break-all; }

</style>
</head>
<body>

<h3>word-break : 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의</h3>
<p>
    word-wrap 속성 단어를 어느 정도는 고려하여 개행(., - 등을 고려)<br>
    word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행
</p>

<div class="box ">
javascriptjavascriptjavascript
https://www.test.com/study/sample
</div>

<div class="box word-wrap">
javascriptjavascriptjavascript
https://www.test.com/study/sample
</div>

<div class="box  word-break">
javascriptjavascriptjavascript
https://www.test.com/study/sample
</div>

</body>
</html>

- word-wrap : break-word; = 콤마나 점 등등 단어를 어느 정도 고려 해서 맞춰줌

- word-break : break-all; = 단어 고려 전혀 안하고 무조건 부모 영역에 맞춰서 강제로 바꿈

영역 넘치는 텍스트 처리 할 때

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.default {
	width: 150px; height: 150px; padding: 10px; margin: 30px; 
	border: 3px dotted gray; 
}

.box {
	width: 150px; height: 150px; padding: 10px; margin: 30px; 
	border: 3px dotted gray; 
	overflow: hidden;
	white-space: nowrap; /* 자동 줄바꿈 방지 */
}

.clip { text-overflow: clip; }
.ellipsis { text-overflow: ellipsis; }
</style>

</head>
<body>

<h3>text-overflow : white-space:nowrap; 로 지정, 영역을 넘치는 텍스트를 처리하는 방법을 지정</h3>

  <div class="default">
    <h3>default</h3>
    java spring oracle html css javascript servlet jsp
  </div>
  <div class="box clip">
    <h3>clip</h3>
    java spring oracle html css javascript servlet jsp
  </div>
  <div class="box ellipsis">
    <h3>ellipsis</h3>
    java spring oracle html css javascript servlet jsp
  </div>
  
</body>
</html>

- overflow: hidden; = 영역을 넘어가는 텍스트 들을 숨겨 준다.

- white-space: nowrap; = 자동으로 줄 바꾸는걸 방지함.

- text-overflow: clip; = 넘쳐나는 텍스트 들을 숨겨주지만 별로 안 예쁨

- text-overflow: ellipsis; = 넘쳐나는 텍스트 들을 ... 으로 숨겨줌

배경 이미지 영역 처리 방법

<!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 double 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>배경 이미지</h3>

<div class="box">
	<img alt="" src="../img/bg1.png"> <!-- ..은 상위 폴더라는 뜻 -->
</div>

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

</body>
</html>

background-image: url("../img/bg1.png"); = 아무 옵션 없는 기본값일때

이미지가 작으면 알아서 반복한다.

background-image: url("../img/bg1.png");
background-repeat: repeat-x;

옵션으로 x축 반복을 줬을때

background-image: url("../img/bg1.png");
background-repeat: no-repeat;
background-position: right center;

background-image: url("../img/bg1.png");
background-repeat: no-repeat;

<!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 double 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>배경 이미지</h3>

<div class="box bg1">배경이미지</div>
<div class="box bg2">여러 배경이미지-먼전 설정한것이 전면에</div>
<div class="box bg3">여러 배경이미지</div>


</body>
</html>

여기서는 background-image가 아니라 그냥 background를 썼다.

첫번째 bg1은 그냥 반복만 하지 않게 옵션을 줬다.

여러 이미지를 등록하면 등록한 순서에따라 나오는 순서도 달라진다.

{ 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; }

같은 이미지 4개를 활용해서 각 모서리에 설치한 모습이다.

배경 이미지 사이즈 정하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 600px; height: 450px;
	margin: 30px;
	border: 2px double 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>배경-size</h3>

<div class="box bg1">배경이미지</div>
<div class="box bg2">px로 지정</div>
<div class="box bg3">%로지정</div>
<div class="box bg4">부모의 폭이나 높이중 큰쪽으로 맞춤</div>
<div class="box bg5">이미지가 다보임</div>


</body>
</html>

- px로도 가능하고 %로도 가능하다.

배경 이미지를 화면에 고정 시키는 법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
body {
	background-image: url("../img/bg5.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: fixed; /* 배경 이미지 고정 */
}

.box {
	width: 2200px;
	height: 1500px;
}

</style>

</head>
<body>

<h3>배경이미지</h3>

<div class="box"></div>
</body>
</html>

- 일단 이미지 불러오고

- 반복 안하는 옵션 주고

- 이미지 놓을 위치 오른쪽 하단으로 설정

- attachment의 fixed를 이용해서 그 위치에 고정 시키기

이미지 inline 태그

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box1 {
	width: 200px; height: 200px; margin: 30px;
	border: 2px dotted gray;
}

.box2 {
	width: 200px;
	margin: 30px;
	border: 2px dotted gray;
}
</style>

</head>
<body>

<h3>img-inline 태그</h3>

<div class="box1">
	<img src="../img/img.png">
</div>

<p>
  img는 인라인태그로 높이를 지정하지 않으면 아래 부분에 패딩이 생긴다.<br>
  해결 방법중 하나는  vertical-align: bottom
</p>
<div class="box2"><img src="../img/img.png"></div>

<div class="box2"><img src="../img/img.png" style="vertical-align: bottom;"></div>

</body>
</html>

- 이미지를 인라인 태그로 주게 되면 (각 태그에 직접 주는 거) 아래 부분에 빈 공간이 생기게 된다.

- 높이를 지정해줘야 한다.

- vertical-align: bottom 옵션을 주면 아래 공간에 빈 공간이 사라진다.

배경에 그라데이션 주기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
div {
	width: 100%; height: 100px; margin:20px;
}

.box1 { background: linear-gradient( to bottom, yellow, red ) ; }
.box2 { background: linear-gradient( to top, yellow, red ) ; }
.box3 { background: linear-gradient( to right, yellow, red ) ; }
.box4 { background: linear-gradient( to left, yellow, red ) ; }
.box5 { background: linear-gradient( 45deg, yellow, red ) ; }
.box6 { background: linear-gradient( 135deg, lightblue 12%, yellow 45%, gold 70%, green 90% ); }
</style>

</head>
<body>

<h3>linear-gradient</h3>

<div class="box1">to bottom</div>
<div class="box2">to top</div>
<div class="box3">to right</div>
<div class="box4">to bottom</div>
<div class="box5">45deg</div>
<div class="box6">135deg</div>


</body>
</html>

linear-gradient 옵션을 이용하면 그라데이션을 줄 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	width: 400px; height: 400px;
	background: radial-gradient(yellow, red, brown);
}
</style>

</head>
<body>

<h3>radial-gradient</h3>

<div class="box"></div>


</body>
</html>

radial-gradient 옵션은 원형의 그라데이션을 주는 것.

저작자표시

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS - 다양한 옵션들 (0)	2021.09.22
CSS - 영역 관련 (0)	2021.09.22
CSS - 기초(4) (0)	2021.09.18
CSS - 기초(3) 가상 클래스 / 링크 셀렉터 (0)	2021.09.16
CSS - 기초(2) / 선택자 (0)	2021.09.16

ABOUT ME

white-space = 요소의 공백 처리 방법 선택

letter-spacing = 글자와 글자 사이의 간격을 조정한다.

word-spacing = 이건 단어와 단어 사이의 간격을 조정하는 기능 이다.

한 단어의 길이가 길어서 부모의 영역을 벗어난 텍스트를 처리해야 할 때

영역 넘치는 텍스트 처리 할 때

배경 이미지 영역 처리 방법

배경 이미지 사이즈 정하기

배경 이미지를 화면에 고정 시키는 법

이미지 inline 태그

배경에 그라데이션 주기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

white-space = 요소의 공백 처리 방법 선택

letter-spacing = 글자와 글자 사이의 간격을 조정한다.

word-spacing = 이건 단어와 단어 사이의 간격을 조정하는 기능 이다.

한 단어의 길이가 길어서 부모의 영역을 벗어난 텍스트를 처리해야 할 때

영역 넘치는 텍스트 처리 할 때

배경 이미지 영역 처리 방법

배경 이미지 사이즈 정하기

배경 이미지를 화면에 고정 시키는 법

이미지 inline 태그

배경에 그라데이션 주기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바