[HTML/CSS] Tstory - story 페이지 클론

 

 

노마드 코더님이 웹 프레임워크를 사용하기 전에

html css javascript 기초를 탄탄하게 쌓아두어야 한다고 하셨다. 

react 깔아보니 결국  javascript 기반이라 그런 말을 하셨구나 하는 생각이 들었다. 

react 공부하면서 틈틈히 공부해둬야겠다며 다짐함과 동시에 시작한 웹 페이지 클론! 

 

---

html css 를 사용하여 티스토리 웹 페이지 클론을 해보았다. 

디테일한 디자인 구현보다 레이아웃 잡는 연습을 했는데 (나름 hover도 넣음)

flex를 이용해서 컴포넌트 정렬이 확실히 편해졌다. 

 

처음에는 익숙하지 않아서 일일히 컴포넌트 하나하나 다 만들다가

중복되는 component은 디자인 적용만 하고

따로 div로 싸서 padding이나 margin을 주는 등 레이아웃을 적용하는 방식으로 리팩토링을 했다. 

 

(부끄러운 나의 코드의 일부)

/* 베스트 게시글 */

.section_best{
    display: flex;
    width: 1199px;
    background-color: #f5f5f5;
    padding-top: 40px;
    padding-bottom: 40px;
 }

.card_list{
   display: flex;
   flex-direction : row;
   justify-content: center;
   margin-left: 151.5px;
   background-color: #f5f5f5;
}


.card{
   background-color: rgb(255, 255, 255);
   margin-right: 15px;
}

.card:hover{
   box-shadow: 5px 5px 5px 5px lightgrey;
}

/*포스트 게시글 텍스트 정보*/

.post_like{
    font-weight: 300;
    font-size: 13px;
}
.post_src{
    font-weight: 300;
    font-size: 13px;
    padding-right: 6px;
}
.post_writer{
    font-weight: 300;
    font-size: 13px;
}

 

 (구현 화면 ) 

 

 

 

 

아직 웹 개발자로써의 길은 멀어보이지만  ..

하나하나씩 천천히 공부하다보면

지금의 flutter처럼 능숙하게 사용하는 날이 올꺼라고 믿는다!  열심히 해야징