자주 사용하는 CSS 속성

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

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

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

예시:

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

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

• 의미: 그림자의 가로 오프셋입니다.
• 설명: 이 값은 그림자가 요소의 오른쪽으로 5픽셀만큼 이동하게 합니다.

• 의미: 그림자의 세로 오프셋입니다.
• 설명: 이 값은 그림자가 요소의 아래쪽으로 5픽셀만큼 이동하게 합니다.

• 의미: 그림자의 흐림 반경입니다.
• 설명: 이 값은 그림자의 경계가 얼마나 흐릿하게 퍼져나갈지를 결정합니다. 10픽셀의 흐림 반경이 주어지면 그림자의 경계는 부드럽게 퍼져 나갑니다.

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

결과적으로 div 요소에 우측과 아래쪽으로 5px씩 떨어진 회색 그림자가 생깁니다.

요소의 모서리를 둥글게 만들어줍니다.

예시:

Copy
div {
  border-radius: 10px;
}

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

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

예시:

Copy
div {
  outline: 2px solid red;
}

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

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

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

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

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