CSS 정리 2일차

웋·2022년 9월 9일

CSS

css

목록 보기

2/2

5. TEXT CSS

5.1 font-family

문서 내에서 사용할 글자체(글꼴)을 설정

<style type="text/css">
	body { font-family: "맑은 고딕", sans-serif; }
    h2 { font-family: 궁서체, serif; }
</style>

5.2 font-size

px 단위
글자 크기를 지정하지 않으면 16px 크기로 화면에 나타남

<style type="text/css">
	.text1 { font-size: 24px; }
</style>

% 단위
기본 글자 크기가 지정되지 않으면 16px 크기를 100%로 계산

<style type="text/css">
	.text1 { font-size: 200%; }
</style>

/* 기본 글자 크기 지정 */
<style type="text/css">
	body { font-size: 32px; }
	.text1 { font-size: 50%; }
</style>

em 단위
기본 크기가 정해져 있지 않으면 em은 기본 글자 크기인 16px을 1로 설정한 후 비율로 계산함

<style type="text/css">
	body { }
	.text1 { font-size: 1.5em; }
</style>

5.3 font-weight

lighter(얇게), normal(보통), bold(진하게), bolder(아주 진하게)
이론상으로는 위와 같으나 폰트 구성의 한계로 인해 lighter, normal이 같게 나타나고 bold, bolder도 구분되지 않음

<style type="text/css">
	.text1 { font-weight: bold; }
</style>

5.4 font-style

normal(보통), italic(이탤릭체-기울어진 글꼴), oblique(비스듬한 글꼴)이 있으나 폰트 구성의 한계로 italic과 oblique이 같게 나타남

5.5 웹 폰트 사용하기

<head>
	<link href="https://fonts.googleapis.com/css2?family=Edu+SA+Beginner&display=swap" 
                rel="stylesheet">
	<style type="text/css">
		body {
                font-family: 'Edu SA Beginner', cursive, '고딕';
                font-size: 48px;
            }
	</style>
</head>

5.6 line-height

문장이 여러 줄로 표현되는 경우 줄 간의 간격을 지정할 수 있음
font-size와 같이 px, %, em 등 다양한 단위 사용 가능
줄 간의 간격은 line-height 값만이 아닌 font-size에도 영향을 받음

<style type="text/css">
	.text1 { font-size: 16px; line-height:16px; }
    .text2 { font-size: 32px; line-height:16px; }
</style>

/* 겹치는 현상을 방지하려면 
font-size의 크기와 연동되는 상대적인 line-height 값을 지정해야함*/
<style type="text/css">
	.text1 { font-size: 16px; line-height:120%; }
    .text2 { font-size: 32px; line-height:120%; }
</style>

5.7 color

<style type="text/css">
	.text1 { color: red; }
    .text2 { color: #ff0000; }
</style>

/* rgba(red, green, blue, 투명도) */
<style type="text/css">
	#divbox1 { background-color: rgba(255, 255, 255, 1); }
    #divbox2 { background-color: rgba(255, 255, 255, 0.5); }
</style>

5.8 text-decoration

문자열에 밑줄(underline), 취소선(line-through), 윗줄(overline) 등의 효과를 나타내고자할 경우 또는 밑줄을 없애고자 하는 경우 사용

<style type="text/css">
	a:link, a:visited { text-decoration: none; }
	.text1 { text-decoration: underline; }
    .text2 { text-decoration: line-through; }
    .text3 { text-decoration: overline; }
</style>

5.9 text-shadow

text-shadow: 수평그림자값 수직그림자값 그림자넓이값 그림자색;
수평그림자에서 양수는 문자의 오른쪽에 음수는 문자의 왼쪽에 그림자를 나타냄
수직그림자에서 양수는 아래쪽에 음수는 위쪽에 그림자를 나타냄

<style type="text/css">
	body { font-size: 46px; }
	.text1 { font-shadow: 5px 5px 10px black; }
    .text2 { font-shadow: -5px -5px 10px red; }
</style>

5.10 word-spacing, letter-spacing

/* word-spacing: 단어 간의 간격을 설정
	letter-spacing: 글자 간의 간격을 설정 */
<style type="text/css">
	.text1 { word-spacing: 20px; letter-spacing: 3px; }
	.text2 { word-spacing: 10px; letter-spacing: -5px; }
</style>

5.11 vertical-align

웹 문서 영역 내에서 구성 요소들 간의 수직 위치를 지정
테이블에서 셀 안에 들어있는 요소들의 수직 위치를 지정

<style type="text/css">
	.topalign { vertical-align: top; }
	.middlealign { vertical-align: middle; }
	.bottomalign { vertical-align: bottom; }
</style>

5.12 text-align

웹 문서 문장들의 수평 정렬 방법을 지정

<style type="text/css">
	.text1 { text-align: left; }
    .text2 { text-align: center; }
    .text3 { text-align: right; }
</style>

5.13 text-indent

문장의 들여쓰기 간격을 지정

<style type="text/css">
	/* 폰트 크기가 변경되면 위치가 변경 */
	.text1 { text-indent: 10px; }
    
    /* 폰트 크기가 변경되어도 1글자 크기만큼 들여쓰기가 적용 */
    .text2 { text-indent: 1em; }
</style>

5.14 list-style

<style type="text/css">
	.text1 { list-style-type: none, disk, circle, square, 
    		decimal, decimal-leading-zero, 
            lower-roman, upper-roman, lower-alpha, upper-alpha; }
	.text2 { list-style-image: url(flower.jpg); }
    .text3 { list-style-position: inside, outside; }
</style>

6. BACKGROUND CSS

6.1 background-color

<style type="text/css">
	body { background-color: rgba(204, 204, 204, 1); }
</style>

6.2 background-image

<style type="text/css">
	body { background-image: url(); }
</style>

6.3 background-repeat

<style type="text/css">
	body {
    	/* 먼저 배경 그림이 지정되어 있어야 함 */
    	background-image: url();
		background-repeat: no-repeat, repeat, repeat-x, repeat-y;
        /* repeat-x: 배경 그림이 가로 방향으로만 반복 */
        /* repeat-y: 배경 그림이 세로 방향으로만 반복 */
    }
</style>

6.4 background-size

<style type="text/css">
	body {
    	background-image: url();
		background-repeat: no-repeat;
        background-size: 170px 250px;
        /* cover: 배경 그림이 웹 브라우저의 가로 크기에 맞춤 */
    }
</style>

6.5 background-attachment

웹 문서의 내용이 많아 스크롤이 발생하는 경우 배경 그림이 화면 스크롤을 따라 움직일지(scroll) 고정된(fixed) 상태로 있을지 선택

/* 먼저 background-repeat: no-repeat;가 지정되어 있어야함 */
<style type="text/css">
	body {
    	background-image: url();
		background-repeat: no-repeat;
        background-size: scroll, fixed;
    }
</style>

6.6 background-position

background-position: 가로기준속성값 세로기준속성값;
가로 기준 : left, center, right, 값지정
세로 기준 : top, center, bottom, 값지정

<style type="text/css">
	body {
    	background-image: url();
		background-repeat: no-repeat;
        background-position: right center;
    }
</style>

6.7 background 속성

다음 두 예는 동일한 결과를 보여줌

<style type="text/css">
	body {
    	background-color: #cccccc;
    	background-image: url();
		background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right center;
    }
</style>

<style type="text/css">
	body { background: #cccccc url() no-repeat fixed right center; }
</style>

배경 관련 CSS 명령들은 body 뿐만 아니라 영역을 가지고 있는 모든 태그 - h1, p, span, div, fieldset... - 에 사용될 수 있음

웋

내가 할 수 있스까..?

이전 포스트