[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

1. 기본적인 텍스트 및 글꼴 스타일링

CSS에서 글꼴 굵기, 종류 및 스타일, 글꼴 양식(shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여,텍스트/글꼴 스타일링의 모든 기본사항을 알아보겠습니다. HTML 및 CSS를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다.

콘텐츠 영역 왼쪽 상단(또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단)에서 시작해 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동해, 서로 인접한 줄로 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, <br> 요소를 사용해 수동으로 줄바꿈을 수행하지 않습니다.

글꼴

글꼴 스타일링의 속성은 HTML에 몇가지 다른 CSS 속성을 적용합니다.

 <p>
        Said Tommy the Cat as reeled back to clear whatever foreign matter may have
        nestled its way into his mighty throat. Many a fat alley rat had met its demise
        while staring point blank down the cavernous barrel of this awesome prowling machine.
        Truly a wonder of nature this urban predator - Tommy the cat had many a story to tell.
        But it was rare occasion such as this that he did.
 </p>

색상

color 속성은 선택한 요소의 전경 내용의 색상을 설정합니다, text-decoration 속성을 사용해 텍스트에 배치되는 밑줄이나 오버라인과 같은 몇가지 다른 것도 포함할 수 있습니다. color는 모든 CSS 색상 단위를 사용할 수 있습니다.

p {
    color:gold;
}

글꼴 종류

텍스트에 다른 글꼴을 설정하려면 font-family 속성을 사용해 브라우저에 선택한 요소에 적용할 글꼴을 지정할 수 있습니다.브라우저는 웹 사이트에 엑세스하는 컴퓨터에서 글꼴을 사용할 수 있는 경우 글꼴을 적용합니다.

p {
    color:gold;
    font-family: arial;
}

이렇게 하면 p태그에 모든 페이지에 단락이 arial 글꼴을 채택합니다.

글꼴 스택

웹 페이지에 글꼴의 사용가능 여부를 보장할 수 없으므로 브라우저에서 선택할 수 있는 글꼴 스택(font stack)을 제공할 수 있습니다. 여기에는 여러 글꼴 이름으로 구성된 font-family 값이 포함됩니다.

p {
    color:gold;
    /* font-family: arial; */
    font-family: "Trebuchat MS", Verdana, sans-serif;
}

이 경우, 브라우저는 목록 시작 부분에서 시작하여 해당 글꼴이 시스템에서 사용 가능한지 확인하고 이 글꼴이 있으면 해당 글꼴이 선택한 요소에 적용됩니다. 그렇지 않으면 다음 글꼴로 이동합니다. 나열된 글꼴 중 사용 가능한 글꼴이 없는 경우, 브라우저가 최소한 대략 비슷한 것을 제공할 수 있도록 스택 끝에 적절한 일반 글꼴 이름을 제공하는 것이 좋습니다.

font-family

단락에 sans-serif 글꼴을 제공해 추가해줍니다.

p {
    color:gold;
    font-family: Helvetica, Arial, sans-serif;
    /* font-family: "Trebuchat MS", Verdana, sans-serif; */
}

글꼴 크기

글꼴 크기는 대부분의 단위(및 백분율과 같은 기타 단위)로 측정된 값을 가질 수 있지만 텍스트 크기를 조정하는 데 사용하는 가장 일반적인 단위는 다음과 같습니다.

px(픽셀): 원하는 텍스트 높이의 단위. 절대단위며 거의 모든 상황에서 페이지의 글꼴에 대해 동일한 최종 계산값을 생성
ems : 1em은 우리가 스타일링하고 있는 현재 요소의 부모 요소에 설정된 글꼴 크기와 같음. ems를 사용해 전체 웹 사이트 크기를 조정할 수 있으므로 유지 관리가 쉬움
rems: 1rem이 부모 요소가 아닌 문서의 루트 요소에 설정된 글골 크기와 같다는 점을 제외하면 ems와 동일하게 작동함.이렇게 하면 수학 계산을 통해 글꼴 크기를 훨씬 쉽게 계산할 수 있지만 불행이도 IE8 버전 이하에서는 rem이 지원되지 않음.

요소의 font-size는 해당 요소의 상위 요소에서 상속됩니다. 이 모든 것은 전체 문서의 루트 요소인 <html>에서 시작합니다. 이 요소의 font-size는 브라우저에서 기준으로 16px로 설정됩니다. 루트 요소 내부 모든 단락의 최종 크기는 16px입니다. 다른 요소는 기본 크기가 다를 수 있습니다. 예를 들어 <h1> 요소의 크기는 기본적으로 2ems로 설정되어 있으므로 최종 크기는 32px입니다.

<article>
     <p class="para">My paragraph</p>
</article>

em 값을 20/24 또는 0.833333333em으로 설정해야 합니다. 수학은 복잡할 수 있으며 스타일을 지정하는 방법에 주의해야합니다. 가능한 rem을 사용해 작업을 단순하게 유지하고 컨테이너 요소의 font-size를 설정하지 않는 것이 좋습니다.

텍스트의 크기를 조정할 때 일반적으로 문서의 기본 font-size를 10px로 설정하는 것이 좋습니다. 그러면 계산이 훨씬 쉬워지고 필요한 (r)em 값은 픽셀 글꼴 크기로 나뉩니다. 16이 아닌 10으로, 그런다음 문서의 다양한 유형의 텍스트를 원하는 크기로 쉽게 조정할 수 있습니다. 스타일시트의 지정된 영역에 모든 font-size 규칙들을 나열해 쉽게 찾을 수 있도록 하는게 좋습니다.

.family {
    color:gold;
    font-family: Helvetica, Arial, sans-serif;
    /* font-family: "Trebuchat MS", Verdana, sans-serif; */
}

html {
    font-size: 10px;
}

h1 {
    font-size: 2.6em;
}

.para {
    font-size: 1.4rem;
    color:blue;
    font-family: Arial, Helvetica, sans-serif;
}

글꼴 스타일, 두께, 텍스트 변형 및 텍스트 장식

CSS는 텍스트의 시각적 무게/강조를 변경하는 네 가지 공통 속성을 제공합니다.

font-style: 이텔릭체 텍스트를 켜고 끄는데 사용,
- normal: 텍스트를 일반 글꼴로 설정(기존 이탤리첵 off)
- italic: 사용 가능한 경우 글꼴의 기울임꼴 버전을 사용하도록 텍스트 설정
- obiique: 일반 버전을 기울여 만든 이탤릭체 글꼴으ㅢ 시뮬레이션 버전을 사용하도록 설정
font-weight: 텍스트의 굵기를 설정합니다. 사용 가능한 글꼴 변형이 많은 경우(-light, -normal, -bold, -extrabold, -black 등) 많은 값을 사용할 수 있지만 현실적으로 normal 및 bold를 제외하고 거의 사용하지 않음
- normal, bold: 일반 및 굵은 글꼴
- lighter, bolder: 현재 요소의 굵기를 부모 요소의 굵기보다 더 가볍거나 무겁게 설정
- 100-900: 필요한 경우 위 키워드보다 더 세분화된 제어를 제공
text-transform: 글꼴을 변환하도록 설정할 수 있음
- none: 변형 방지
- uppercase: 모든 텍스트 대문자 변환
- lowercase: 모든 텍스트를 소문자 변환
- full-width: 모노스페이스 글꼴과 유사한 고정 너비 사각형 안에 작성되도록 모든 글리프를 변환
text-decoration: text-decoration: underline overline과 같이 여러 장식을 동시에 추가하는 경우 text-decoration은 한 번에 여러 값을 허용할 수 있음,

.family {
    color:gold;
    font-family: Helvetica, Arial, sans-serif;
    /* font-family: "Trebuchat MS", Verdana, sans-serif; */
}

html {
    font-size: 10px;
}

h1, p {
    font-size: 2.6em;
    font-weight: bold;
}

.para {
    font-size: 1.4rem;
    color:blue;
    font-family: Arial, Helvetica, sans-serif;
}

텍스트 그림자

text-shadow 속성을 사용하여 텍스트 그림자를 적용할 수 있습니다.

 text-shadow: 4px 4px 4px salmon;

네 가지 속성을 정이라혐 다음과 같습니다.

원본 텍스트에서 그림자 수평 오프셋 - 사용 가능한 대부분의 CSS 길이 및 크기 단위를 사용할 수 있지만 일반적으로 px를 사용
원복 텍스트에서 그림자의 수직 오프셋 - 그림자를 왼쪽/오른쪽이 아닌 위/아래로 이동하는 점을 제외하면 기본적 수평 오브셋과 동일하게 작동
흐림 반경 - 값이 높을수록 그림자가 더 넒게 분산됨. 이 값이 포함되지 않는다면 기본 값은 0
모든 CSS 색상 단위를 사용할 수 있는 그림자의 기본 색상 - 기본 black

여러 그림자

쉼표로 구분된 여러 그림자 값을 포함한 동일한 텍스트에 여러 그림자를 적용할 수 있습니다.

.shadow {
    text-shadow: -1px -1px 1px #aaa,
    0px 4px 1px rgba(0,0,0, 0.5), 
    4px 4px 5px rgba(0,0,0, 0.7), 
    0px 0px 7px rgba(0,0,0,0.4);
}

텍스트 레이아웃

텍스트 레이아웃에 영향을 주는 데 사용할 수 있는 속성을 살펴보겠습니다. text-align 속성은 포함하는 콘텐츠 상자 내에서 텍스트 정렬 방법을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다.

left: 텍스트를 왼쪽으로 정렬
right: 텍스트를 오른쪽으로 정렬
center: 텍스트를 중앙에 정렬
justify: 모든 텍스트 줄이 동일한 너비가 되도록 단어 사이의 간격을 다양하게 조정하여 텍스트를 펼칠 수 있음

text-align: center 를 적용할 경우, 다음과 같습니다.

선 높이

line-height 속성은 각 텍스트 줄 높이를 설정합니다. 이 속성은 대부분의 길이 및 크기 단위를 사용할 수 있지만 승수 역할을 하고 일반적으로 최상의 옵션으로 간주되는 단위 없는 값을 사용할 수 있습니다. font-size를 곱하여 line-height를 얻습니다. 본문 텍스트는 일반적으로 간격이 떨어져 있을 때 더 보기 좋고 읽기 쉽습니다. 권장 줄 높이는 약 1.5~2입니다.

line-height: 1.4;

문자 및 단어 간격

letter-spacing 및 word-spacing 속성을 사용하면 텍스트에서 문자와 단어 사이의 간격을 설정할 수 있습니다. 자주 사용되지는 않지만 특정 모양을 얻거나 조밀한 글꼴의 가독성을 향상시키는 요도로 찾을 수 있습니다. 내용에 첫 번째 줄을 적용한 경우는 다음과 같습니다.

.para::first-line {
    letter-spacing: 2px;
    word-spacing: 4px;
}

위의 속성은 웹 페이지에서 텍스트 지정을 시작하는 방법에 대한 아이디어를 제공하나 사용할 수록 더 많은 속성이 존재합니다. 위에 사용에 익숙해지면 다음 사항도 알아봐야 합니다.

font-variant: 작은 대문자와 일반 글꼴 대체 사이를 전환
font-kerning: 글꼴 커닝 옵션 on/off
font-feature-settings: 다양한 OpenType 글꼴 기능 on/off
font-variant-alternates: 지정된 글꼴에 대한 대체 글리프 사용 제어
font-variant-caps: 대체 대문자 글리프 사용 제어
font-variant-east-asian: 일본어 및 중국어와 같은 동아시아 스크립트의 대체 글리프 사용 제어
font-variant-ligatures: 텍스트에서 사용되는 합자 및 상황별 형식 제어
font-variant-numeric: 숫자, 분수 및 서수 마커에 대한 대체 글리프 사용 제어
font-variant-position: 위 첨자 또는 아래 첨자로 배치된 더 작은 크기의 대체 글리프 사용 제어
font-size-adjust: 실제 글꼴 크기와 독립적으로 글꼴의 시각적 크기 조정
font-stretch: 주어진 글꼴의 가능한 대체 확장 버전 간에 전환
text-underline-position: text-decoration-lin 속성 underline 값을 사용해 설정된 밑줄의 위치 지정
text-rendering: 일부 텍스트 렌더링 최적화

텍스트 레이아웃 스타일

text-indent: 텍스트 콘텐츠의 첫 번째 줄이 시작되기 전 얼마만큼의 수평 공간을 남겨야하는지 지정
text-overflow: 표시되지 않은 오버플로된 콘텐츠를 사용자에게 알리는 방법 정의
white-space: 요소 내부의 공백 및 관련 줄 바꿈을 처리하는 방법 정의
word-break: 단어 내 줄 바꿈 여부 지정
direction: 텍스트 방향 정의
hyphens: 지원되는 언어에 대해 하이픈 연결 on/off
line-break: 아시아 언어의 경우 줄 바꿈을 완화하거나 강화
text-align-last: 강제 줄 바꿈 직전 블록 또는 줄의 마지막 줄 정렬 방법 정의
text-orientation: 라인의 텍스트 방향 정의
word-wrap: 오버플로를 방지하기 위해 브라우저가 단어 내에서 줄을 끊을 수 있는지 여부를 지정
writing-mode: 텍스트 라인이 수평 또는 수직으로 배치되는지 여부와 후속 라인이 흐르는 방향 정의

글꼴 약식 (shorthand)

많은 글꼴 속성은 단축 속성 font를 통해 설정할 수 있습니다. 이들은 다음 순서로 작성됩니다.

font-style
font-variant
font-weight
font-stretch
font-size
line-height
font-family

이러한 모든 속성 중 font가 속기 속성을 사용할 때 font-size 및 font-family만 필요합니다.

font: italic normal normal 3em/1.5 Helvetica Arial, sans-serif

2. 목록 스타일링

목록은 대부분 다른 텍스트처럼 작동하나, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야합니다.

    <h2>장바구니</h2>

    <p>
        Pay list Pork, Toy Str, Sample line, Frost Jock, Chance manny
    </p>
    
    <ul>
        <li>페스트</li>
        <li>초코</li>
        <li>그린 요거트</li>
        <li>첵스</li>
    </ul>

    <h2>레시피 목록</h2>

    <p>
        Pay list Pork, Toy Str, Sample line, Frost Jock, Chance manny
    </p>

    <ol>
        <li>Toast pita, leave to cool, then slice down the edge.</li>
        <li>
            Fry the halloumi in shallow, non-stick pen, until browned on both sides.
        </li>
        <li>Wash and chop the salad.</li>
        <li>Fill pita with salad, hummus, and fried halloumi</li>
    </ol>

    <h2>성분 정보</h2>

    <p>
        Pay list Pork, Toy Str, Sample line, Frost Jock, Chance manny
    </p>

    <dl>
        <dt>hummus</dt>
        <dd>
            A thick dip/sauce generally made from chick peas blended with tahini, lemon
            juice, salt, garlic, and other ingredients.
        </dd>
        <dt>Pita</dt>
        <dd>A soft, slightly leavened flatbread.</dd>
        <dt>Halloumi</dt>
        <dd>
          A semi-hard, unripened, brined cheese with a higher-than-usual melting
          point, usually made from goat/sheep milk.
        </dd>
        <dt>Green salad</dt>
        <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
    </dl>

이것을 브라우저 개발자 도구를 사용해 목록 요소를 조사하면, 몇가지 스타일 기본 값을 알 수 있습니다.

ul 및 ol 요소의 위쪽 및 아래쪽 margin은 16px(1em)이고 padding-left는 40px(2.5em)입니다.
목록 항목(<li>요소)에는 간격에 대한 기본값이 설정되어 있지 않습니다.
<dl> 요소에는 16px(1em)의 상단 및 하단 margin이 있지만 안쪽 여백 세트는 없습니다.
<dd>요소의 margin-left는 40px(2.5em)입니다.
참조용으로 포함된 <p> 요소의 상단 및 하단 margin은 다른 목록 유형과 마찬가지로 16px(1em)입니다.

목록 간격 처리

목록 스타일을 지정할 때 스타일을 조정하여 주변 요소(예: 단락 및 이미지, 때로는 수직 리듬이라 불림)와 세로 간격을 유지하고 서로 동일한 가로 간격을 유지해야합니다.

html {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}

h2 {
    font-size: 2rem;
}

ul,ol,dl,p { font-size: 1.5rem ;}

li, p, dd,dt { line-height: 1.5;}

dt { font-weight: bold;}
dd { margin-bottom: 1.5rem;}

목록별 스타일

list-style-none: 목록에 사용할 글머리 기호 유형을 설정
list-style-position: 글머리 기호가 목록 항목 내부에 표시되는지 각 항목 시작전에 목록 항목 외부에 표시되는지 설정
list-style-image: 간단한 사각형이나 원이 아닌 글머리 기호에 대한 사용자 지정 이미지 사용

글머리 기호 스타일

list-style-type을 사용하면 글머리 기호에 사용할 글머리 기호 유형을 설정할 수 있습니다.

ol { list-style-type: upper-roman;}

글머리 기호 위치

list-style-position 속성은 글머리 기호가 목록 항목 내부에 표시되는지 또는 각 항목 시작 전에 목록 항목 외부에 표시되는지 설정합니다. 기본 값은 outside입니다.

ol { list-style-type: upper-roman; list-style-position: inside;}

맞춤 글머리 기호 이미지 사용

list-style-image 속성을 사용해 글머리 기호에 맞춤 이미지를 사용할 수 있습니다.

ul { list-style-image: url(star.png);}

그러나 이 속성은 글머리 기호나 위치, 크기를 제어하는 측면에서 약간 제한됩니다. 스타일 지정자 모듈에서 자세히 알아볼 background 속성을 사용하는 것이 좋습니다.

ul {
    padding-left: 2rem;
    list-style-type: none;
}
ul li { 
    padding-left: 2rem;
    /* list-style-image: url(star.png); */
    background-image: url(star.png);
    background-position: 0.0;
    background-size:1.6rem 1.6rem;
    background-repeat: no-repeat;
}

목록 스타일 속기

list-style이라는 단일 속기 속성을 사용해 설정할 수 있습니다.

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

다음과 같이 줄일 수 있습니다.

list-style: square url(star.png) inside;

값은 임의의 순서로 나열할 수 있고 1개, 2개 또는 3개 모두를 사용할 수 있습니다.

목록 계산 제어

때로는 순서가 지정된 목록에서 다르게 계산하고 싶을 수 있습니다. 1이 아닌 숫자부터 시작하거나 거꾸로 세거나 1보다 많은 단계로 셀 수 있습니다.start 속성을 사용하면 1이 아닌 숫자로부터 카운트하는 목록을 만들 수 있습니다.

    <ol start="4">
        <li>Toast pita, leave to cool, then slice down the edge.</li>
        <li>
            Fry the halloumi in shallow, non-stick pen, until browned on both sides.
        </li>
        <li>Wash and chop the salad.</li>
        <li>Fill pita with salad, hummus, and fried halloumi</li>
    </ol>

reversed

reversed 속성은 목록을 위로 카운트하는 대신 카운트 다운을 시작합니다.

    <ol start="4" reversed>
        <li>Toast pita, leave to cool, then slice down the edge.</li>
        <li>
            Fry the halloumi in shallow, non-stick pen, until browned on both sides.
        </li>
        <li>Wash and chop the salad.</li>
        <li>Fill pita with salad, hummus, and fried halloumi</li>
    </ol>

value

value 속성을 사용하면 목록 항목을 특정 숫자 값으로 설정할 수 있습니다.

  <ol>
        <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
        <li value="5">
            Fry the halloumi in shallow, non-stick pen, until browned on both sides.
        </li>
        <li value="7">Wash and chop the salad.</li>
        <li value="9">Fill pita with salad, hummus, and fried halloumi</li>
    </ol>

3.스타일링 링크

링크의 스타일을 지정할 때는 의사 클래스를 사용해 링크의 상태를 효과로 스타일링하는 방법을 이해해야합니다.

링크 상태

링크: :link 의사 클래스를 사용하여 스타일이 지정된 대상(즉, 명명된 앵커가 아닌)이 있는 링크
방문 횟수: 이미 방문한 링크(브라우저 기록 존재)로, :visited 의사 클래스르 사용해 스타일 지정
호버: 사용자의 마우스 포인터로 가리키는 링크, :hover 의사 클래스를 사용해 스타일 지정
포커스: 초점이 맞춰진 링크 :focus 의사 클래스 사용 스타일 지정
활성: 활성화(예: 클릭)된 링크 :active 의사 클래스 사용 스타일 지정

기본 스타일

CSS는 텍스트를 확대하고 중앙에 배치해 더 눈에 잘 띄도록 합니다. 기본 스타일링의 모양과 동작을 이 페이지에서 더 많은 CSS 스타일이 적용된 다른 링크의 동작과 비교할 수 있습니다.

<p><a href="#">Simple link</a></p>

p {
    font-size: 2rem;
    text-align: center;
}

흥미롭게도 이러한 기본 스타일은 1990년대 중반 브라우저 초장기 때와 거의 동일하고, 링크의 스타일이 달라지면 많은 사람들이 혼란스러워할 것이기 때문에 사용자들은 이러한 동작을 알고 기대하게 되었기 때문입니다.

링크에는 밑줄을 사용하되 다른 항목에 밑줄 X,
마우스를 가져가거나 초점을 맞추면 어떤 방식으로 반응하고, 활성화하면 약간 다른 방식으로 반응하도록 설정

기본 스타일은 CSS 속성을 사용해 해체/변경할 수 있습니다.

color을 텍스트 색상으로 지정
마우스 포인터 스타일에 대한 cursor는 특별한 이유 없이 끄지 않는 것을 추천
outline을 텍스트 윤곽선으로 설정

일부 링크 스타일링

a {

}

a:link{

}

a:visited {}

a:focus {}

a:hover {}

a:active {}

링크 스타일은 서로를 기반으로 구축되므로 이 순서가 중요합니다. 예를 들어 첫 번째 규칙의 스타일은 이후의 모든 규칙에 적용됩니다. 링크가 활성화되면 보통은 마우스가 링크 위에 올라가 있습니다. 이러한 규칙을 잘못된 순서로 배치하고 각 규칙 집합에 동일한 속성을 변경하면 예상대로 작동하지 않습니다.

p {
    font-size: 2rem;
    text-align: center;
}

body {
    width:100%;
    margin: 0 auto;
    font-size:1.2rem;
    font-family: sans-serif;
}
 
p {
    line-height: 1.4;
}

a {
  outline: none;
}

a:link{
   color:#6900ff;
}

a:visited {
    color:#a5c300;
}

a:focus {
    text-decoration: none;
    background:#bae498;
}

a:hover { 
    text-decoration: none;
    background:#cdfeaa;
}

a:active {
    background: #6900ff;
    color: #cdfaaa;
}

4. 웹 폰트

font-family 속성을 사용하면 HTML에 적용되는 폰트를 제어할 수 있습니다. 여기에는 하나 이상의 폰트 패밀리 이름이 필요합니다. 웹 페이지를 표시할 때 브라우저는 실행 중인 시스템에서 사용 가능한 폰트를 찾을 때까지 폰트 패밀리 값 목록을 아래로 살펴봅시다

p {
    font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

이 시스템을 잘 작동하나, 기존에는 웹 개발자가 선택할 수 있는 폰트는 제한적이었습니다. 모든 일반적인 시스템에서 사용 가능하다고 보장할 수 있는 폰트는 웹 안전 폰트 라고 불리는 소수의 폰트뿐입니다.

웹 폰트

CSS를 사용하면 웹에서 사용할 수 있는 폰트 파일을 지정해 웹 사이트에 엑세스할 때 함께 다운로드 할 수 있습니다.

@font-face {
    font-family: "Bonbon";
    src: url("fonts/Bonbon-Regular.ttf")
}

그 아래에 @font-face 안에 지정된 폰트 패밀리 이름을 사용해 평소처럼 원하는 폰트에 사용자 지정 폰트를 적용할 수 있습니다.

html {
    font-family: "Bonbon",serif;
}

참고 자료

텍스트 스타일링 - Web 개발 학습하기 | MDN

CSS 기초가 어느 정도 완성되었다면, 여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어

developer.mozilla.org

GitHub - CSS-STR/css-bloging

Contribute to CSS-STR/css-bloging development by creating an account on GitHub.

github.com

LIST

'Front-End > CSS' 카테고리의 다른 글

[CSS] Tailwind CSS란? (0)	2025.02.16
[CSS] CSS 반응형 이해하기 (0)	2025.02.16
[CSS] CSS 4장. css 레이아웃 위치잡기, Floats, flexbox ,grid, 반응형 디자인, 미디어 쿼리 (0)	2025.02.05
[CSS] CSS 2장. css 값과 단위, overflow, 이미지, 미디어 양식 요소, 표 스타일링, (0)	2025.02.02
[CSS] CSS 1장. css Box Model 계단식 및 상속 (0)	2025.02.02

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[CSS] CSS 3장. css 텍스트 스타일링, 목록 스타일링, 스타일링 링크, 폰트

참고 자료

'Front-End > CSS' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역