CSS_자주 쓰이는 CSS 속성

Margin (외부 여백)

• 요소의 바깥쪽 여백으로, 다른 요소와의 간격을 조정
• 배경색과 관계없이 투명함
• 상하좌우 값을 개별적으로 지정하거나, 단축 속성을 사용할 수 있음
  => margin-top, margin-bottom, margin-left, margin-right

css

.div1 {
	/* 방향별 속성 단축 형식 */
  margin: 10px;
  /* 상, 우, 하, 좌 모두 10px */

  margin: 10px 50px;
  /* 상하 10px, 좌우 50px */

  margin: 10px 20px 30px;
  /* 상 10px, 좌우 20px, 하 30px */

  margin: 10px 20px 30px 40px;
  /* 상 10px, 우 20px, 하 30px, 좌 40px */
}

Padding (내부 여백)

• 콘텐츠와 테두리(Border) 사이의 안쪽 여백을 설정
• 요소의 배경색은 패딩 영역까지 확장
• 개별 값 또는 단축 속성을 사용 가능

Border (테두리)

• 요소의 가장자리에 테두리를 추가.
• 테두리 두께, 스타일, 색상을 지정할 수 있음
• 스타일 값 예: solid, dotted, dashed, double, none 등.

Box-Sizing

box-sizing을 변경하면 크기 계산 방식을 조정할 수 있음

• content-box (기본값): width와 height는 콘텐츠 크기만 포함
• border-box: width와 height에 padding과 border를 포함

웹 폰트 (web-font)

• 구글 웹 폰트, 눈누 웹 폰트 (대중적)
• 모든 브라우저에서 보는 폰트를 통일
• 폰트를 다운로드 하는 것이 아니라 link 태그에 걸려 있는 주소에서 폰트를 가져오는 방식
• 보통 기본 폰트는 body, *, root, html 등등 태그에 작성
• @font-face
  • CSS에서 웹폰트를 정의하기 위해 사용되는 규칙!
  • 이를 통해 웹사이트에 사용자 정의 폰트를 추가 하고,
    사용자 기기에 폰트가 설치되어 있지 않아도 사용할 수 있도록 폰트를 가져올 수 있음

• font style

  • 글자색 : color
  • 글자 크기 : font-size
  • 폰트 굵기 : font-weight
    lighter, normal, bold, bolder
    100 ~ 900 (100 단위로)
  • 폰트 모양 : font-style
    normal, italic, oblique
  • 정렬 : text-align
    center, left, right, justify(양쪽 정랼)- 기본값
  • 글자선 : text-decoration
    underline, line-through, overline, none
  • 줄 높이 : line-height
    px, 1.2(default)

1. 구글 font 적용 방법

html

<link rel="preconnect" href="https://fonts.googleapis.com" />

css

body {
  font-family: "Doto", sans-serif; 
  /* "Doto 사용 , 없다면 sans-serif 대체*/
  font-optical-sizing: auto;
  /* 텍스트의 크기에 따라 글꼴 디자이너가 의도한 세부적인 모양으로 자동 조정 */
  font-weight: 800;
}

2. 눈누 폰트 적용

css

@font-face {
  font-family: "establishRetrosansOTF";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/establishRetrosansOTF.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

* {

  font-family: "establishRetrosansOTF";
  font-weight: 300;
}