CSS 텍스트 스타일링

소개

CSS 텍스트 스타일링 랩에 오신 것을 환영합니다! 웹 디자인에서 텍스트의 모양을 제어하는 것은 가독성 있고 접근 가능하며 미적으로 만족스러운 웹사이트를 만드는 데 기본입니다. CSS(Cascading Style Sheets) 는 이러한 목적을 위해 특별히 설계된 강력한 속성 세트를 제공합니다.

이 랩에서는 텍스트 스타일링에 가장 일반적으로 사용되는 CSS 속성을 직접 경험하게 됩니다. 텍스트 색상 변경, 글꼴 크기 조정, 텍스트 굵게 만들기, 정렬 및 줄 간격 제어 방법을 배우게 됩니다. 콘텐츠가 포함된 index.html 파일과 CSS 규칙을 작성할 style.css 파일, 두 개의 파일을 사용하게 됩니다. 랩 환경의 Web 8080 탭으로 전환하여 변경 사항을 실시간으로 확인할 수 있습니다.

시작해 봅시다!

텍스트 색상에 color 속성 설정

이 단계에서는 CSS color 속성을 사용하여 텍스트 색상을 변경하는 방법을 배우게 됩니다. 이 속성은 색상 이름 (red, blue 등), 16 진수 값 (#FF0000 등), RGB 값 등을 사용할 수 있습니다.

먼저 WebIDE 왼쪽 파일 탐색기에서 style.css 파일을 찾으십시오. 해당 파일을 클릭하여 편집기에서 엽니다.

이제 단락 텍스트의 색상을 변경하는 규칙을 추가해 보겠습니다. 모든 단락 요소를 대상으로 하기 위해 p 선택자를 사용합니다. style.css 파일에 다음 코드를 추가하십시오.

p {
  color: #2980b9;
}

코드를 추가한 후 style.css 파일을 저장하십시오. 결과를 보려면 인터페이스 상단의 Web 8080 탭을 클릭하십시오. 단락 텍스트 색상이 파란색 계열로 변경된 것을 볼 수 있습니다.

픽셀 단위로 font-size 속성 적용

이 단계에서는 font-size 속성을 사용하여 텍스트 크기를 조정합니다. 이 속성은 글꼴 크기를 제어합니다. 사용할 수 있는 단위는 많지만 (em, rem, % 등), 고정 크기를 제공하는 픽셀 (px) 부터 시작할 것입니다.

가독성을 높이기 위해 단락 텍스트를 약간 더 크게 만들어 보겠습니다. style.css 파일로 돌아가 기존 p 규칙에 font-size 속성을 추가하십시오.

이제 p 선택자의 규칙은 다음과 같이 보여야 합니다.

p {
  color: #2980b9;
  font-size: 18px;
}

파일을 저장하고 다시 Web 8080 탭으로 전환하십시오. 단락 안의 텍스트가 이전보다 더 커진 것을 알 수 있습니다.

굵은 텍스트에 font-weight 속성 사용

이 단계에서는 font-weight 속성을 사용하여 텍스트의 굵기를 제어하는 방법을 배우게 됩니다. 이 속성은 normal 또는 bold와 같은 키워드 값이나 100 에서 900 사이의 숫자 값을 사용할 수 있습니다.

제목 (h1) 을 더 눈에 띄게 만들기 위해 명시적으로 굵기를 설정해 보겠습니다. 제목은 종종 기본적으로 굵게 표시되지만, CSS 에서 이를 정의하면 일관성을 보장할 수 있습니다. 또한 단락 텍스트를 굵게 만들겠습니다.

style.css 파일을 수정하십시오. 먼저 h1 요소에 대한 새 규칙을 추가합니다. 그런 다음 기존 p 규칙에 font-weight 속성을 추가합니다.

h1 {
  font-weight: bold;
}

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
}

파일을 저장하고 Web 8080 탭을 확인하십시오. 단락 텍스트가 이제 굵게 표시되는 것을 볼 수 있습니다.

텍스트 가운데 정렬을 위한 text-align 속성 구현

이 단계에서는 text-align 속성을 사용하여 텍스트의 가로 정렬을 제어합니다. 이 속성은 left, right, center, justify와 같은 값을 가질 수 있습니다. 제목 및 기타 블록 레벨 텍스트 요소를 배치하는 데 유용합니다.

페이지의 메인 제목을 가운데 정렬해 보겠습니다. 이를 위해 style.css 파일의 h1 규칙에 text-align 속성을 추가할 것입니다.

style.css 파일의 h1 규칙을 업데이트하여 text-align: center;를 포함시키십시오.

h1 {
  font-weight: bold;
  text-align: center;
}

파일을 저장한 후 Web 8080 탭을 새로 고치십시오. "Welcome to CSS Text Styling"이라는 <h1> 제목이 이제 페이지 상단에 완벽하게 가운데 정렬되어야 합니다.

간격 조정을 위한 line-height 속성 추가

마지막 단계에서는 텍스트 줄 사이의 간격을 조정하여 단락의 가독성을 향상시킬 것입니다. 이는 line-height 속성을 사용하여 수행됩니다.

line-height에 단위 없는 값을 사용하는 것은 일반적인 모범 사례입니다. 이는 요소의 글꼴 크기에 상대적인 간격을 만들기 때문입니다. 예를 들어, line-height가 1.6이면 간격은 글꼴 크기의 1.6 배가 됩니다.

단락에 세로 간격을 추가해 보겠습니다. style.css 파일로 이동하여 p 규칙에 line-height 속성을 추가하십시오.

최종 p 규칙은 다음과 같이 표시되어야 합니다.

p {
  color: #2980b9;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

파일을 저장하고 Web 8080 탭에서 결과를 확인하십시오. 이제 단락이 훨씬 읽기 쉬워지고 줄 사이의 간격이 더 편안해진 것을 알 수 있습니다.

요약

CSS 텍스트 스타일링 실습을 완료하신 것을 축하드립니다! 웹페이지의 텍스트 모양을 제어하는 가장 필수적인 CSS 속성 중 일부를 성공적으로 배우고 적용했습니다.

이 실습에서는 다음을 연습했습니다.

• color: 텍스트 색상을 변경합니다.
• font-size: 텍스트 크기를 제어합니다.
• font-weight: 텍스트의 굵기를 조정합니다.
• text-align: 텍스트의 가로 정렬을 설정합니다.
• line-height: 텍스트 줄 사이의 세로 간격을 관리합니다.

이러한 기본적인 기술은 잘 디자인되고 읽기 쉬운 웹 콘텐츠를 만드는 데 필수적인 요소입니다. style.css 파일에서 다른 값과 속성을 자유롭게 실험해 보세요. 더 능숙해지기 위해 계속 탐색하십시오!