icon안동민 개발노트

색상, 폰트, 텍스트 스타일링

 웹 디자인에서 색상, 폰트, 텍스트 스타일링은 사용자 경험과 시각적 매력을 결정짓는 핵심 요소입니다.

 이 절에서는 CSS를 사용하여 이러한 요소들을 효과적으로 제어하는 방법을 알아보겠습니다.

색상 지정 방법

 CSS에서는 다양한 방식으로 색상을 지정할 수 있습니다.

 1. 키워드

  • 예 : color: red;, background-color: transparent;
  • 장점 : 이해하기 쉽고 기억하기 쉬움
  • 단점 : 제한된 색상 옵션

 2. HEX 코드

  • 예 : color: #FF0000; (빨강)
  • 6자리 또는 3자리 (#RGB) 사용 가능
  • 장점 : 정확한 색상 지정 가능
  • 단점 : 직관적이지 않을 수 있음

 3. RGB/RGBA

  • 예 : color: rgb(255, 0, 0);, background-color: rgba(255, 0, 0, 0.5);
  • RGBA에서 'A'는 알파 채널(투명도)를 나타냄
  • 장점 : 투명도 조절 가능

 4. HSL/HSLA

  • 예 : color: hsl(0, 100%, 50%);, background-color: hsla(0, 100%, 50%, 0.5);
  • 색상(Hue), 채도(Saturation), 명도(Lightness) 사용
  • 장점 : 색상 조정이 직관적
.example {
    color: #00ff00; /* 녹색 (HEX) */
    background-color: rgba(0, 0, 255, 0.5); /* 반투명 파란색 (RGBA) */
    border-color: hsl(300, 100%, 50%); /* 보라색 (HSL) */
}

폰트 관련 속성

 1. font-family

  • 글꼴 지정
  • 예 : font-family: Arial, sans-serif;
  • 여러 글꼴을 지정하여 폴백(fallback) 제공

 2. font-size

  • 글자 크기 지정
  • 예 : font-size: 16px;, font-size: 1.2em;

 3. font-weight

  • 글자 굵기 지정
  • 예 : font-weight: bold;, font-weight: 700;

 4. font-style

  • 글자 스타일 지정 (주로 이탤릭체)
  • 예 : font-style: italic;

 5. font (shorthand)

  • 여러 폰트 속성을 한 번에 지정
  • 예 : font: italic bold 16px/1.5 Arial, sans-serif;
  • 순서 : font-style font-weight font-size/line-height font-family

웹 폰트 적용

 웹 폰트를 사용하면 사용자의 시스템에 설치되지 않은 글꼴도 사용할 수 있습니다.

@font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
}
 
body {
    font-family: 'MyCustomFont', sans-serif;
}

 Google Fonts와 같은 서비스를 이용하면 더 쉽게 웹 폰트를 적용할 수 있습니다.

텍스트 스타일링

 1. text-align

  • 텍스트 정렬 지정
  • 예 : text-align: center;, text-align: justify;

 2. text-decoration

  • 텍스트 장식 지정
  • 예 : text-decoration: underline;, text-decoration: line-through;

 3. line-height

  • 줄 간격 지정
  • 예 : line-height: 1.5;, line-height: 24px;

 4. letter-spacing

  • 글자 간격 지정
  • 예 : letter-spacing: 2px;

 5. text-transform

  • 텍스트 변환 지정
  • 예 : text-transform: uppercase;
.styled-text {
    text-align: justify;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

반응형 타이포그래피

 반응형 타이포그래피는 다양한 화면 크기에서 최적의 가독성을 제공합니다.

 1. 상대 단위 사용

  • em : 부모 요소의 폰트 크기에 상대적
  • rem : 루트 요소(일반적으로 <html>)의 폰트 크기에 상대적
html {
    font-size: 16px;
}
 
body {
    font-size: 1rem; /* 16px */
}
 
h1 {
    font-size: 2rem; /* 32px */
}

 2. 뷰포트 단위 사용

  • vw : 뷰포트 너비의 1%
  • vh : 뷰포트 높이의 1%
h1 {
    font-size: calc(1.5rem + 2vw);
}

 3. 미디어 쿼리 활용

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

CSS 상속과 텍스트 스타일링

 CSS에서 많은 텍스트 관련 속성들은 기본적으로 상속됩니다. 이는 부모 요소에 스타일을 적용하면 자식 요소들도 해당 스타일을 상속받는다는 의미입니다.

body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

 위의 스타일은 <body> 요소에 적용되지만, 대부분의 자식 요소들도 이 스타일을 상속받게 됩니다. 이를 통해 전체적인 일관성을 유지하면서도 필요한 부분만 개별적으로 스타일을 변경할 수 있습니다.

.special-text {
    font-family: Georgia, serif; /* body의 font-family를 덮어씀 */
    color: #007bff; /* body의 color를 덮어씀 */
}

 상속을 활용하면 코드 중복을 줄이고 유지보수를 용이하게 할 수 있습니다. 하지만 모든 속성이 상속되는 것은 아니므로, 각 속성의 상속 여부를 이해하는 것이 중요합니다.

실전 팁과 주의사항

 1. 색상 대비 고려하기

  • 텍스트와 배경 색상의 대비를 충분히 주어 가독성을 높입니다.
  • WCAG 지침을 참고하여 접근성을 고려합니다.

 2. 폰트 스택 신중히 선택하기

  • 다양한 환경을 고려하여 폰트 스택을 구성합니다.
  • 예: font-family: 'Helvetica Neue', Arial, sans-serif;

 3. 적절한 행간 사용하기

  • 일반적으로 1.4~1.6 정도의 line-height가 가독성에 좋습니다.

 4. 반응형 디자인 테스트하기

  • 다양한 기기와 화면 크기에서 타이포그래피를 테스트합니다.

 5. 성능 고려하기

  • 웹 폰트 사용 시 로딩 시간을 고려합니다.
  • 필요한 글자만 선별하여 서브셋 폰트를 사용할 수 있습니다.

 색상, 폰트, 텍스트 스타일링은 웹 디자인의 기초이면서도 사용자 경험에 큰 영향을 미치는 중요한 요소입니다. 이를 효과적으로 활용하면 가독성 높고 시각적으로 매력적인 웹사이트를 만들 수 있습니다.

 CSS의 다양한 기능을 이해하고 적절히 사용하는 것이 중요하며, 동시에 접근성과 사용자 경험을 항상 고려해야 합니다.

 또한, 최신 CSS 기능과 트렌드를 지속적으로 학습하고, 다양한 브라우저와 기기에서의 호환성을 항상 염두에 두어야 합니다.

 색상, 폰트, 텍스트 스타일링은 단순히 시각적인 요소를 넘어 브랜드 아이덴티티와 사용자와의 커뮤니케이션을 형성하는 중요한 수단이므로, 신중하고 전략적인 접근이 필요합니다.

이전으로다음으로