[레이아웃 고민]
1. Flexbox container를 어디에 줘야 하는가?
ㄴ Flexbox의 영향을 직접적으로 받지 않는 곳에 줘야 한다.
ㄴ 이유 : 1자로 정렬할 것이기 때문에!
ㄴ 결론 : body 쪽을 부모로, Flexbox를 주자
[레이아웃 고민2]
2.flexbox를 정 중앙에 위치시켜야한다.
2-1. 동물 이미지의 시.작.점 을 옮겨줘야 한다.
ㄴ자식클래스에 justify-content: center; 값을 주면 부모인 body를 기준으로 시작점을 중간으로 옮길 수 있다.
2-2. 동물 이미지를 상하 중간으로 옮겨줘야 한다.
1) 부모인 body의 height를 100vh 로 작성한다. (100% viewport height)
2) 그 후에 align-items: center; 를 통해 부모의 높이의 가운대에 정렬된다.
이렇게 되면 중간에 정렬 끝!
[상세 코드 작성하기]
1. 자식 요소인 wrapper의 width 지정
2. 이미지요소 아래의 공백, baseline 정렬하기
vertical-align 의 초기값이 baseline이며, vertical-align에 어떤 값을 줘도 baseline을 벗어나기 떄문에 이미지 아래의 baseline을 어떤식으로 정렬해줘도 괜찮다.
[전체 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Forest Zoo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="head">
<img src="./images/animal07.png" alt="">
</div>
<div class="content">
<img src="./images/green.png" alt="">
<h1>Fox</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt pariatur eos rem fugiat architecto explicabo perferendis earum adipisci impedit, tempora natus tenetur sit corporis. Tempore dolorem rerum voluptate maxime voluptatem?</p>
</div>
</div>
</body>
</html>
/*초기화*/
*{
font-family: Arial, Helvetica, sans-serif;
}
body, p{
margin: 0;
padding: 0;
}
h1{
font-size: unset;
font-weight: unset;
margin:0;
}
body{
background-image: url("./images/bg.png");
display: flex;
justify-content: center; /*부모 크기의 중간이 시작점*/
height: 100vh; /*전체를 height로 먼저 잡아줌*/
align-items: center;
}
.wrapper{
flex-basis: 300px;
}
.wrapper .head img{
width: 300px;
vertical-align: bottom;
}
.wrapper .content{
height:300px;
background-color: #9C6035;
border-bottom: 10px solid #46260E;
border-radius: 0 0 30px 30px;
}
.wrapper .content h1{
color: #FFFFFF;
padding: 10px 20px;
font-size: 36px;
}
.wrapper .content p{
color: #E8BC9C;
padding: 0 0 0 20px;
}
[결과물]
[디벨롭 필요한 부분]
1. body에 display:flex 를 주면 나중에 확장성에 불리하다.
하나의 덩어리를 독립적으로 관리하기 위해서는
ㄴ div를 파서 body처럼 사용하자!
body{
div:center{ display:flex
div:center-inside{ margin: auto 0;
div:animal{ 여기에 코드 작
}
}
}
}
'HTML+CSS' 카테고리의 다른 글
| html/css #10-position (1) | 2023.12.19 |
|---|---|
| html/css #8-flex-direction (1) | 2023.12.18 |
| html/css #7-felxbox2 (0) | 2023.12.13 |
| html/css #6-line-height 심화, flexbox (1) | 2023.12.12 |
| html/css #5-셀렉터 우선순위, a태그, line-height (0) | 2023.12.11 |
