#1. 폰트 관련 속성

1. 폰트 관련 속성

1) font-family 속성

  • 요소를 구성하는 텍스트의 글꼴을 정의한다.
  • 글꼴명을 속성값으로 지정한다.
  • 글꼴의 이름을 쉼표( , )로 구분하여 여러개를 기입해 우선 순위를 지정할 수 있다. (왼쪽부터 우선순위)
  • 접속자의 PC를 기준으로 하는 글꼴이 명시되어야 한다. (접속자의 환경에 해당 글꼴이 없을 경우 정상적으로 표시되지 않는다.)
p {
  font-family: times, monospace, serif;
} 
/* times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정 */

 

2) font-size 속성

  • 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. (주로 px 단위를 사용한다)
  • 특정 요소에 적용된 글자와 문단 관련 CSS는 자식 요소에게도 상속된다.
p {
  font-size: 20px;
}

 

※ 사이즈 단위

  • px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 (가장 많이 쓰인다고 볼 수 있다.)
    • 해상도와 관련, 1개의 점이 1px 이다.
  • rem : html 태그의 글씨 크기에 대응하는 상대적인 크기 (html 태그의 크기를 1로 본다)
    • html 태그의 글씨 크기가 커지면 rem 사이즈도 커진다.
    • 2rem == html 태그의 글씨 크기 * 2
  • em : 부모 태그(상위 태그)의 글씨 크기에 대응하는 상대적인 크기 (부모 태그의 크기를 1로 본다)
    • rem 과 비슷하지만 상위 태그의 크기에 대응한다는 차이점이 있다.
    • 5em == 상위 태그의 글씨 크기 * 5
    • 부모 태그가 100px 이라면 0.5em은 50px이 된다.
  • vw :  화면의 가로 크기와 관련 있는 단위.
    • 1vw는 화면 가로 크기의 1/100(백분의일)
    • 화면 가로의 크기가 500px 이라면, 5vw는 500 * 0.05 = 25px
    • 화면 가로의 크기가 500px 이라면, 10vw는 500 * 0.1 = 50px
  • vh : 화면의 세로 크기와 관련 있는 단위.
    • 1vh는 화면 세로 크기의 1/100
    • 계산 방법은 vw와 같다.

 

3) font-weight 속성

  • 글자의 굵기를 표현한다.
  • 100 ~ 900 사이의 100단위 숫자값을 사용하기도 한다. (400이 normal 사이즈에 해당)

※ 사용 가능한 속성값

  • bold, bolder, normal, light, lighter
p {
  font-wigth: bold;
}

 

4) color 속성

  • 텍스트의 색상을 정의한다.
  • 키워드 : 를 통해 미리 정의된 색상을 사용한다. (red, blue .. )
  • RGB색상코드 : # + 여섯자리 16진수 값을 사용해 색상 지정한다. (#ff0000)
  • RGB함수 : red, green, blue의 수준을 각각 정의해 색상을 지정한다. (rgb(100%,0%,0%)
p {
  color: red;
  color: #FF0000;
  color: rgb(100%,0%,0%);
} 
/* 셋 다 빨간색이다. */

※ RGB란? 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의 하는 방식. 모든 수치가 가장 높을 때 흰색이 된다.

 

5) line-height 속성

  • 텍스트 한 줄의 높이를 지정한다. (px, %단위 표현)
  • % 단위로 할 경우 글씨 크기를 기준으로 지정한다.
p {
  line-height: 80px
}

 

2. 웹 폰트

1) @font-face

  • CSS에서 font-family 속성으로 지정한 글꼴이 접속자의 PC에 설치되어 있지 않을 경우 표시되지 않는 문제를 해결하기 위해 폰트파일을 웹상에 올려두고 사용자가 내려받아 사용할 수 있게 하는 방법이다.
  • font-family 속성으로 글꼴을 지정할 때는 사용자 지정 폰트 이름을 적용 한다.
@font-face {
  font-family: ("사용자 지정 폰트 이름");
  src: local: ("실제 폰트 이름"), url(("웹상의 폰트파일 경로")), format("truetype");
}

/* 폰트 지정 */
선택자 {
  font-family: ("사용자 지정 폰트 이름");
}

 

2) 구글 웹 폰트 (https://fonts.google.com/)

  • <link /> 태그 또는 @import 를 사용하여 해당 폰트를 연결한다.
  • 구글에서 운영하는 웹 폰트 사이트. 여러가지 폰트들을 사용할 수 있고, 무료라서 저작권 문제가 없다.

1. 구글 폰트 사이트에서 원하는 폰트를 선택한다. (여러개를 선택할 수 있다.)

2. <link> 카테고리(또는 @import)의  내용을 복사하여 <head> 태그 안에 붙여 넣는다.

3. font-family 내용을 복사하여 선택자 속성에 붙여 넣어 사용한다.

<head>
  <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=Hi+Melody&display=swap" rel="stylesheet">
  /* 폰트에 따라 주소가 달라진다. */
  
  <style>
    p {
      /* 폰트에 따라 달라진다 */
      font-family: 'Hi Melody', cursive;
    }
  </style>  
</head>
<body>
  <p>구글 폰트 사용</p>
</body>

 

3) 아이콘 폰트

  • 특수문자에 반응하여 글꼴 파일에 저장되어 있는 기호가 표시되게 하는 특수 폰트
  • 많은 종류가 있지만, font awesome 이 가장 많이 사용되고 있다.
    • version4 까지는 무료로 사용 가능.
    • version5,6은 부분 유료화, 도메인이 없는 경우 사용 불가능.

 

※ Font Awesome 4 (https://fontawesome.com/v4/)

  • 무료로 도메인의 제약 없이 사용할 수 있는 가장 일반적인 버전

1) 다운로드 받아 사용하기

  • https://fontawesome.com/v4/get-started/페이지의 중간 부분에서 Download 클릭해서 다운 받는다
  • 다운로드 받은 파일을 압축해제 하고, css폴더와 fonts 폴더를 작업중인 위치로 복사한다
    • css폴더와 fonts폴더는 반드시 같은 폴더안에 위치해야 한다.
  • html의 head태그에서 font-awesome.min.css 파일을 연결한다.
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<i class="fa fa-window-restore" aria-hidden="true"></i>

 

2) cdn 방식 사용하기

  • 파일을 직접 다운로드 받기 번거로운 경우 온라인에 공개되어 있는 CSS를 직접 참조하여 사용할 수 있다.
  • https://cdnjs.com/libraries/font-awesome/4.7.0 에서 3번째 링크(font-awesome.min.css 로 끝나는 주소) 를 복사하여 head 태그안에 link태그 연결한다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  • 사용 방법은 다운로드 받아 사용하는것과 동일하다.
<i class="fa fa-university" aria-hidden="true"></i>

※ .min 이 있고 없고의 차이

min : 프로덕션 빌드 (압축파일) - 불필요한 주석을 제거한다. (로딩속도 빨라짐)

없는건 작성한 원본을 뜻한다.

 

 

 

#2. 문단 관련 속성

1. 문단 관련 속성

1) text-align 속성

  • 블록 내에서 텍스트의 가로축 정렬 방식을 정의한다.

※ 사용 가능한 속성값

  • left : 텍스트를 왼쪽에 정렬
  • right : 텍스트를 오른쪽에 정렬
  • center : 텍스트를 가운데 정렬
  • justify : 텍스트를 양끝에 정렬 (마지막 줄 제외)
p {
  text-align: center;
}

 

2) text-indent 속성

  • 첫번째 줄에 대한 들여쓰기를 정의해준다.
  • 단위는 px을 사용하며, 마이너스( - ) 값을 주면 왼쪽으로 들여쓰기가 된다.
p {
  text-indent: 20px;
}

 

3) text-decoration 속성

  • 텍스트에 밑줄, 윗줄, 취소선, 깜박임 효과를 준다.

※ 사용 가능한 속성값

  • none : 기본값(밑줄이 있는 경우 없애준다.)
  • underline : 밑줄
  • overline : 윗줄
  • line-through : 취소선 (가운데 선) 
  • blink : 깜박임 효과 (크롬에서는 적용되지 않는다. 거의 없는 속성)
p {
  text-decoration: line-through;
}

 

4) vertical-align 속성

  • 어떠한 요소를 기준으로 수직 정렬을 한다.
  • 어떠한 요소를 기준으로 텍스트를 배치해야 하기 때문에 텍스트 주변의 이미지나 input 요소에게 부여해야 한다.

※ 사용 가능한 속성값

  • top : 위로 정렬
  • middle : 가운데  정렬
  • bottom : 아래 정렬
[HTML]
<div id="text4">
  <img src="./img/sample.png" width="50" alt="사진">
  사진을 기준으로 정렬
 </div>

[CSS]
#text4 img{
  vertical-align:middle;
}

 

5) letter-spacing, word-spacing 속성

  • letter-spacing : 글자간의 간격을 지정(자간)
    • 마이너스 값을 주면 좁아진다.
  • word-spacing : 단어간의 간격을 지정(어간)
    • 공백을 기준으로 간격을 지정, 마이너스 값을 주면 좁아진다.
p {
  letter-spacing: 5px;
  word-spacing: 10px;
}

 

6) word-wrap 속성

  • 박스보다 내용이 긴 경우 텍스트를 박스 밖으로 나가지 않도록 줄바꿈을 해준다.

※ 사용 가능한 속성값

  • normal : 기본값, 글자가 길어져도 끊지 않고 한 줄에 표시
  • break-word : 단어단위, 글자가 길어지면 단어 단위로 줄바꿈한다.
  • break-all : 글자 단위
p {
  word-wrap: break-word;
}


/* 텍스트 자동 말줄임 처리 */
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* 박스 밖으로 나간 텍스트를 말줄임 표시로 처리해준다 */

 

2. 텍스트 그림자 효과

1) text-shadow 속성

  • 텍스트에 그림자 효과를 넣어준다.
text-shadow: x축 y축 blur-radius color
  • x축 : 본체와 그림자의 가로축 거리 (px 단위), +값인 경우 오른쪽, -값인 경우 왼쪽 방향
  • y축 : 본체와 그림자의 세로축 거리 (px 단위), +값인 경우 오른쪽, -값인 경우 아래쪽 방향
  • blur-radius : 그림자의 번짐 정도 지정(px 단위)
  • color : 그림자 색상 지정
p {
  color: blue; /* 텍스트 색상 지정 */
  
  /* 오른쪽으로3px 아래로3px 그림자번짐5px 검은색 */
  text-shadow: 3px 3px 5px #000;
}
  • 그림자 관련 값들을 콤마로 구분하여 여러개 지정할 경우 마지막에 지정한 그림자가 가장 밑에 위치한다
    • 위에서 밑으로 쌓이는 구조라고 생각하면 된다.
p {
  text-shadow: 
  0px 0px 4px #ccc,  <- 맨 위의 레이어
  0px -5px 4px #ff3, 
  2px -10px 6px #fd3, 
  -2px -15px 11px #f80, 
  2px -19px 18px #f20;  <- 맨 아래의 레이어
}
저작자표시 비영리 변경금지

'국비수업 > HTML & CSS' 카테고리의 다른 글

[CSS] Float 속성  (0) 2022.03.04
[CSS] 박스모델 / Display 속성  (0) 2022.03.03
[CSS] CCS의 기본구조 / 선택자  (0) 2022.03.01
[HTML] 멀티미디어 / 입력 요소  (0) 2022.02.26
[HTML] 문장 관련 요소 / 표 그리기  (0) 2022.02.25

+ Recent posts

티스토리툴바