KDT5_KimJiHye #67
KDT5_KimJiHye #67
Conversation
|
메타태그로 검색엔진 최적화에 도움되게 한 것 좋았습니다. 그런데 최상위 제목으로는 h1 태그가 오는 게 중요합니다. |
| <div class="section_subway_inner"> | ||
| <div class="content_top"> | ||
| <div class="utilization"> | ||
| <p>써브웨이를<br>제대로 즐기는 방법!</p> |
There was a problem hiding this comment.
<br> 보다는 <br /> 로 쓰는것이 HTML의 올바른 태그 작성법에 가까운 것 같습니다!
| <section class="visual"> | ||
| <div class="inner"> | ||
|
|
||
| <div class="title" style="max-width: 100%;"> |
There was a problem hiding this comment.
스타일 적용 우선순위 적용을 위해 인라인 방식으로 적용하신건지 궁금합니다!
| </div> | ||
| <div class="board_list"> | ||
| <ul> | ||
| <li><a href="javascript:void(0)" onclick="view.noticeView(this);return false;" data-idx="286">시스템 안정화를 위한 서버 점검 안내</a></li> |
There was a problem hiding this comment.
main.js 안에다 addEventListner로 처리하는게 수정하기 좋았을거 같은데 인라인으로 이벤트를 작성한 이유가 있는지 궁금합니다.
| display: block; | ||
| } | ||
| footer .content .sns_area.fackbook { | ||
| background: url(../images/common/icon_sns_facebook.png) 0 0 no-repeat; |
There was a problem hiding this comment.
이미지를 background 속성으로 넣으신거 너무 좋아요 ㅎㅎ img태그가 많아질 경우에는 html 구조가 자칫 복잡해질 것을 우려해서 background 속성을 넣으신거 같은데 그게 맞다면 너무 잘하셨어요!! 굿입니다 ㅎㅎ
| border-radius: 30px; | ||
| transition-duration: 0.3s | ||
| } | ||
| .section_subway .section_subway_inner .content_bottom .banner_sponsor .bx-wrapper .bx-pager a.active { |
There was a problem hiding this comment.
반복적으로 클래스이름을 나열해서 적으셨는데 scss에서 전처리과정을 거쳐서 이렇게 된 것인지는 모르겠으나 클래스는 이미 자신의 이름을 가지고 있기 때문에 굳이 길게 쓰지 않아도 좋았을거 같아요. 그래도 어디에 뭐가 들어갔는지 적어주신건 저도 많이 배워야 할 부분이네요 ㅎㅎ
| padding: 10px 20px 34px 20px; | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| letter-spacing: -0.04em; |
| /* main */ | ||
| /* visual */ |
There was a problem hiding this comment.
세분화한 주석의 사용으로 구분을 더 쉽게 한 점이 가독성을 높여주는 요인인것 같습니다! 저도 배워가요 ㅎ_ㅎ
| <img src="./images/menu/sandwich_cl06_01.jpg" alt="Egg Mayo" /> | ||
| <strong class="slider_classic_wrapper_name"> | ||
| 에그마요 | ||
| </strong> | ||
| <p>부드러운 달걀과 고소한 마요네즈가 만나<br>더 부드러운 스테디셀러</p> | ||
| </div> | ||
| <div class="classic-wrapper"> | ||
| <img src="./images/menu/sandwich_cl01_01.jpg" alt="Italian B.M.T.™" /> |
There was a problem hiding this comment.
img 파일이 렌더링되지 않았을 때를 대비하여 alt값을 꾸준히 기입하신 점은 꼭 배워갑니다!
| <div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 300px;"> | ||
| <div class="bxslider" style="width: 1215%; position: relative; transition-duration: 0s; transform: translate3d(-270px, 0px, 0px);"> | ||
| <div style="float: left; list-style: none; position: relative; width: 270px;" class="bx-clone" aria-hidden="true"> | ||
| <a href="javascript:void(0)"> | ||
| <img alt="치킨 컬렉션" src="./images/upload&banner/메인하단롤링배너270X300_20230302091543845.jpg" /> | ||
| </a> | ||
| </div> | ||
| <div style="float: left; list-style: none; position: relative; width: 270px;" aria-hidden="false"> | ||
| <a href="javascript:void(0)"> | ||
| <img alt="치킨 컬렉션" src="./images/upload&banner/메인하단롤링배너270X300_20230302091543845.jpg" /> | ||
| </a> | ||
| </div> | ||
| <div style="float: left; list-style: none; position: relative; width: 270px;" class="bx-clone" aria-hidden="true"> |
There was a problem hiding this comment.
인라인으로 css 요소를 적용하려다보니 html 코드가 다소 난잡해보일 수 있을 것 같습니다!
써브웨이 클론 코딩입니다.
JS는 아예 쓰지 않고 HTML과 CSS로만 작업했습니다.
원본 사이트 : https://www.subway.co.kr
클론 사이트 : https://jjyejye.github.io/Subway-clone