[부스트코스] 6-2 CSS 폰트, 텍스트

 

 

6. 폰트, 텍스트

8) 속성-font

font: font-style font-variant font-weight font-size/line-height
font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

/* size | family */
font: 2em "돋움", dotum,  sans-serif;

/* style | size | family */
font: oblique 2em "돋움", dotum, sans-serif;

/* style | variant | weight | size/line-height | family */
font: oblique small-caps bold 16px/1.5 '돋움';

/* The font used in system dialogs */
font: message-box;
font: icon;

/* Global values */
font: inherit;
font: initial;

font-size와 font-family는 반드시 선언해야하는 필수 속성

각 속성마다 선언 순서를 지켜야 함

 

 

 

9) 속성-webfont

웹폰트 (@FONT_FACE)

사용자의 로컬환경(컴퓨터)에 글꼴을 다운로드 받아 사용

@font-face {font-properties}

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

body {
	font-family: webNanumGothic;
}

 

 

 

10) 속성-vertical-align

• 수직 정렬
• block 요소가 아닌 inline 또는 inline-block에서만 사용할 수 있음

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

/* kyword values */
vertical-align: baseline; /* 부모 기본 값 */
vertical-align: sub; /* 부모 아래 첨자 기준선 */
vertical-align: super; /* 부모 위첨자 기분선 */
vertical-align: text-top; /* 부모 텍스트의 맨위 (Ascender 제외) */
vertical-align: text-bottom; /* 부모 텍스트의 맨위 (Descender 제외) */
vertical-align: middle; /* 부모의 중앙에 위취 */
vertical-align: top; /* 부모의 맨위 위치 */
vertical-align: bottom; /* 부모의 맨아래 위치 */

/* <length> values -음수값도 가능 */
vertical-align: 10em;
vertical-align: 4px;

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

 

 

 

11) 속성-text-align

• 수평 정렬
• div와 같은 블록 레벨 요소에는 적용되지 않음

TEXT-ALIGN

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

/*Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify; /* 자동 줄바꿈 시 양쪽 끝으로 정렬됨, 마지막 라인은 반응안함 */

 

TEXT-ALIGN과 DISPLAY의 관계

• text-align은 inline-level에 적용됨
• block-level을 text-align으로 정렬할 수 없음

 

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

 

 

 

12) 속성-text-indent

텍스트 들여쓰기

text-indent: length|initial|inherit;

/* <length> values 문단의 첫줄 들여쓰기, 음수 사용가능 */
text-indent: 1em;
text-indent: 40px;

/* <percentage> value는 텍스트를 포함하는 컨테이너 블록의 폭 기준 */
text-indent: 15%;

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

 

 

 

13) 속성-text-decoration

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

/* Keyword values */
text-decoration: none;
text-decoration: overline; /* 위쪽 선 */
text-decoration: underline; /* 아래쪽 선 */
text-decoration: line-through; /* 중앙 선 */

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

 

 

 

14) 속성-단어 관련 속성

• white-space
  • normal | nowrap | pre | pre-line | pre-wrap
• letter-spacing (자간)
  • normal | length | initial | inherit
• word-spacing
  • normal | length | initial | inherit

 

• word-break
  • normal | break-all | keep-all | break-word | initial | inherit
• word-wrap
  • normal | break-word | initial | inherit

 

 

 

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록