CSS태그2

font 관련 태그

• font는 여러개 사용 가능
  font: font-style | font-variant | font-weight | font-size/line-height | font-family

※ 폰트 속성에는 font-size, font-family 속성이 반드시 들어가야 합니다.

글자 크기 지정 태그

font-size: 12px;

글꼴 설정 태크

font-family: "폰트명";
font-family: "폰트명", sans-serif;

• 폰트를 지정하고, 컴퓨터에 해당 폰트가 없으면 적용되지 않습니다.

• 폰트 여러개 지정이 가능하고, 첫번쨰 폰트가 없으면 다음에 지정된 폰트가 적용됩니다.
  마지막 폰트는 OS에 기본설치되는 generic-family 폰트( serif, sans-serif, monospace)를 지정하는게 일반적입니다.

• 사용하는 폰트에 공백 또는 특수문자, 숫자 등이 존재하는 경우 ""로 감싸야 합니다.

• 구글 웹폰트: https://fonts.google.com/

  1. 크롬으로 접속 후 언어 한국어로 변경
  2. 원하는 글꼴 선택
  3. Get Font 클릭
  4. <> Get embed code클릭
  5. Copy code
  6. 아래와 같이 HTML hade에 코드 붙여 넣기
  7. style에 적용할 대상 작성

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
<style>
    span {
      font-family: 'Nanum Brush Script', sans-serif;
    }
</style>

글자 굵기 지정 태그

font-weight: bold;
글자 굵기 지정 : normal, bold, lighter

글자 기울기 태그

font-style: italic;
글자 기울기: normal, italic

소문자를 대문자로 변환하는 태그

font-variant: small-caps;
소문자를 대문자로 변환 : small-caps

텍스트의 줄간격을 지정하는 태그

line-height: 150%;
line-height: 1.5;
텍스트의 줄간격을 지정

• 기본 line-height 는 약 120%

들여쓰기 태그

text-indent: 30px;
들여쓰기, 한 문단에서 첫번째 줄에만 적용됩니다.

텍스트 정렬 태그

텍스트 정렬: (center, right, left, justify)
text-align: center;
conter: 가운데 정렬
right: 오른쪽 정렬
left: 왼쪽 정렬
justify: 양쪽 정렬

링크 라인 제거 및 text 라인적용 태그

text-decoration: none;
링크의 라인을 제거하거나, text에 라인을 적용합니다.
none : 라인제거
overline : 텍스트 윗줄
line-through : 텍스트 중간줄
underline : 텍스트 밑줄

글자 사이 간격 지정 태그

letter-spacing: 30px;

단어 사이 간격 지정 태그

word-spacing: 30px;

※ CSS에서 텍스트의 공간을 조정하는 속성들이지만, 서로 다른 요소에 적용됩니다.

box_model

• html태그는 사각형 박스로 다루어집니다.
• box는 content, padding, border, margin으로 구성됩니다.

  content : 요소의 텍스트, image 등의 실제 내용
  padding : border(테두리) 영역으로 테두리 두꼐
  margin : border(테두리) 밖에 위치하는 요소의 외부 여백 영역