경고
해당 클론 코딩은 HTML , CSS 를 배운지 2주일 밖에 되지 않은 인간이
유튜브도 참조하지 않고 챗 지피티와 함께 싸워가며 독학한 자료입니다.
부정확한 정보 및 비효율적인 방법이 많을 수 있으니 주의 바랍니다.
만들려고 하는 사이트와
3회차 결과물이다.
2회차 때 카카오 홈페이지를 유심히 뜯어보면서 수정을 해야겠다고 느꼈던 부분은
이 부분이였다.
2회차 때도 언급했던 것처럼 컨테이너의 영역을 미리 지정해두는 것이 아니라 컨테이너 내부의 아이템들의 영역에 따라 동적으로 변경되게 하면서
좀 더 편하게 할 수 있었다.
header 영역
이 부분은 1회차 때와 크게 다른 부분이 없다.
카카오 홈페이지는 float 을 이용해서 카카오 로고와 서치 아이콘등을 좀 더 원하는데로 커스터마이징 했으나 나는 display : flex 과 justify-content : space-between 을 이용해서 영역을 나눠주었다.
아 !
1회차 때는 body 의 영역이 viewport 의 80%가 되도록 미리 설정해뒀었는데
그렇게 설정하니 확대 하였을 때 body 영역이 계속 viewport 의 80%가 되려고 점점 작아져서
아이템들이 너무 작게 보이는 단점이 있었다.
그래서 그걸 어떻게 해결해야 하였는데
컨테이너들의 margin 값을 설정해주면 자동으로 중앙 정렬 되게 마진 값을 지정해주더라
그래서 확대하여도 컨테이너 영역의 width 가 변경되지 않아 이전보다 더 나아진 모습을 볼 수 있었다.
main 영역
메인 컨텐츠들이 들어갈 영역은 article > section > main-section > inner wraps 로
레이아웃을 나눠주었다.
이 때 article 의 좌우 margin 값을 auto 로 해주니 중앙 정렬이 알아서 되더라
그래서 카카오톡 홈페이지 느낌을 더 살릴 수 있었다.
첫 번째 main section 의 포인트는 좌측은 flex , 우측은 grid 로 되어 있는 점이였다.
그래서 좌측의 값들을 담을 영역은 flex , 우측은 grid 로 설정해주었다.
컨테이너에 대한 설정을 해두니 뚝딱 뚝딱 나머지는 내용을 채우기만 해서 금방 채워나갈 수 있었다.
양각 효과 주기
카카오 홈페이지를 보면 실제로 컨테이너들이 둥 둥 떠다니는 듯한 느낌을 줘서
되게 입체감이 있는 홈페이지처럼 보인다.
처음에 내가 했던 것은 양각 효과가 안나서 엄청 단조로운 느낌이여서 고민하던 찰나
짐코딩에서 배운 box-shadow 를 줘봤드니 비슷한 효과가 났다.
culture section
카카오 문화를 담고 있는 해당 영역도
컨테이너 내부에 h1 , span , img 태그를 차곡 차곡 담아 만들 수 있었다.
이 때는 세로 축으로 정렬해야 했기 때문에 display : flex, justify-content : center , align-items : center 로 정렬 시켜주고 적절히 태그 별로 margin 값을 설정해서 최대한 비슷한 느낌으로 냈었다.
회고
사실 아쉬운 점을 뽑자면 카카오 홈페이지의 5,6번째는 사진이 들어가있지만
내 것은 5,6 번째에는 사진이 들어가 있지 않았다.
그 이유는 5,6 번째에 사진울 추가했드니
사진이 없는 컨테이너들의 크기들이 5,6 번째 컨테이너 크기에 맞춰 쫙 늘어나버리더라
아마 max-height : fit-content 로 해두고 같은 클래스명을 사용해서 그런 것 같다.
수정할까 했으나 해야될 공부들도 많고 다음에 비슷한 컨테이너를 또 만들어야 하기 때문에
그 때는 염두해서 하려고 한다.
다음에 만들 컨테이너들은 이처럼 생겼다.
이번에는 사진이 들어갈 컨테이너 클래스, 사진이 없는 컨테이너 클래스를 별도로 만들어서 관리해야겠다.
또 이번에 나는 컨테이너 내부 아이템들의 margin 값을 이용해서 위치를 조정했으나
카카오 홈페이지를 보면 내부 아이템들의 margin 값을 이용해서 위치를 조정했다기 보다는 padding 값을 이용해서 조정한 느낌이 든다.
이 부분도 염두해서 만들어봐야겠다.
+ 반응형 웹
나는
flex : wrap을 설정해두면 반응형 웹처럼 후다닥 반응하길 기대했는데 그렇게 되지 않더라
반응형 웹을 고려해서 만드는거는 나중에 제대로 반응형 웹이 뭔지에 대해서 공부하고 해봐야겠다.
이번 클론 코딩의 코드는 여기에 !
