Font

hanahana·2022년 7월 30일

CSS html

네이버 부스트코스-html/css

목록 보기

15/17

타이포그래피

타이포그래피의 구조

baseline의 위치가 문자열을 만들때 매우 중요하다

font family

글꼴을 지정하는 선언이다

family-name과 generic-family로 구성된다
family-name은 지정순서로 폰트의 우선순위 결정 (한글 지원여부)
generic-family는 family-name으로 지정한 폰트가 사용자의 컴퓨터에 없을 시 적절한 폰트를 선택할수 있게 몇가지 폰트를 더 선언하는 것으로 한다.

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif

마지막 선언인 sans-serif가 generic-family이다
한글폰트는 반드시 영문자를 선언해줌
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/font-family

속성

fant-family : family-name / jeneric-family / initial / inherit;

Sans serif

상단처럼 삐침이 없는 문자를 sans serif
하단처럼 삐침이 나와있는 문자를 serif라고 한다
이 문자들은 generic-family로 선언해주면 최대한 원하는 출력이 가능하다
같은 글자체라고 하여도 바탕체처럼 삐침이 있는 문자로 선언하려면 바탕, serif
삐침이 없는 돋움 계열로 선언하려면 돋음, sans serif를 선언해주면 된다

정렬

폰트 값에 따라 기본 폰트의 크기가 달라져 정렬이 바뀔수 있다
div나 body를 사용했을때 폰트에 따라 inline박스의 크기가 달라질수 있다!

상속

font-family는 자식속성으로 상속된다
자식속성에 font-family를 선언했다고 하더라도 generic-family는 다시 선언해주어야 브라우저가 제대로 generic-family를 인식할수있다.

line-height

줄 간격을 의미한다

실습 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-5.html

속성

line-height : normal /  number / lenght / initial /inherit ;

기본 각격은 normal이다
예제

line-height : normal;
line-height : 2;
line-height : 20px;
line-height : 200%;

간격값을 입력했을때 줄과 줄 사이의 크기를 말하는 것이 아니라 문자의 위 아래를 뜻하는 것이다.

줄 간격값의 위 아래 공백은 브라우저마다 계산값이 다를수있다
- 예를 들어 line-height값이 20px일때 글자가 17px라면
  - 브라우저 A : 윗여백이 2px 아랫여백이 1px
  - 브라우저 B : 윗여백이 1px 아랫여백이 2px
    
    이런방식으로 브라우저에 따라 다르게 분배될수 있다.
normal
- 기본값으로 브라우저의 기본 속성을 따릅니다.
- 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다.
number
- font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다.
length
- px, em 등 고정 수치로 할당할 수 있습니다.
%
- font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다.

상속

line-heihgt의 값은 상속되나 절대값이 상속되기때문에 자식속성에서 오류를 일으킬수 있다
예제

.parent {
        width: 200px;
        font-size: 10px;
        line-height: normal;
    }
/*normal선언*/

    .parent-1 {
        width: 200px;
        font-size: 10px;
        line-height: 20px;

    }
/*20px선언*/

    .parent-2 {
        width: 200px;
        font-size: 10px;
        line-height: 2;
    }
/*2선언*/

    .parent-3 {
        width: 200px;
        font-size: 10px;
        line-height: 200%;
    }
/*200%선언*/

    .child {
        font-size: 20px;
    }

이 처럼 20px같은 고정값을 선택시에는 normal이나 상대적인 정수 %등과는 달리 자식요소에 그대로 적용되어 원하는 자간이 나오지 않을수 있으니 승계를 고려할때는 상대적인 값을 넣는것이 좋다

font-size

실습결과 :https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-6.html

.parent {
        font-size: 20px;
    }

    .parent-1 {
            font-size:  larger;
        }

      .parent-2 {
            font-size: 150%;
        }

        .parent-3 {
            font-size: 2em;
        }
    .child {
        font-size: 1em;
    }

font-weight

실습결과: https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-7.html

font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

기본 값 : normal

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

normal
- 기본 값 (400)
bold
- 굵게 표현(700)
bolder
- 부모 요소 보다 두껍게 표현
lighter
- 부모 요소 보다 얇게 표현
number
- 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)
- 100 - thin
- 200 - Extra light
- 300 - light
- 400 - normal
- 500 - midium
- 600 - semi bold
- 700 - bold
- 800 - extra bold
- 900 - black (Heavy)

실제 입력시에는 300은 거의 적용되지 않았고 600과 700이 같았으며 800이후에는 다시 굵기가 적요되지 않았다.

font-sytle

font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

기본 값 : normal

font-style: normal | italic | oblique | initial | inherit;

normal
- font-family 내에 분류된 기본 값
italic
- italic 스타일로 표현합니다.
oblique
- oblique 스타일로 표현합니다.
- oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다.
  
  font-weight oblique <각도>;
  
  유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어집니다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능합니다.
  
  대부분 브라우저에서 italic 스타일과 oblique 스타일을 똑같은 형태로 표현하고 있습니다.

font-variant

실습결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-8.html

font-variant 속성

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.

기본 값 : normal

font-variant: normal | small-caps | initial | inherit ;

< 속성 값 >

normal
- 기본 값
small-caps
- 소문자를 작은 대문자로 변형합니다.

p {
      font-variant: small-caps;
    }
    .normal{
      font-variant: normal;
    }

위 아래 결과로 small-caps가 어떻게 출력되는지 알수있다.!

속성

font 관련 속성

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성입니다.

기본 값 : 각 속성들의 기본 값

font: font-style font-variant font-weight font-size/line-height font-family | initial | inherit;

실무에서는 지양하는 속성임
각 속성마다 선언 순서를 지켜야한다
font-size font-family는 반드시 선언해야 하는 필수 속성
font-style
- font-style 지정, 기본 값은 normal
font-variant
- font-variant 지정, 기본 값은 normal
font-weight
- font-weight 지정, 기본 값은 normal
font-size/line-height
- font-size/line-height 지정, 기본 값은 normal

font-family

font-family 지정

.normal1{
      /* style | size | family */
font: oblique 2em "돋움", dotum, sans-serif;
            }
    .normal2{
/* style | variant | weight | size/line-height | family */
font: oblique small-caps bold 16px/1.5 '돋움';
            }
    .normal3{
/* The font used in system dialogs */
font: message-box;
}
    .normal4{
font: icon;
    }

message-box와 icon은 출력결과 상으로는 기본글꼴과 크게 달라진바가 없으나 자동으로 message-box나 icon에서 사용할때 깔끔한 글씨체를 출력해주는것으로 보인다.

webfont

웹폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트

시스템폰트 : 시스템에 이미 기본적으로 깔려있는 폰트

이미지 폰트 : 글꼴대신 이미지로 만들어 제공하는 글씨를 가리키는 폰트

설치형폰트 : 필요한 폰트를 설치할시 나오는 폰트

참고 : https://www.w3schools.com/css/css3_fonts.asp

웹 폰트의 경우 웹폰트 아내서 generic-family가 선언되어있기때문에 따로 선언하지 않아도 된다.

@font-face {
    font-properties
}

font-family(필수)
- 글꼴의 이름을 지정
src(필수)
- 다운로드 받을 글꼴의 경로(URL)
font-style(옵션)
- 글꼴의 스타일 지정, 기본 값은 normal

font-weight(옵션)

글꼴의 굵기 지정, 기본 값은 normal

선언방법

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

body {
    font-family: webNanumGothic;
}

참고자료

https://wit.nts-corp.com/2017/02/13/4258

https://web.dev/fast/#optimize-webfonts

vertical-align

실습 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-9.html

vertical-align 속성

요소의 수직 정렬을 지정하는 속성입니다.

기본 값 : baseline

vertical-align: keyword | length | percent | initial | inherit ;

< 속성 값 >

length
- 요소를 지정한 길이만큼 올리거나 내림. 음수 허용
%
- 요소를 line-height를 기준으로 올리거나 내림. 음수 허용
keyword
- baseline(기본 값), sub, super, top, text-top, middle, bottom, text-bottom
  
  css를 통해서 텍스트를 수직, 수평 정렬 할 수 있습니다.
  
  그 중 vertical-align 속성을 이용하여 수직 정렬을 할 수 있습니다.
  
  이때 주의하실 점은 block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있습니다.
  
  따라서 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다.

vertical-align은 기본 값이 baseline입니다.

이전에 타이포그래피 구조 강의에서 설명했듯이 baseline은 소문자 x를 기준으로 하단 라인을 의미합니다.

keyword sub : 부모 아래 첨자 기준으로 정렬 super : 부모 위 첨자 기준으로 정렬 text-top : 부모 텍스트의 맨
위(Ascender 제외) text-bottom : 부모의 텍스트의 맨 아래(Descender 제외) middle : 부모의
중앙에 위치 top : 부모의 맨 위 위치 bottom : 부모의 맨 아래 위치
length px값 사용 시 baseline을 기준으로 이동하며, 음수 값도 사용 가능합니다.
percent ( % ) line-height를 기준으로 내에서 이동하며 음수 값 사용 가능합니다.

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_vertical-align

이 사이트안에서 직접 보면 어떤식으로 사용되는지 알수있다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>vertical-align</title>
  <style>
    p {
      padding: 10px;
      border: 1px dashed #aaa;
      line-height: 1;
      font-size: 16px;
    }

    p span {
      background-color: rgba(0, 255, 255, 0.5);
      border: 1px solid #aaa;
    }

    p span:nth-child(1) {
      background-color: rgba(255, 255, 0, 0.5);
    }

    p span:nth-child(2),
    p span:nth-child(4) {
      font-weight: bold;
      font-size: 20px;
    }

    p span:nth-child(3) {
      background-color: rgba(0, 0, 0, 0.2);
    }

    /* table */

    table {
      width: 100%;
      border-collapse: collapse;
    }

    table td,
    table th {
      border: 1px solid #aaa;
      height: 50px;
    }
  </style>
</head>
<body>
    <h1>vertical-align</h1>
    <p><span>vertical-align:</span>
      <span style="vertical-align: baseline;">baseline;</span>
      <span>---</span>
      <span style="vertical-align: baseline;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: sub;">sub;</span>
      <span>---</span>
      <span style="vertical-align: sub;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: super;">super;</span>
      <span>---</span>
      <span style="vertical-align: super;">수직정렬</span></p>
    <p>
      <span>vertical-align:</span>
      <span style="vertical-align: text-top;">text-top;</span>
      <span>---</span>
      <span style="vertical-align: text-top;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: text-bottom;">text-bottom;</span>
      <span>---</span>
      <span style="vertical-align: text-bottom;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: middle;">middle;</span>
      <span>---</span>
      <span style="vertical-align: middle;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: top;">top;</span>
      <span>---</span>
      <span style="vertical-align: top;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: bottom;">bottom;</span>
      <span>---</span>
      <span style="vertical-align: bottom;">수직정렬</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 4em;">4em;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 4px;">4px;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: 20%;">20%;</span>
      <span>---</span></p>
    <p><span>vertical-align:</span>
      <span style="vertical-align: -10px;">-10px;</span>
      <span>---</span></p>

    <table>
      <caption>table cell vertical-align</caption>
      <thead>
        <tr>
          <th>속성 값</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="vertical-align:baseline;">vertical-align:baseline</td>
        </tr>
        <tr>
          <td style="vertical-align:top;">vertical-align:top</td>
        </tr>
        <tr>
          <td style="vertical-align:middle;">vertical-align:middle(cell 기본값)</td>
        </tr>
        <tr>
          <td style="vertical-align:bottom;">vertical-align:bottom</td>
        </tr>
        <tr>
          <td>null</td>
        </tr>
      </tbody>
    </table>
</body>
</html>

실습결과 링크를 누르면 결과를 확인할수 있다.

text-align

앞서 배운 vertical-align이 인라인 요소의 수직 정렬이었다면, text-align은 인라인 요소의 수평 정렬에 사용됩니다.

이 속성 또한 div와 같은 블록 레벨 요소에는 적용되지 않습니다.

text-align 속성

텍스트의 정렬을 지정하는 속성입니다.

기본 값 : left (Right to Left 언어일 경우는 right)

text-align: left | right | center | justify | initial | inherit ;

기본 값은 left이지만 경우에 따라 다릅니다.

문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고,

RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다.

< 속성 값 >

left
- 텍스트를 왼쪽으로 정렬
right
- 텍스트를 오른쪽으로 정렬
center
- 텍스트를 중앙으로 정렬
justify
- 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음)

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-align

속성값이 어떻게 움직이는지 확인할 수 있다.

text-align과 display의 관계

- text-align은 inline-level에 적용

- text-align은 block-level에 적용할 수 없음

그렇다면 block 요소를 가운데 정렬 하고자 한다면 어떻게 해야 할까요?

박스모델 챕터에서 다룬 margin의 auto 값을 이용해서 하시면 됩니다.

가운데 정렬 인라인 요소 : text-align (center) 블럭 요소 : margin (auto)

요소의 레벨에 따라 정렬하는 방식의 차이를 바로 알고 있으시기 바랍니다.

DIV

div안에 정렬할 때는 div안에서의 값만 정렬됨

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-align</title>
  <style>
    p {
      max-width: 630px;
      border: 1px solid #888;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>text-align</h1>
  <h2>left</h2>
  <p style="text-align: left;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>right</h2>
  <p style="text-align: right;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>center</h2>
  <p style="text-align: center;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>justify</h2>
  <p style="text-align: justify;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
</body>
</html>

예제 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-10.html

text-indent

텍스트 들여쓰기

text-indent 속성

텍스트의 들여쓰기를 지정하는 속성입니다.

기본 값 : 0

text-indent: length | initial | inherit;

< 속성 값 >

length	px, em 등 고정 수치로 지정. 음수 허용
%	부모 요소의 width를 기준으로 퍼센트로 지정

length 문단의 첫 줄에 대한 들여쓰기를 수행합니다. 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.
percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.

https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-indent

이 사이트를 참고하면 들여쓰기가 어떻게 활용되는지 알수있다

-를 사용하면 들여쓰기가 아니라 내어쓰기가 된다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-indent</title>
</head>
<body>
  <h1>text-indent</h1>
  <h2>length 1em</h2>
  <p style="text-indent: 1em;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>length 40px</h2>
  <p style="text-indent: 40px;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>percentage 15%</h2>
  <p style="text-indent: 15%;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.</p>
  <h2>length -40px (비추천)</h2>
  <p style="text-indent:-40px;">이 안내서를 시작하기 전에, 사용법에 익숙한 텍스트 파일을 편잡할 수 있는 편집 툴이 필요하며 최신 브라우저도 필요하다. 파일을 편집하고 싶지 않다면 그냥 안내서를 읽고 해당 예시 그림을 보라. 그러나 배우는데는 더딜 것이다.<br>들여쓰기에 음수사용은 올바르지 않으며 본래의 기능에서 벗어남</p>
</body>
</html>

예제 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-11.html

text-decoration

text-decoration 속성

텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다.

기본 값 : none currentColor solid

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

text-decoration-line 텍스트 꾸밈의 종류를 지정하는 속성입니다.
기본 값 : none

< 속성 값 >

underline	밑줄로 꾸밈을 설정
overline	윗줄로 꾸밈을 설정
line-through	중간을 지나는 줄로 꾸밈을 설정
none	텍스트 꾸밈을 생성하지 않음 ( 기본값 )

text-decoration-color
텍스트 꾸밈의 색상을 지정하는 속성입니다.
기본 값 : currentColor : 부모 요소의 색상을 상속받는다
색상 값을 사용하여 원하는 색상을 지정할 수 있습니다.
text-decoration-style 꾸밈에 사용되는 선의 스타일을 지정하는 속성입니다.
기본 값 : solid

< 속성 값 >

solid	한줄 스타일 ( 기본 값 )
double	점선 스타일
dotted	점선 스타일
dashed	파선 스타일
파선 스타일	물결 스타일

라인 꾸며주기
- https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-decoration
- 줄에 색상을 선언할수도 있고(underline blue;), 점선등 선 스타일등도 지정이 가능하다(underline overline dotted red;)
```
h3 {
  text-decoration: underline;
}
```

다수라인 선언
- https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-decoration-line
- 여러라인을 동시에 선언해줄수 있다 (underline overline line-through;)
```
h1 {
 text-decoration: underline overline;
}
```
라인 색상선언
- https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-decoration-color
- 색상을 선언할수 있다
```
p {
  text-decoration: underline;
  text-decoration-color: red;
}
```
라인 모양선언
- https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_text-decoration-style
```
div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}
```
속성 동시 선언
- https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
```
div{
text-decoration: underline overline #FF3028;
}
```

예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>text-decoration</title>
</head>
<body>
  <h2>일반 경우</h2>
  <p style="text-decoration: overline;">
  text-decoration: overline;
  </p>
  <p style="text-decoration: underline;">
  text-decoration: underline;
  </p>
  <p style="text-decoration: line-through;">
  text-decoration: line-through;
  </p>

  <h2>부모 내 자식요소가 float될 경우 상속이 해제됨</h2>
  <a href="#" style="text-decoration: overline;"> <span style="float:left;">
  text-decoration: overline;</span>
  </a>
  <br>
  <h2>부모 내 자식요소가 absolute 경우 상속이 해제됨</h2>
  <a href="#" style="text-decoration: overline;"> <span style="position:absolute;">
  text-decoration: overline;</span>
  </a>
</body>
</html>

예제 결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/5-12.html

float : 정렬 속성을 가진경우 부모 상속 해제
position : absolute -자유로운 배치, 이 경우 무조건 상속 해제
- https://www.daleseo.com/css-position-absolute/

단어 관련 속성

white-space 속성

요소 안에 공백을 어떻게 처리할지 지정하는 속성입니다.

기본 값 : normal

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

< 속성 값 >

normal	공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값
nowrap	공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음
pre	공백과 개행을 표현하고, 자동 줄바꿈이 일어나지 않음.
pre-line	공백은 무시하고, 개행만 표현. 필요한 경우에 자동 줄바꿈 발생.
pre-wrap	개행은 무시하고, 공백만 표현. 필요한 경우 자동 줄바꿈 발생.

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_white-space

letter-spacing 속성

자간을 지정하는 속성입니다.

기본 값 : normal

letter-spacing: normal | length | initial | inherit;

< 속성 값 >

normal	기본 값
length	길이만큼 자간을 지정. 음수 허용

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_letter-spacing

word-spacing 속성

단어 사이의 간격을 지정하는 속성입니다.

기본 값 : normal

word-spacing: normal|length|initial|inherit;

< 속성 값 >

normal	기본 값
length	길이만큼단어 사이의 간격을 지정. 음수 허용

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_letter-spacing

word-break 속성

단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성입니다.

기본 값 : normal

word-break: normal | break-all | keep-all | initial | inherit;

< 속성 값 >

normal	기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
break-all	중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
keep-all	중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_word-break

word-wrap 속성

요소를 벗어난 단어의 줄바꿈을 지정하는 속성입니다.

기본 값 : normal

word-wrap: normal|break-word|initial|inherit;

< 속성 값 >

normal	기본 값. 중단점에서 개행 - 글자 삐져나올수도 있음
break-word	모든 글자가 요소를 벗어나지 않고 강제로 개행

참고 : https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_word-wrap

hanahana

hello world

이전 포스트

4주차 과제

다음 포스트

Font

네이버 부스트코스-html/css

타이포그래피

타이포그래피의 구조

font family

속성

Sans serif

정렬

상속

line-height

속성

상속

font-size

font-weight

font-sytle

font-variant

속성

webfont

선언방법

참고자료

vertical-align

예제

text-align

DIV

예제

text-indent

예제

text-decoration

예제

단어 관련 속성

4주차 과제

레이아웃

0개의 댓글