web/html css

[css] 폰트 속성

xudegloss 2023. 3. 9. 13:51

1. 웹폰트

폰트를 이용하는 방법은 2가지가 있다.

  1. 폰트를 직접 다운로드 받아서 이용하기.
  2. 폰트를 다운로드하지 않고, 외부 특정 서버에 있는 폰트를 가져와서 보여주기.

1번 같은 경우는 @font-face를 이용하여 불러 오는데, 사용하기 복잡하여 2번이 사용하기 좋다. 2번은 링크를 따와서 보여주면 된다. 구글에서 구글 폰트를 쳐서 접속하면 된다.

  1. 빨간색에 있는 @import를 css 파일에 넣어준다.
  2. 글자를 적용하고 싶은 부분에 font-family를 넣어준다.

주의할 점은 꼭 가이드 페이지를 참고해야 한다. 노란색 박스처럼 font-weight가 여러 개 적용할 수 있는 글자가 있는 반면에, 한 가지 굵기만 적용 가능한 글자도 많기 때문이다.

2. 폰트 속성 

font-size 폰트 사이즈를 지정한다.
font-weight 폰트 두께를 지정한다.
text-decoration 폰트 장식선을 지정한다.
color 폰트 색상을 지정한다.
line-height 행간을 지정한다. px로 지정해도 되고, 숫자로 지정해도 된다. 숫자로 지정하는 경우에는 (원래 폰트 크기) x 숫자 만큼의 px가 지정된다.
letter-spacing 텍스트 사이의 간격을 지정한다.
word-spacing 글자 사이의 간격을 지정한다.
text-align 수평 정렬을 지정한다.
vertical-align 수직 정렬을 지정한다.
text-indent 텍스트의 들여쓰기를 지정한다. % 같은 상대 단위도 가능하다.

 

font-size부터 word-spacing까지의 예시이다.

 

text-align부터 text-indent까지의 예시이다.

 

  • text-align : block 요소에서 설정할 수 있다.
  • vertical-align : in-line 요소에서 설정할 수 있다. 이 때  맨 위에 있는 줄 기준으로 top, middle, 맨 아래에 있는 줄 기준으로 bottom 설정되고, super는 그 중앙에 있는 줄 기준으로 설정된다.

super를 이용했을 때, middle보다 더 중앙처럼 보인다. middle은 위의 선을 기준으로 중앙에 배치하고, super는 중앙 선을 기준으로 중앙에 배치하기 때문이다. 

 

text-transform 텍스트를 소문자 혹은 대문자로 변경할 수 있다.
word-break
텍스트 기준 줄 바꿈		 어떻게 줄 바꿈을 할 지 결정할 수 있다.
- keep-all : 단어 기준으로 줄 바꿈 진행하기. 긴 단어인 경우에는 컨텐츠 밖으로 나갈 수 있다. 그런 경우에 overflow-wrap을 이용하기.
- break-all : 컨텐츠 기준으로 줄 바꿈 진행하기. 
overflow-wrap
단어 기준 줄 바꿈		 단어가 콘텐츠 밖으로 나가는 경우 어떻게 줄 바꿈을 할 지 결정할 수 있다. break-word 처리하기.
overflow 넘치는 내용을 어떻게 보여줄 지 결정한다. 텍스트를 감싸고 있는 태그에 overflow 설정하기.
text-overflow 줄 바꿈하지 않는 경우 요소 밖 넘치는 텍스트를 어떻게 표기할지 결정하기.
  • word-break : keep-all을 사용하는 것이 좋다. 하지만 긴 단어가 나오는 경우 컨텐츠를 빠져 나가는 경우가 발생한다.
  • 그런 경우에는 overflow-wrap을 이용하여 break-word 처리하면 긴 단어로 빠져 나가지 않는다.

위는 text-transform의 예시이고, 밑은 word-break의 예시이다. keep-all 그리고 break-all의 차이를 알 수 있다. keep-all은 의미있는 텍스트 위주로 잘랐고, break-all은 그냥 잘라서 줄 바꿈을 설정한다.

 

이 예시는 word-break : keep-all, 그리고 overflow-wrap : break-word의 예시이다. word-break : keep-all은 긴 단어가 나오는 경우 콘텐츠 밖으로 넘어가지만, overflow-wrap : break-word를 설정하면 콘텐츠 밖으로 나가지 않게 설정을 변경할 수 있다.

 

 

overflow를 이용하여 넘치는 텍스트를 어떻게 표현할 것인지 지정하였다.

 

text-overflow를 이용하여 줄 바꿈이 없을 때 넘치는 텍스트를 어떻게 표현할 것인지 지정하였다.

이 때 주의할 점은 white-space와 overflow를 지정해야 한다.

white-space : nowrap /* 줄 바꿈을 하지 않음을 명시한다. */
overflow : hidden /* 넘치는 텍스트가 보이지 않게 만들어 준다. */

 

위의 명령어를 실행한 뒤에 text-overflow를 설정해야 한다. 그래야 위의 그림처럼 잘 나온다.

2-1. html 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Font Style</title>
    <link rel="stylesheet" href="./font.css" />
  </head>
  <body>
    <div class="container">
      <div class="font__ex">폰트 스타일 예시입니다.</div>
      <div class="text__decoration__ex">
        <p class="underline">밑줄을 긋습니다.</p>
        <p class="overline">텍스트 위에 줄을 긋습니다.</p>
        <p class="line__through">텍스트 중간에 줄을 긋습니다.</p>
      </div>
      <div class="line__height__ex">
        <p class="line__height__first">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="line__height__sec">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="spacing__ex">
        <p class="letter__spacing">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="word__spacing">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="text__align__ex">
        <div class="left">왼쪽 정렬 입니다.</div>
        <div class="center">중앙 정렬 입니다.</div>
        <div class="right">오른쪽 정렬 입니다.</div>
        <p class="justify">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="vertical__align">
        <span class="top">🏳️‍🌈 맨 위 정렬 입니다.</span>
        <span class="middle">🏳️‍🌈 중앙 정렬 입니다.</span>
        <span class="super">🏳️‍🌈 Super 정렬 입니다.</span>
        <span class="bottom">🏳️‍🌈 맨 아래 정렬 입니다.</span>
      </div>
      <div class="text__indent__ex">
        <p class="positive">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p class="zero">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
        <p class="negative">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book. It has survived not only
          five centuries, but also the leap into electronic typesetting,
          remaining essentially unchanged. It was popularised in the 1960s with
          the release of Letraset sheets containing Lorem Ipsum passages, and
          more recently with desktop publishing software like Aldus PageMaker
          including versions of Lorem Ipsum.
        </p>
      </div>
      <div class="text__transform">
        <p class="capitalize">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="uppercase">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="lowercase">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <div class="word__break">
        <p class="keep__all">
          I believe communication has changed a lot and it is better now than
          the past by using the internet, which is a revolutionary technology in
          the world. Because people have been communicating a lot with the
          internet wherever they are, some people have worried that our new
          method of communication can potentially lead to the development of
          illnesses, such as homesickness. However, I think the new dimension of
          communication became fast, convenient, and simple due to the
          revolution.
        </p>
        <p class="break__all">
          I believe communication has changed a lot and it is better now than
          the past by using the internet, which is a revolutionary technology in
          the world. Because people have been communicating a lot with the
          internet wherever they are, some people have worried that our new
          method of communication can potentially lead to the development of
          illnesses, such as homesickness. However, I think the new dimension of
          communication became fast, convenient, and simple due to the
          revolution.
        </p>
      </div>
      <div class="test">
        <div class="content">This is <span>watermelon.</span></div>
        <div class="content__test">This is <span>watermelon.</span></div>
      </div>
    </div>
  </body>
</html>

2-2. css 코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 10px;
  font-size: 20px;
}

.font__ex {
  font-size: 40px;
  font-weight: 700;
  color: midnightblue;
}

.text__decoration__ex {
  border: 1px solid green;
}

.text__decoration__ex p {
  padding: 10px;
}

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

.line__through {
  text-decoration: line-through;
}

.line__height__ex {
  border: 1px solid purple;
}

.line__height__first {
  line-height: 2;
  /* 선 높이 = 20px X 2 = 40px */
}

/* 위와 아래는 같은 의미를 담고 있다. */
.line__height__sec {
  line-height: 40px;
}

.spacing__ex {
  border: 1px solid red;
}

.letter__spacing {
  letter-spacing: 5px;
  /* 음수도 가능하다. */
}

.word__spacing {
  word-spacing: 5px;
  /* 음수도 가능하다. */
}

.text__align__ex {
  border: 1px solid blue;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  /* text 안에 모두 넣어주려고 한다. 띄어쓰기가 모두 달라서 가독성이 떨어질 수 있다. */
  border: 1px solid pink;
  text-align: justify;
}

.vertical__align {
  border: 1px solid violet;
  font-size: 100px;
}

.top {
  vertical-align: top;
  border: 1px solid black;
}

.middle {
  vertical-align: middle;
  border: 1px solid black;
}

.super {
  vertical-align: super;
  border: 1px solid black;
}

.bottom {
  vertical-align: bottom;
  border: 1px solid black;
}

.text__indent__ex {
  border: 1px solid yellowgreen;
}

.positive {
  text-indent: 50%;
}

.zero {
  text-indent: 0;
}

.negative {
  text-indent: -30px;
}

.text__transform {
  border: 1px solid slateblue;
}

.capitalize {
  text-transform: capitalize;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.word__break {
  border: 1px solid gray;
}

.keep__all {
  word-break: keep-all;
}

.break__all {
  word-break: break-all;
}

.test {
  width: 100px;
  border: 1px solid seagreen;
  background-color: yellow;
  padding: 10px;
}

.test span {
  text-transform: uppercase;
}

.content {
  width: 100%;
  word-break: keep-all;
}

.content__test {
  width: 100%;
  overflow-wrap: break-word;
}

2-3. overflow 관련 hrml 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>Overflow</title>
    <link rel="stylesheet" href="./overflow.css" />
  </head>
  <body>
    <div class="overflow__visible overflow">
      <p class="visible">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
    </div>
    <div class="overflow__hidden overflow">
      <p class="hidden">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
    </div>
    <div class="overflow__scroll overflow">
      <p class="scroll">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
    </div>
    <div class="overflow__auto overflow">
      <p class="auto">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
    </div>
    <div class="text__overflow">
      <div class="hidden">줄 바꿈이 없는 경우에는 어떻게 보일까요?</div>
      <div class="ellipsis">줄 바꿈이 없는 경우에는 어떻게 보일까요?</div>
    </div>
  </body>
</html>

2-4. overflow 관련 css코드

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: row;
}

.overflow {
  width: 200px;
  height: 100px;
  border: 1px solid;
  background-color: yellow;
  margin: 50px;
  padding: 10px;
}

.overflow__visible {
  overflow: visible;
}

.overflow__hidden {
  overflow: hidden;
}

.overflow__scroll {
  overflow: scroll;
}

.overflow__auto {
  overflow: auto;
}

.text__overflow {
  width: 200px;
  height: 30px;
  margin: 50px;
}

.text__overflow div {
  width: 100%;
  height: 100%;
  border: 1px solid blue;
  padding: 10px;
}

.hidden {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: hidden;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
저작자표시

'web > html css' 카테고리의 다른 글

[css] 캐스케이딩  (0) 2023.03.09
[css] 단위  (0) 2023.03.09
[css] Layout Flex 심화  (0) 2023.03.09
[css] 고급 선택자  (2) 2023.03.09
[css] Layout Grid  (0) 2023.03.09

'web/html css'의 다른글

  • 현재글[css] 폰트 속성

관련글

티스토리툴바