CSS (4) : 글꼴 (Day 4)

코딩기록·2024년 10월 11일
CSSfrontend국비지원프론트엔드

글꼴(font-family)

  • 폰트 다운받는 법 :
    **(1) Google webfonts에서 embeded source로 다운로드
    (2) d2coding(네이버가 만든 개발자가 좋아하는 언어): github 들어가서 zip 다운로드 -> D2CodingLigature 들어가서
    bold빼고 ttc, ttf 파일 설치
    (3) 기타 구글에서 개발자 폰트 검색해서 사용(눈누 유명)

  • 속성명 : font-family: "글씨체1", "글씨2", "글씨3", 글꼴계열;
    -글씨체는 생략 가능
    -글씨체의 ""의 경우, 글씨체에 공백이 있는 경우 제외하고는 생략 가능
    -글꼴계열 종류 : serfi(바탕체), sans-serif(고딕체), monospace(각 글자의 폭을 동일하게), cursive(필기체), fantasy(화려한 계열)/

  • != 누르면 부등호 뜨게 하는 법:

    • 위의 폰트 다은받는 법 참고하여 D2Coding 설치 후
      (1) VS Code에서 설정(톱니바퀴모양) -> 텍스트 편집기 -> 글꼴 -> Editor: Fontfamily에 'D2Coding ligature', Menlo, Monaco, 'Courier New', monospace
      (2) ligature jason에서 편집하기 -> false를 true로 변경
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- google web font -->
  <!-- 가져오는 방법은 아래에 별도 주석 처리 함 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sixtyfour+Convergence&display=swap" rel="stylesheet">
  <style>
    .ft {
      font-size: 20px;
    }

    .font1 {
      /* fontamily
      (1) 구조 :  font-family: "글씨체1", "글씨2", "글씨3", 글꼴계열;
         -글씨체는 생략 가능
         -글씨체의 ""는 공백이 있는 경우 제외하고는 생략 가능
         -글꼴계열 종류 : serif(바탕체), sans-serif(고딕체), monospace(각 글자의 폭을 동일하게), cursive(필기체), fantasy(화려한 계열) */
       font-family: "Sixtyfour Convergence", "D2Coding", sans-serif;
       /* font-family: cursive; */
     } 

   .font3 {
      font-family: cursive;
    }

    .font4 {
       font-family: fantasy;
      }

    .font5 {
      font-family: sans-serif;
    }

    /* 폰트 다운받는 법 :
      (1) google webfonts에서 embeded source로 다운로드
      (2) d2coding(네이버가 만든 코딩용 언어): github 들어가서 zip 파일 다운로드 -> D2CodingLigature 들어가서
          bold빼고 ttc, ttf 파일 설치  
      (3) 기타 구글에서 개발자 폰트 검색해서 사용(눈누 유명)
     */

    .font6 {
      font-family: "Sixtyfour Convergence", sans-serif;
    }

    .font7 {
      font-family: "D2Coding", monospace;
    }


  </style>
  
</head>
<body>

  <!-- .ft.font$*7 -->
  <div class="ft font1">hello css! 예시</div>
  <div class="ft font2">hello css!</div>
  <div class="ft font3">hello css!</div>
  <div class="ft font4">hello css!</div>
  <div class="ft font5">hello css!</div>
  <div class="ft font6">hello css!</div> 
  <div class="ft font7">hello css!</div> 
  
</body>
</html>

글꼴 꾸미기

  • 글자정렬 : text-align: justfity(양쪽정렬)

  • 텍스트에 선 긋기 : text-decoration: underline, overline, line-through

  • 자간 : letter-spacing: 8px;

  • 줄간격 : line-height(약어: lh)
    -일반적으로 px이 아닌 글자 크기 대비 배수로 사용(글자 크기 변경되었을 때 반응 하려고)
    -권장높이 : 1.2~ 1.6

  • 첫줄 들여쓰기 : text-indent: 10px;

  • 자간 : letter-spacing: 10px;

  • 단어 단위 간격 : word-spacing; 5px

  • 글자 굵기 : font-weight

    • 값은 100 ~ 900 사이의 100단위 숫자 이용하거나, normal/bold
    • normal은 400, bold는 700

  • 대문자화, 단어 첫글자 대문자화 : text-transform: uppepcase/capitalize

  • 문장 전체 대문자화 :

.capitalize-text::first-letter {
text-transform: uppercase;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      /* text-align : 글짜 정렬
          - 양쪽정렬 : justify */
      text-align: center;

      /* 텍스트에 선 긋기 : text-decoration: underline, overline, line-through */
      text-decoration: line-through;
      /* 자간: letter-spacing */
      letter-spacing: 7px;
    }


    p {
      /* padding : 내부 여백 */
      padding: 10px;
      font-size: 20px;
      /* 줄간격 : line-height 
         - 줄높이는 일반적으로 px이 아닌 (글자크기 대비) 배수로 사용(글자 크기 변경되었을 때 반응 하려고) 
         - 권장높이 : 1.2~ 1.6 */
      
      text-align: right;
      /* 첫줄 들여쓰기 */
      text-indent: -10px;

      /* 띄어쓰기 간격 : word-spacing */
      /* cf. letter-spacing : 한 글자 한 글자 띄어쓰기 */
      word-spacing: 5px;
    }

    strong {
      /* 글자 굵기 : font-weight*/
      /*  - 값은 100 ~ 900 사이의 100단위 숫자 이용하거나, normal/bold */
      /*  - normal은 400, bold는 700 */
      font-weight: normal;
    }

    span {
      font-weight: 900;
      font-style: italic;
    }
  </style>
</head>
<body>
  
  <h1>안녕 하세요</h1>
  <p>
    광물 기타 <strong>중요한</strong> <span>지abc하자원</span>·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.

    국회는 국민의 보통·평등·직접·비밀선거에 의하여 선출된 국회의원으로 구성한다. 모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.
  </p>

</body>
</html>
<!DOCTYPE html>
<html lang="eko>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>텍스트와 폰트 스타일링 연습</title>
    <style>
      /* 첫 번째 문단의 텍스트 색상을 어두운 회색(#333333)으로, 글자 크기를 18px로 설정하세요. */
      main > section:first-child p {
        color: darkgray;
        font-size: 18px;
      }

      /* 두 번째 문단의 텍스트를 중앙에 정렬하고, 폰트를 Arial로 변경하세요. (Arial은 sans-serif계열) */
      .center-text {
        text-align: center;
        font-family: "Arial", sans-serif;
      }

      /* 세 번째 문단의 텍스트를 굵게 설정하세요. */
      .bold-text {
        font-weight: 700;
      }

      .italic-text {
        font-style: italic;
      }

      .underline-text {
        text-decoration: underline;
      }

      .underline-text {
        text-decoration: underline;
      }

      /* 취소선 추가 */
      .strike-text {
        text-decoration: line-through;
      }

      /* 대문자화 */
      .uppercase-text {
        text-transform: uppercase;
      }

      /* 모든 "단어의" 첫글자 대문자로 */
      .capitalize-text {
        text-transform: capitalize;
      }

      /* 문장 첫글자 대문자로 */
      .capitalize-text::first-letter {
        text-transform: uppercase;
      }




    </style>
</head>
<body>

    <header>
        <h1>웹 개발 기초 학습</h1>
        <p class="subtitle">CSS를 사용한 텍스트와 폰트 스타일링</p>
    </header>

    <!-- main > section:first-child p  -->
    <main>
        <section>
            <h2>텍스트 색상과 크기</h2>
            <p>이 문단의 텍스트 색상을 어두운 회색으로, 크기를 18px로 설정하세요.</p>
        </section>

        <section>
            <h2>텍스트 정렬과 폰트 스타일</h2>
            <p class="center-text">이 문단의 텍스트를 중앙에 정렬하고, Arial 폰트로 변경하세요.</p>
            <p class="bold-text">이 문단의 텍스트를 굵게 설정하세요.</p>
            <p class="italic-text">이 문단의 텍스트에 기울임꼴을 적용하세요.</p>
        </section>

        <section>
            <h2>텍스트 데코레이션과 변형</h2>
            <p class="underline-text">이 텍스트에 밑줄을 추가하세요.</p>
            <p class="strike-text">이 텍스트에 취소선을 추가하세요.</p>
            <p class="uppercase-text">이 텍스트를 abcde로 변환하세요.</p>
            <p class="capitalize-text"> abcde의 각 단어의 첫 abcde자로 변환하세요.</p>
        </section>
    </main>

</body>
</html>
profile
코딩기록
이전 포스트

CSS (3) : 색상과 단위 (Day 3)

다음 포스트

CSS (4) : 박스모델 (Day 4)

0개의 댓글