프로그래밍/HTML & CSS
CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기
Heidong
2021. 9. 21. 15:37
반응형
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 옵션은 원형의 그라데이션을 주는 것.
반응형