4.CSS_레이아웃

1. margin, padding, border width, height

 width :  가로의 길이 

height : 세로의 길이 

border :  content의 테두리 선 

margin :  콘텐츠 테두리 선으로 부터 밖으로 의 공간 

padding : 콘텐츠 테두리 선으로 부터 안으로의 공간 

<div id="box" width="500" heigth="500">

//스타일시트
#box{ margin: 10px; padding: 20px }

 ->가로길이 500 세로길이 500인 박스의 바깥쪽은 상하좌우 10px만큼씩 뛰우기 안쪽으로는 상하좌우 20px만큼씩 뛰우기 

• margin: 20px 같은 표현은 상하좌우 모두 20px을 의미합니다
• margin: 30px 10px은 상하 30px, 좌우 10px을 의미합니다.
• margin: 30px 10px 20px 50px은 위 30px, 오른쪽 10px, 아래 20px, 왼쪽 50px을 의미합니다.
• margin: 30px 10px 40px은 위 30px, 좌우 10px, 아래 40px을 의미합니다

즉 방향의 위부터 시계방향으로 회전하여 위 오른쪽 아래 왼쪽 순서로 설정합니다.

2. position, top, left, bottom, right

position 

• static : 정상적인 흐름에 따라 배치
• relative : 정상 위치를 기준으로 배치 (상대적위치)
• fixed : 고정 , 페이지가 스크롤 되더라도 항상 같은 위치에유지 
• absolute : 페이지 스크롤과 함께 이동 , 부모중 기중점이 있는경우 그기준으로 절대적인 위치 
• sticky : 스크롤위치에 따라 relative와fixed 뷰포트기분배치하고 스크롤되면고정

3.box-sizing 

• content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다

4. z-index

레이아웃 z축 순서를 지정하는것 큰 값을 가진 요소가 작은값 요소 위를 덮음

5.float

정렬하기 위해 사용되는 속성 

뛰운다는 느낌

보통 일반적인 배치가 아닌 텍스트 및 인라인 요소가 감싸는 컨테이너 좌우측을 따라 배치

• none : 띄우지 않음 (기본값)
• left : 왼쪽에 띄움
• right : 오른쪽에 띄움

6. display

속성을 어떻 요소로 바꿀지 결정한다.'

인라인요소도 블록 요소로 전환이 가능하다. 

• none : 보이지 않음 (영역도 차지하지 않음)
• block : 블록 박스
• inline : 인라인 박스
• inline-block : block과 inline의 중간 형태 (block 성격에 가까움) -줄바꿈은 되지 않지만 크기를 지정함