KDT0 Jinjongsu 인터파크 메인페이지 클론코딩 #60
Conversation
| <header class="header"> | ||
| <div class="headerContainer"> | ||
| <div class="logoSearchContainer"> | ||
| <div class="logoContainer"> | ||
| <img id="logoIcon" src="/Y_FE_HTML_CSS/assets/icons/logo.svg" alt="logo"> | ||
| </div> | ||
| <div class="searchContainer"> | ||
| <input type="text" placeholder="해외여행 1등은 크다, 인터파크-다"/> | ||
| <img class="searchIcon" src="/Y_FE_HTML_CSS/assets/icons/btn_search.6cba72a7.svg" alt="search"> | ||
| </div> | ||
| </div> | ||
| <div class="signUp"> | ||
| <ul class="signUpList"> | ||
| <li>로그인</li> | ||
| <li>회원가입</li> | ||
| <li>마이페이지<i class="fa-solid fa-chevron-down" style="color: #747474;"></i></li> | ||
| </ul> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
class 네이밍 규칙이 많이 아쉽습니다. 대표적으로 html 에는 bem방법론이 있는데 아래와 같이 작성해주시면 더욱더 깔끔한 코드로 작성하실수있습니다~
<header class="header">
<div class="header__container">
<div class="header__logo-search">
<div class="logo-search__logo">
<img id="logoIcon" src="/Y_FE_HTML_CSS/assets/icons/logo.svg" alt="logo">
</div>
<div class="logo-search__search">
<input type="text" placeholder="해외여행 1등은 크다, 인터파크-다"/>
<img class="search__icon" src="/Y_FE_HTML_CSS/assets/icons/btn_search.6cba72a7.svg" alt="search">
</div>
</div>
</div>
<header/>
| .navList li{ | ||
| display:flex; | ||
| } |
There was a problem hiding this comment.
이 부분을 비롯한 사용자가 클릭할만한 요소들에는 cursor:pointer 속성이 들어가면 좋습니다
사용자가 이게 클릭할수있는 버튼이구나를 인식하는 가장 중요한 속성입니다
| <button id="btn1">뮤지컬</button> | ||
| <button id="btn2">콘서트</button> | ||
| <button id="btn3">연극</button> | ||
| <button id="btn4">클래식/무용</button> | ||
| <button id="btn(5)">스포츠</button> | ||
| <button id="btn(5)">레저/캠핑</button> | ||
| <button id="btn(5)">전시/행사</button> | ||
| <button id="btn(5)">아동/가족</button> |
There was a problem hiding this comment.
id는 최대한 사용하지 않는게 좋습니다. 자바스크립트 코드에서는 id로 선택을 하고 class에서는 클래스로 선택하기때문에 id는 최대한 안해주시는게 좋으시고 id가 중복되어있습니다! id 는 절때로 중복되면 안됩니다
There was a problem hiding this comment.
확인했습니다! 깜빡하고 버튼 id 수정을 놓친 것 같습니다! 꼼꼼하게 살펴봐주셔서 감사하고 말씀해주신 부분 더 공부해보도록 하겠습니다 늦은 밤 너무 감사드립니다 :)
|
시멘틱 태그를 되게 잘 활용하신거 같아요!👍👍 |
|
만드느라 고생하셨어요~👍 |
|
실제 사이트와 유사하게 정말 잘 하신 것 같아요! |
|
사이트에 아이콘과 버튼이 많아서 복잡해 보이는데 고생 많으셨습니다! 포지션에 대해서 배울수 있어서 좋았습니다 :) |
진종수 과제 제출
구현하고자 했던 사이트 : 인터파크
사이트 URL : https://www.interpark.com/
나의 배포 사이트 URL : https://jongsujin.github.io/fastcampusfirst/
사용 기술
설명
1.header
: semantic tag를 사용해서 구분했습니다. 전체적으로 margin-left 속성을 주어 간격을 조정했습니다.
: header 라는 클래스로 묶어서 알아보기 쉽게 구분하고자 했습니다.
: swiper 기능을 구현하진 않았지만 구현 가능하도록 버튼과 이미지를 container에 담아서 작성했습니다.
2. section
: mainDesc 혹은 SubDesc 과 같이 중복 사용 가능한 것은 그대로 가져와 코드의 낭비를 줄이고자 했습니다.
: 전체적인 width를 맞추기 위해 전체적으로 width를 주었고 부족한 부분은 실제 웹 사이트 page rulers 기능을 통해 자세하게 주었습니다.
3. footer
: 두 개의 큰 틀로 나눈 후 첫 번째는 개인정보이용약관 등을 넣는 곳으로 두었고 display: flex 를 사용했습니다.
: 남은 부분은 인터파크트리플과 인터파크커머스에 대한 소개인데 이를 구현하고자 display:flex 를 사용 , flex-direction : column을 통해 서로 구분지어줬습니다.
느낀 점
: 처음에 relative와 absolute에 대한 혼동으로 버튼의 이미지가 고정되어서 이를 똑같이 구현하지는 못했는데 이번 기회에
position에 대해 배우게 되었습니다.
: 실제 html로 적어 다른 라이브러리 사용했을 때보다 코드의 복잡성과 효율이 떨어졌지만 기본을 다지는데 큰 도움이 되었습니다.
: 깃허브와 배포에 대해 배웠습니다. 실제로 네티파이와 깃허브 페이지를 사용해 배포에 성공했고 파일명이 index.html이 아니면 안된다는 점을 배웠습니다.