Chapter 08. CSS Beginner (4) 폰트, 테두리 꾸미기, 배경이미지 설정, 요소 정렬하기

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets)

 

 

CSS Beginner(3) 7. ~ 8.

 

| 목차

1. CSS 적용

2. CSS 구성(구조, 선택자, 주석)

3. CSS 특성

4. BOX model

5. BOX sizing

6. CSS 단위

7. 이미지 다루기

8. Overflow 및 해결

9. 폰트 꾸미기

10. 테두리 꾸미기

11. 배경 이미지 설정

12. 요소 정렬하기

 

---

 

9. 폰트 꾸미기

<div class="container">
	<p>Hello :)</p>
</div>

html {
	fonr-size: 10px;
}
p {
	color: #008000;
	font-size: 0.5rem; (10px의 0.5만큼-> 5px)
	font-style: italic; (기울어짐)
	font-weight: bold; (두껍게) 
	text-decoration: underline;
}

a 태그를 사용하는 경우 파란색이 기본값이다. 

또한 한번 접속한 링크의 경우 클릭하면 보라색이 되는 것이 기본값이다. (예: 구글 검색 결과)

 

이를 심미성을 위하여 수정해보면 아래와 같이 수정할 수 있다. 클릭한 적이 없는 링크와 방문했던 링크 둘 다 검은 색으로 표현되도록 해보자. 

a {
	text-decoration: none;
}

a:link {             (클릭한 적이 없는 링크)
	color: black;
}

a:visited {         (방문했던 링크)
	color: black;
}

 

 

10. 테두리 꾸미기

- box model 중 테두리

테두리는 별도 선언이 없으면 none 값이 적용된다. (기본값=보이지 않음)

<div class="container">
</div>

.container{

}

 

실선, 파란색, 2px 두께의 테두리를 만들겠다.

<div class="container">
</div>

.container{
	border-width: 2px;
	border-style: solid;
	border-color: blue;	
}


---(더 간단하게)---

.container{
	border: 2px solid blue;	
}

 

테두리를 각지지않고 둥글게 하려면 :

반경 값을 넣어 모서리를 둥글게!

.container{
	border: 2px solid blue;	
	border-radius: 20px;
}

 

 

 

11. 배경 이미지 설정

-노란색 배경

-'안녕하세요'블록에는 하늘색 배경

<div class="container">
	<p>안녕하세요:)</p>
</div>

.container{
	background-color: yellow;
}

p{
	background-color: skyblue;
}

 

배경 '이미지'를 가져오기

(*이미지가 연속해서 나오는데다가 짤리기까지 할 수 있음)

<div class="container">
</div>

.container{
	background-image: url(mimoji.png);
}

 

배경 이미지 패턴 반복하지 않도록 하기(no-repeat)

<div class="container">
</div>

.container{
	background-image: url(mimoji.png);
	background-repeat: no-repeat;
}

 

 

여기서 이미지의 크기를 조정해보자!

-background-size: contain;

.container{
	background-image: url(mimoji.png);
	background-repeat: no-repeat;
	backgorund-size: contain;
}

 

cover

(요소의 배경을 모두 덮는 것이 우선. 이미지가 전부 온전히 표시되지 않고 잘릴 수 있음.)

.container{
	background-image: url(mimoji.png);
	background-repeat: no-repeat;
	backgorund-size: cover;
}

 

다른 이미지로 position 설명해보기(작은 눈송이 이미지)

.container{
	background-image: url(snowflake.png);
	background-repeat: no-repeat;
	background-position: center; (가운데로 배치됨!)
}

 

 

이미지를 레이아웃에 맞는 해상도로 crop 하여 사용하는 것이 best!

 

 

 

12. 요소 정렬하기

css에서는 어떻게 요소를 정렬하는가?

 

-가운데 정렬의 대표적인 선언법:

margin:0 auto;

좌우 margin 값을 동일하게 만들어 가운데로 정렬하는 것임.

body{
	margin:0 auto;
}