Document

💁‍♀️프롤로그

웹퍼블리셔던, 프론트엔드던 누구는 html, css가 별거 아니라고 생각하겠지만 제가 생각하기에 기본이 안되어있음 아무리 새로운 언어를 배워도 소용없다고 생각합니다. 기반이 튼튼해야 건물을 쌓아 올릴 수 있듯이, 기본적인 html, css를 탄탄하게 해야 이후 배우는 언어도 잘 배우고 적용할 수 있다고 생각합니다.

서론이 길었네요. 아무튼 지난 삼천리에 이은 두번째 클론코딩은 바로 네이버입니다. 어디서 봤는데 네이버가 클론코딩 공부하기에 정말 좋다고 하더군요. 레이아웃이 잘 설계되어서요. 사실 멋모르고 이전에 네이버 클론코딩을 해봤는데.. 당장 상단 아이콘도 코드로 못짜서 '언젠간 내가 만들고 만다..'라는 오기 + 진짜 못만들면 자존심에 스크래치로 다시 도전했습니다. 제가 폼생폼사여서요ㅋ 무튼 이렇게 두번째 클론코딩으론 네이버를 만들어봤습니다.

Document

😁완성본

NAVER

11,900 1개+1개 가방에 쏙! 초경량 햇빛차단 미니우산 특가 13,900원 1개 + 1개(+1개 총 3개)원터치 햇빛차단 3단 우산 12,800원 트래블 물티슈 유니크한 디자인부터 한층 높은 기능까지

dooheeyaa.github.io

완성본입니다. 삼천리 웹사이트를 클론 코딩했을 때보다 성취감이 +10000000000000입니다. 물론 정적 웹사이트이지만..

성취감이 유독 컸던 이유는 먼저 레이아웃이 정말 힘들었습니다... 삼천리는 아무것도 아니라는 방대한 페이지 크기부터 안에 여러가지의 레이아웃들... 또 저는 완벽한 개발자가 아니기 때문에 헤더 영역을 만드는 데도 몇시간이 걸렸습니다.

두번째론 코드의 양입니다. 코드가 진짜 방대하니까 이름을 짓는데도 어렵더군요. 내가 이 이름을 사용했던가?하고 혼란스럽고 그냥 빙빙도는 느낌. 실제로 중복된 클래스명을 써서 당황했던 경험도 있었습니다.

그래도 포기하지 않고~~(중간 살짝 쉬긴했지만^^)~~ 끝까지 만들었습니다. 어떻게 만들었는지 과정을 기록하고자 글을 쓰고있으니 한번 도움이 되도록 자세하게 써보겠습니다.

Document

📋설계 및 코드 작성

1. 레이아웃

코드로 구현하기 전, 네이버 웹사이트가 전체적으로 어떤 구조로 짜여져있는지 파악하기 위해 골격을 따라 그리기로 했습니다. 또한 코드를 참고하며 너비나 간격 등을 파악했구요. 아래 사진처럼 레이아웃을 짜봤습니다.

2. 코드

필요한 이미지나 아이콘같은 경우 미리 저장을 해놓고 코드를 구현했습니다. 일단 전체를 감싸는div 태그를 만들고 그 안에 크게 헤더 영역과 메인 영역, 하단 영역으로 나누고 메인 영역의 경우 section, aside 태그를 이용해 구분 지었습니다.

<body>

</header>

</section>

</aside>

</main>

</footer>

</div>

</body>

안의 레이아웃은 flex와 position 속성을 이용하여 배치했습니다. 네이버의 레이아웃 경우, 복잡해 보이지만 한 섹션안에 동일한 css를 쓰는 경우가 많더라구요. 동일한 css를 사용하면 코드의 재사용성과 가독성이 높아지고 중복을 제거하니 정말 좋은 습관 중 하나입니다. 전 css 코드가 워낙 많아 주석으로 표시하고 해당 css를 재사용했습니다.

/* 공통 */

.main__section-category {

display: flex;

align-items: center;

width: 830px;

height: 58px;

padding: 18px 20px 17px;

box-sizing: border-box;

}

.main__section-name {

margin: 0 13px;

font-size: 18px;

font-weight: bold;

color: #838383;

text-decoration: none;

}

.main__section-name--black {

color: black;

}

.main__section-bar--circle {

width: 4px;

height: 4px;

background-color: #d3d5d7;

border-radius: 50%;

}

.main__section-bar {

display: block;

width: 1px;

height: 15px;

background-color: #d3d5d7;

transform: skewX(-15deg);

}

/* 공통 끝 */

아이콘 같은 경우, 각각의 아이콘을 따로 저장하면 용량도 많아지고 로딩 시간이 길어집니다. 그래서인지 네이버도 아이콘을 한 곳에 모아두고 backgroun-positon 속성을 이용했더군요. 이렇게 하면 용량도 절약하고 로딩도 빠르게 되니 일석이조겠죠.

.main__section-news-sports-icon {

background-image: url(https://pm.pstatic.net/resources/asset/sp_main.712d35ae.png);

background-size: 442px 434px;

background-position: -310px -288px;

background-repeat: no-repeat;

width: 14px;

height: 10px;

}

Document

🚩마무리

그래도 한번 해봤다고 이번 클론 코딩은 별다른 문제없이 끝낼 수 있었습니다. 삼천리보단 시간이 오래 걸리긴했지만요. 클론코딩은 앞으로도 계속 할 것 같습니다. 클론 코딩을 통해 레이아웃을 어떻게 디자인하는지 배우는 재미가 쏠쏠하기도 하고 html, css 기반을 확실하게 다질 수 있다고 생각하기 때문입니다.

완성된 네이버는 깃허브에 코드를 올려놨습니다. 문제점이나 고칠 부분이 있다고 생각되시면 과감하게 코멘트를 남겨주세요. 혼자 독학으로 공부하다보니 따끔한 충고나 조언이 필요하다고 느끼는 요즘입니다. 그리고 누군가 제 코드를 보고 조금의 도움이 되었으면 좋겠습니다.

GitHub - dooheeyaa/Naver.github.io

Contribute to dooheeyaa/Naver.github.io development by creating an account on GitHub.

github.com

'html & css > 클론코딩' 카테고리의 다른 글

삼천리 기업 웹사이트 클론 코딩 (0)	2024.06.04
카페24 베스트 쇼핑몰 디자인 클론 코딩 (1)	2024.06.02

Frontend repository!

네이버(NAVER) 클론코딩

💁‍♀️프롤로그

😁완성본

📋설계 및 코드 작성

🚩마무리

'html & css > 클론코딩' 카테고리의 다른 글

티스토리툴바

네이버(NAVER) 클론코딩

💁‍♀️프롤로그

😁완성본

📋설계 및 코드 작성

🚩마무리

'html & css > 클론코딩' 카테고리의 다른 글

관련글

티스토리툴바