[Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃

내가 만든 스포티파이

찐포티파이

 

 

 

보기에만 번지르르한 무에서 유를 창조한 나의 첫 결과물이다ㅎㅎ

처음에는 술술 잘풀리기에 너무 기분이 좋았는데 몇가지 문제점 때문에 그냥 새로운 웹사이트를 클론코딩해보려고 한다ㅎㅎ...

 

내가 이 작업을 시작할때 박스레이아웃과 플렉스 레이아웃 살짝 만을 안채로 시작했는데

그리드레이아웃에 대해 새롭게 순간,, 아 이건 크게 잘못되었구나 라고 인지하게 되었다..

 

 

문제점

.section2 .text2-1{

font-size: var(--font-l);

text-align: center;

font-weight: bolder;

margin-bottom: 40px;

padding-top: 120px;

}

.section2 .text2-2{

font-size: var(--font-m);

margin-bottom: 40px;

}

.section2 img{

margin-bottom: 40px;

}

.section2 .text2-3{

font-size: var(--font-xs);

margin-bottom: 20px;

}

.section2 .text2-4{

font-size: var(--font-xs);

margin-bottom: 200px;

}

1. class명을 textn-n으로 지정했다.
때문에 가독성도 매우 떨어지고 작업에 능률이 현저히 저하되었다. 클래스명이 중요하다는 것을 크게 깨달은 순간이었다.

2. 어설픈 함수사용은 독
함수를 사용해 폰트, 패딩 사이즈를 지정했지만 생각과는 다르게 계속 흘러가 버려서 유용하게 사용하지 못했다,,

3. Box 레이아웃의 지옥
그리드레이아웃을 배우고 나니 박스로 머리를 쥐어뜯으며 하고있는 시간이 아까워졌다.
물론! 박스레이아웃을 이해하는 것이 모든 레이아웃의 기본이 된다는 점을 잘 알고 있다. 하지만 float과 overflow: hidden을 모두 개념적으로 이해하였으나 이를 실전에 사용함에 있어서 아쉬운부분이 많다는 사실이었다.

--> box레이아웃 글: https://duseul.tistory.com/24

 

 

그래도 이번 경험으로 div로 웹 전체의 구획을 나누는 것에

상당히 익숙해졌다.

 

그리드레이아웃을 이용해서 혼자! 클론코딩을 다시 시도해볼 생각이다.

다음번에는 꼭! 완성본을 들고올 것이다!!!