클론코딩 복사본 만들기
화요일 하루동안 스토어페이지 작업을 하였다. 실제 상용화 되어있는 사이트를 클론코딩 하는 것이 쉽지는 않다. 월요일 하루동안 어떤식으로 페이지를 구성 할 것인가 고민을 하고 바로 작업을 시작하였다.눈대중으로만 레이아웃을 구성해봤다. 비슷하게는 만들어 지는게 처음보다 발전된 모습이 보이기 시작했다. 사용해보지 안았던 sass를 적용해서 사용해봤다. 생각보다 편리한 부분이 많기도 했지만 네스팅이 아직 어색하다.
.mainHeader {
height: 40px;
background-color: rgb(244, 244, 244);
.mainHeaderTitle {
display: flex;
justify-content: flex-end;
align-items: center;
height: 40px;
max-width: 1006px;
background-color: transparent;
margin: 0 auto;
.mainHeaderMenu {
cursor: pointer;
margin: 0 20px;
font-size: 15px;
color: rgb(112, 112, 112);
}
.mainHeaderMenu:hover {
color: rgb(244, 187, 95);
transition: 0.3s;
}
.mainSearchBar {
margin: 0 20px;
width: 198px;
height: 25px;
line-height: 25px;
border-radius: 4px;
background-color: rgb(255, 255, 255);
padding-left: 10px;
font-size: 11px;
color: rgb(178, 178, 178);
display: inline-block;
vertical-align: middle;
}
}
}가장 큰 장점으로는 부모 자식 형제 태그의 구분이 명확해지기 때문에 원하는 부분을 찾아 가서 수정하는 것이 수월해졌다.
그렇지만 컨벤션에 맞게 순서를 잡아주는 것은 계속 숙달이 필요할 듯하다. 지금은 작업하는데 급급해 css의 속성들이 뒤죽박죽이기는 하다.
To Do
1. 페이지 하단 작업
2. 캐러셀 완성하기
3. 메인페이지 컴포넌트화 하기
4. 리뷰창 작업 시작하기
