[CSS] 기본 익히기 PART 3

스터디일지/CSS

[CSS] 기본 익히기 PART 3

똥쟁이핑크 2024. 3. 13. 14:25

Font 관련 속성

font-family - 글꼴 종류 지정
font-size - 글자 크기 지정
font-style - 글자를 이텔릭체로 지정
font-weight - 글자 굵기 지정
font-variant - 대 소문자 변경시 사용

html {
    /* font-family: serif, monospace; */
    font-family: 'Nanum Gothic', sans-serif; /* 웹 폰트 적용 */
    font-size: 16px;
  }
  .title {
    font-size: 28px;
    color: #258a48;
  }
  .content {
    font-size: 18px;
  }
  .font-italic {
    font-style: italic;
  }
  .font-weight-bold {
    font-weight: bold;
  }
  .font-weight-300 {
    font-weight: 300;
  }
  .font-variant {
    font-variant: small-caps;
  }

웹폰트

온라인에서 다운로드 받아 적용하는 방법
구글 폰트가 많이 쓰인다.
Get font 클릭 → Get embed code 클릭 → @import 클릭 후 코드 복사 / <link> 코드를 사용해도 된다.

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
      
html {
    /* font-family: serif, monospace; */
    font-family: 'Nanum Gothic', sans-serif;
    font-size: 16px;
}

css 단위

px - 픽셀 단위로 나타낸
rem - 최상위요소를 기준으로 몇배를 설정할 것인가 - 최상위요소는 html
em - 현재 자기 자신을 기준으로 몇배를 설정할 것인가
vm - Viewport 너비의 %
vh - Viewport 높이의 %

.subtitle {
	font-size: 20px;
}
.subtitle-rem {
	font-size: 2rem; /* 최상위요소를 기준으로 몇배를 설정할 것인가 - 최상위요소는 html */
}
.subtitle-em {
	font-size: 2em; /* 현재 자기 자신을 기준으로 몇배를 설정할 것인가 */
}
.article {
	font-size: 10px;
}
.rectangle.width {
    width: 20vw;
    height: 100px;
    background-color: yellow;
}
.rectangle.height {
    height: 20vh;
    width: 100px;
    background-color: blue;
}

색상

RGB/RGBA - 빨강, 초록, 파랑을 통해 색을 표현하며 A는 투명도를 말한다
16진 수 - RGB/RGBA를 통해 색을 표현하고 이를 16진 수로 표현할 수 있다.
예시로 blue 색상을 rgb와 16진수로 나타냈다

blue 색상에 투명도만 조절했을 때

원본 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font Style</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
      /* * {
        margin: 0px;
        padding: 0px;
      } */
      html {
        /* font-family: serif, monospace; */
        font-family: 'Nanum Gothic', sans-serif;
        font-size: 16px;
      }
      .title {
        font-size: 28px;
        color: #258a48;
      }
      .content {
        font-size: 18px;
      }
      .font-italic {
        font-style: italic;
      }
      .font-weight-bold {
        font-weight: bold;
      }
      .font-weight-300 {
        font-weight: 300;
      }
      .font-variant {
        font-variant: small-caps;
      }
      .subtitle {
        font-size: 20px;
      }
      .subtitle-rem {
        font-size: 2rem; /* 최상위요소를 기준으로 몇배를 설정할 것인가 - 최상위요소는 html */
      }
      .subtitle-em {
        font-size: 2em; /* 현재 자기 자신을 기준으로 몇배를 설정할 것인가 */
      }
      .article {
        font-size: 10px;
      }
      .rectangle.width {
        width: 20vw;
        height: 100px;
        background-color: yellow;
      }
      .rectangle.height {
        height: 20vh;
        width: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <h2 class="title">유튜브</h2>
    <p class="content">실용적인 코딩 컨텐츠를 만들어가는 짐코딩입니다.</p>
    <p class="content font-italic">
      실용적인 코딩 컨텐츠를 만들어가는 짐코딩입니다.
    </p>
    <p class="content font-weight-bold">
      실용적인 코딩 컨텐츠를 만들어가는 짐코딩입니다.
    </p>
    <p class="content font-weight-300">
      실용적인 코딩 컨텐츠를 만들어가는 짐코딩입니다.
    </p>
    <p class="content font-variant">HELLO, hello</p>
    <hr />
    <h2>px</h2>
    <p class="subtitle">실용적인 코딩 컨텐츠</p>
    <h2>rem</h2>
    <p class="subtitle-rem">실용적인 코딩 컨텐츠</p>
    <h2>em</h2>
    <div class="article">
      <p class="subtitle-em">실용적인 코딩 컨텐츠</p>
    </div>
    <hr />
    <!-- Viewport width -->
    <h2>vw</h2>
    <div class="rectangle width"></div>
    <!-- Viewport height -->
    <h2>vh</h2>
    <div class="rectangle height"></div>
  </body>
</html>

그 외 관련 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Font Style2</title>
    <style>
      html {
        font-size: 16px;
      }
      .content {
        border: 1px solid blue;
      }
      .text-center {
        text-align: center;
      }
      .text-right {
        text-align: right;
      }
      .text-left {
        text-align: left;
      }
      .article {
        line-height: 1.8rem; /* 줄 높이의 간격 */
        letter-spacing: 1px; /* 글자 사이의 간격 */
        word-spacing: 10px; /* 단어 사이의 간격 */
        text-indent: 80px; /* 들여쓰기 */
      }
      .transform-case {
        text-transform: lowercase; /* 대소문자 변경 */
      }
      .article > a {
        text-decoration: none; /* 글자를 장식 할때 쓰며 주로 href의 밑줄을 없앨 때 많이 쓴다 */
      }

      .text-shadow {
        text-shadow: 10px 10px 1px rgb(166, 150, 150); /* 텍스트 그림자 넣기 */
      }
      ul {
        list-style: none; /* 리스트 스타일 변경 */
      }
    </style>
  </head>
  <body>
    <section>
      <p class="content text-center">coding</p>
      <p class="content text-right">coding</p>
      <p class="content text-left">coding</p>
    </section>
    <section>
      <p class="article">
        조류원 또는 <a href="#"> 개인 </a>가정이나 정식수입업체에 의뢰해서
        분양받을 수 있다. 다만 일부 종은 사이테스로 보호받으니 서류 없이 키우는
        것은 불법이다. 역사 기록상 한국(<span class="transform-case">Korea</span
        >) 역사에서 최초로 앵무새를 기른 것으로 확인되는 사람은 신라 제42대
        임금인 흥덕왕이다. 당나라에 다녀온 사신이 바친 한 쌍의 앵무새를 길렀다고
        전하는데, 암컷이 먼저 죽어버리고 수컷은 슬퍼하면서 울기만 했는데
        흥덕왕은 이걸 가엾게 여겨서 거울을 수컷 옆에다 가져다 두었고 수컷은
        거울에 비친 자기 모습을 자기 짝이라고 생각하고 거울을 부리로 쪼다가
        그것이 자기 모습임을 알아채고 결국 상심해서 죽어버렸다고 한다.[9] 사실
        흥덕왕은 왕이 된 직후에 왕비와 사별했는데, 이 수컷과 동질감을 느꼈는지
        이 앵무새들을 소재로 시를 지었고 재혼하라는 신하들의 주청에 대해서도
        "새도 제 짝을 잃어서 슬퍼하는데 어떻게 무정하게도 새 장가를 들 수
        있겠냐"며 죽을 때까지 재혼하지 않았다고 한다.
      </p>
    </section>
    <section>
      <h2 class="text-shadow">유튜브 채널</h2>
    </section>
    <section>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </section>
  </body>
</html>

참고한 사이트

https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Fundamentals

기본적인 텍스트 및 글꼴 스타일링 - Web 개발 학습하기 | MDN

이 기사에서는 CSS 를 사용하여 텍스트 스타일링을 마스터하기 위한 과정을 시작합니다. 여기에서는 글꼴 굵기, 종류 및 스타일, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격

developer.mozilla.org

https://www.youtube.com/watch?v=dSSb0HInu9A&list=PLlaP-jSd-nK-ponbKDjrSn3BQG9MgHSKv&index=21

https://fonts.google.com/selection/embed

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

저작자표시 비영리 변경금지