12.auto 와 %, Negative Margins
1. Box Model(중급)
-
1.width : % 란 ? : % 라 하면은 바로 부모를 기준으로 몇 퍼센트를 쓸것인지를 명시함
-
2.width: auto 란 : padding과 margin이 먼저 적용된후, 그것에 맞게 부모의 크기가 적용됨(auto)
-
3.height : % 란 ? : % 라 하면은 바로 부모를 기준으로 몇 퍼센트의 높이를 쓸건지를 명시함
-
4.height : auto 란 : auto 는 엘리먼트의 자식 엘리먼트의 height 만큼 적용된다.
-
부모의 크기가 500px일때
- width 가 100%을 줄때
.box { width: 100%; margin-left: 100px; background-color: blue; }부모의 기준으로 100%를 계속 쓰므로 margin을 주었어도 부모의 너비가 500px이라고 하면 .box의 너비도 500px
- width 가 100px을 줄때
.box { width: 100px; margin-left: 100px; background-color: blue; }직접 width 를 주면 나머지에 margin으로 채운다고 하였다.(명시되지는 않음), 따라서 왼쪽에는 100px 오른쪽에는 명시되지 않은 300px margin이 있음
- width 가 초기값일때 (width : auto)
.box { margin-left: 100px; background-color: blue; }margin이 다 적용된 상태에서 적용되므로 부모의 너비가 500px이라고 하면 .box의 너비도 약 400px
-
3.width 값이 없을때 초기값은 100%가 아닌 부모의크기(auto)
-
4.width 는 box-sizing에 의해서 결정 된다.
* {
box-sizing: border-box;
}
.box {
width: 100%;
background-color: blue;
}
<!--라고하면 width는 border-box의 100%-->
2. Negative(-) Margins
-
1.Negative margin
-
width : auto 일때 : padding과 margin이 먼저 적용된후, 부모의 크기에 맞게 조정되어 적용된다. == auto
-
margin 이 + 가 적용될때
-
margin : auto 란??
-
* {
box-sizing: border-box;
}
.box1 {
width: 700px;
height: 700px;
margin: 100px auto;
background-color: gray;
}
.box2 {
width: auto;
height: 100px;
background-color: red;
margin-left: 100px;
margin-right: 100px;
}
우리가 처음에 배웠듯이 width값이 없으면 즉 width:auto 이면, 자식은 부모의 width와 같은값이 적용된다고 했다. 단 margin 이나 padding이 있을경우 그것이 먼저 적용된후 , 부모의 width와 같은 값이어야한다. 따라서 margin-left 와 margin-right 가 100px씩 먼저 적용된후, 부모와 같은 값이어야 하므로 border-box가 500px이 적용된다. 따라서 보이는 화면은 더 짧게보임
- margin 이 - 가 적용될때
* {
box-sizing: border-box;
}
.box1 {
width: 700px;
height: 700px;
margin: 100px auto;
background-color: gray;
}
.box2 {
width: auto;
height: 100px;
background-color: red;
margin-left: -100px;
margin-right: -100px;
}
우리가 처음에 배웠듯이 width값이 없으면 즉 width:auto 이면, 자식은 부모의 width와 같은값이 적용된다고 했다. 단 margin 이나 padding이 있을경우 그것이 먼저 적용된후 , 부모의 width와 같은 값이어야한다. 따라서 margin-left 와 margin-right 가 -100px씩 먼저 적용된후, 부모와 같은 값이어야 하므로 margin을 제외한 나머지 박스가 900px이 적용된다. 따라서 보이는 화면은 더 길게보임
- width가 auto가 아니면서 , margin에 - 를 주었을때
* {
box-sizing: border-box;
}
.box1 {
width: 700px;
height: 700px;
margin: 100px auto;
background-color: gray;
}
.box2 {
width: 500px;
height: 100px;
background-color: red;
margin-left: -100px;
margin-right: -100px;
}
우리가 처음에 배웠듯이 width값이 주어지면, 나머지는 명시되지않은 margin으로 채우고 margin-left에 의해 그 크기는 변하지 않은 상태에서 왼쪽으로 이동하는 듯한 모습을 보임
꿀팁
- 1.텍스트가 테그 범위를 벗어나는 경우 word-break: break-all; 를 해주면 해결된다.
<body>
<div class="box">
<p>
sdfffffffffffffffffffffffffffffffffffdafkjdkf;jasdfkjsjkf;;adkfja;fjsklfjas'fjas;fjas;jlfs;jfsjdksjfakjdf;a;ksjfskljfak;sjfkj;dfjkfjkasf;kjsfkjsf;jkdfjaskf;jaskfjskl;jdfk
</p>
</div>
</body>
- word-break: break-all 적용전
- word-break: break-all 적용후
- 2.top: 0 , bottom : 0 , left : 0 , right : 0 는 width : 100% 와 height 100%와 같다.
.box1 {
width: 700px;
height: 700px;
margin: 100px auto;
background-color: gray;
position: relative;
}
.box2 {
position: absolute;
background-color: red;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* width 100% and height 100% */
}
Leave a comment