본문 바로가기
CSS Study

폰트, 텍스트 스타일링 및 목록과 표 스타일

by xogns93 2024. 10. 2.

1. 폰트 관련 속성

1.1 font-family

  • 용도: 텍스트의 글꼴을 지정하는 속성.
  • 여러 폰트를 나열하여 브라우저가 해당 폰트가 없을 경우 순차적으로 대체 폰트를 사용할 수 있게 합니다.
  • 예시:
    body {
  font-family: 'Roboto', 'Arial', sans-serif;
}
    • 위 예시에서 Roboto 폰트가 없으면, Arial이 적용되고, 그마저 없으면 기본 sans-serif 폰트가 적용됩니다.

1.2 font-size

  • 용도: 텍스트의 크기를 지정하는 속성.
  • 단위는 px, %, em, rem 등이 있습니다.
  • 예시:
    p {
  font-size: 16px;
}

1.3 font-style

  • 용도: 텍스트의 스타일을 지정합니다. 주로 기울임꼴(italic)을 설정할 때 사용됩니다.
  • 예시:
    em {
  font-style: italic;
}

1.4 font-weight

  • 용도: 텍스트의 굵기를 설정합니다.
  • 값으로는 normal, bold 등이 있으며, 100~900까지 숫자 값으로 세밀하게 조정할 수도 있습니다.
  • 예시:
    h1 {
  font-weight: bold;
}
p {
  font-weight: 400; /* 일반 텍스트 */
}

2. 구글 폰트 사용하기

  • 구글 폰트를 이용하면, 웹 폰트를 쉽게 적용할 수 있습니다.

  • 방법:

    1. Google Fonts 사이트에서 원하는 폰트를 선택합니다.
    2. @import 문 또는 <link> 태그를 복사합니다.

    • @import 문 사용:

      @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

    • <link> 태그 사용:

      <head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

3. 아이콘 폰트 - 폰트 어썸(Font Awesome)

  • 폰트 어썸(Font Awesome)은 웹에서 아이콘을 폰트처럼 사용할 수 있는 라이브러리입니다.

사용 방법:

  1. Font Awesome CDN에서 링크 태그를 복사합니다.
  2. 복사한 링크를 </head> 태그 바로 위에 붙여넣습니다.
    <head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
  3. HTML에서 아이콘을 사용합니다.
    <i class="fas fa-home"></i> <!-- 집 모양 아이콘 -->

4. 텍스트 관련 속성

4.1 color

  • 용도: 텍스트의 색상을 설정합니다.
  • 예시:
    p {
  color: #333333;
}

4.2 text-align

  • 용도: 텍스트의 정렬을 설정합니다. left, right, center, justify 등을 사용할 수 있습니다.
  • 예시:
    h1 {
  text-align: center;
}

4.3 line-height

  • 용도: 텍스트의 줄 간격을 설정합니다.
  • 예시:
    p {
  line-height: 1.5;
}

4.4 text-decoration

  • 용도: 텍스트에 밑줄, 취소선 등을 설정합니다.
  • 하이퍼링크에서 밑줄을 제거하는 데 많이 사용됩니다.
  • 예시:
    a {
  text-decoration: none; /* 하이퍼링크의 밑줄 제거 */
}

4.5 text-shadow

  • 용도: 텍스트에 그림자를 추가합니다.
  • 예시:
    h2 {
  text-shadow: 2px 2px 5px gray;
}

4.6 text-transform

  • 용도: 텍스트의 대소문자 변환을 설정합니다.

    • uppercase: 모두 대문자로.
    • lowercase: 모두 소문자로.
    • capitalize: 각 단어의 첫 글자만 대문자로.

  • 예시:

    p {
  text-transform: uppercase;
}

4.7 letter-spacing

  • 용도: 글자 간의 간격을 설정합니다.
  • 예시:
    h1 {
  letter-spacing: 2px;
}

5. 목록 스타일

5.1 list-style-type

  • 용도: 목록 항목의 불릿이나 번호 스타일을 설정합니다.

  • 순서 없는 목록 (ul)의 불릿 모양을 설정하거나, 순서 있는 목록 (ol)의 번호 형식을 지정할 수 있습니다.

  • 예시:

    ul {
  list-style-type: square; /* 네모 불릿 */
}
ol {
  list-style-type: upper-roman; /* 대문자 로마 숫자 */
}

6. 표 관련 스타일

6.1 border-collapse

  • 용도: 테이블에서 셀의 테두리를 병합하여 일반적인 테두리 모양을 얻는 데 사용합니다.

  • 값:

    • collapse: 테두리가 병합되어 하나로 표시됩니다.
    • separate: 셀의 테두리가 별도로 표시됩니다.

  • 예시:

    table {
  border-collapse: collapse; /* 테두리 병합 */
}
th, td {
  border: 1px solid black;
}

6.2 border-spacing

  • 용도: 셀 간의 간격을 설정합니다. border-collapse: separate일 때 적용됩니다.

  • 예시:

    table {
  border-spacing: 10px;
}

추가로 알면 좋은 것들

  • font-size와 line-height 조정은 가독성에 매우 중요합니다.
  • 구글 폰트와 폰트 어썸을 적절히 사용하면 웹사이트의 시각적인 품질이 크게 향상됩니다.
  • 목록 스타일링을 통해 다양한 불릿이나 번호 스타일을 지정할 수 있으며, 필요에 따라 이미지를 불릿으로 사용할 수도 있습니다.
  • 표 스타일링에서 border-collapse는 깔끔한 표 디자인을 구현하는 데 필수적입니다.

이 내용을 바탕으로 텍스트와 폰트, 표와 목록 스타일을 보다 효율적으로 사용할 수 있을 것입니다!

'CSS Study' 카테고리의 다른 글

플렉스 박스(Flexbox) 레이아웃  (0) 2024.10.03
반응형 웹 디자인 (Responsive Web Design) 정리  (0) 2024.10.03
배경 이미지와 색상 처리: CSS 속성 정리 및 활용법  (1) 2024.10.03
웹 페이지 레이아웃 정리: 박스 모델, 마진, 패딩, 위치 속성 활용  (1) 2024.10.03
CSS의 기본 스타일링 규칙  (0) 2024.10.02

관련글

티스토리툴바