Object-fix/position
-
div태그 속성으로 css에서 background 속성으로 이미지넣는 방법처럼 한다면 보기엔 좋지만 이미지를 바꿀때 마다 css를 켜야하는 번거로움이 생김
-
div태그 안에 직접적으로 img태그를 넣는것은 편하긴 하지만 이미지와 div태그의 크기가 맞지않을 시 이미지가 넘치거나 모자랄 수 있음.
-
inherit 속성으로 부모의 크기를 따라갈순 있지만 이미지가 본래 크기가 아닌 찌그러지거나 늘어난 모습으로 나옴
-
이런 상황을 해결하기 위한게 object-fit 이다.
사용조건으론 부모와 이미지 요소에 모두 width와 height값이 있어야 한다.
object-fit: cover;
->background-size: cover;와 비슷하게 화면을 꽉 채워줌object-position: background-position처럼 배경이미지 위치조정(방향정렬) 가능
Flex
-
flex 속성 사용으로 자식요소를 부모요소에서 정렬 시킬 때, 부모와 자식요소에 position의 absolute와 relative속성을 준 후에 top, right등등의 속성으로 일일히 값을 주는 대신에,
부모요소에 display: flex; 값을 준 후 justify-content, align-item 속성으로 중앙, 좌우정렬을 할 수 있다.
-
원래 flex속성으로 배치할 때는 html문서상 먼저 나온 내용 순서대로 배치되는데, 이때 order속성 사용 시
order: 1;
-> 숫자가 낮을수록 먼저 나옴
실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>obgect-fit, object-position, Flex</title>
<link rel="stylesheet" href="./asset/css/style.css">
</head>
<body>
<h1>object fit, position 속성</h1>
<div class="frame1"></div>
<div class="frame2">
<img src="./asset/image/woman.jpg">
</div>
<hr>
<div class="frame3">
<img src="./asset/image/front.jpg">
</div>
<hr>
<!-- Flex속성 -->
<hr>
<h1>Flex속성</h1>
<div class="parent">
<div class="child1">child1</div>
<div class="child2">child2</div>
<div class="child3">child3</div>
</div>
</body>
</html>CSS
.frame1{
border: 5px solid black;
width: 400px;
height: 400px;
background: url(../image/woman.jpg) no-repeat left center;
margin-bottom: 20px;
}
.frame2{
border: 5px solid red;
width: 400px;
height: 400px;
}
.frame2 img{
width: inherit;
height: inherit;
object-fit: cover;
}
.frame3{
border: 5px solid red;
width: 600px;
height: 800px;
}
.frame3 img{
width: inherit;
height: inherit;
object-fit: cover;
}
/* Flex속성 */
.parent{
border: 5px solid black;
width: 1280px;
/* Flex속성 */
display: flex;
}
.parent div{
border: 5px solid red;
float: left;
height: 150px;
/* 기존 연산 */
/* height: 200px;
width: 33.3333333%;
float: left;
box-sizing: border-box; */
/* Flex속성 */
flex: 1;
}
.child1{
order: 2;
}
.child2{
order: 3;
}
.child3{
order: 1;
}
