CSS에서 텍스트 주위에 둥근 배경 만들기

문제 상황: background 속성이 텍스트 블록을 덮어버림

개발자들은 종종 CSS를 사용하여 웹 페이지에 다양한 스타일을 적용합니다. 하지만 이 때문에 문제가 발생할 수 있는데, StackOverflow에 게시된 질문에서 이와 유사한 문제가 나왔습니다. 사용자가 background 속성을 이용하여 텍스트에 둥근 배경을 적용하려고 했으나, 배경이 텍스트 블록 전체를 덮어버리는 문제가 발생했습니다.

해결 방법 1: display: inline-block; 속성 사용하기

display: inline-block; 속성은 요소를 인라인 레벨로 표시하면서 블록 레벨 스타일을 적용할 수 있게 해줍니다. 이 속성을 사용하면, 배경이 텍스트 주위로 둥글게 적용될 것입니다.

.text-class {
  background-color: yellow;
  border-radius: 12px;
  display: inline-block;
}

해결 방법 2: padding 속성으로 간격 조절하기

padding 속성을 사용하면 텍스트와 배경 사이의 간격을 조절할 수 있습니다. 이렇게 하면 배경이 텍스트를 딱 붙어서 둘러싸는 문제를 해결할 수 있습니다.

.text-class {
  background-color: yellow;
  border-radius: 12px;
  padding: 5px 10px;
}

해결 방법 3: inline-flex로 레이아웃 조절하기

display: inline-flex;를 사용하면 요소를 유연하게 배열할 수 있습니다. 이는 텍스트가 여러 줄인 경우에도 유용하며, align-items: center;와 같은 속성을 함께 사용하여 배경과 텍스트의 위치를 더 정확하게 조절할 수 있습니다.

.text-class {
  background-color: yellow;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
}

정리

CSS는 웹 페이지의 디자인을 자유자재로 조작할 수 있게 해주지만, 때로는 예상치 못한 문제에 부딪힐 수 있습니다. 이러한 문제를 해결하기 위해 display: inline-block;, padding, 그리고 display: inline-flex; 등 다양한 CSS 속성을 적용해볼 수 있습니다. 이를 통해 원하는 디자인과 레이아웃을 성공적으로 구현할 수 있습니다.