2주간 펼쳐지는 노마드코더의 css challenge
오늘 과제는 이 아름답고 훌륭한 페이지를 따라하는 것이다. 예전에 챌린지 했을 때 평균 6시간 걸려서 도중 포기했었는데 이번에는 어떨지 무척 궁금하다.
html
<body>
<div class="container">
<img src="img/clip.png" alt="">
<div class="header">
<div class="wrapper">
<h1>Paris</h1>
<p>06.</p>
</div>
</div>
<div class="description">
<div class="country">
<p>country</p>
<p>france</p>
<p>population</p>
<p>2.249.976</p>
<p>coordinates</p>
<p>45`51`24`N</p>
<p>2,21,03,E</p>
</div>
<div class="color__info">
<p>COLOURS</p>
<p>O2S MO YO KO</p>
<P>O0 MO YO K74</P>
<P>0100 MO YBK KO</P>
</div>
<div class="address">
<p>wwww.NIOKBARCLAYDESIGNS</p>
</div>
</div>
<div class="color__ball">
<div class="color a"></div>
<div class="color a"></div>
<div class="color a"></div>
<div class="color b"></div>
<div class="color b"></div>
<div class="color b"></div>
<div class="color c"></div>
<div class="color c"></div>
<div class="color c"></div>
</div>
</div>
</body>일단 body 위에 container를 만들고 그 안에 header,description,color__ball 을 div 으로 넣어주었다. "Paris"와 "06."을 한 묶음으로 그 밑에 작은 글씨들을 한 묶음로 그리고 동그란 공들을 한 묶음으로 생각했다. 이렇게 하는 방식이 맞는지는 모르겠지만 일단 조진다 나쁜 친구들...
그리고 description 안에 country,color__info,address로 나눠 각각 정보들을 담았다.
color__ball 에 color의 경우 3개씩 색이 바뀌니까 child selector 3개씩 나눠주려고 했는데 도저히 안 되서 무식한 방법으로 3개씩 다른 class를 주었다. 여기까지 빠른 html 끝!
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color:#F6F6F6;
height: 100vh;
position: relative;
}
.container {
width: 500px;
height: 640px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 1px 8px 17px 14px rgba(0, 0, 0, 0.3);
}
일단 재빨리 body에 height: 100vh 와 position: relative을 먹인다. relative가 없어도 되는지는 잘 모르겠다. 나중에 탐구해야지. 이제 .container를 돌봐줄 차례다. 일단 width, height를 준다. color 는 하얀색으로 body와 다르게 만든다. 이 친구를 정가운데 오게 만들고 싶다. position : absoulute를 해서 반항아로 만들고 left: 50% ,top: 50%, transform: translate(-50%, -50%) 정가운데 위치하기 무적의 공식을 부여한다. 마지막으로 애용하는 box-shadow까지 주면 일단 완성이다.
img {
width: 100px;
height: 100px;
position: absolute;
z-index: 1;
left: 40%;
top: -10%;
}
.header {
z-index: 1;
width: 100%;
padding: 10px 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
img 에 absolute를 주고 top, left로 상단 정가운데로 옮긴다. header에 width: 100%를 주는데 child가 움직일 수 있게 자리를 확보한다라는 느낌으로 이해했다. width:100% 부분은 추후에 확실히 정리해야겠다. 그리고 padding으로 마무리한다. .wrapper 엔 <h1> 과 <p> 가 있다. display로 두 태그를 정리하고 border-line을 주면 width만큼 생긴다.
.header h1 {
font-size: 60px;
}
.header p {
position: relative;
font-size: 25px;
align-self: center;
bottom: -15px;
}
.description {
width: 100%;
padding: 0px 20px;
z-index: 1;
display: flex;
justify-content: space-between;
}
.description .country p,
.description .color__info p,
.description .address p {
font-size: 10px;
}
.description .address {
color: blue;
}
.description .color__info {
position: relative;
left: -60px;
}header를 마무리 하는 과정에서 <p>가 <h1>와 수평선이 맞지 않았는데 (살짝 위로 올라갔는데) relative를 줘서 옮겼다. 이렇게 하는 게 맞는지 모르겠다.
.description으로 넘어가서 똑같이 width 주고 flex 주고 패딩을 준다. .description의 child의 경우 두 개의 태그는 붙어있고 나머지 하나만 오른쪽에 붙어있다. 이럴 땐 두 개와 하나를 따로 분리해서 각각 div에 담고 flex 해주면 되는데 html를 작성할 때 다르게 짜서 이번에도 relative를 사용하여 px로 자리를 지정했다. 이렇게 바꾸는 것이 맞는 방법인지 확실히 알아야 한다.
거의 다 됐다. 이제 아홉 가지 신비한 요술공만 만들면 된다.
.color__ball {
padding: 50px 20px;
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.color__ball .color {
height: 120px;
width: 120px;
border-radius: 50%;
margin-top: 10px;
}
.color__ball .a {
background-color: #a0bff2;
}
.color__ball .b {
background-color: #e88be3;
}
.color__ball .c {
background-color: #e7f29b
}parent인 .color__ball에 일단 인심 좋게 width:100%와 padding을 준다. 그리고 어김없이 flex를 가한다.
기다렸다는 듯 flex-wrap: wrap 을 해주면 우아한 모습으로 나타나게 된다. 
