7/2 [레이아웃] 박스모델, 마진병합, display, vertical-align, position

김영은·2021년 7월 2일

💡 학습한 내용

🌳 박스모델 설명 추가자료사이트

https://yjshin.tistory.com/entry/CSS-5-CSS-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%EB%B0%95%EC%8A%A4-%EB%AA%A8%EB%8D%B8-%ED%8C%A8%EB%94%A9-%ED%85%8C%EB%91%90%EB%A6%AC-%EB%A7%88%EC%A7%84-%EC%95%84%EC%9B%83%EB%9D%BC%EC%9D%B8

✅ 박스모델을 구성하는 요소

margin(마진) padding(패딩) border(테두리) content(내용)

💨 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
💨 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.
💨 테두리(border) : 내용과 패딩 주변을 감싸는 테두리
💨 마진(margin) : 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다.

💨 margin / padding : 좌표 배치 작업을 할 때 사용
선택된 영역이 주체가 되어 움직이는 것이 아닌 공백에 의해서 타의적으로 움직인다.

❗️❕ padding 사용 시 주의점
실제 노란색 박스의 width값은 벌어진 공간(padding) + 원래 width이다.
선택된 영역의 공간의 크기가 달라질 수 있다.

💨 margin / padding을 :left top right bottom; 으로 각각 기입하지 않고 적는 법
margin: 100px 0 0 100px;
[시계방향(left-top-right-bottom)으로 한줄로 정리] margin: 100px 0 0 100px - 한줄로 정리함으로써 웹사이트 로딩속도를 줄일 수 있다.

-html과 body에 기본적으로 margin padding 이 기입되어있으므로 0으로 적용시켜주어야 없어진다.
html, body {
margin: 0;
padding: 0;
}

✅ margin 병합현상

형제지간 :

<div class="margin-one"></div>
<div class="margin-two"></div>

.margin-one {
    width: 100%;
    height: 100px;
    background-color: yellow;

    margin-bottom: 100px;
}

.margin-two {
    width: 100%;
    height: 100px;
    background-color: blue;

    margin-top: 150px;
}

인접하는 block 요소들끼리 margin의 더 큰 값을 먹어버리는 것.

부모지간 :

    <div class="margin-parent">

        <div class="margin-child"></div>
        
    </div>

.margin-parent {
    width: 300px;
    height: 300px;
    background-color:yellow;
}

.margin-child {
    width: 150px;
    height: 150px;
    background-color: blue;

    margin-top: 100px;
}

해결방법 : child만 공백을 주기 위해서는 position을 이용한다-.margin-child {position :absolute;

✅ display

display 사용을 통해 선택한 태그의 진렬을 바꿀 수 있음.
display: inline / block / inline-block

💨 display: inline-block : 한 줄에 여러 개를 넣을 수 있는데 상자로 변환되어 안의 컨텐츠의 사이즈와는 상관없이 내가 지정한 박스의 width나 height에 맞춰서 표기 되는 것.
(→ 상자. 한 줄에 여러 개 진열 가능 한 것 )
💨 display: block : 상자이지만 한 줄에 하나만 들어갈 수 있음.
(→ 상자. 한 줄에 하나만 들어감 )
💨 display: inline :
(→ 물건. )

✅ vertical-align

-inline 에서만 사용가능
{vertical-align: bottom; }
형제 관계에 있는 inline 중에서 가장 크기가 큰 이미지를 기준으로 하단에 정렬
{ vertical-align: top; }
형제 관계에 있는 inline 중에서 가장 크기가 큰 이미지를 기준으로 상단으로 정렬
{ vertical-align: middle; }
형제 관계에 있는 inline 중에서 가장 크기가 큰 이미지를 기준으로 중간으로 정렬

-img 태그는 inline-block 요소를 가지고 있기 때문에 vertical-aligh 사용가능

✅ position (⭐️⭐️⭐️⭐️⭐️)

선택한 영역을 몇 차원으로 만들 것인지 결정짓는 속성값

1.2.3차원

position 경우의 수
1. margin-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top. right. bottom. left 속성을 사용할 수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지

position 속성값
1. static(기본 값 / 2차원) 요소를 문서 흐름에 맞추어 배치.

margin-top을 사용했을 때 부모자식간의 margin 병합현상이 일어남
top: left right bottom 사용 x
부모가 높이값이 없을 때 자식의 높이값이 부모에게 영향을 줄 수 있음.

모든 html 태그는 2차원에서 시작한다.

fixed(3차원) 지정한 위치에 고정하여 배치.(배너광고 같은 것)
-부모자식간의 margin 병합현상이 없음.
-top: left: right: bottom 속성은 브라우저 기준으로 움직임.

부모가 높이값이 없을 때 자식의 높이값이 부모에게 영향을 줄 수 없음.

relative(2.3차원) 이전 요소(주로 부모 요소)에 자연스럽게 연결하여 위치를 지정.
-margin-top을 사용했을 때 부모자식간의 margin 병합현상이 일어남
-top: left: right: bottom 속성은 최초로 있었던 위치기준으로 움직임
공백에 밀러서 움직이는 것이 아닌 자신이 주체가 되어서 움직임.