웹사이트 레이아웃

1. 박스모델

1) margin 과 padding 차이

• margin : border 바깥쪽에서 여백을 만듦
• padding : border 안쪽에서 여백을 만듦

top , right , bottom , left 에 여백을 만들 수 있음
공간이 여백을 포함한 크기로 변경되니 유의할 것.

2) 순서대로 작성 가능

top right bottom left 순서대로 한줄에 작성 가능

div {
	margin: 10px 0 10px 0;
    padding : 0 10px 0 10px;
}

block 요소와 inline 요소

1) block 요소의 특징

<style>
    p {
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
</style>

• p 태그가 대표적
• 줄바꿈 현상이 나타남
• width height 값 사용 가능 (공간 만들기)
• margin padding 값 사용 가능 (상하 배치)

2) inline 요소의 특징

• 줄바꿈 현상 없음 (옆으로)
• width height 값 적용 불가
• margin padding bottom 값 적용 불가

3. 마진 병합 현상

1) 형제지간

형제지간에선 숫자가 큰 값으로 적용된다.

<div class="box1">Hello World</div>
<div class="box2">Hello World</div>

.box1 { margin-bottom: 150px; } /* 적용값 */
.box2 { bottom-top: 100px; }

2) 부모자식간

자식 뿐만 아니라 부모에도 영향을 미친다.

<main role="main">
    <article>
    </article>
</main>

article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}

자식인 article 뿐만 아니라 부모인 main 에도 영향을 미친다.

4. 레이아웃에 영향을 미치는 속성

1) display

block 과 inline 요소의 성격을 바꿀 때 사용한다.

p { display: inline; }
a { display: block; }
a {display: inline-block; }

여기서 inline-block을 사용하면 두 요소의 성격을 모두 가진다.

2) float

선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용한다.
이름 그대로 선택자를 띄워 새로운 레이어층을 만든다.

<div class="left"> Hello World </div>
<div class="right"> Hello World </div

.left { float: left; }
.next {float: left; }

3) clear

float 에 대한 속성을 제어하고자 할 때 사용한다.

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>

footer { clear: both; }

4) 브라우저 공백 지우기 (초기화)

브라우저마다 기본적으로 공백이 있기 때문에 초기화해줘야함.

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>

html 과 body 태그는 margin 과 padding 값을 가지므로 초기화~

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

아니면 * 로 모든 html 태그 선택 가능