flex로 이 모양을 만들어보자
먼저, 세부분으로 나눌 수 있다.
1) 동그란 이미지
2) 글씨
3) 아이콘
그리고 이 세가지를 묶는 div가 필요할 것이다.
<!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>
<script src="https://kit.fontawesome.com/265c324bb8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="ex.css">
</head>
<body>
<div class="article_navbar">
<img class="smallImage" src="smile img.jpg">
<div class="feedHeader">
<div class="id">wecode_bootcamp</div>
<div class="name">WeCode - 위코드</div>
</div>
<i class="fa-solid fa-ellipsis"></i>
</div>
</body>
</html>
html를 작성한 처음 모습이다.
1) 가로로 바꾸기, 가운데 정렬
display: flex
justify-content: space-around
align-content: center
2) 가운데 div가 살짝 왼쪽으로 보내기
가장 마지막 div인 아이콘에 margin-left: auto
flex를 준 상태에서 marin-left를 주면 아이콘이 가장 오른쪽 끝에 붙고 나머지는 둘이 붙어서 가장 왼쪽에 붙는다.
3) 큰 div의 width를 설정한다. (줄여서) & 글씨 앞쪽에 padding 주기
width: 90%
padding: 20px
4) 줄어든 글씨 박스를 가운데로 보낸다.
margin: 0 auto
완성!!
flex 상태에서 떨어지고자 하는 것에 margin-left를 주면 끝으로 붙는다... 필요할 때가 많아서 유용할듯 하다. 이렇게 만들어야 하는 다른게 있었는데 적용해봐야겠다.
margin 이용해서 가운데 정렬 할때는 margin: 0 auto 를 쓰자!!! 자주 쓰이니까 꼭 기억합시동
매일매일 성장하는 개발자