KDT5_LeeSiWoo #70
KDT5_LeeSiWoo #70
Conversation
index 복사본.html
Outdated
|
|
||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
There was a problem hiding this comment.
<link> 태그에 crossorigin 속성을 사용하셨네요. 해당 속성을 사용하신 이유가 있을까요?🤔
There was a problem hiding this comment.
웹폰트 사용으로 제 프로젝트로 옮겨 오는 과정에서 crossorign 속성이 자동 생성되어졌습니다!
|
멘토님의 피어리뷰 내용을 추가 및 수정 보완하여 리팩토링 하였습니다! |
| <a href="/" class="inner--logo"><img src="./images/sub_list_logo_black.png"" alt="월간공진단"></a> | ||
| <ul class="inner--menu"> | ||
| <li> | ||
| <a href="javascript:void(0)">웹진 소개</a> |
There was a problem hiding this comment.
메뉴에 hover event가 발생할 때 나타나는 transition 효과를 작업하지 못했다고 남겨주셔서 확인해봤습니다! 메뉴이름 위에 생성되는 요소는 '정보'로서의 의미가 있지 않고, 디자인으로서의 역할만 하는 요소이기 때문에 그럴 경우엔 html에서 가상요소인 ::before or ::after로 작업을 해주고, 가상요소로 만들어준 공간에 css로 스타일 작업을 하면 된다고 이해하니 쉽더라구요! 가상요소를 추가하시게 된다면, <a>태그가 가상요소와 메뉴 이름을 모두 감싸줘야 하기 때문에 li>a::before&li>a>span으로 작업해주시고, a:hover에 transition 속성으로 효과를 주시면 될 것 같아요:)
There was a problem hiding this comment.
before after와 같은 가상요소를 이럴 때 사용하는 것이군요:) 감사합니다👍🏻
| <a href="javascript:void(0)">웹진 소개</a> | ||
| </li> | ||
| <li> | ||
| <a href="javascript:void(0)">추천명약</a> |
There was a problem hiding this comment.
<a>태그의 범위가 텍스트 컨텐츠만큼의 영역을 차지하고 있어서 hover event가 발생할 때 메뉴 영역에서 텍스트가 흔들리는 것 같습니다! <a>태그의 css 스타일을 보니 padding을 left,right에만 17px을 넣어주셨는데 padding: 34px 17px;로 top, bottom에 각각 34px씩 주시면 main-menu의 height와 거의 동일하게 <a>태그의 범위가 늘어나기 때문에 사용자들이 더 편할 것 같습니다:)!!
| <div>조화</div> | ||
| </div> | ||
| </div> | ||
| </article> |
There was a problem hiding this comment.
단어가 list처럼 나열되어 있는데 div태그로 감싼 부분을 ul, li태그로 바꾸면 리스트라는 특성이 명확하게 보일거 같습니다!
There was a problem hiding this comment.
리팩토링까지 진행해주시느라 고생하셨습니다! 시맨틱태그를 사용하여 정보들을 섹션으로 나누는 작업을 통해 HTML의 가독성이 확실히 좋아진 것 같아요👍🏻
다만, BEM 방법론을 사용할 때, modifier의 사용이 어떠한 변화/상태/동작을 의미한다가 보단 해당 요소의 '의미'나 '영역'을 담고 있는 것으로 보입니다. HTML 내에서 통일된 방법론을 사용하고 있기 때문에 무관하지만 만약 BEM을 사용하여 구현하려고 한다면 어떠한 방식으로 클래스명을 사용하는 것이 좋을지 고민해보는 것도 좋을 것 같아요:)
ex) article--value__content article--value__time-line
| font-size: 17px; | ||
| font-weight: 700; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| /* HEADER */ | ||
| header { | ||
| width: 100%; | ||
| height: 8000px; |
There was a problem hiding this comment.
header의 높이가 8000px(?) 이라 페이지의 다른 컨텐츠가 클릭이 되지 않고 있네요!:)
| <a href="/" class="inner--logo"><img src="./images/sub_list_logo_black.png"" alt="월간공진단"></a> | ||
| <ul class="inner--menu"> | ||
| <li> | ||
| <a href="javascript:void(0)">웹진 소개</a> |
There was a problem hiding this comment.
before after와 같은 가상요소를 이럴 때 사용하는 것이군요:) 감사합니다👍🏻
| </section> | ||
|
|
||
| <!-- DATA --> | ||
| <section class="data"> |
There was a problem hiding this comment.
data라는 의미는 말그대로 정보라는 의미로서, 어떠한 의미를 담고 있는지 명확하지 않습니다. 이 섹션이 말하는 바가 개인의 정보라고 한다면 더 구체적인 단어를 사용하는 것이 좋을 것 같아요:)
클린코드 작성법에 대한 많은 책에서도 info data obj등 과 같이 의미가 존재하지 않는 단어를 변수명에 사용하는 것을 지양해야한다고 말합니다.🤔
원본 페이지 :
월간 공진단 기사 페이지
클론코딩 페이지 :
클론코딩 페이지
HTML,CSS 만 사용하여 레이아웃 위주의 클론코딩 진행했습니다
목표 설정
진행 상황
-JS 추가 진행 필요 (사진 슬라이드 등)