개발하는 루루언니

CSS: 기본 서식 스타일 총정리 font-size / font-weigth/line-height / font-family/font-style/text-decoration/text-transform/text-align/text-shadow 본문

컴퓨터 정보/html.css.js 기초

CSS: 기본 서식 스타일 총정리 font-size / font-weigth/line-height / font-family/font-style/text-decoration/text-transform/text-align/text-shadow

혜닝혜루 2022. 11. 28. 19:25
728x90
반응형

기본 서식 스타일 총정리

 

✔ font-size : 텍스트의 크기를 지정하는 속성

value : px , em , pt % , rem

rem 은 반응형 웹사이트 만들때 사용하는 단위!


 

✔ font-weigth : 글꼴의 두께를 지정하는 특성

 

100-900 (px을 적지않음) bold(기본값) bolder lighter

bold 기본적으로 들어가져있는 폰트에 볼드는 빼는것은  normal ( 400=normal, 700 = bold)


✔ line-height : 줄 간격을 지정하는 특성

value : px em pt % rem


✔ font-family : 글꼴을 지정하는 속성

value :  ' font-name '


✔ font-style : 문자 스타일 (기울림체)

vlaue : normal= 기울림체를 되어있는걸 하지않을때 사용  italic(기울림체) oblique


✔color : 글꼴 색을 지정하는 특성

value : color:name #000000 rgb(0,0,0) rgba(0,0,0,0.5) a 는 투명도 조절 

예시로 검색인데 0.5 를 투명도로 넣으면 50%  투명도가 된다.


✔text-decoration : 텍스트 줄 표시 / 제거

value : none underline(밑줄) overline(윗줄) line-through (취소선) 


✔text-transform : 텍스트 대문자 및 소문자 변환

value : none , capitalize (각 첫스타트를 대문자로 ) , uppercase (강제로 다 대문자) , lowercase (강제로 다 소문자)


✔text-align : 문자 정렬 방법을 지정하는 속성

value : center left , right justify(양쪽정렬)


✔text-shadow : 텍스트 그림자 효과

value (1 ) : [x-축 거리] [y-축 거리] [퍼짐 거리정도] [색상]

 

 

728x90