CSS 기본 속성 다루기

◎CSS 스타일 속성
 스타일 속성은 background-color, color 등을 말한다.

1.CSS3 크기 단위
 주요 크기 단위이다
 1) % - 백분율 단위 ex) 100%, 10%
 2) em - 배수 단위 ex) 1em, 0.5em, 2em
 3) px - 픽셀 단위 ex) 0,40px (0은 px를 안 붙여도 px로 인지함)
 4) 그 외 cm, mm, inch 등이 있다.
%와 em은 상대적 크기를 지정하고 px는 절대적 크기를 지정한다.
font-size 속성이 16px이 기본크기이다.

2. 색상 단위
1) #000000 - HEX 단위
2) RGB(red,green,blue) - RGB 단위
3) RGBA(red, green, blue, Alpha) - RGBA 단위
 *alpha는 투명도를 나타내며 0.0 ~ 1.0 사이의 숫자를 지정한다.
   0.0은 투명한 상태, 1.0은 불투명한 상태이다.
4) hsl(hue, saturation, lightness) - HSL 단위 (색상, 채도, 명도)
5) hsla(hue, saturation, lightness, alpha) -HSLA단위
  rgb 값을 참조하려면 http://www.colorpicker.com 참조.

3. display 속성
1) none - 태그를 화면에 보이지 않게 한다.
2) block - 태그를 block 형식으로 지정
3) inline - 태그를 inline 형식으로 지정
4) inline-block - 태그를 inline-block 형식으로 지정

** display : inline
 - width , height 속성이 적용되지 않는다.
 - margin 속성은 좌우만 적용되고 상하는 적용되지 않는다.
 
4. visibility 속성
 대상을 보이거나 보이지 않게 한다.
1) visible - 태그를 보이게 만듦
2) hidden - 태그를 보이지 않게 만듦
3) collapse - table 태그를 인식 못하게 함

** display:none; 과 visibility:hidden 과의 차이점
 1) display:none - 해당 공간 자체가 보이지 않는다.
 2) visibility:hidden - 해당 공간은 있는데 내용이 안 보인다.

5. opacity 속성( 투명도 )
 태그의 투명도를 나타내는 속성이다.
0.0 ~ 1.0 사이의 값을 지정하며, 0.0 투명한 상태, 1.0은 불투명한 상태이다.

6. 박스 속성
 나중에 웹 페이지 레이아웃을 만들 때 중요한 속성이다.

1) width, height 속성
  width는 너비, height는 높이를 지정하는 속성이다.
  실제 컨텐츠의 영역이다.
2) margin, padding 속성
  margin은 박스의 바깥 여백을, padding은 박스의 내부 여백(데이터와 박스 경계선)을 나타낸다.

** 박스의 실제 공간
전체 너비 = width +2*(border+margin+padding)
전체 높이 = height+2*(border+margin+padding)

 margin, padding은 상하좌우로 여백을 지정할 수 있다.

7. box-sizing 속성
1) content-box - 기본으로 정용되는 속성임
전체 너비 = width +2*(border+margin+padding)
전체 높이 = height+2*(border+margin+padding)

2)border-box - 박스 너비와 높이에 border와 padding이 포함되어 있다.
박스 너비 = width+2*margin
박스 높이 = height+2*margin

8. border-width, border-style 속성
1) border-width : 테두리의 넓이를 지정
2) border-style : 테두리의 모양을 지정

9. border-radius 속성
 박스의 사각형을 둥근 사각형으로 만들 수 있다. (예전에는 이미지로 처리)
ex)
 border-radius :20px;
 border-radius : 20px, 30px, 40px, 50px; (좌상,우상,우하,좌하 순)
  -값이 클수록 둥근 정도가 크다

10. 배경 이미지 속성
<형식>
background-image : url('파일명');
 - 이미지를 여러개 중첩해서 넣을 수 있다.
 - 여러 개 지정한 경우 왼쪽에 위치한 것이 앞에 나온다.
 ex)
background-image : url('파일명'), url('파일명');

** background-size 속성
- 이미지의 크기를 조절할 수 있는 속성이다. 그림 크기는 크기 단위를 지정한다.
ex)
 background-size :  100%;
 background-size : 100% 150px; (첫번째는 너비, 두번째는 높이)
* 주의할 점은 중간에 쉼표가 있으면 안된다.
   쉼표가 있으면 각각 첫번째 이미지, 두번째 이미지의 너비로 인식한다.

■ background-repeat 속성
 이미지의 반복 여부를 지정한다.
1) no-repeat : 한번만 출력한다.
2) repeat-x : x축으로 반복 수행한다.
3) repeat-y : y축으로 반복 수행한다.
4) repeat : 무한 반복 수행한다. (바둑판 모양)

■ background-attachment 속성
 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 속성
1) scroll : 기본 값이면 화면 스크롤에 따라 배경 이미지가 스크롤된다.
2) fixed :  스크롤을 이동해 배경 이미지가 스크롤 되지 않는다.

■ background-position 속성
 배경이미지의 위치를 지정하는 속성이다
1) background-position : top( left, right, bottom)
2) background-position : x축크기
3) background-position : x축 크기, y축 크기

11. 폰트 속성
 글자와 관련된 속성이다.

■ font-size 속성
 - 글자의 크기를 지정하는 속성이다.

■ font-family 속성
 - 글자의 폰트를 지정하는 속성이다.
 - 두 단어 이상으로 이루어진 속성값은  따옴표로 묶는다
ex)
 'Times New Roman',Serif

■ font-style
 - 폰트의 기울기를 의미한다.
normal(기본값), oblique, italic 등의 속성값이 있다.

■ font-weight
 - 폰트의 두께를 의미한다.
 - 100 ~ 900 ( 백단위 지정), bold, bolder, light, lighter 등이 있다.

■  line-height 속성
 줄 간격을 지정한다. 현재는 줄 간격보다는 글자를 수정 중앙 정렬하고자 할 때 사용한다.

■ text-align 속성
 글자를 정렬하는 속성이다. 속성값으로 center, right, left 등이 있다.

■ text-decoration 속성
 하이퍼링크에 밑줄이 있는 것을 없앤다.
ex)
text-decoration : none

o위치 속성
1) 절대적 위치 좌표
2) 상대적 위치좌표

■  position 속성
 - 태그의 위치 설정을 변경할 때 사용한다.
1) static : 태그가 위에서 아래로 순서대로 배치함.
2) relative : 초기 위치 상태에서 상하좌우로 위치를 이동함
3) absolute : 절대적 위치 좌표를 설정
4) fixed : 화면을 기준으로 절대적 위치 좌표를 설정
 - static, relative는 상대적 위치좌표,
   absolute,fixed는 절대적 위치좌표를 사용함

■ left 속성과 top 속성
 - position 속성과 함께 사용한다.
 - left 속성은 왼쪽에서의 거리를 지정함. top 속성은 위에서부터의 거리를 지정함
 - bottom 속성과 right 속성도 같은 개념이다.

■ z-index
 나중에 작성한 상자가 위에 나타나는데 이것을 변경하고 싶으면 z-index 속성을 사용한다.
 숫자를 입력하는데 숫자가 크면 위에 배치된다.
ex)
 z-index: 100;

★ position 속성에 absolute 속성을 적용하면 부모 태그가 영역을 차지하지 못함
 - 위에서 box 클래스의 부모 div 태그가 영역을 차지하지 못함

■ 문제해결방식 2가지
1. 자손에서 position 속성을 absolute를 적용하려면 부모에게 height 속성을 입력한다.
 - 이렇게 하면 부모 태그가 영역을 차지한다.
body > div { height:100px}

2. 자손에게 position 속성을 absolute를 지정하려면 부모의 position 속성을 relative를 지정한다.
 - 위의 내용은 계속 나오는 말이다. 이렇게 하면 자손 태그가 부모의 위치를 기준으로 절대좌표를 설정한다.
body > div{position:relative}

■ overflow 속성
 - 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성이다.
1) hidden : 영역을 벗어나는 부분을 보이지 않게 처리함
2) scroll : 영역을 벗어나는 부분을 스크롤로 처리함
ex)
 overflow: hidden;
 overflow: scroll;
 overflow-x : scroll;
 overflow-y : scroll;

■ float 속성
 웹 페이지를 만들 때 가장 많이 사용하는 속성 중 하나이다.
1) left : 태그를 왼쪽에 붙임
2) right : 태그를 오른쪽에 붙임
 -float 속성은 원래는 이미지 처리를 위해 만들었지만 지금은 웹 페이지의 레이아웃을 만들 목적으로 사용된다.

★ 꼭 기억!
 자손에 float 속성을 적용하면 부모의 overflow 속성은 hidden으로 적용한다
  - 레이아웃을 구성할 때 가장 많이 사용하는 공식이다.

■ text-shadow 속성
 글자에 그림자를 부여해 주는 속성이다.

<형식>
text-shadow : 5px  5px  5px   black
       오른쪽 아래 흐림도  색상

■ box-shadow 속성
박스에 그림자를 부여해 주는 속성이다.
<형식>
box-shadow : 5px  5px  5px red;
 - 의미는 text-shadow와 같다