[CSS] 글자와 텍스트 스타일 2-2

Yumin Jung·2023년 1월 18일
0

css 기본 문법

선택자 {
  속성1: 값;
  속성2: 값;
  /* ... */
}

font-style 속성

글자를 기울일 때 사용가능. italic과 oblique.

italic vs olbique

italic과 oblique은 얼핏 보면 비슷하지만,
italic : '기울여서 쓴' 서체.
oblique : 본래 서체를 기울여놓은 것.

서체마다 둘 다 있거나 한 쪽만 있거나 둘 다 없을 수도 있는데
이들은 한쪽이 없을 시 상호 교차되어 사용된다.

font-weight 속성

글자의 굵기를 조절한다.
서체가 어떤 굵기를 지원하느냐에 따라 normal과 bold중에 선택하거나, 100~900 사이 100 단위의 수치를 사용한다.

font-size 속성

말 그대로 글자의 크기를 지정한다.

단위 : px, %, em, rem
px : 절대값으로서 픽셀 단위, 사용되는 픽셀의 수.
% : 각 부모 요소와의 상대적 크기. 100% = 1em이다.
rem은 맨 바깥에 있는 html 요소에만 비례하여 크기를 정한다, 요소의 중첩에 영향을 받지 않는다.

css는 자손에게 상속된다. (따로 속성을 매기지 않는 이상)
-> 예외도 있음 (position 속성 등)

text-decoration 속성

밑줄, 취소선, 물결선 등으로 글을 꾸며준다.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

text-transform 속성

알파벳의 대소문자 표시에 사용된다. (한글로 된 문서에는 의미가 없다.)
HTML, CSS와 같이 대문자로 작성된 텍스트는 capitalize에 영향을 받지 않는다.

text-transform: capitalize

첫 글자만 대문자 (단어 별)

text-transform: uppercase

전부 대문자

text-transform: lowercase

전부 소문자

text-shadow

텍스트에 그림자를 줄 수 있다.

'x좌표, y좌표, 흐림(선택), 색' 형식으로 그림자를 넣을 수 있고 쉼표로 구분해서 여럿을 넣을 수도 있다.
크롬 계열 브라우저의 개발자 도구를 사용하면 손쉽게 값을 조정할 수 있다.(그림자 편집기 기능)

크롬 개발자 도구
CTRL+SHIFT+I

profile
문과를 정말로 존중해

0개의 댓글