11일차 과제(220412)
1. position 정리
2. float 정리
position
웹 페이지에서 만든 html, id, class 등의 위치를 지정
그러나, 레이아웃을 구현할때에는 position은 잘 사용하지 않는다.- static
position에 속성값을 주지 않을때(굳이 기입 X)- relative
원래 있어야 하는 위치에 상대적인 속성이다.
다른 콘텐츠들이 밀리지 않는다.- ✍
<style>
.box1{
position: static;
background-color: green;
color: white;
width: 100px;
height: 100px;
}
.box2{
position:relative;
left: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
</style>
-
- 💻
- 💻
-
absolute
기준점이 html위치에 있다. (왼쪽 제일 상단이 본래 잔신의 위치라 생각하고 움직인다.)
부모요소에 relative, fixed 같은 속성이 있으면, 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 움직인다.- ✍
<style>
.box1{
position:relative;
top:40px;
background-color: green;
color:white;
width: 100px;
height: 100px;
}
.box2{
position:absolute;
top: 40px;
background-color: red;
color:white;
width: 100px;
height: 100px;
}
.box3{
position: absolute;
top: 30px;
left: 30px;
background-color: blue;
color:white;
width: 100px;
height: 100px;
}
</style>
-
- 💻
- 💻
-
z-index
자신이 있어야하는 위치에 상대적인 값을 가진다.
단, 값을 높여 자식 앞으로 부모가 나올 수 없다.
값을 낮춰 부모 뒤로 자식은 갈 수 있다.float
다양한 객체를 띄워서 정렬img {
width:200px;
float:left;
}
-
-
블록 박스 태그 vs float 속성 태그
-
-
float 속성을 주면 '1번째'에 해당하는 공간만큼만 차지하고, 다른 요소에 대해서 왼쪽으로 배치된다
-
-
자식한테만 float속성을 주었을때 부모 요소가 자식 div 요소 들의 존재를 인식하지 못한다.
<style>
.wrap{
border: 4px solid blue;
}
.content{
float: left;
margin: 5px;
height: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">내용1</div>
<div class="content">내용2</div>
</div>
</body>
- 해결법
.wrap {
border: 4px solid blue;
/* overflow: scroll; */ (over:flow속성 쓰기)
/* overflow: hidden; */ (over:flow속성 쓰기)
/* height: 35px; */ (높이 값 주기)
/* clear:both; */ folat 사용된 요소가 정렬된 방향으로 사용, both 속성은 left, right 둘 다 클리어한다)
}
.wrap::after {
content:'';
display:block;, display:table;
clear:both;
} (가상요소를 사용하여 해결, 부모요소에 child요소를 덧붙여 부모요소가 자식요소를 알아보게한다.)오늘의 꿀팁 (?)
-
팝업은 button, 페이지이동은 a
-
버튼안에 컨텐츠들은 자동으로 정렬 (padding값 주기)
-
이미지에 float을 주고 margin-top값으로 움직이는것이좋다
-
피그마에서 가져오는 값 : 넓이값 가져오고 높이는 마진이나 패딩으로 정리
-
float은 모든버젼을 지원한다.
flex,grid는 익스플로러지원 애매
뜨내기 FE 개발자