[HTML/CSS] CSS - font, webfont, vertical-align, text-align, text-indent, text-decoration, 단어 관련 속성

8) 속성 - font

/* Set the font size to 12px and the line height to 14px.
   Set the font family to sans-serif */
p { font: 12px/14px sans-serif }

/* Set the font size to 80% of the parent element
   or default value (if no parent element present).
   Set the font family to sans-serif */
p { font: 80% sans-serif }

/* Set the font weight to bold,
   the font-style to italic,
   the font size to large,
   and the font family to serif. */
p { font: bold italic large serif }

/* Use the same font as the status bar of the window */
p { font: status-bar }

https://developer.mozilla.org/en-US/docs/Web/CSS/font

font

---

9) 속성 - webfont

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

웹폰트 사용하기 (웹폰트 101)

---

10) 속성 - vertical-align

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

vertical-align

---

11) 속성 - text-align

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Character-based alignment in a table column */
text-align: ".";
text-align: "." center;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

위 사진에서 보이는 것과 같이 text-align은 div inline 안에 있는 "box"라는 text를 정렬하는 것이고, margin: 0 auto를 해야 전체적인 div가 가운데로 정렬되는 것을 알 수 있다.

​

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

text-align

---

12) 속성 - text-indent

/* <length> values */
text-indent: 3mm;
text-indent: 40px;

/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

/* Keyword values */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* Global values */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

text-indent

---

13) 속성 - text-decoration

<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>

.under {
    text-decoration: underline red;
}

.over {
    text-decoration: wavy overline lime;
}

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

.plain {
    text-decoration: none;
}

.underover {
    text-decoration: dashed underline overline;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

text-decoration

---

14) 속성 - 단어 관련 속성

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

---

/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

---

---

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> values */
word-spacing: 50%;
word-spacing: 200%;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

---

---

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

---

이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 word-wrap으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현됐고, 요즘은 overflow-wrap으로 다시 이름이 지어지고, word-wrap은 동의어가 됐다.

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text

CSS Text

---

https://www.edwith.org/boostcourse-cs-htmlcss/joinLectures/33596

[부스트코스] 비전공자를 위한 HTML/CSS 강좌소개 : edwith

위 7개 내용은 부스트코스 무료 강의에서 들을 수 있습니다🥰

​

#HTML #CSS #HTMLCSS #HTML문법 #HTML태그 #HTML속성 #HTML태그중첩 #HTML빈태그 #HTML주석 #HTML문서구조 #HTML공부 #HTML연습 #HTML기초 #typography #fontfamily #lineheight #vertical_align #text_align #text_indent #text_decoration #white_space #letter_spading #word_spading #word_break #word_wrap #webfont #font #fontsize #fontweight #fontstyle #fontvariant #boxmodel #content #padding #border #margin #width #height #CSS정의 #CSS속성 #CSS단위 #CSS색상 #CSS구체성 #CSS상속 #상속 #CSS선택자 #CSS문법 #CSS구문 #문서구조 #가상선택자 #가상클래스 #가상요소 #class #id #선택자 #속성선택자 #inline #internal #external #import #제목태그 #콘텐츠모델 #시멘틱웹 #시멘틱마크업 #HTML5 #HTML5시멘틱 #block #inline #h1 #단락태그 #p #개행 #br #텍스트표현태그 #앵커 #a #href #target #내부링크 #div #span #ul #ol #dl #img #src #alt #상대경로 #절대경로 #gif #jpg #png #table #tr #th #td #caption #thead #tbody #tfoot #colspan #rowspan #form #input #text #password #radio #checkbox #file #submit #reset #button #image #select #textarea #label #fileset #legend #article #aside #figure #figcaption #header #main #footer #mark #nav #section #summary #time #background #코딩 #코딩공부 #코딩연습 #코딩독학 #비전공자 #부스트코스 #부스트코스HTML #부스트코스강의 #edwith