정구리의 우주정복
[HTML/CSS] display:flex 정복하기 , media query 사용해보기 본문
layout 과 배치를 정복할거시다 !
할수있을지는 모름
<!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>Document</title>
<link rel="stylesheet" href="./quiz04.css">
</head>
<body>
<div class="container">
<header>Header</header>
<section>
<article class="left">a1</article>
<article class="main">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum nostrum soluta expedita dolore tempora ratione quos deleniti, sint cumque, quo aliquam illum possimus iure accusantium numquam fugit id alias vel.</article>
<article class="right">a2</article>
</section>
<footer>footer</footer>
</div>
</body>
</html>html 소스코드
별거 없음 그냥 div 안에 header section footer 로 나눠줬다
.container{
border: 1px solid #000;
width:1200px;
margin: auto;
}
header{
background-color: tomato;
padding:2em;
text-align: center;
}
section{
display: flex;
}
section article{
border: 1px solid #000;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.left{
flex:1;
background-color: yellow;
}
.main{
flex:4;
background-color: grey;
}
.right{
flex:1;
background-color: green;
}
footer{
background-color: aqua;
padding:2em;
text-align: center;
}
@media (max-width : 768px) {
.container{
width:100%;
}
section{
flex-direction: column; /*이렇게 하면 수직으로 쌓인다 */
}
.left{
order : 2;
}
.main{
order : 1;
}
.right {
order:3;
}
}container 전체에 border를 주고 width 1200px 주고 margin :auto 를 줘서 중앙정렬을 해준다
header에 bgc 를 tomato로 주고 padding 2em 을 줘서 높이 설정을 해준다 height 를 지정하지 않아도 높이 조정을 해줄 수 있는 방법중 하나임 !!
section 에 display:flex 를 준다 !! 이렇게 두면 안의 요소들이 가로정렬이 되게 된다 display:flex 는 가로정렬 하고싶은 요소의 부모에게 줘야한다 . section article 에 bd를 줘서 모습을 확인하자
그리고 section article 에
display:flex justify-content:center; align-items:center; 을 준다
이것을 세로 중앙정렬을 할 때 거의 공식처럼 사용된다고 한다
이후 left main right 에 각각 bgc를 부여한다 그리고 flex : 1 , flex:4 , flex:1 이렇게 조건을 주게 되는데 이것은
flex된 요소들의 비율을 1:4:1 로 해준다는 뜻이다 !!!!
footer에도 header과 똑같이 해주고 미디어 쿼리도 사용해보자
@media 하고 max-width 를 768px 로 지정해준다 화면의 창 사이즈가 768px 이하로 되게 되면
.container 의 width 를 100%로 해주고
section 에 flex-dirextion : column; 을 넣어준다
이것은 section 안의 요소를 세로로 쌓이게 해 주는 친구이다
그럼 이런 모양으로 아까는 flex 를 통해 가로배치 되었던 것들이 세로로 배치되게 된다
이후 order를 통해 요소들의 순서를 지정해준다
그럼 짜잔등장
배치 ? 어렵지 않다 !
'STUDY > K-DIGITAL' 카테고리의 다른 글
| [HTML/CSS] display:flex 정복하기 (2) (0) | 2022.08.27 |
|---|---|
| [HTML/CSS] position 정복하기 (0) | 2022.08.27 |
| [HTML/CSS] float 정복하기 (0) | 2022.08.23 |
| [HTML/CSS] position 정복하기 (0) | 2022.08.23 |
| [Java] static에 대해 (0) | 2022.08.21 |
