웹 개발 공부를 시작하고 항상 두려움에 떨어던 css를 이번 부스트캠프 멤버십 기간동안 지겹도록 하면서 깨달음을 얻은 지식을 바탕으로 작성하게 되었습니다.
"뭔가 위 아래가 틀린데..?"
"크기가 달라지면 깨지네..?"
"이건 왜 이래?"
그동안 CSS를 하면서 이런 고민을 자주 했었다. 그렇다면 이 문제를 어떻게 해결할 수 있을까?
예시를 보면서 해결해보자
현재 나는 다음 그림처럼 CSS를 꾸미고 싶어 했다.
그래서 일단 기초적인 코드를 작성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf8'>
<title>css 뿌셔보자 </title>
<link rel='stylesheet' type='text/css' href='index.css'/>
<head>
<body>
<header>
<div class='logo'>
이건 로고야
</div>
<div class='member_info_box'>
<span class='info_img'> 이건 회원 정보 위에 있는 이미지야 </span>
<span class='info'> 이건 회원 정보고 </span>
</div>
</header>
<body>
</html>
그러나 위 html 파일을 켜보면 아직 CSS가 구현이 안되어
이런식으로 동작한다...
그럼 어떻게 설계대로 구현 할 수 있을까?
1. display: inline-block과 margin이용
inline-block과 margin을 이용하면 얼추 구현할 수 있을 것 같다.
header {
width: 100%;
border: 1px solid black;
}
.logo {
display: inline-block;
}
.member_info_box {
margin-left: 79%;
display: inline-block;
}
.info_img,
.info {
display: block;
}
이렇게 만들면 얼추 만든 거 같다. 그러나 이상하게 거슬리는 부분이 몇가지 있다.
- 로고와 회원정보의 배치가 다르다.
- 화면의 끄기를 변경하면 깨진다.
- 이미 margin 속성을 사용했기 때문에 다른 요소를 넣기 번거롭다.
2. float : right 이용
header {
width: 100%;
height: 75px;
border: 1px solid black;
}
.logo {
float: left;
}
.member_info_box {
margin-left: 71%;
float: right;
}
.info_img,
.info {
display: block;
}
1번보다는 float를 사용해서 깔끔하지만 여전히 아쉬운 점이 있다.
- 헤더의 높이를 설정해야한다.
- float속성으로 인해 기존 요소들보다 z 축으로 떠있게 된다는 점이 아쉽다.
- 여전히 logo와 member_info_box의 높이가 안맞는다.
(뭔가 아쉬워...)
3. flex 속성 이용
그렇다 답은 flex이다.
header {
display: flex;
align-items: center; // 요소들의 높이를 중앙으로 맞춘다.
justify-content: space-between; // 양끝부터 배치
width: 100%;
border: 1px solid black;
}
.info_img,
.info {
display: block;
}flex와 관련된 align-items와 justify-content 속성을 사용하니 이전 코드들 보다 훨씬 간결해졌다!
물론 다른 1,2번 코드들도 추가적인 코드를 작성하면 충분히 설계대로 작성할 수 있다. 다만 이번 주제처럼 flex를 사용하면 훨씬 더 간결하고 효과적으로 css를 layout을 할 수 있을 것이다.