KIM KYUREE

Front-end Developer

텍스트와 관련된 CSS들

DEV-LOG/HTML & CSS

콘텐츠를 작성하다보면 텍스트가 많이 사용된다. 이런 텍스트들은 디자인 요소를 사용하여 꾸미기도 하고, 본문의 경우에는 간단한 설정(폰트 종류, 크기, 색상 등)만 해서 작성하기도 한다.

그런데 이런 텍스트들을 이미지로 개발물에 넣게 되면 여러 기기들에 유연하게 대응하기 어려울뿐만 아니라 다른 문제도 있을 수 있기 때문에 텍스트는 HTML에서 직접 입력하고 CSS로 스타일링 하는 것이 좋다고 할 수 있다. 따라서 여기서는 텍스트와 관련된 CSS들을 알아보려고 한다.

font (단축)

font: italic small-caps bold 24px/1.5 "noto sans cjk", sans-serif;

font는 font-style, font-variant, font-weight, font-size, line-height, font-family의 단축 속성이다. font 단축속성을 사용하기 위해서는 몇 가지 규칙이 있고, 이 규칙을 지켜야만 제대로 사용할 수 있다.

  1. font-size와 font-family는 필수로 포함되어 있어야 한다.
    (나머지 속성은 포함되어 있지 않아도 상관이 없다. )
  2. font-style, font-variant, font-weight는 font-size보다 앞쪽에 위치하고 있어야 한다.
  3. line-height는 font-size 바로 뒤에 위치해야 하고, font-size와는 /로 구분한다.
  4. font-family는 마지막에 작성해야 한다.

font-style (글꼴 형태 변경 : 기울임)

font-style: italic;

italic 혹은 oblique로 설정할 경우 글꼴이 기울어져 있는 형태로 보이게 된다. italic과 oblique는 보이는 형태는 비슷하지만 가지고 있는 의미는 다르다.

사용할 수 있는 값

  • normal : 일반적인 형태로 보임 (기본 값)
  • italic : 글꼴이 기울어져 보임
  • oblique : 글꼴이 기울어져 보임

font-variant (영문 형태 변경 : 대소문자)

font-variant: samll-caps;

별도로 설정하지 않는 경우 작성한 형태 그대로의 대소문자로 보인다.

사용할 수 있는 값

  • small-caps : 소문자가 소문자 크기의 대문자로 보여진다.

font-weight (두께)

font-weight: bold;

별도로 설정하지 않는 경우 normal이 기본 값이며, normal과 bold는 모든 폰트에서 공통적으로 사용할 수 있지만 그 외에는 폰트에 따라 사용할 수 있는 값이 다르다.

사용할 수 있는 값

  • normal : 일반 폰트. 400과 같음 / bold : 굵은 폰트. 700과 같음
  • lighter : 부모 요소의 폰트보다 한 단계 얇은 폰트 / bolder : 부모 요소의 폰트보다 한 단계 굵은 폰트
  • 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
    : 두께를 숫자로 설정하는 경우 숫자가 커질수록 두꺼운 글자를 의미한다.

font-size (크기)

font-size: 20px;

폰트 사이즈는 다양한 단위로 폰트의 크기를 설정할 수 있으며, 폰트의 크기를 변경하면 자식 요소에서 em단위로 작성된 크기도 계산되어 변경된다.

폰트 사이즈에서 사용되는 %단위
일반적으로 %단위는 부모 요소의 너비(width)에 대한 비율을 의미하지만 폰트 사이즈에서는 부모 요소에서 사용된 폰트의 크기에 대한 비율을 의미한다.

line-height (줄 간격)

line-height: 1.5;

별도의 설정을 하지 않는 경우 1.2(브라우저마다 다를 수 있음)의 줄 간격을 가지고 있으며, 단위를 작성하지 않으면 em단위가 적용되었다고 본다. 다만 화면에 보여지는 텍스트의 시작점에서 다음 텍스트의 시작점까지가 행간을 의미하지는 않는다는 것을 유념해야 한다.

font-family (글꼴)

font-family: "noto sans cjk", sans-serif;

텍스트의 글꼴을 설정한다. 글꼴은 컴퓨터에 설치되어 있는 폰트 혹은 @font-face방식이나 CDN방식을 사용한 웹 폰트를 사용할 수 있다. 다만 설정한 폰트를 사용자가 가지고 있다는 보장이 없으므로 하나 이상의 대체 가능한 안전 글꼴 혹은 기본 글꼴(글꼴의 종류를 나타내는 패밀리 이름)을 작성해야 한다. 글꼴은 ,로 구분되며 앞에 작성된 글꼴부터 설정의 우선순위를 가지게 된다.

안전 글꼴

모든 시스템에서 일반적으로 사용할 수 있는 글꼴을 말하며, 안전 글꼴의 수는 한정되어 있다.
대표적으로 영문은 Arial, Georgia, Verdana이 있으며, 한글은 Apple SD Gothic Neo, Malgun Gothic이 있다.

기본 글꼴 (폰트의 종류)

  1. serif (세리프) : 글꼴에 장식획이 있는 폰트로, 한글의 명조체를 의미하며 출판물에서 가독성이 좋다.
  2. sans-serif (산세리프) : 글꼴에 장식획이 없는 폰트로, 한글의 고딕체를 의미하며 모바일 환경을 우선할 경우 본문에서 많이 사용한다.
  3. monospace (모노스페이스) : 고정 폭을 가지고 있는 폰트이며 주로 code를 작성할 때 사용한다.
  4. cursive (커시브) : 필기체를 의미한다. 가독성이 좋지 않으므로 부분적으로 사용하는 것이 좋다.
  5. fantasy (판타지) : 일반적인 서체와 달리 장식성이 많은 폰트이다. 가독성이 좋지 않으므로 부분적으로만 사용하는 것이 좋다.
serif와 sans-serif의 serif는 장식획을 의미하고, sans-serif의 sans는 없다. 라는 것을 의미한다.
글꼴 이름을 작성할 때 Apple SD Gothic과 같이 둘 이상의 단어로 이루어져 있으면 글꼴 이름을 ""(따옴표)로 묶어서 작성해야 한다. ex) "Apple SD Gothic"

웹 폰트의 사용 방법

@font-face 방식 (@사인룰)

사인룰을 지정할 때 사용하는 웹 폰트의 포멧은 크로스브라우징 문제로 인한 이슈 때문에 다양한 포멧이 있다. (woff2 / oft / ttf / eot / svg)
  1. css파일에 폰트를 설정할 수 있는 사인룰을 지정한다.
     @font-face {
   font-family: "GmarketSans";
   font-weight: 300;
   src: local("./font/GmarketSansLight");
   src: url(./font/GmarketSansLight.eot);
   src: url(./font/GmarketSansLight.eot?#iefix) format("embedded-opentype"),
     url(./font/GmarketSansLight.woff) format("woff"),
     url(./font/GmarketSansLight.ttf) format("truetype");
 }
  2. 폰트를 사용한다.
    html {
     font-family: "GmarketSans", sans-serif;
 }

CDN 방식

  1. CDN링크를 가져온다.
    <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=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
  2. 폰트를 사용한다.
    html {
     font-family: 'Noto Sans KR', sans-serif;
 }
     

color (색상)

color: #ffffff;

글자 색상을 설정할 수 있다. 속성 값으로 색상 명, HEX 코드, RGB, RGBA 등이 사용될 수 있으며 일반적으로 HEX 코드를 많이 사용한다.

색상을 표시하는 값

/* 색상 명 */
white

/* hex 코드 */ 
#fffff;

/* rgb */
rgb(255, 255, 255)

/* rgba */
rgba(255, 255, 255, 0.5)

/* HSL */
hsl(360, 50%, 50%)

/* HSLA */
hsla(360, 50%, 50%, 0.5)
  • 색상 명 : red, orange 등 색상 이름으로 표시되는 값으로 디자이너가 지정한 색상을 정확하게 표현할 수 없다.
  • HEX 코드 : #으로 시작되는 6자리 코드로 각 자리마다 0 ~ f까지의 16진수의 값을 작성할 수 있다.
  • RGB : Red, Green, Blue 세가지 색상을 혼합하여 만드는 색상 값으로 각 자리마다 0 ~ 255까지의 값을 작성할 수 있다. 각 자리의 값은 ,로 구분된다.
  • HSL : Hue(색), Saturation(채도), Lightness(명도) 값을 혼합하여 만드는 색상 값으로 Hue는 0 ~ 360까지(색상환을 의미)의 값을 작성 할 수 있고, Saturation과 Lightness은 0 ~ 100%의 값을 작성 할 수 있다. 각 자리의 값은 ,로 구분된다.
  • RGBA, HSLA : RGB와 HSL 값을 구성하는 세자리 뒤에 투명도를 의미하는 A(Alhpa)값이 추가되어 투명도를 조정할 수 있다. 투명도는 0 ~ 1까지 작성할 수 있으며 0에 가까울수록 투명해지고, 1에 가까울수록 불투명해지는 것을 의미한다.

letter-spacing (자간)

letter-spacing: -0.025em;

글자 간의 간격을 설정할 수 있다. 양수일 경우 자간이 넓어지고, 음수일 경우 자간이 좁아진다. px와 같은 절대적인 단위보다는 em과 같은 상대적인 단위를 사용하는 것이 좋다. (폰트에 대하여 상대적인 길이를 가지고 있는 em 추천)

text-transform (영문 대소문자 변경)

text-transform: capitalize;

대소문자가 함께 쓰였을 경우에 대소문자 변경을 임의로 지정할 수 있다. 별도의 설정을 하지 않으면 작성한 그대로 보여진다.

사용할 수 있는 값

  • none : 아무런 변화를 주지 않는다. (기본 값)
  • capitalize : 각 단어의 첫 번째 글자를 대문자로 변환한다.
  • uppercase : 모든 글자를 대문자로 변환한다.
  • lowercase : 모든 글자를 소문자로 변환한다.

text-decoration(문자 장식 : 단축)

text-decoration: underline dotted red;

text-decoration은 문자에 밑줄, 취소선 등을 넣을 수 있게 해주며, 별도로 설정하지 않으면 아무런 효과를 주지 않는다. 이 속성은 text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness의 단축 속성이다.

  1. 단축속성으로 작성할 때에는 text-decoration-line을 반드시 작성해야만 설정이 가능하다.
  2. 단축속성의 여러가지 요소는 순서에 상관없이 작성할 수 있다.

text-decoration-line (필수)

  • none : 텍스트 장식을 해제한다.
  • underline : 밑줄을 적용한다. (일반적으로 기본 링크 스타일에 underline이 설정되어 있다.)
  • overline : 윗줄을 적용한다.
  • line-through : 텍스트 위에 취소선을 적용한다. ex) line-through

text-decoration-style

선의 형태를 설정하기 위한 값이다.

  • solid : 일반적인 선으로 보여준다. (기본값)
  • double : 두줄의 선으로 보여준다.
  • dotted : 점선으로 보여준다.
  • dashed : 짧은 선으로 이루어진 선으로 보여준다.
  • wavy : 물결모양의 선으로 보여준다.

text-decoration-color

색상은 필요에 따라 색상을 나타내는 여러가지 값으로 작성할 수 있다.

text-decoration-thickness

선의 두께를 설정하는 값으로 px, em, rem 등을 사용할 수 있다. 이 때 from-font값을 설정하면 폰트에 포함되어 있는 두께에 대한 값으로 설정된다.

text-shadow (그림자)

text-shadow: 4px 4px 4px red;

/* text-shadow를 중복 적용할 때 */
div {
    text-shadow: 4px 4px 4px red,
    2px 2px 2px red,
    -2px -2px 2px red;
}

텍스트에 그림자를 적용하는 속성으로 수평 오프셋, 수직 오프셋, 흐림 반경, 색상의 네 가지 값으로 이루어져 있다. 또한 text-shadow는 ,로 구분하여 중복 적용이 가능하다.

word-spacing (단어 사이의 간격)

word-spacing: 3px;

단어와 단어 사이의 간격을 설정할 수 있다. letter-spacing과 마찬가지로 양수일 경우 단어 사이의 간격이 넓어지고, 음수일 경우 좁아진다.

white-space

white-space: no-wrap;

요소 안의 공백 문자(띄어쓰기 : space)를 처리하는 속성이다.

사용할 수 있는 값

  • normal : 연속된 공백은 하나의 공백으로 만들고, 개행 문자(enter 등)도 다른 공백 문자와 동일하게 처리, 한 줄이 너무 길어서 box의 밖으로 넘칠 경우에는 자동으로 줄을 바꾼다.
  • no-wrap : 연속된 공백은 하나의 공백으로 만들고, 줄 바꿈은 <br>요소에서만 일어난다.
  • pre : 연속된 공백을 모두 유지하며, 줄 바꿈은 <br>요소에서만 일어난다.
  • pre-wrap : 연속된 공백을 모두 유지하며, 줄 바꿈은 개행 문자(enter 등)와 <br>요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.
  • pre-line : 연속 공백은 하나의 공백으로 만들고, 줄바꿈은 개행 문자(enter 등)와 <br>요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다.
  • break-spaces : pre-wrap과 비슷한 속성을 가지고 있으나 몇 가지 차이점이 존재한다.
    • 연속 공백이 줄의 끝에 위치하더라도 공간을 차지한다.
    • 연속 공백의 중간과 끝에서 자동으로 줄을 바꿀 수 있다.
    • 유지한 연속 공백은 pre-wrap과 달리 요소 밖으로 넘치지는 않으며, 공간도 차지하므로 박스의 min-content, max-content에 영향을 준다.
min-content
width, height 등의 값으로 사용할 수 있으며, box안에 들어있는 콘텐츠가 여러 단어로 이루어진 텍스트 콘텐츠일 경우 단어들 중 가장 긴 단어의 길이를 의미한다.
max-content
width, height 등의 값으로 사용할 수 있으며, box안에 들어있는 콘텐츠가 텍스트 콘텐츠일 경우 텍스트가 줄 바꿈 없이 이어진 길이를 의미한다.

text-align (문단 정렬)

text-decoration: right;

문단의 정렬을 설정한다. 별도로 설정하지 않으면 좌측정렬로 보인다.

사용할 수 있는 값

  • left : 좌측 정렬(기본값)
  • right : 우측 정렬
  • center : 중앙 정렬
  • justify : 양쪽 정렬 (줄 바꿈이 일어날 때, 해당 줄의 문자를 양 끝에 맞추어 정렬)

text-indent (들여쓰기)

text-indent: -10px;

문단 첫째 줄의 들여쓰기 혹은 내어쓰기를 설정한다. 별도로 설정하지 않으면 들여쓰기 또는 내어쓰기를 하지 않는 것으로 보인다. 값을 양수로 설정하면 들여쓰기, 음수일 때는 내어쓰기로 설정된다.

word-break(줄 바꿈)

word-break: break-all;

일정한 사이즈를 가진 box 안에서 텍스트가 box의 밖으로 넘어갈 때 줄 바꿈 여부를 설정한다.

사용할 수 있는 값

  • normal : box 영역을 넘어가도 줄 바꿈을 하지 않는다.
  • break-all : 이어진 단어라도 줄 바꿈이 일어남. (단어가 잘려서 보일 수 있음)
  • keep-all : 줄을 바꿀 때 단어를 끊지 않는다.

text-overflow

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

text-oveflow는 box밖으로 넘친 텍스트 콘텐츠를 overflow: hidden;을 사용하여 숨길때 해당 텍스트들을 어떻게 처리할 것인지에 대한 설정 값이다. text-overflow는 text-overflow를 작성하는 것만으로 사용할 수 없으며, overflow: hidden;이 필수로 있어야 하며. 그 외에도 white-space등이 있어야 한다.

사용할 수 있는 값

  • clip : box의 영역에서 넘치는 글자를 잘라낸다. (기본 값)
  • ellipsis : 넘치는 글자를 그대로 숨기고 …(말줄임표)를 사용하여 넘치는 텍스트 콘텐츠가 있다는 것을 표시한다.
참고자료
https://developer.mozilla.org/ko/docs/Learn/CSS
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_text/Wrapping_breaking_text
https://developer.mozilla.org/ko/docs/Web/CSS/font
https://helpx.adobe.com/kr/incopy/using/leading.html
https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Fundamentals

'DEV-LOG > HTML & CSS' 카테고리의 다른 글

개발할때는 어떤 단위를 써야할까?  (0) 2023.06.09
SEO (Search Engine Optimization : 검색엔진 최적화)  (0) 2023.06.09
배경 이미지에 blur 처리를 하고 싶어요.  (0) 2023.06.09
바깥 block box와 이미지 사이에 공백이 생겼어요. (feat. vertical-align)  (0) 2023.06.09
보조기기 사용자들을 위해 접근성을 개선하고 싶어요.  (0) 2023.06.09

DEV-LOG/HTML & CSS의 다른 글

more

티스토리툴바