Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kdt5 park choul min #55

Open
wants to merge 3 commits into
base: KDT5_ParkChoulMin
Choose a base branch
from

Conversation

DICEPT
Copy link

@DICEPT DICEPT commented Apr 5, 2023

클론코딩 과제


선정된 사이트

에어비앤비 : 사이트 바로가기

클론코딩 작업 사이트 : 사이트 바로가기


선정 이유

  1. 상단 중앙에 위치한 검색 기능을 구현하고 싶었습니다.
  2. 서비스 스타일의 사이트를 클론코딩하고 싶었습니다.
  3. 그리드를 활용하고 싶었습니다.

작업 기간

  1. 5일 정도 작업 하였습니다.

구현한 부분

  1. 에어비앤비 메인 페이지 레이아웃 작업
  2. 각 버튼별 효과 작업
  3. 그리드 활용으로 콘텐츠 작업

구현하지 못한 부분

  1. 웹페이지 반응형 미디어쿼리 너비 조절 미구현
  2. 검색창 기능 미구현
  3. 우측 상단 프로필 버튼 기능 미구현
  4. 중앙 숙소 콘텐츠의 이미지 슬라이드 미구현
  5. 상단 두번째 숙소 스타일 아이콘 슬라이드 메뉴 기능 미구현
  6. 상단 두번째 최 우측 필터 버튼 모달 기능 미구현

미흡한 부분

  1. BEM 작성법으로 시작하였지만 나중에 요소를 붙이다 보니 후반에 가서 제대로 활용하지 못하였습니다.
  2. 후반 포지션 relatveabsolute 작업에서 헤매였습니다.

@happyhermann
Copy link

그리드를 사용하여 레이아웃을 구현한 것은 매우 좋았습니다

다만 HTML5 요건 상 인라인 요소인 a 태그 내부에 블록 요소인 div를 위치시키는 것은 웹 표준에 어긋나는 게 아니지만 HTML 4.01 요건을 보면 요소는 인라인 요소만 감쌀 수 있도록 규정되어�있습니다.
또한 ul, li태그는 최상단에 nav태그가 오는 것이 시멘틱하다 볼 수 있습니다.
그리고 가장 중요한 것은 h1 태그는 반드시 한 페이지내 1개, 그리고 모든 홈페이지 통틀어서도 존재하지 않으면 구글에서
사이트를 제대로 크롤링할 수 없습니다.
헤딩 태그 쓰임만 유의해주시면 될거 같습니다

전반적으로 첫 프로젝트임에도 잘 해주신거 같습니다!

@cdm1263
Copy link

cdm1263 commented Apr 22, 2023

CSS를 하나의 파일로 관리하는것이 아닌 구획별로 나눠 관리하면 더 깔끔하지 않을까 싶습니다! 과제 고생하셨습니다~

Copy link

@sihyun92 sihyun92 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

더 많은 코드들을 보고 싶었는데 보니까 파일을 많이 지우셨던데 아쉽습니다 ㅜㅜ 다만 철민님은 디자이너 출신이셔서 그런지 레이아웃에 대한 이해가 남다르신거 같습니다. 구조를 단순하게 짜셔서 작업을 완료했다는 점이 좋습니다^^ (원래 저나 철민님처럼 디자인 전공자들이나 디자이너 출신 분들이 HTML/CSS를 단순하게 짜는 경향이 있습니다 ㅋㅋ) 다만 CSS 리셋과 각 파트 별 CSS를 분리했으면 어땠을까 하는 아쉬움이 있습니다. 철민님 최고입니다!! 디자이너 포에버 ㅋㅋㅋㅋ

Copy link
Contributor

@kledyu kledyu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Airbnb 페이지 특성 상 이미지 작업량이 많았을텐데, 꽤나 완벽한 완성물이었던 것 같습니다! 그리드의 활용도 한번 더 배워갑니다!-! 파일이 삭제되어서 전부 보지 못한건 아쉽습니다! 2차 과제도 화이팅해요 우리! 고생하셨습니다!!!! :D

Comment on lines +14 to +15
/* 이미지 태그는 인라인요소이다 인라인요소에는 베이스라인 공간이 있는데 보통 이미지 하단에 작은 공간이 남는다.
이를 제거하기 위해 전체 이미지 태그를 블록요소로 만들어 작업을 하는게 나중에 레이아웃 작업할 때 편리하다. */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하! 잊었던 사실인데 상기시켜주셔서 다시 배워갑니다 !

Comment on lines +743 to +753
/* 그리드를 사용하여 콘텐츠 정렬 작업을 진행하였스니다. */
.main_grid {
height: 100vh;
width: 100%;
display: grid;
padding-top: 200px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: minmax(275px, 1fr) minmax(275px, 1fr) minmax(275px, 1fr) minmax(275px, 1fr) minmax(275px, 1fr) minmax(275px, 1fr);
column-gap: 15px;

}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그리드를 잘 사용하시는 것을 보니 역시 철민님 CSS 능력은 출중하신 것 같습니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants