HTML & CSS

CSS-2

seo dori 2023. 1. 3. 17:25

font style

font family

font family는 폰트 종류를 지정하는 속성

아래 세개의 폰트값은 브라우저가 첫번째 폰트를 지원해주면 첫번째 폰트 적용 아닐시 두번째 폰트가 적용된다. 여러개의 폰트는 예비로 있는 폰트이다. 폰트 이름에 띄워쓰기가 있을시 " "를 사용해야한다. 

#name{

  font-family: Georgia, "Times New Roman", Times, serif;

}

 

font-size

폰트의 크기를 지정해준다.

h1{

  font-size: 40px;

}

h4{

  font-size: 50px;

}

원래 h1의 글씨 크기는 h4보다 커야하지만 적용해준 font-size 대로는 h1이 작다. 브라우저에서는 먼저 태그를 확인하고 그에 맞게 스타일을 적용합니다. 하지만 해당태그나 class, id에 CSS값이 있다면 해당 스타일을 우선 적용합니다.

 

font-weight

글씨 두께를 조절하는 property이다.

#bye{

 font-weight: bold;

}

 

font-style

글씨 스타일 

.hi{

 font-style : italic;

}

 

color

글씨 색적용

.hi{

 color : pink;

}

색상 표현 방법 종류 : hex색상코드, rgb값, hsl(색상, 채도, 명도)

 

 

Text Style

text-align

text정렬은 왼쪽, 가운데, 오른쪽 정렬이 있다.

.left{

  text-align : left(center, right);

}

 

indent

들여쓰기

.hi{

 text-indent : 40px;

}

문장사이에 스페이스 추가 원할 때

<p>스페이스 &nbsp; &nbsp; &nbsp; 띄어짐?</p>