2장. 웹사이트 레이아웃에 영향을 미치는 요소
1. 박스모델
[박스 모델 구조- margin과 padding의 차이]
- margin-left : border바깥쪽에서 왼쪽에 여백을 만듦.
- padding-right : border안쪽에서 왼쪽에 여백을 만듦. 공간이 여백을 포함한 크기로 변경되는 점 유의.
- 한줄로 작성 가능 margin : 100px 0 0 100px >> top right bottom left (12시 시계방향)
2. Block요소와 Inline요소
- Block :
p태그, 줄바꿈 현상, width/height 공간 만들기 가능, 상하 배치 값 적용 가능 - Inline :
a,span태그, 줄바꿈 없음, 공간 만들기 불가능, 상하 배치 적용 값 적용 불가
3. 마진 병합 현상
[형제 지간의 마진 병합]
공통적인 부분을 공유하고 있는 box의 margin에서 margin-bottom과 margin-top중 숫자가 큰 값으로 적용
[부모 자식간의 마진 병합]
<main><article> </article></main>
main:부모 / article:자식 : article margin-top 지정 시 자식인 article뿐만 아니라 부모인 main 에도 영향을 미치게 됨
4. 레이아웃에 영향을 미치는 CSS 속성
[display]
- block과 inline 요소의 성격을 바꿀 때 사용, inline-block을 사용하면 두 요소의 성격을 모두 가짐
- p { display: inline; } // p태그를 inline성향으로 바꾸려고 할 때
- a { display: block; } // a태그를 block성향으로 바꾸려고 할 때
- a { display: inline-block; } // 두 요소의 성격을 모두 가짐 (x축 정렬이면서 공간 크기, 상하 배치 가능)
[float]
- 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 : 같은 층에 정렬
- 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것
- 레이어가 겹쳐지지 않은 상태로 왼쪽에서부터 정렬 > float: left;를 연속적으로 입력
[clear]
- float에 대한 속성을 제어하고자 할 때 (float과 clear는 악어와 악어새 개념)
- float을 마지막으로 사용한 지점. 그 다음에 나오는 태그에 clear 적용
- clear: both; >> float right, left 양쪽 기능을 꺼줌
[브라우저와 공간 사이의 공백 제거하기]
html,body태그는 기본적으로 margin, padding 값을 갖고 있으므로 초기화를 해주어야 함- 혹은 * 로 모든 html 태그 선택 가능 >> margin: 0; padding: 0;
sukki의 velog*^^*