#15. 텍스트 관련 CSS 속성 / font-size / color / font-family / font-weight / line-height - HTML/CSS 기초 강의

| 2025-01-11 20:33 | 조회 395

#CSS속성 #HTML문서 #웹디자인 #프론트엔드개발 #웹코딩 #myip

[주요 목차]

📏 텍스트 크기 변경하기

🎨 텍스트 색상 변경하기

🖋️ 폰트 패밀리 설정하기

🔠 텍스트 굵기 조절하기

📐 줄 높이 조절하기

웹 개발의 기본적인 부분 중 하나는 텍스트의 스타일과 레이아웃을 조절하는 것입니다. CSS는 이러한 작업을 간편하게 할 수 있도록 돕는 강력한 도구입니다. 이번 블로그에서는 CSS를 사용하여 HTML 문서의 텍스트를 더 효과적으로 제어할 수 있는 방법에 대해 알아보겠습니다. 각각의 CSS 속성을 활용하여 텍스트의 크기, 색상, 글꼴, 굵기, 그리고 줄 높이를 어떻게 조절할 수 있는지 단계별로 자세히 설명드리겠습니다. 이를 통해 웹 디자인의 기본을 확실히 다질 수 있을 것입니다.

📏 텍스트 크기 변경하기

텍스트의 크기를 조절하는 것은 웹 디자인에서 매우 중요한 요소입니다. CSS에서 font-size 속성을 사용하여 텍스트의 크기를 설정할 수 있습니다. px, em, rem 등의 단위를 활용하여 다양한 크기를 지정할 수 있으며, 일반적으로 px 단위가 자주 사용됩니다. 예를 들어, h1 태그의 텍스트 크기를 24px로 설정하려면 다음과 같이 코드를 작성할 수 있습니다: css h1 { font-size: 24px; } 이렇게 하면 h1 태그의 텍스트가 지정된 크기로 출력됩니다. 웹사이트의 가독성을 높이기 위해 적절한 텍스트 크기를 설정하는 것은 매우 중요합니다.

🎨 텍스트 색상 변경하기

텍스트의 색상은 웹페이지의 분위기와 가독성에 큰 영향을 미칩니다. CSS의 color 속성을 사용하여 텍스트 색상을 변경할 수 있습니다. 색상은 키워드, HEX 코드, RGB, RGBA 등 다양한 방법으로 표현할 수 있습니다. 예를 들어, 텍스트를 빨간색으로 설정하려면 다음과 같이 작성할 수 있습니다: css h1 { color: red; } 또는 HEX 코드를 사용하여 색상을 설정할 수도 있습니다: css h1 { color: #FF0000; } 적절한 색상 조합은 사용자의 눈에 편안함을 주고, 정보의 전달력을 높여줍니다.

🖋️ 폰트 패밀리 설정하기

글꼴은 웹페이지의 전반적인 느낌을 결정하는 중요한 요소입니다. CSS의 font-family 속성을 사용하여 텍스트의 글꼴을 설정할 수 있습니다. 원하는 글꼴을 순서대로 나열하고, 마지막에 제너릭 패밀리를 지정하여 시스템 글꼴을 설정할 수 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다: css h1 { font-family: "Arial", "Helvetica", sans-serif; } 이렇게 하면 사용자의 시스템에서 지정한 글꼴이 없을 경우 제너릭 패밀리가 적용됩니다. 정확한 글꼴 설정은 웹사이트의 일관된 디자인을 유지하는 데 필수적입니다.

🔠 텍스트 굵기 조절하기

텍스트의 굵기는 정보의 중요성을 강조하거나 스타일을 변경하는 데 사용됩니다. CSS의 font-weight 속성을 사용하여 텍스트의 굵기를 조절할 수 있습니다. normal, bold와 같은 키워드 또는 100부터 900까지의 숫자 값을 사용할 수 있습니다. 예를 들어: css p { font-weight: bold; } 이 설정은 p 태그의 텍스트를 굵게 만듭니다. 굵기의 적절한 사용은 텍스트의 계층을 명확히 하고, 독자의 주의를 끌 수 있습니다.

📐 줄 높이 조절하기

줄 높이는 텍스트의 가독성을 높이는 데 중요한 역할을 합니다. CSS의 line-height 속성을 사용하여 줄 높이를 조절할 수 있습니다. 배수나 고정 값을 사용하여 설정할 수 있으며, 일반적으로 배수 값을 많이 사용합니다. 예를 들어: css p { line-height: 1.5; } 이렇게 하면 텍스트의 줄 높이가 폰트 크기의 1.5배로 설정됩니다. 적절한 줄 높이는 텍스트의 가독성을 높이고, 페이지의 시각적 균형을 유지하는 데 기여합니다.