두번째 날의 개인 프로젝트다. 다음과 같은 결과물을 만들어야 한다.
내가 만든 결과물은 다음과 같다.
사실 내가 만든 결과물이라기 보다는 튜터님의 코드를 많이 참고하였다. 진짜 내가 만든 소스는 이 링크를 타고 확인하면 된다. 모바일 화면을 만들었긴 했지만 웹사이트에서 켰을 때 모바일 버젼이 조금 늘어나 PC 버젼처럼 되는 것이었다. 줄이면 위와 같은 비슷한 모바일 환경이 조성된다.
나는 노마드코더의 HTML, CSS를 이용한 코코아톡 클론코딩을 해본 적이 있어서 그런지 배웠던 부분처럼 한 것이 바로 윗 버젼1이다. 이것을 만들 때 나는 위의 상태바와 밑의 네비바를 먼저 고정시키는 것부터 하고 그 다음 안에 내용 작업을 하였다. 이 부분에서도 모르는 부분 위주로 정리해보자.
1. position: fixed
이 부분이 어려웠던 것은 아니지만 내가 배웠던 방식과는 조금 달랐다.
.insta-status-bar {
width: 100%;
top: 0;
display: flex;
justify-content: center;
position: fixed;
z-index: 1;
background-color: white;
margin-left: 0.1vw;
margin-right: 0.1vw;
box-sizing: border-box;
}나는 justify-content를 중앙으로 두고 그 자식 태그들에 대한 부분을 center, flex-end를 줘서 위치시켰다. 하지만 튜터님은 조금 달랐다.
.status-bar {
display: flex;
justify-content: space-between;
background-color: white;
align-items: center;
width: 100%;
position: fixed;
max-width: 720px;
border-bottom: 1px solid lightgray;
}
어? 분명 내가 justify-content에 space-between을 주었는데 움직여지지 않았는데 어떻게 된거지? 라는 생각이 먼저 들었다. 이 해답은 내 HTML 구성 방식이 잘못되었다. 나는 div 태그로 각각을 감싸서 클래스를 다르게 주었는데 튜터님은 하나의 div 안에 이미지를 넣고 CSS에서는 first-child, nth-child(), last-child 속성을 사용하였다. 확실히 다 작성하고 나니까 튜터님 코드가 더 간결했다.
그리고 position: fixed 속성을 사용하고 싶다면 반드시 width의 값을 주어야한다.
2. 테두리 그라데이션
이건 잘 몰랐다. 솔직히 몰라도 구글링해서 나오는 정보이지만 신기했고 알아두면 좋을 것 같아서 적어본다.
.story-wrapper .story-on {
width: 13vw;
max-width: 80px;
max-height: 80px;
height: 13vw;
border: 2px solid transparent;
border-radius: 50%;
background-image: linear-gradient(#f6f6f6, #f6f6f6),
linear-gradient(to right, #ff7700, #ff3636aa, #ff00c3);
background-origin: border-box;
background-clip: content-box, border-box;
}
.story-wrapper .story-off {
width: 13vw;
max-width: 80px;
max-height: 80px;
height: 13vw;
border: 2px solid transparent;
border-radius: 50%;
background-image: linear-gradient(#f6f6f6, #f6f6f6),
linear-gradient(#c4c4c4, #c4c4c4);
background-origin: border-box;
background-clip: content-box, border-box;
}내가 여기서 중요하게 본 것은 속성에 대한 부분보다도 감싸는 부분과 감싸지 않은 부분을 구분했다는 점이다. story-wrapper라는 클래스로 감싸져있는 것을 보면 사진 부분인 것 같다. 그 속에서 story-on, story-off라는 클래스로 나누었는데 클래스명을 알아보기 쉽게 하니 어느 부분인지도 찾을 수 있다는 것을 느끼게 되었다. 다음 프론트 게시물을 만들 때는 이 부분을 유념하면서 작성해보는 것도 좋을 것 같다.
3. 재사용의 부분
튜터님은 이 부분을 left-wrapper, right-wrapper로 따로 클래스를 작성해두셨던 것이 기억에 남는다. 평소 나는 재사용을 중요하게 생각하는 편이라 조금이라도 반복되는 부분이 있다면 이를 따로 빼두는 작업을 하며 최대한 재사용이 있는 부분에 대해서 생각해보는 편이다.
이처럼 상태바나 네비바 등은 모두 반복해서 다른 페이지를 구현할 때도 사용할 수 있기 때문에 이렇게 작업하였다. 이야기가 조금 벗어났는데 여하튼 튜터님도 이런 부분에 대해서는 클래스를 따로 구성하셨고 한 번 확인해보자.
.left-wrapper {
margin-left: 3%;
display: flex;
align-items: center;
width: 100%;
}
.right-wrapper {
width: 100%;
display: flex;
justify-content: right;
margin-right: 3%;
}이러한 소스로 인해서 현재는 보이지 않지만 다음과 같은 부분에서도 적절히 사용할 수 있다.
처음에는 이런 생각을 했다. left-wrapper를 조금 수정해야될 상황이면 어떡하는데? 그것에 대한 스스로의 질문은 곧장 생각할 수 있게 되었다. 그 내부의 자식 속성을 조금 더 변경하면 되지 않을까? 바로 이런 식으로 말이다.
.post-header .left-wrapper img {
max-width: 50px;
max-height: 50px;
width: 50%;
height: 50%;
border-radius: 50%;
border: 1px solid lightgray;
margin: 0 2%;
}
.post-header .left-wrapper p {
margin-left: 2%;
font-weight: bold;
font-size: 14px;
}
4. space-around, space-between
같이 공부하고 있는 스터디원 한 분께 듣고 적용했었는데 놀랍게도 알맞게 적용된 것을 보고 놀랐다. 이 부분은 새로 배웠기 때문에 한 번 적어보았다.
소스코드는 어떻게 썼을지 확인해보자.
.insta-nav {
width: 100%;
bottom: 0;
display: flex;
flex-direction: row;
position: fixed;
justify-content: space-around;
box-sizing: border-box;
z-index: 1;
background-color: white;
}내가 썼을 때는 이런 식으로 justify-content에 space-around 값을 주었다. 윗부분이 물론 그랬던 것은 아니다. 튜터님은 space-between의 값을 주었다.
#nav {
position: fixed;
bottom: 0;
width: 100%;
max-width: 720px;
border-top: 1px solid lightgray;
background-color: white;
}
#nav #icon-wrapper {
margin: 4% 6%;
display: flex;
justify-content: space-between;
align-items: center;
}
내 생각은 space-between 값을 주시고 고정된 태그 부분의 자식 부분에 대한 margin 값을 수정하신 것 같다.
결과적으로 나는 이번 클론코딩을 통해 여러 가지를 배울 수 있었다. 이 부분에서 가장 중요했던 것이라고 보면 첫째로는 다른 개발자가 와도 알아볼 수 있는 클래스명이나 아이디명을 사용하는 것이었다고 본다. 사실 그래야 나도 알아볼 수 있다. 둘째로는 재사용이 있는 부분에 대해서는 클래스를 따로 빼두고 각 자식 요소에 대해 CSS를 손보아도 될 것 같다는 생각이 든다.
이 두 부분을 유념하면서 개인 프로젝트를 진행해보자. 아, 그리고 미처 적지 못한 부분도 있다. 바로 크기를 조정하는 px, vw, vh, em, 등등인데 이 부분은 잘 정리가 된 블로그가 있다. 이 블로그를 보면서 익혀두는 것이 좋을 것 같다.
