자주 사용하는 CSS 속성

앞서 소개한 color, background-color, font-size와 같은 CSS 속성 외에도, 수백 개의 CSS의 속성들이 사용되고 있습니다.

자주 사용되는 주요 CSS 속성들을 확인해 보겠습니다.

HTML 요소에 그림자 효과를 추가합니다.

예시:

복사
div {
  box-shadow: 5px 5px 10px gray;
}

위 CSS 코드는 box-shadow 속성을 사용해 <div> 요소에 그림자 효과를 적용합니다.

각 값의 의미는 다음과 같습니다.

그림자의 가로 오프셋입니다.

이 값으로 그림자가 요소는 오른쪽으로 5픽셀만큼 이동하게 합니다.

그림자의 세로 오프셋입니다.

이 값으로 그림자가 요소는 아래쪽으로 5픽셀만큼 이동하게 합니다.

그림자의 흐림 반경으로, 그림자의 경계가 얼마나 흐릿하게 퍼져나갈지를 결정합니다.

10픽셀의 흐림 반경이 주어지면 그림자의 경계는 부드럽게 퍼져 나갑니다.

그림자의 색상을 회색으로 합니다.

결과적으로 box-shadow: 5px 5px 10px gray; CSS 코드는 우측과 아래쪽으로 5px씩 떨어진 회색 그림자를 생성합니다.

요소의 모서리를 둥글게 만드는 속성입니다.

복사
div {
  border-radius: 10px;
}

위 코드는 div 요소의 모든 모서리가 10px의 곡률로 둥글게 만들어집니다.

요소의 주위에 선을 그려 강조합니다.

복사
div {
  outline: 2px solid red;
}

위 코드는 div 요소 주위에 2px 두께의 빨간색 선을 그립니다.

outline과 border 모두 요소 경계에 선을 그리는 CSS 속성이지만 몇 가지 차이점이 있습니다.

• border: 요소의 경계에 딱 붙어서 선을 그립니다. 이로 인해 요소의 전체 크기가 늘어나게 될 수 있습니다. 즉, border의 두께는 요소의 총 크기에 포함됩니다.

• outline: 요소의 경계 바깥쪽에 선을 그립니다. 이로 인해 요소의 전체 크기가 변하지 않습니다. outline은 요소의 크기나 배치에 영향을 주지 않습니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.