[2] 글자와 관련된 스타일

- 2021.08.26 -

- 2023.05.05 -

---

기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다

---

글자와 관련된 스타일

 

color 글자의 색을 표현 ( rgba, cmyk등의 형태, 16진수 코드 )

font-family 글씨체를 표현 ( 글씨체에 띄어쓰기가 있을 경우 쌍따옴표(")를 사용 )

font-size 글씨의 크기를 표현 ( pt,px,em으로 표현 )

font-weight 글자의 굵기를 표현 ( 100~900 사이의 값이나 bold로 굵기 표현 )

font-height 줄의 간격을 표현 ( %단위나 px등의 단위를 사용 )

 

Font

Font(글씨체)는 폰트명을 직접 작성함으로써 지정한다.

하나의 글씨체 이름이 여러 단어로 이루어져있다면  쌍따옴표로 묶어주고 아니면 그냥 기술함.

또한 가장 먼저 서술된 폰트가 없다면 그 뒤의 폰트가 적용되도록 설정.

내가 지정한 폰트가 다 없을 경우 알아서 기본폰트로 선택된다.

 

ex1) font-family: "Times New Roman", Times, serif

ex2) font-family: 돋음, 굴림, 고딕, 궁서

이런식으로 표현할 수 있다.

 

크기의 단위

글씨나, 컨테이너의 크기를 결정하는 기본단위는 px,pt,em,%가 있음

글씨의 크기나 단위는 설정하는것이 좋은데 설정하지 않는경우 사용자의 화면마다 표현하는게 달라질 수 있다.

 

px(pixel,픽셀) 화면의 pixel개수의 단위, 해상도에 따라 화면의 보이는 크기가 상이 할 수 있음.

pt(point,포인트) 포인트 단위로 1포인트는 1/72인치 기준으로 인쇄시에도 비슷한 크기로 인쇄.

em 상대 크기,(부모 요소에서) 기존에 사용된 크기에 비해 얼마의 비율의 크기로 결정(1.0em=100%)

% 상대크기, 부모 요소의 컨테이너 크기에 비해 얼만큼의 크기를 차지할지 결정

 

 

문장, 문단과 관련된 스타일

text-align : 정렬 방식(left, right, center, justify 중 선택)

  *justify는 왼쪽에서 오른쪽으로 꽉채우는 정렬 방식(글의 수가 부족하면 띄어쓰기간 공백이 커진다

text-indent : 첫글자 들여쓰기 수준, px등을 이용해서 들여쓰기 적용

text-decoration : 글자 장식, underline, overline, line-through 적용

 

 

크기와 관련된 속성

width : 너비 값

height : 높이 값

 

 

---

마  치  며

아.