KDTO_LeeYeonSU 일룸(iloom) 클론코딩 #67
Conversation
✅ Deploy Preview for mellifluous-gnome-003496 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for sue-iloom ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
css 파일을 레이아웃 별로 나누어서 관리해서 이해하기 편했습니다. Reset css코드를 사용한것도 좋았습니다!! |
|
이미지를 아이콘과 이미지로 나누거나 css를 레이아웃 단위로 나누는 등 구조를 파악하기 좋게 분할해 놓아 가독성을 올리신 점이 좋아요 |
|
footer__divide 속 hr태그가 제자리를 찾지 못하는 거 같아요! 기능적으로 의미 없고 스타일만을 위한 태그라면 footer__top에 border-top, 혹은 footer_bottom에 border-bottom을 주는 방식은 어떨까요? 혹은 가상선택자를 사용해도 괜찮을 거 같아요😘 |
@noSPkeepgoing 좋은 의견 감사합니다~ 반영해볼게요!! |
css/header.css
Outdated
| .gnb__inner__menu { | ||
| width: 60px; | ||
| padding: 19.5px 20px; | ||
| position: absolute; | ||
| top: 50px; | ||
| margin-left: -38px; | ||
| z-index: 11; | ||
| border: 1px solid #555; | ||
| background-color: white; | ||
| display: none; | ||
| } | ||
| .gnb__inner__menu li { | ||
| float: none; | ||
| text-align: center; | ||
| font-size: 13px; | ||
| font-weight: 300; | ||
| padding: 5.5px 0px; | ||
| line-height: normal; | ||
| } | ||
| .gnb__inner__menu li a { | ||
| text-align: center; | ||
| font-size: 14px; | ||
| font-weight: 300; | ||
| line-height: normal; | ||
| display: inline-block; | ||
| width: 100%; | ||
| height: auto; | ||
| } |
There was a problem hiding this comment.
sass같은 전처리기를 사용하시면
.gnb__inner__menu {
// ...
li {
// ...
a {
// ...
}
}
}처럼 반복을 줄이실 수 있으니, 한 번 알아보셔도 좋을 것 같습니다!
과제 수행 기간
2023.07.24~2023.07.28
구현 내용
아쉬운 점
최대한 HTML/CSS 만 사용하는 것이 목표였는데 swiper를 사용한 것이 조금 아쉬웠다.
헤더 hover 시 나타나는 메뉴 스타일링을 완성하지 못한 점이 아쉽다.
메인 페이지를 완성시키고 반응형도 구현하고 싶었는데 스터디까지 병행하니 시간이 부족했던 것 같다.