본 블로그 글에서는 CSS를 이용하여 웹 페이지에서 요소의 가시성을 조절하는 방법과 텍스트를 스타일링하는 방법에 대해 다루겠습니다.

가시성 조절

Display 속성

html에서 element들의 기본 display 속성이 block 또는 inline 이다. display 속성을 이용하여 block, inline, inline-block와 같은 값을 설정하여 요소의 가시성을 조절할 수 있다. 예를 들어, display: none;을 적용하면 해당 요소를 화면에서 숨길 수 있다.

.hidden-element {
  display: none;
}

Visibility 속성

visibility 속성을 이용하여 요소의 시각적 표시 여부를 결정할 수 있다. visible일 경우 보이고, hidden일 경우 보이지 않게할 수 있다.

.invisible-element {
  visibility: hidden;
}

텍스트 스타일링

폰트 속성

폰트 관련 속성들을 사용하여 텍스트의 스타일, 굵기, 크기 등을 조절할 수 있다.

.styled-text {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-decoration: underline;
}

텍스트 정렬

텍스트를 가운데 정렬, 오른쪽 정렬, 왼쪽 정렬 등으로 조절할 수 있다.

.center-aligned-text {
  text-align: center;
}

위와 같이 CSS를 사용하여 웹 페이지의 요소들의 가시성을 조절하고 텍스트를 스타일링할 수 있습니다.

참고문헌:

• MDN Web Docs
• W3Schools