CSS 핵심개념(2)

이전까지 텍스트를 어떻게 스타일링하면 되는지에 대해 배웠다. 추가로 몇가지만 더 알고 넘어가보자.

• 줄 높이 : line-height

.loose {
 	font-size: 16px;
 	line-height: 1.7; /* 16px * 1.7 = 27.2px */
 }

 .regular {
 	font-size: 16px;
 	line-height: 1.5; /* 16px * 1.5 = 24px */
 }

 .tight {
 	font-size: 16px;
 	line-height: 1; /* 16px * 1 = 16px */
 }

• 텍스트 꾸미기 : text-decoration

.none {
	text-decoration: none;
}

.underline {
	text-decoration: underline;
}

.line-through {
	text-decoration: line-through;
}

그 외 CSS 속성

1. 배경 이미지 : background-image

background-image:
  url('a.png'), /* 제일 위에 보이는 이미지 */
  url('b.png'),
  url('c.png');
  
background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */

background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

2. 그라디언트 : linear-gradient

/* 위에서부터 서서히 투명히진다 */
/* 아래처럼 그라디언트와 이미지를 같이 자주 적용한다 */
background-image:
  linear-gradient(rgba(159, 84, 209, 0.2), rgba(115, 82, 208, 0.6)),
  url('bg.png');

/* 기본 각도 180도 */
background-image:
  linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

• 구글에서 'Gradient Generator' 입력하면 원하는 그라디언트 색상 생성이 가능하다.

  Gradient Generator

4. 그림자 : box-shadow

box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6);
/*
  가로: 5px
  세로: 10px
  흐린 정도(Blur): 15px
  퍼지는 정도(Spread): 8px
  색상: rgba(0, 0, 0, 0.6)
*/

• 이것도 마찬가지로 구글에서 'Box Shadow Generator' 통해 원하는 그림자 생성이 가능하다.

  Box Shadow Generator

5. 불투명도 : opacity

opacity: 0; /* 투명 */
opacity: 0.6;
opacity: 1; /* 불투명 */

• 배경색만 투명하게 만들고 싶을 때는 rgba를 사용하면 된다. opacity도 많이 사용하는 기능이니까 알아두자.