Day62 - [css]폰트, 문단, 디스플레이

이번에는 css의 폰트, 문단, 디스플레이에 대해서 알아 봅시다.

 

폰트

폰트는 글자의 글꼴 등을 말합니다.

 

웹폰트

먼저 웹폰트 를 사용하는 방법에 대해서 알아 봅시다.

 

웹폰트는 외부 웹의 폰트를 가져와서 사용하는 방법인데요

 

유료도 있고 무료도 있으니까 잘 알아보고 사용하셔야 합니다 ㅎㅎ;

 

구글폰트를 검색해 주세요 ( 무료 )

구글폰트에 들어가면 여러가지 폰트들이 나오는데, 그 중에 원하는 걸 선택합니다.

원하는 걸 선택했다면, 그 중에서 또 원하는 것을 선택합니다.

그러면 오른쪽에 아래 그림과 같은 창이 생성이 되는데, 여기서 link 방식으로 사용할건지, import 방식으로 사용할 건지 정하신 후에, 복사해서 붙여 넣으면 됩니다.

link 로 사용하기.

import로 사용하기.

사용하기 편한대로 사용을 해주면 됩니다.

 

폰트색상

폰트색상은 글자의 색깔을 지정하는 방법 인데요

 

식별자 { color : 색상 ; } 으로 사용합니다.

 

색상은 rgb 와 16진수로 사용하는 방법이 있습니다. ( rgb 는 색상 , a 는 투명도 )

문단

문단정렬

문단정렬은, 문단의 위치를 정하는 방법 입니다. 좌우는 text-align 을 사용 합니다.

상하는 (기준이 잡혀있는 요소들을 나란히 배치할 때는) vertical-align 을 사용 합니다.

예를 들면, img 파일 같은 것들

상하는 (기준이 되는 태그가 없을 때) height 와 ling-height 를 동일하게 맞춥니다.

문단 숨기기 ( 스크롤 )

문단이 너무 길 때는, 스크롤을 만들어 주는 방법이 있습니다.

 

overflow 를 사용 합니다.

※ 문장이 넘치게 하도록 하기 위해서, height 와 width 를 사용 했습니다.

 

scroll -> 항상 스크롤을 만듭니다

hidden -> 넘치는 부분을 감춥니다

 

auto -> 알아서 설정하도록 합니다 ( 넘치면 스크롤 , 안 넘치면 안 생김 )

visible -> 넘쳐도 그냥 보여 줍니다. ( 기본값 )

디스플레이

디스플레이는, 블럭 요소 와 인라인 요소 를 내 마음대로 변경하는 것을 말합니다.

 

display : inline -> 블럭 요소를 인라인 요소로 변경

display : block -> 인라인 요소를 블럭 요소로 변경

disply : inline-block -> 줄바꿈은 일어나지않음(인라인), block요소들의 크기, 높이, 정렬 기능을 사용할 수 있게 해줍니다

※ width -> 넓이

※ height -> 높이

※ border -> 블럭에 선을 만듬

※ text-align -> 글자의 가로 정렬

※ line-height -> 글자의 높이 정렬

※ text-decoration -> a태그의 밑줄

 

display : none -> 화면에 나오지 않도록 숨김

 

응용 1.

응용 2.