레이아웃
박스모델
: 웹사이트를 구성할때 공백이나 구조를 빠르게 파악할 수 있는 옵션
-
margin
-
padding
-
boarder
-
contents
- contets
열린태그와 닫힌태그 사이 안에 있는 내용물
<body>
<div class="box-model">
Hellow World
</div>
</body>div태그 기준은 Hello World 가 contents
body 태그 기준은 div 태그 전체가 contents
- margin 과 padding
margin과 padding은 특정 오브제를 옮길때(좌표배치작업)
사용하는 css속성
margin은 border기준으로 바깥쪽이
margin border와 contents 사이 안쪽이 padding
.box-model {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
margin-left: 100px;
margin-top: 100px;
margin-right: ;
margin-bottom: ;
padding-left: 100px;
padding-top: 100px;
padding-right: ;
padding-bottom: ; }
이렇게 길게 쓸수도 있지만,
.box-model {
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
margin: 100px 0 0 100px;
(margin: top right bottom left)
padding: 100px 0 0 100px;
(padding: top right bottom left)
**한줄로도 작성 가능
코드가 길어질수록 브라우저 로딩속도가 느려지기때문에
짧게 한줄로 쓰기**
마진 병합 현상
1.형제지간 발생
<html부분 >
<css부분>
.margin-one {
width: 100%;
height: 100px;
background-color: yellow;
margin-bottom: 100px;}
.margin-two {
width: 100%;
height: 100px;
background-color: blue;
margin-top: 50px;}
margin bottom 의 100px 공간을 margin top 과 공유하고 있는데,
숫자가 큰 값이 작은 값을 먹어 버린다(병합)
150px가되는게 아니라 100px 가 된다
- 부모자식간 발생(가장 많이 발생하는 현상)
<html부분>
<div class="margin-parent">
<div class="margin-child"></div>
</div>
<css 부분>
.margin-parent {
width: 300px;
height: 300px;
background-color: yellow;
}
.margin-child {
width: 150px;
height: 150px;
background-color: blue;
}
파란색만 움직이는 것이 아니라 노란색 부분도 함께 움직이는 현상 ->부모자식간의 마진 병합 현상
이때는 position속성을 이용하여 해결할수 있다
position: absolute;inline 과 block의 차이점
inline
x축정렬 나란히 배열 공간을 만들수 없고
상하배치작업(margin-tom,bottom, padding-top,bottom) 불가능
block
y축정렬 줄바꿈 공간을 만들수 있고,
상하배치작업(margin-tom,bottom, padding-top,bottom) 가능
예시)
html부분
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
css부분
h1 {
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
span {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
위 사진 처럼
block은 공간을 만들수 있지만, inline은 공간을 만들지 못하고
공백이 생기는 이유는 h1태그도 margin과 padding값을 가지고 있기 때문에
margin 0
padding 0값을 넣어줘야 한다.
display
span태그를 block요소로 사용하고싶고, inline요소 특징으로 바꾸고 싶을때 쓰는 것
h1 {
👉 displaly: inline
width: 100px;
height: 100px;
background-color: yellow;
margin-top: 100px;
}
span {
👉 display: block;
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
결과
x축 정렬이면서 width,height값이 적용됐으면 좋겠고
상하배치 작업까지 하고싶다!
(inline,block 속성은 메뉴를 만들때 쓰임)
👉 displaly: inline-block;
vertical-align
뒤죽박죽 배치된 값을 inline요소 안 형제관계속에서
숫자가 가장크기가 큰 순서대로 정리해주는 태그
html부분
<span <class="inline">Inline</span>
<span class="inline-block">Inline -Block</span>
<img src="https://via.placeholder.com/200">
✔ img태그는 display가 inline-block 의 성격을 갖고있다
img태그에 width,height적용이 가능하고 연달아
입력했을때x축정렬이 적용되고, inline요소의 성격을 가지고 있기때문에
inline-block 의성격을 갖고 있기때문에 vertical-align 적용가능
css부분
.inline-block {
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
}
.inline, .inline-block img {
👉vertical-align: top(middle,bottom);
👉vertical-align: middle; }
(가장많이 사용된다)
🚀position 속성💥
내가 선택한 영역을 2차원으로 만들 것 인지 차원으로 만들 것인지
결정짓는 속성 값 (홈페이지는 2차원과 3차원을 조합해서 만든다.)
1. margin-top 사용시 부몸 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top, right, bottom, left 속성을 이용하여 위치변경 할때 속성을 사용할 수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지 (2차원O, 3차원X)
position: static
2차원에 포함되는 속성 값
-
부모가 높이 값을 가지고 있지 않아도 자식이 갖고 있다면 부모에게 영향을 준다.
-
position static은 margin-top을 사용하면 부모자식 지간에 발생하는 마진 병합 현상이 일어난다.
-
position static 은 top bottom left right 사용하지 못한다.
=모든html태그는 static 상태이다 = 모든 html은 2차원으로 시작한다.
position: relative
혼합형
margin padding은밀려서 top left right bottom 은 내가 주체가 되어 움직임
-
margin-top을 적용했을때 마진 병합 현상이 일어난다
-
top, bottom, left, right 사용가능 하나 현재 있었던 위치 기준으로 좌표가 형성된다.
-
부모가 높이 값을 가지고 있지 않으면 자식의 높이 값이 부모에게 영향을 준다
position: absolute
3차원적 특징을 갖고 있다
-
margin-top을 적용했을때 마진 병합 현상이 일어나지 않는다.
-
top, bottom, left, right 사용할수있지만, 좌표의 기준점이 브라우저를 기준으로 형성되어있다.
-
부모가 높이 값을 가지고 있지 않으면 자식의 높이 값이 부모에게 영향을 줄수없다
position: fixed
3차원 브라우저 영역중 하나
1.top, bottom, left, right 속성을 사용할수 있는데 이때 좌표기준점은 브라우저로 바뀐다.(브라우저왼쪽상단 부분을 기준)
2.margin-top을 사용했을때 부모자식 지간의 발생하는 현상이 없다.
3.부모가 높이 값을 가지고 있지 않을때 자식의 높이 값이 영향을 줄수 없다.
