css-3 : 폰트스타일과 굵기

폰트스타일과 굵기

폰트스타일

html:

<p class="a">italic체</p> <br>
<p class="b">oblique체</p> <br>
<p class="c">폰트bold</p> <br>
<p class="d">폰트900</p> <br>

css:

.a {
  font-style: italic;
}
.b {
  font-style: oblique;
}
.c {
  font-weight: bold;
}
.d {
  font-weight: 900;
}

* italic이 ‘기울여서 쓴’ 서체라면 oblique는 본래 서체를 기울여놓은 것입니다.

---

---

text-decoration & text-transform

Text-decoration: overline(위에줄), underline(밑줄)

Text-transform: capitalize(앞글자만 대문자), uppercase(대문자), lowercase(소문자)

<p>HTML & CSS Programming is fun!</p>

p {
  text-decoration: overline;
  /* capitalize, uppercase, lowercase */
  text-transform: capitalize;
}

p {
  text-decoration: underline wavy blue 3px;
  /* capitalize, uppercase, lowercase */
  text-transform: lowercase;
}

---

---

Text-shadow

text-shadow를 사용하면 텍스트에 그림자를 줄 수 있습니다.

‘x좌표, y좌표, 흐림(선택), 색’ 형식으로 그림자를 넣을 수 있고

쉼표로 구분해서 여럿을 넣을 수도 있습니다.

크롬 계열 브라우저의 개발자 도구를 사용하면 손쉽게 값을 조정할 수 있죠.

개발자 도구이용해서 그림자 넣는 방법

예시

<p>이런 것도 가능합니다.</p>

p {
  text-shadow:
    /* 안쪽 흰색 그림자 */
    1px 0 white, -1px 0 white, 0 1px white, 0 -1px white, 
    1px 1px white, 1px -1px white, -1px 1px white, -1px -1px white,

    /* 바깥쪽 미국자두색 그림자 */
    2px 0 plum, -2px 0 plum, 0 2px plum, 0 -2px plum,
    2px 1px plum, -2px 1px plum, 1px 2px plum, 1px -2px plum,
    2px -1px plum, -2px -1px plum, -1px 2px plum, -1px -2px plum,
    2px 2px plum, 2px -2px plum, -2px 2px plum, -2px -2px plum;
}

---

---

font-size

*기본 html

  바깥
  <div>중간
    <div>안쪽</div>
  </div>

*기본 css

body {
  border: 2px solid #ddd;
}

div { 
  border: 1px solid #ddd;
}

font-size 속성은 말 그대로 글자의 크기를 지정합니다.
단위로는 px과 %, em, rem이 사용되죠.

px는 절대값으로서 픽셀 단위입니다.
100%는 1em으로, 이들은 부모 요소와의 상대적 크기를 나타내죠.
rem은 html 요소와의 상대적 크기를 가지므로, 요소의 중첩에 영향을 받지 않습니다.
pt는 1인치/72로, 프린트할 컨텐츠에 사용됩니다.

body {
  border: 2px solid #ddd;
}

html { font-size: 14px; }
div { 
  border: 1px solid #ddd;
  font-size: 2em; }