색과 텍스트 꾸미기

배경(background) 스타일

1.  개념

• 배경에 관련된 여러 가지 속성을 포함한다
• background 속성은 아래의 여러 속성 들을 지정할 수 있다
• 한 요소에 여러 개의 배경 이미지를 적용할 수 있다

.bg {
	width: 600px;
	height: 400px;
	border: 3px solid;
	background: 
	url(img/bg_a.png) no-repeat 0 0,
	url(img/bg_b.png) no-repeat 100% 0,
	url(img/bg_c.png) no-repeat 0 100%,
	url(img/bg_d.png) no-repeat 100% 100%,
	url(img/bg_e.png) no-repeat 40px 40px;
}

 

 

2.  속성

background-color :	색상	red, rgba(0, 255, 0, 0.4);
background-image :	이미지 경로	url(img/star.png);
background-repeat :	이미지 반복 지정	repeat; 반복 no-repeat; 반복안함 repeat-x; x축으로 반복 repeat-y; y축으로 반복
background-attachment :	이미지 고정	scroll ; 기본값, 내용이 스크롤될 때 같이 움직인다 fixed ; 내용이 스크롤 되더라도 안 움직인다
background-position :	이미지 위치	가로 : left , center , right 세로 : top, center , bottom 숫자 : px, % background-position : left top; /* 가로 세로 */
background-size :	이미지 크기 조절	background-size : 100%; /* width 100% */ background-size : 100% 100%; /* width 100%, height 100%*/
background-clip :	배경을 'content' 영역에만 보이게 하는 속성	배경은 padding 영역까지 보이지만, 이 속성으로 padding 영역의 배경을 보이지 않게 지정한다 padding 영역의 배경은 잘린다 background-clip : content-box;
background-origin :	배경을 'content' 영역에 맞추어 보이게 하는 속성	padding 영역의 배경에 잘리지 않는다 배경이미지가 content-box 영역에 잘리지 않고 정확히 나타난다 background-origin : content-box;

 

---

 

서체(font)와 글(text) 스타일

1.  속성

서체

• font-family : 서체 지정 

body { font-family : '돋움', dotum, helvetica, sans-serif; }

 

• @font-face 서체를 같이 올려두고 연결 

<style type="text/css">
@font-face {
	font-family: 'Nanum Gothic';
	src:url(fonts/NanumGothic.eot);
	src:url(fonts/NanumGothic.eot?#iefix) format('embedded-opentype'),
	 url(fonts/NanumGothic.woff) format('woff'),
	 url(fonts/NanumGothic.ttf) format('truetype')
}
p {
	font-family: 'Nanum Gothic', sans-serif;
}
</style>

 

 

크기

• font-size: 글자 크기 지정

p { font-size: 2em; }

 

 

두께

• font-weight: 
• 기본 두께 (normal)로 지정

font-weight: normal;
font-weight: lighter;
font-weight: 100;
...
font-weight: 500;

• 볼드체 (bold) 로 지정

font-weight: normal;
font-weight: lighter;
font-weight: 600;
...
font-weight: 900;

 

 

 

장식

• text-decoration : 글자 장식 지정

text-decoration : none; /* 장식 없음 */
text-decoration : underline; /* 밑줄 */
text-decoration : overline ; /* 윗줄 */
text-decoration : line-through; /* 가운데 지나가는 선 */
text-decoration : blink; /* 깜빡거림 >> 더 이상 지원 안함 */

 

 

 

스타일

• font-style : 글자 스타일 지정

font-style : italic; /* 기울임 */
font-style : oblique; /* 비스듬하게 */
font-style : normal; /* 기울어진 글자를 바로 세움 */

• italic; italic체로 디자인된 폰트를 사용
• oblique; normal폰트를 단순히 기울기만 한 것

 

 

 

색

• color: 글자색 지정

color: red;

 

 

 

정렬

• text-align: 글 정렬 지정

text-align : left; 
text-align : right; 
text-align : center; 
text-align : justify;

 

 

 

수직 정렬

• 인라인 요소끼리의 위, 아래 간격을 맞출 수 있다
• <img> 요소는 블록 요소 안에 있을 경우 약간의 공백이 발생할 수 있는데, vertical-align을 이용해서 그 공백을 없앨 수 있다
  • 예) img { vertical-align: top; }

vertical-align: baseline; /* 글자의 baseline에 맞춤 */
vertical-align: sub; /* 부모요소의 아래 첨자 위치로 맞춤 */
vertical-align: super; /* 부모요소의 위 첨자 위치로 맞춤 */
vertical-align: top; /* 부모요소의 상단에 맞춤 */
vertical-align: text-top; /* 부모요소의 글꼴 요소의 상단에 맞춤 */
vertical-align: middle; /* 부모요소의 소문자를 기준으로 중간에 맞춤 */
vertical-align: bottom; /* 부모요소의 아래쪽에 맞춤 */
vertical-align: text-bottom; /* 부모요소의 글꼴의 아래쪽에 맞춤 */

 

 

 

간격

• letter-spacing: 글 간격 지정

p { letter-spacing: 0.1em; }

 

• word-spacing: 글자 간격 지정

p { word-spacing: 0.3em; }

 

• line-height: 줄 간격 지정

p { line-height: 1.6; } /* 1.6배 */

 

 

 

들여쓰기

• text-indent: 글자 들여쓰기

p { text-indent: 1em; }

 

 

 

대소문자

• text-transform: 영문 대소문자 지정

h1.uppercase{text-transform: uppercase;} /* 대문자로 */
h1.lowercase{text-transform: lowercase;} /* 소문자로 */
h1.capitalize{text-transform: capitalize;} /* 첫 글자를 대문자로 */

 

• font-variant:

h1.smallcaps{font-variant: small-caps;} 
/* 대소문자 섞여 있을 때, 소문자를 대문자로 변경하고, 크기는 소문자 크기 */

 

 

 

줄 바꿈

• 인라인 요소인 '글(text)'은 자신을 감싸고 있는 상위 블록 요소의 'width'를 넘어서게 되면 줄을 바꾸게 된다

 

• word-break: 단어를 깨뜨려 줄바꿈을 지정

<style>
body{
	width: 400px;
	font-family: '돋움',dotum,helvetica,sans-serif;
	font-size: 12px;
	text-align: justify;
}
.area{
	background-color: #ddd;
	word-break: break-all; /* text-align: justify;와 같이 지정 */
}
</style>

 

• white-space: 줄바꿈 금지   or   <pre> 요소 특성 부여

<style>
.nomal {
	white-space: normal;
    /* white-space 를 설정하지 않으면 기본값으로 normal 설정 */
    /* 연속으로 띄어쓰기(\s)를 하더라도 화면에서는 한 칸만 떨어지고, 들여쓰기(\t), 줄바꿈(\n) 모두 무시 */
    /* 부모 요소의 너비를 벗어나면 자동으로 줄바꿈 */
} 
.nowrap{
	white-space: nowrap; 
    /* 줄바꿈 금지 */
    /* 연속으로 띄어쓰기(\s)를 하더라도 화면에서는 한 칸만 떨어지고, 들여쓰기(\t), 줄바꿈(\n) 모두 무시 */
}
.pre{
	white-space: pre; 
    /* HTML의 <pre> 요소를 지정한 것처럼 띄어쓰기나 줄바꿈 등이 작성한 그대로 표현 */
    /* 부모 요소의 너비를 벗어나도 자동 줄바꿈이 일어나지 않음 */

}
.pre-wrap{
	white-space: pre-wrap; 
    /* HTML의 <pre> 요소를 지정한 것처럼 띄어쓰기나 줄바꿈 등이 작성한 그대로 표현 */
    /* 부모 요소의 너비를 벗어나면 자동으로 줄바꿈 된다 */
}
.pre-line{
	white-space: pre-line; 
    /* 줄바꿈 문자만 있는 그대로 처리 */
	/* 연속된 띄어쓰기와 들여쓰기는 무시하고, 띄어쓰기한 공백은 한 칸만 표현 */
} 
</style>

 

 

 

글꼴 여러 개

• font-family : 글꼴 여러 개 설정할 때는 쉼표로 구분

font-family : Georgia, "Times New Roman", serif;

• 글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용한다
• 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마지막은 generic-family 로 정해두는 것이 좋다

 

---

 

⚒️ 예제

CSS\webapp\03_cssColorText
exam01.html	CSS3 색 활용
exam02.html	텍스트 꾸미기
exam03.html	Consolas font