[CSS] CSS PART.7(폰트 속성, float 속성)

폰트 속성 : 글자와 관련된 스타일 속성.

 

 font-size 속성

- 글자의 크기를 지정하는 스타일 속성.

참고) h1태그의 기본크기: 32px, p태그의 기본크기: 16px

 

키워드와 값을 통해서 변경이 가능합니다.

 

 

- em : 배수 이므로, p태그의 기본 사이즈는 16px 이므로 a와 같은 크기

 

 

 

font-family 속성

- 폰트를 지정하는 스타일 속성.

- 일반적으로 한 단어로 이루어진 폰트는 따옴표를 사용하지 않습니다.  

  하지만 두 단어 이상으로 이루어진 단어는 따옴표를 반드시 적용합니다.

 

 

원하는 글꼴을 넣어주고, 마지막에는 브라우저가 설정해주는 이름인 serif 또는 sans-serif를 넣어주는 것이 기본 형식입니다.

 

 

 

font-style 속성

- 폰트의 기울기 지정하는 스타일 속성.

- 키워드 : italic

 

font-weight 속성

- 폰트의 두께를 지정하는 스타일 속성.

- 키워드:700/800/900/bold...

- 일반 폰트 두께:400, 두꺼운 폰트 두께:700

- 두께를 지원하지 않는 폰트는 font-weight 속성을 사용해 두께를 조절할 수 없습니다.

 

 

 

 

line-height 속성

- 글자의 높이를 지정.

- 글자를 수직 중앙 정렬할 때 사용(수직 정렬하는 태그 없음)

 

 

 

 text-align 속성

- 글자의 정렬과 관련된 스타일 속성.

 

text-decoration 속성

 

 

 

 

float 속성 1

- 웹 페이지를 만들 때 가장 많이 사용하는 스타일 속성.

 

- 키워드

  left :태그를 왼쪽에 붙임.

  right : 태그를 오른쪽에 붙임.

 

  img 태그: Inline 형식의 태그. -

  p 태그: block 형식의 속성 태그.

→ 그림과 글자가 분리되어 출력.

 

위의 형태를 가지고 실행. - img 태그: Inline 형식의 태그, p 태그: block 형식의 속성 태그 이므로 각각 나뉘어서 출력 됩니다.

 

 

float : left 를 이용하여 사진을 왼쪽으로 붙임으로 함께 같은 줄에 출력 될 수 있도록 만들었습니다.

 

 

float 속성2

: float 속성을 사용한 수평 정렬

- float 속성을 사용하면 태그를 수평으로 정렬할 수 있습니다.

 

 

왼쪽 정렬을 통해서 한 라인에 같이 출력되도록 만들었습니다.

 

오른쪽 정렬 방식의 순서를 유념 - 오른쪽부터 1번 2번으로 출력 된다.

 

 

 

float 속성 - layout 활용

자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다.

 

 

< 중앙 정렬 >

상하 영역 = 0 , 좌우 영역 = auto , 브라우저의 현재 폭을 계산해 width:960px; 은 고정시키고 전체 크기를 계산해서 항상 중앙 정렬합니다.

 

 

 

 

 

Section과 rooter는 항상 붙어 다니기 때문에 붙어서 올라옵니다.

(수평 정렬의 효과가 footer까지 적용)

 

이러한 상황에서 footer는 적용되지 않아야 합니다.

 

 

 

- Float 속성 배제 방법

1) 부모 태그인 wrap영역에 overflow:hidden; 을 사용

 

2) footer의 속성인 clear:both; 을 활용