font-style
- normal : 보통 모양
- italic : 글자를 기울여서 쓰는 모양
- oblique : 글자를 쓴 뒤에 기울인 모양
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받는다.
실행예제<body> <p>chikorita1</p> <p class="it">chikorita2</p> <p class="ob">chikorita3</p> <p class="ii">chikorita4</p> <p class="ih">chikorita5</p> </body>p{ font-style: normal; } .it{ font-style: italic; } .ob{ font-style: oblique; } .ii{ font-style: initial; } .ih{ font-style: inherit; }결과
font-weight
- 글자의 굵기 조절
- normal, bold, 100 ~ 900사이 100단위 수치 등 있다.
- 서체가 어떤 굵기를 지원하는지에 따라 다르다.
예시(HTML코드는 font-style과 같음)p{ font-style: normal; } .it{ font-style: italic; } .ob{ font-style: oblique; } .ii{ font-style: initial; } .ih{ font-style: inherit; }결과
font-size
1. px : 절대값으로 픽셀 단위이다.
- %, em : 100% = 1em이고, 부모 요소와의 상대적 크기를 나타낸다. (예시로 font-size=130%이고 할아버지 아빠 아들 손자 이렇게있다면 할아버지에 비해 아빠가 130%커지고 아들이 아빠에 비해 130%커지고 손자가 아들에 비해 130% 커진다.)
- rem : html요소와의 상대적인 크기를 가져서, em이나 %처럼 요소의 중첩에 영향을 받지 않는다.
style weight size사용 예시
div { font-size: 1.2em; }<body> <!--html--> 몬스터볼 <!--최상위--> <div>치코리타1 <!--몬스터볼에 비해 1.2em(120%)만큼 커짐--> <div>치코리타2 <!--치코리타1에 비해 1.2em만큼 커짐--> <div> <p>치코리타3-1</p> <!--치코리타2에 비해 1.2em만큼 커짐--> <p>치코리타3-2</p> <!--치코리타 3-1과 같은 레벨이므로 똑같은 크기--> </div> </div> </div> </body>실행결과
문제발생
p태그로 감싸면 부모자식간의 관계도 나누어지는 줄 알고 복습해보는 내내 예제 코드의 div태그 부분을 p태그로 해놓은 뒤에 왜 안되지 하고있었다. 그렇게 구글링을 통해 p태그 그 자체로는 부모자식간의 관계를 나누는 데에는 사용되지 않고 div태그와 section태그를 통해 부모자식관계를 나눌 수 있고, class를 사용하여 나눌 수 있다는 것을 알게 되었다.
class를 사용하거나, div또는 section태그를 잘 활용해보자.
text-decoration
- 밑줄, 취소선, 물결선 등으로 글을 꾸며주는데 사용된다.
text-transform
- 영어로 작성된 텍스트에 대해서 적용
- lowercase : 전부 소문자로 변환
- uppercase : 전부 대문자로 변환
- capitalize : 첫 문자 대문자로 변환, 대문자로 작성된 텍스트는 영향 안받는다.
decoration, transform사용예시
<body> 몬스터볼 <div>치코리타1 <div>치코리타2 <div> <p>치코리타3-1, chikorita3-1.1 <!--이 부분 전부 소문자로 작성됨--> </p> <p>치코리타3-2</p> </div> </div> </div> </body>div { font-style: normal; font-weight: 400; font-size: 1.2em; text-decoration: underline; text-transform: capitalize; }실행결과
text-shadow
- 텍스트에 그림자 효과 부여
- x,y좌표, 흐림(선택), 색 형식으로 그림자를 넣기도하고 쉼표로 구분해서 여러개도 가능하다.
사용예시
div { /*css*/ font-style: normal; font-weight: 400; font-size: 1.2em; text-decoration: underline; text-transform: capitalize; text-shadow: 1px 1px green, -1px -1px green; }html코드는 위의 decoration과 동일
실행결과
꾸준히 진득하게 앞으로