CSS의 다양한 속성2

CSS에서의 크기 단위

1. 백분율 단위(%)

   기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정

2. 배수 단위(em)

   기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정

3. 픽셀 단위(px)

   스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정

*1배 = 1em = 100%

크기에 관한 속성

1. height

-높이를 설정.

→높이를 %나 em단위로 설정하면 웹 브라우저 크기에 따라 상대적으로 변함

2. width

-너비를 설정.

→너비를 %나 em단위로 설정하면 웹 브라우저 크기에 따라 상대적으로 변함

여백에 관한 속성

1. padding

컨텐츠와 테두리 사이의 여백, 간격. 

1. margin

테두리와 이웃하는 요소 사이의 여백, 간격.

-top / -right / -bottom / -left

위 / 오른쪽 / 아래 / 왼쪽 의 여백 지정

위치에 관한 속성

1. display

속성 값

-block : block 속성의 div 처럼 모든 너비를 차지

-inline : span 처럼 컨텐츠의 내용 만큼만 너비를 차지

2. float

속성 값

-left / right : 왼쪽 / 오른쪽으로 정렬.

-clear : float속성 적용된 뒤의 요소들이 더 이상 float영향 받지 않도록 설정.

3. overflow

컨텐츠의 크기가 컨테이너 요소보다 클 때 어떻게 처리할지 설정.

-hidden : 넘치는 부분은 잘려서 보여지지 않음.

4. position

정적 위치를 지정.

-static

position 속성의 기본 값.

좌우로 원하는 만큼 이동 수치를 설정해도 전혀 이동하지 않고 가지고 있는 html구조에 의해 위치.

float속성을 이용해 좌우로 배치할 수 있음.

-relative

static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다.

원래 본인이 있던 자리를 기준으로 설정한 가로, 세로만큼 이동하여 위치.

-absolute

top, right, bottom, left 속성 값을 이용해 요소를 원하는 위치에 배치할 수 있다.

부모의 왼쪽 상단을 기준으로 자리 잡음.

부모가 position속성이 없다면 브라우저 화면의 좌측 상단을 기준으로 설정.

-Fixed

위치의 기준이 부모가 아닌 브라우저 창(Browser Window)임.

페이지를 스크롤 하더라도 계속 고정되어 표시됨.

항상 그 위치에 고정.

-sticky

CSS에 비교적 최근에 추가

스크롤 하지 않을 때는 static position처럼 동작하다가 스크롤 할 때는 fixed position과 비슷하게 동작

sticky를 감싸는 부모가 overflow:hidden을 가지고 있으면 동작하지 않음

부모 요소가 있으면 부모 요소의 크기 안에서만 동작.

sticky를 주고 top, left, right, bottom 속성 중 하나 이상을 사용해야함.

인터넷 익스플로러 하위 버전에서는 아직 구현 안됨.

원하는 위치로 지정하려면 부모로 감싸고 부모 요소를 이동시켜야함.

부모 요소로 감쌀 때 부모 요소를 벗어나면 다시 fixed가 풀림.

sticky를 감싸는 부모가 overflow : hidden을 가지고 있으면 fixed가 동작하지 않음.

-left, right, top, bottom 태그

태그의 위치를 원하는 곳으로 지정할 수 있음.

1. 주로 position 속성과 함께 사용하며 position 속성의 값이 static 일 때는 위치 정보가 적용되지 않음.
2. 4가지 속성 중 반대되는 left, right 와 top, bottom 을 동시에 적용하면 나중에 선언한 값이 적용됨.
    - left : 문서 좌측에서 태그 좌측 좌표 거리
    - right : 문서 우측에서 태그 우측 좌표 거리
    - top : 문서 상단에서 태그 상단 좌표 거리
    - bottom : 문서 하단에서 태그 하단 좌표 거리

z-index

1. 박스들이 중첩되는 경우 박스들의 수직 위치를 조정하기 위한 속성.
2. z-index 값이 높을수록 위, 작을수록 아래에 배치
3. position 속성이 적용된 경우에만 의미가 있음.

5. 정렬

-margin : 0 auto : 가운데 정렬.

-margin-right/left/bottom/top : 원하는 곳에 여백을 줌으로써 정렬.