처음 만난 리액트(React) : section 15. Styling - 3 Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성

💡 Font와 관련된 CSS 속성, 기타 많이 사용하는 CSS 속성

Font와 관련된 속성

#title {
	font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>;
    font-size: value;
    font-weight: normal | bold;
    font-style: normal | italic | oblique;
}

font-family

어떤 글꼴을 사용할 것인지 지정

font-family 속성 사용 예시

#title1 {
	font-family: "Times New Roman", Times, serif;
}

#title2 {
	font-family: Arial, Verdana, sans-serif;
}
#title3 {
	font-family: "Courier New", Monaco, monospace;
}

일반적인 글꼴 분류 (Generic font family)

• serif
  • 각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴
• sans-serif
  • 모서리에 테두리가 없이 깔끔한 선을 가진 글꼴
  • 컴퓨터 모니터에서 Serif보다 가독성이 좋음
• monospace
  • 모든 글자가 같은 가로 길이를 가지는 글꼴, 코딩할 때 주로 사용
• cursive
  • 사람이 쓴 손글씨 모양의 글꼴
• fantasy
  • 장식이 들어간 형태의 글꼴

font-size

글꼴의 크기

• px(pixel), em, rem, vw(viewport width)
  • 16 * em = pixels

font-size 속성 사용 예시

#title1 {
	font-size: 16px;
}

#title2 {
	font-size: 1em;
}

#title3 {
	font-size: 10vw;
}

/* viewport 가로 길이의 10%를 의미 */

font-weigh

글꼴의 두께

font-weight 속성 사용 예시

#title1 {
	font-weight: bold;
}

#title2 {
	font-weight: 500;
}

font-style

글꼴의 스타일

font-style 속성의 값들

• normal
  • 일반적인 글자의 형태를 의미
• italic
  • 글자가 기울어진 형태로 나타남
  • 별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것
• oblique
  • 글자가 비스듬한 형태로 나타남
  • 그냥 글자를 기울인 것

기타 많이 사용하는 속성

background-color

Element의 배경 색 지정

• CSS의 색상 값
  • 16진수 컬러 값 : #ff0000
  • 투명도를 가진 16진수 컬러 값 : #ff000055
  • RGB 컬러 값 : rgb(255, 0 ,0)
  • RGBA 컬러 값 : rgba(255, 0, 0, 0.5)
  • HSL 컬러 값 : hsl(120, 100%, 25%)
  • HSLA 컬러 값 : hsla(120, 100%, 50%, 0.3)
  • 미리 정의된 색사의 이름 : red
  • currentcolor키워드 : 현재 지정된 색상 값을 사용

background-color 속성 사용 예시

div {
	background-color: color | transparent;
}

border

테두리를 위한 속성

border 속성 사용 예시

div {
	border: border-width border-style border-color;
}

background-color와 border 속성 실제 사용 예시

#section1 {
	background-color: red;
}

#section2 {
	border: 1px solid black;
}

❕ 참고 링크
https://www.w3schools.com/csSref/default.asp