[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 : 높이 값
마 치 며
아.
'Develope > CSS' 카테고리의 다른 글
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자) (0) | 2023.05.05 |
---|---|
[3] HTML로 작성한 페이지에 Style을 적용해보자 (0) | 2023.05.05 |
[1] 개념과 선언하기 (0) | 2023.05.05 |
댓글
이 글 공유하기
다른 글
-
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
[4] CSS셀렉터의 종류 및 설명(조합,상태,특성 선택자)
2023.05.05 -
[3] HTML로 작성한 페이지에 Style을 적용해보자
[3] HTML로 작성한 페이지에 Style을 적용해보자
2023.05.05 -
[1] 개념과 선언하기
[1] 개념과 선언하기
2023.05.05