CSS 속성 종류

1) font

1. 글꼴의 크기, 종류, 굵기 등을 표현

* 웹폰트 사용 방법 *

1. 구글 웹폰트 검색

2. 마음에 드는 폰트 선택 후 우측에 select this style 선택

3. link 복사하여 head 부분에 삽입

4. font-family에 폰트명 삽입

 

2) text

1. text 요소 정렬 및 표기 옵션

2. text 스타일이 적용된 대상의 하위 요소에서 표현이 된다.

 

3) color

1. 텍스트 요소의 색상을 결정한다. (웹색상표, rgb, rgba 등등..)

4) border

1. 선택된 대상의 테두리, 색상, 굵기, 스타일 설정

2. 상하좌우 등 각 위치에 별도로 적용 가능

3. 굵기, 스타일, 색상이 전부 지정되어야 화면에 반영

5) padding

1. 안쪽여백으로 가로사이즈 + 패딩사이즈가 전체 크기가 된다.

6) margin

1. 바깥여백으로 가로사이즈 + 바깥여백이 전체 크기가된다

7) width, height

1. width는 가로폭, height는 높이를 지정한다.

8) background

1. 배경색, 이미지, 패턴 등을 지정

2. 선택자로 선택된 대상의 배경 옵션 선택 가능

- 기본값 : repeat; (상하반복)

- repeat-x : 가로반복

- repeat-y : 세로반복

- no-repeat : 반복없음 .

- background-position : 배경의 위치를 설정

9) position, z-index

1. position : 배치 옵션 설정

- 생성된 블럭요소는 기본적으로 position: static; 을 가지고있다.

2. position: relative;

-  top, left, right, bottom 속성으로 절대값 위치를 지정 할 수 있다.

- 지정된 상위 요소를 찾아 찾은 대상의 영역이 배치 기준 점이 된다.

- top, left, right, bottom의 속성으로기준점 절대 위치에 배치 할 수 있다.

- static과 유사하게 블럭 요소를 순차적으로 배치가 가능하다.

- position-fixed로 디바이스 크기 기준으로 선택된 대상을 절대값으로 배치할수있다.

3. position: absolute 대상의 절대값 위치 기준이 된다.

- position: absolute로 설정된 대상의 position: relative; 설정된

상위 요소의 절대 위치로 대상 배치 가능

4. z-index : 겹쳐진 요소의 정렬 순서(앞뒤), 값이 높은 순으로 정렬한다.

10) display

- 선택된 대상의 보기 옵션 설정

- 감추기, 보이기(인라인요소, 블럭요소, 인라인블럭요소 등) 변경 가능

- 감추기 : display: none;

- 인라인요소로 변경 : display: inline;

- 블럭요소로 변경 : display: block;

- 인라인-블럭으로 변경(인라인 성격을 띄면서 높이 및 넓이 설정 가능) : display: inline-block;

​

11) line-height

- 텍스트의 높이 설정(세로 자간 설정)

​

12) list-style

- li 태그에 표현되는 불릿 모형을 변경(이미지로 교체 가능)하거나 감춘다.

- 불릿삭제 : list-style: none;

​

13) overflow

- 선택된 대상에 정해진 사이즈에서 하위 요소들의 높이나 넓이가 넘어 갈 경우 보이기 옵션 설정

- 높이나 너비가 넘어간 대상 감추기 : overflow: hidden;

- 스크롤로 하위 요소의 컨텐츠를 볼 수 있도록하기 : overflow: scroll;

14) float, clear

- float : 블럭요소 정렬

- clear : float 설정 부분 혹은 전체 해제

- float 적용된 대상은 높이 인식이 안된다.

- 다음 정렬된 블럭요소에서는 float에 영향을 받으며, float 적용대상의 높이 인식을 못한다.

(소스코드 순서와 상관없이 그 다음에 정렬되는 대상에 영향)

(clear 속성으로 float을 해제)

- float 적용된 대상에 가로 크기가 없을 경우 기본적으로 부모크기 100%를 상속받아

가로 크기 적용되는 부분이 해제가 된다.

- 이와 같은 성격으로 인하여 높이를 인식을 할 수 있도록 처리하는 방법이 몇가지 존재한다.

1. clear를 활용하여 float 해제

2. overflow : hidden -> float 적용된 대상의 상위 요소에 적용