<이공계기술전문연수> 10. CSS 스타일 속성 기본(2)(폰트, 위치, float, clear:both, 그림자, 그라디언트)

1. 폰트 속성

글자의 크기를 지정하는 스타일 속성이다. 크기 단위 등을 사용한다.

font-size:30px;
font-size:3em;
font-size:large;
font-size:small;

 

font-family 속성

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

 

 

font-style 속성과 font-weight 속성

폰트의 기울기 또는 두께를 조정하는 스타일 속성이다.

 

font-size : 3em;
font-style : italic;
font-weight : bold;

 

line-height 속성

line-height 속성은 글자의 높이를 지정한다.

HTML에서는 글자를 수직 중앙 정렬할 때 많이 사용한다.

 

text-decoration 속성

a 태그에 href 속성을 사용하면 밑줄이 생기고 파란색으로 변경이 되는데, text-deoration 속성을 사용하면 밑줄이
제거된다.

 

 

 

 

 

2. 위치 속성

 

절대 위치 좌표 : 요소의 x 좌표와 y 좌표를 설정해 절대 위치를 지정한다.

상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정한다.

 

 

position 속성

키워드	설명
static	태그가 위에서 아래로 순서대로 배치
relative	초기 위치 상태에서 상하좌우로 위치를 이동
absolute	절대 위치 좌표를 설정
fixed	화면을 기준으로 절대 위치 좌표를 설정

 

z-index 속성

숫자를 적용하며 숫자가 클수록 앞에 위치한다.

 

 

***중요***

 

1. 자손의 position 속성에 absolute를 적용하면 부모는 height 속성을 사용한다.

(부모 태그가 영역을 차지하게 만들 수 있다.)

2. 자손의 position 속성에 absolute를 적용하면 부모의 position 속성에 relative를 적용한다.

(자존 태그가 부모의 위치를 기준으로 절대 좌표를 설정한다.)

 

 

overflow 속성

키워드	설명
hidden	영역을 벗어나는 부분을 보이지 않게 만듬
scroll	영역을 벗어나는 부분을 스크롤로 만듬

 

 

 

 

 

3. float 속성

 

키워드	설명
left	태그를 왼쪽에 붙임
right	태그를 오른쪽에 붙임

 

***중요***

자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden을 적용한다.

clear 속성에 both를 적용해도 마찬가지 기능을 수행하지만 overflow를 더 많이 사용한다.

 

 

 

 

 

4. clear : both 

가로로 자를 수 있는 부분에  아래 코드를 넣어준다.

<div class ="clear"></div>

그리고 이 태그들에 clear:both를 적용한다.

.clear{
	clear:both;
}

 

 

 

 

 

5. 그림자 속성

 

text-shadow 속성

text-shadow : 오른쪽 아래 흐림도 색상;
text-shadow : 5px 10px 5px green;

 

box-shadow 속성

 

box-shadow : 오른쪽 아래 흐림도 색상;
box-shadow : 5px 10px 5px green;

 

 

 

6. 그라디언트

2가지 이상의 색상을 혼합해서 채색하는 기능

 

linear-gradient(각도, 색상 위치);
linear-gradient(45deg, #색상 위치%);