학습내용

박스모델, 마진병합, display, vertical-align, position
github 소스코드: https://github.com/YesolLee421/DaeguAISchool2021/tree/main/EX_4 index.html, css/style.css

박스 모델

• html 요소의 레이아웃을 구성하는 4가지 요소로 margin, padding, border, content이 있다. 레이아웃의 공백, 구조를 빠르게 파악할 수 있도록 도와주는 옵션이다.
• margin, padding으로 인한 움직임은 선택된 요소가 주체적으로 움직이는게 아니라 새로 생성된 공백으로 인해 요소가 이동되는 것이다.
• html, body 등 대부분의 html요소는 margin, padding 원래 가지고 있으니 margin, padding값 디폴트로 만들고 제작하기

속성 사용

• margin: border 바깥쪽
• padding: border 안쪽, content 바깥쪽
• 시계방향으로 값 주기: top right bottom left (공백으로 분리)
• 코드 길이를 줄이면 파일 용량 줄어서 웹사이트 로딩속도가 빨라진다.
• box-sizing: border-box ->제작한 공간 용량 안에서 border, padding 적용해줌

.box-model {
    margin: 100px 0 0 100px;
    padding: 100px 0 0 100px;
    box-sizing: border-box;
    
    margin-left: 100px;
    margin-top: 100px;
    padding-top: 100px;
    padding-left: 100px;
}

마진 병합 현상

1. 형제 태그 간: margin top/bottom 겹칠 때 공백값이 작은 쪽은 큰 쪽 안에 포함되어버림.
2. 부모 자식 태그 간: 자식의 margin값 변경했는데 부모도 같이 변경되는 현상 -> position 속성 이용

.margin-one {
    width: 100%;
    height: 100px;
    background-color: yellow;
    margin-bottom: 100px;
}
.margin-two {
    width: 100%;
    height: 100px;
    background-color: blue;
    margin-top: 150px;
}

.margin-parent {
    width: 300px;
    height: 300px;
    background-color: blueviolet;
}
.margin-child {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: chartreuse;
    margin-top: 100px;
}

display 속성

html 요소는 block, inline 둘 중 하나의 진영에 속하게 된다. display 속성은 태그의 진영을 바꾸는 속성으로 x축 정렬이면서(inline) 공간 점유 및 상하좌우 배치 가능(block)하도록 inline-block값을 줄 수 있다.

h1 {
    width: 100px;
    height: 100px;
    background-color: chartreuse;
    margin-top: 100px;
    display: inline-block;
}
span {
    width: 100px;
    height: 100px;
    background-color: chocolate;
    margin-top: 100px;
    display: block;
}

vertical align

형제 관계의 태그들 중 가장 크기가 큰 것을 기준으로 가로로 놓인 요소들을 정렬한다. inline요소에만 사용할 수 있으며 <img>태그의 경우 원래부터 inline-block속성을 가지고 있어 정렬이 가능하다.

<span class="inline">inline</span>
<span class="inline-block">inline-block</span>
<img src="https://via.placeholder.com/200" alt="">
<h1>block</h1>

.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: chocolate;
}
.inline-block, .inline, img {
    vertical-align: middle;
}

position 속성

웹사이트의 여러 차원

• 1차원 (선), 2차원(평면. 주변 요소 이동하면 그 옆의 요소도 밀려서 같이 움직인다.), 3차원(깊이, 레이어. 한 요소가 움직여도 깊이가 다르면 다른 요소 움직임에 영향 주지 않는다.)
• 웹사이트는 2차원과 3차원이 섞여서 구성된다.

position 속성 개요

position: 웹사이트 요소를 2차원으로 할지 3차원으로 할지 결정함

position 속성별 경우의 수 3가지

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

position 속성 4가지: static, fixed, relative, absolute

경우의 수	static	fixed	relative	absolute
차원	2차원	3차원	2차원+3차원	3차원
부모자식간 마진병합	일어남	안 일어남	일어남	안 일어남
top속성 사용	사용불가	사용가능 (브라우저 기준)	사용가능(최초 위치 기준)	사용가능(부모에 따라 기준 변화)
자식의 높이값 부모영향	영향 줌	영향 안 줌	영향 줌	영향 안 줌

• absolute: 부모가 2차원이면 top등 이동 속성이 브라우저 상단 왼쪽 기준 / 부모가 3차원이면 최초 위치 기준

부모 position X 자식 position별 경우의 수 3가지 따져보기

github 소스코드: https://github.com/YesolLee421/DaeguAISchool2021/tree/main/EX_4 position.html, css/position-style.css

• 자식이 static: 마진병합은 부모가 2차원일 때 일어남(static, relative), top 사용불가, 길이는 영향 줌
• 자식이 fixed: 마진병합 안일어남, top사용가능, 길이 영향 안 줌 (부모 position 영향 없음)
• 자식이 relative: 마진병합은 부모가 2차원일 때 일어남(static, relative), top 사용가능, 길이 영향 줌
• 자식이 absolute: 마진병합 안일어남, top 사용가능(부모가 static일 때만 브라우저 기준), 길이 영향 안 줌

어려웠던 내용

1. 확실히 position 4가지 속성이 각각 특성이 달라서 실제 사용하면 헷갈릴 것 같다.

해결방법

1. markdown 표 만들기를 검색해서 position 4가지 속성의 특징을 표로 분리했다. 또한 부모 position X 자식 position별로 전부 테스트해봤더니 좀 더 정리되었다.

소감

오늘 요소의 위치를 결정하는 속성들을 많이 배웠다. 특히 요소들을 가로로 두는 방법을 알게 되었으니 더 다양한 레이아웃을 구현할 수 있을 것 같다. 또한 어제 before, after 등을 설정하려고 인터넷 검색했을 때 나왔던 수많은 설정 중 display, position 등의 의미를 알게 되어 기분이 좋다.