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

[1주차] 햄식이를 도와줄람줄 #1

Merged
merged 11 commits into from
Apr 9, 2022
Merged

Conversation

joohaem
Copy link
Collaborator

@joohaem joohaem commented Apr 3, 2022

✨ 구현 기능 명세

  1. 우측에 있는 장바구니는 페이지를 스크롤하더라도 해당 위치에 고정되어 있어야해요.
    --> sticky 속성을 사용하여 구현하였습니다
  2. 햄버거는 기본적으로 두줄로 배치해요. 이 때 flex 혹은 grid를 사용하여 레이아웃을 구성하시면 돼요.
    --> flex 속성을 주로 사용하여 레이아웃을 잡았습니다
  3. 햄버거 카드에는 버거 이미지 버거 이름 버거 가격 간단한 설명4가지가 반드시 포함되어 있어야해요.
    --> 이미지는 cdn 링크를 가져와 사용하였습니다
  4. 각 카드에는 box-shadow 속성을 사용해 그림자를 나타나게 해요.
    --> 카드와 박스에 동일한 그림자 속성을 부여하였습니다
  • headermain 태그 내 nav, section, section 으로 레이아웃을 잡았습니다
  • visually_hidden 속성으로 main__list 에 헤딩 태그를 넣어주었습니다

🎁 PR Point

  • BEM 네이밍 하는 것이 미숙하네요,,

😭 어려웠던 점

  • 오랜만에 퍼블리싱 😥😥

😎 구현 결과물

ezgif com-gif-maker

@joohaem joohaem added the 1️⃣ 1주차 1주차 과제에요. label Apr 3, 2022
@joohaem joohaem self-assigned this Apr 3, 2022
@github-actions
Copy link

github-actions bot commented Apr 3, 2022

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

@KimKwon
Copy link
Member

KimKwon commented Apr 4, 2022

빅맥에 밀맥 한잔하쉴?

Copy link

@henization henization left a comment

Choose a reason for hiding this comment

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

새로와... 신선해... 진짜 이주함 웹표준 짱짱이야... 네이밍 신이야... 미친거아녀 ...?

@@ -1,13 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">

Choose a reason for hiding this comment

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

WOWOWOWOWOWOWOW~~~~~~ 이거를 고칠 생각을 한번도 안해봤는데!!!! 대박이네요 두번째줄부터 웹표준 이주함 선생님인거 다아시겠네

Choose a reason for hiding this comment

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

와 센스 미쳤다 ㄷ ㄷ !!!!!!

Choose a reason for hiding this comment

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

오 저는 항상 별 생각없이 lang="en"만 썼었는데 이거 보고 찾아보니까 여기 작성한 언어에 따라서 브라우저가 사용자에게 페이지를 번역해서 보여줄지 물어보거나 장애인의 시각적 정보 접근 등 전반적인 웹 접근성에 차이가 생긴다고 하네요. 참고해서 앞으로는 언어를 제대로 표기해야겠습니다. 배워갑니다!

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css">

Choose a reason for hiding this comment

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

이게 먼가 했다!! 또 새로 배웁니다... reset.css 는 동일한 CSS 스타일을 보여주기 위해
디폴트 값을 초기화 시켜주는 친구다~!!

Choose a reason for hiding this comment

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

오와 이런 건 또 처음 보는데 정말 신기해요! 사실 코드 쓸 때 div 태그로 자꾸 도배하게 되는 이유가, 다른 태그들은 원하지 않는 스타일이 들어가서 스타일링 할 때 너무 귀찮아서 였는데 이렇게 하면 시멘틱 태그를 쓰더라도 정말 편할 것 같아요! 완전 배워갑니다~

Hi
<header class="header"><h1>햄식이를 도와줄람줄</h1></header>
<main class="main__wrapper">
<nav class="main__nav box">

Choose a reason for hiding this comment

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

오 sideBar가 아니라 nav box로 명하고, aside가 아니라 nav로 했구만!! 더 nav 스러워졌네요

Choose a reason for hiding this comment

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

이 부분에 대해서 제 코드에도 리뷰 남겨주셔서 정말 궁금했는데, 다른 링크 주소로 직접 이동하는 게 아니라 페이지만 변화하더라도 nav 태그를 자주 사용하나요? 페이지가 변하는 태그 작성할 때마다 항상 고민이 되어 여쭤봅니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

박스 내에 링크들의 모여져 있는 곳에 nav 태그를 사용하지만,
페이지 내의 목차를 나타내는 곳에도 nav 태그를 사용해요
하지만 제가 적절하게 사용했는지에 대해서는 자신 있게는 못말하겠네요 하하ㅏ
@yunsun99

<header class="header"><h1>햄식이를 도와줄람줄</h1></header>
<main class="main__wrapper">
<nav class="main__nav box">
<p class="main__nav-title">다른 거 먹람먹</p>

Choose a reason for hiding this comment

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

먹람먹... ㅋㅋㅣㅇ받는다. 와 근데 진짜 class이름을 너무 잘지어요. name이 아니라 title로 하니까 이해가 쏙 되는 느낌

<section class="main__lists">
<h2 class="visually_hidden">햄버거 리스트</h2>
<article class="main__list box">
<img width="105px" height="105px" class="main__list-image" src="https://cdn.dribbble.com/users/1787323/screenshots/11115027/media/d02a172ecd55b98b716d94ead600ef1a.png?compress=1&resize=400x300&vertical=top" alt="햄버거 사진">

Choose a reason for hiding this comment

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

css가 아닌 html 파일에 바로 width랑 height를 준 이유가 있나용 ?.?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

인라인 속성을 통해 더 높은 우선순위인 속성을 정의함으로써 ..... 는 기분 따라 갈겼나봐요

</section>
<section class="main__cart box">
<h2 class="main__cart-title">장바구니</h2>
<div class="main__cart-line"></div>

Choose a reason for hiding this comment

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

수평선을 긋는 hr 태그도 있더라구요!!

Copy link

Choose a reason for hiding this comment

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

ㄴ오 hr 태그는 첨 알았네요 저는 수평선 가상요소로 했어요

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

hr 태그는 내용이 완전히 구분될 때에 더 적합하다고 생각합니다!!
미관상의 구분선인 듯 하여 div 태그로 스타일링하였어요!-

Choose a reason for hiding this comment

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

저는 border-bottom을 이용해서 구분선을 스타일링 했는데, 혹시 border을 이용한 스타일링보다 div로 스타일링 하는게 더 나을까요? 아니면 취향 차이일까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

border-bottom 가 더 좋아보여요,^^^ 스타일링에 대해서는 취향차이인 것 같습니다!
@yunsun99

font-weight: 700;
}

/* -------------------- */

Choose a reason for hiding this comment

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

Kiaaaaaaaaaaaaaa~!!!!! 이런 센스!!!!!!!!!!!! 미친거 아냐!?!??!!??!?!?!

Choose a reason for hiding this comment

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

진짜 사소한 건데도 css 파일 읽기 너무 편하네요 완전 최고..

week1/style.css Outdated
}

.main__cart .main__cart-line {
width: clac(100% - 10px);

Choose a reason for hiding this comment

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

우와 우와 저 이건 처음 보는데 calc() 속성 유용하게 사용할 수 있을 거 같아요!!

@euijinkk
Copy link

euijinkk commented Apr 7, 2022

주햄 멋지네요!

@github-actions
Copy link

github-actions bot commented Apr 7, 2022

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

</section>
<section class="main__cart box">
<h2 class="main__cart-title">장바구니</h2>
<div class="main__cart-line"></div>
Copy link

Choose a reason for hiding this comment

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

ㄴ오 hr 태그는 첨 알았네요 저는 수평선 가상요소로 했어요

}

.main__cart .main__cart-line {
width: calc(100% - 10px);
Copy link

Choose a reason for hiding this comment

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

calc 배워갑니다...

display: flex;
justify-content: center;

gap: 10px;
Copy link

Choose a reason for hiding this comment

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

매번 margin이나 padding줘서 버튼 간격 조절했었는데 gap 배워갑니다...

Choose a reason for hiding this comment

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

저도 gap을 사용하는 경우는 처음 보는데 찾아보니까 정말 유용한 것 같아요! margin을 줄 때 바깥 테두리를 빼고 주기 위해 고생했었는데 앞으로 많이 써야겠어요.

@@ -79,7 +79,7 @@
display: flex;
flex-wrap: wrap;

margin: 1rem;
margin: 15px;
Copy link

Choose a reason for hiding this comment

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

rem에서 px로 바꾼 이유가 몰까여🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

rem 이 습관이라 썼다가, 그냥 px 로 스타일링하였어요,. 하하

@@ -19,7 +19,7 @@
</ul>
</nav>
<section>
<h2>햄버거 리스트</h2>
<h2 class="visually_hidden">햄버거 리스트</h2>
Copy link

Choose a reason for hiding this comment

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

오호,,,클래스명을 명확하게 작성하는 방법,,,체고다,,이렇게는 생각안해밧는데!!

Choose a reason for hiding this comment

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

제가 이해를 못해서 그런데, 혹시 이 h2 태그는 왜 만드신건지 여쭈어봐도 될까요? class="visually_hidden"으로 숨기실 건데 왜 이 태그를 만드셨는지랑, display: none 대신에 visually_hidden이라는 class를 만드신 이유가 궁금합니다!

Choose a reason for hiding this comment

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

제가 코드를 이해를 못해서 그런데, 숨길거면 왜 이 태그를 만드셨는지랑, display: none을 안쓰고 visually_hidden 이라는 class를 만드신 이유를 알 수 있을까요..?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

웹 접근성으로 "햄버거 리스트"를 헤딩 태그로써 명시를 해주고 싶어서 보이지 않는 헤딩태그를 만들어 주었어요
display: none은 요소에서 아예 사라지게 되어 접근성에 영향을 미치지 못한다고 알아요
@yunsun99

Choose a reason for hiding this comment

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

@yunsun99
section 태그를 쓰면 헤딩 태그를 써주는 걸 권장하는 걸로 알고 있어요. 헤딩 태그로 이게 뭐하는 섹션인지 명시하고 화면에는 보이지 않게 숨기신 것 같아요.

Choose a reason for hiding this comment

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

@leeseooo @joohaem 오 정말 찾아보니 section 태그는 헤딩 태그를 강력하게 권장하는군요! 그리고 주함님 덕분에 접근 가능한 숨김 처리 글들 읽고 왔네요ㅎㅎㅎ 배워갑니다!

@@ -1,13 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">

Choose a reason for hiding this comment

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

와 센스 미쳤다 ㄷ ㄷ !!!!!!

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>햄식이를 도와줄람줄</title>

Choose a reason for hiding this comment

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

ㅋ ㅋ 도와줄람줄 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ ㅋㅋ ㅋ

<article class="main__list box">
<img width="105px" height="105px" class="main__list-image" src="https://cdn.dribbble.com/users/1787323/screenshots/11115027/media/d02a172ecd55b98b716d94ead600ef1a.png?compress=1&resize=400x300&vertical=top" alt="햄버거 사진">
<div class="main__list-text-wrapper">
<strong class="main__list-text">빅맥</strong>

Choose a reason for hiding this comment

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

article테그 내부에 h3테그가 아닌 strong테그를 쓴 이유가 있나욤 ?.?

Copy link
Collaborator Author

@joohaem joohaem Apr 8, 2022

Choose a reason for hiding this comment

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

https://book.naver.com/search/search.naver?sm=sta_hty.book&sug=pre&where=nexearch&query=%EB%B0%98+%EA%B3%A0%ED%9D%90%2C+%EC%98%81%ED%98%BC%EC%9D%98+%ED%8E%B8%EC%A7%80

햄버거 리스트가 더더 많아진다면,
페이지 내의 h3 태그가 계속해서 생길 것 같아 뭔가 의미가 안 맞다고 생각했어요
차라리 "햄버거 리스트" 를 헤딩태그로 정의해서 숨기는 게 더 옳다고 생각되는??

위의 레퍼런스를 보면 도서 제목을 전부 strong 태그로 정의하였는데
그에 감명을 받아 햄버거의 이름도 strong 태그로 정의하였습니다 :!:)
@Nahee-Park

Choose a reason for hiding this comment

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

주함님께서 말씀해주신 headingsMap 크롬 익스텐션을 보니까 확실히 h태그는 진짜 굵직굵직한 제목들에만 사용하는 것 같더라고요! 정말 많은 도움이 될 것 같아요ㅎㅎ strong 태그는 b 태그랑 무슨 차이인지 머리로는 알겠는데 아직 실제로 어떤 상황에서 많이 쓰는지 잘 모르겠어서 감이 안잡히네요.. 개발자 도구로 여러 사이트 살펴봐야겠어요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

b 태그 같은 경우에는 "굵은 텍스트" 를 나타내는 태그이지만, 의미가 명시적으로 드러나지 않아요
그래서 "중요하다"라는 시멘틱을 보여주기 위해 srong 혹은 em 태그를 쓴다고 알고 있습니다-
어떤 의미인지를 보여주는 태그를 사용하면 보다 더 좋을 것이라고 생각합니다!!
@yunsun99

@joohaem joohaem merged commit 4be8c96 into main Apr 9, 2022
@joohaem joohaem deleted the feature-1st_seminar branch April 9, 2022 11:16
Copy link

@yunsun99 yunsun99 left a comment

Choose a reason for hiding this comment

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

정말 배워갈 게 너무 많은 코드 리뷰였습니다. BEM 네이밍 방법론은 처음 들어보는데, html과 css가 상당히 복잡해지면 유용할 것 같더라고요. 덕분에 코드 리뷰할 때도 훨씬 수월하게 section별로 볼 수 있었던 것 같습니다. 코드가 보기에도 편하고 이해하기에도 편해서 정말 좋은 코드라고 느꼈습니다!

@@ -1,13 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">

Choose a reason for hiding this comment

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

오 저는 항상 별 생각없이 lang="en"만 썼었는데 이거 보고 찾아보니까 여기 작성한 언어에 따라서 브라우저가 사용자에게 페이지를 번역해서 보여줄지 물어보거나 장애인의 시각적 정보 접근 등 전반적인 웹 접근성에 차이가 생긴다고 하네요. 참고해서 앞으로는 언어를 제대로 표기해야겠습니다. 배워갑니다!

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css">

Choose a reason for hiding this comment

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

오와 이런 건 또 처음 보는데 정말 신기해요! 사실 코드 쓸 때 div 태그로 자꾸 도배하게 되는 이유가, 다른 태그들은 원하지 않는 스타일이 들어가서 스타일링 할 때 너무 귀찮아서 였는데 이렇게 하면 시멘틱 태그를 쓰더라도 정말 편할 것 같아요! 완전 배워갑니다~

Hi
<header class="header"><h1>햄식이를 도와줄람줄</h1></header>
<main class="main__wrapper">
<nav class="main__nav box">

Choose a reason for hiding this comment

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

이 부분에 대해서 제 코드에도 리뷰 남겨주셔서 정말 궁금했는데, 다른 링크 주소로 직접 이동하는 게 아니라 페이지만 변화하더라도 nav 태그를 자주 사용하나요? 페이지가 변하는 태그 작성할 때마다 항상 고민이 되어 여쭤봅니다!

display: flex;
justify-content: center;

gap: 10px;

Choose a reason for hiding this comment

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

저도 gap을 사용하는 경우는 처음 보는데 찾아보니까 정말 유용한 것 같아요! margin을 줄 때 바깥 테두리를 빼고 주기 위해 고생했었는데 앞으로 많이 써야겠어요.

@@ -19,7 +19,7 @@
</ul>
</nav>
<section>
<h2>햄버거 리스트</h2>
<h2 class="visually_hidden">햄버거 리스트</h2>

Choose a reason for hiding this comment

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

제가 이해를 못해서 그런데, 혹시 이 h2 태그는 왜 만드신건지 여쭈어봐도 될까요? class="visually_hidden"으로 숨기실 건데 왜 이 태그를 만드셨는지랑, display: none 대신에 visually_hidden이라는 class를 만드신 이유가 궁금합니다!

Comment on lines +17 to +18
<li class="main__nav-list">맥도날드</li>
<li class="main__nav-list">버거킹</li>

Choose a reason for hiding this comment

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

이 부분이 동작하는 건 꼭 button 같은데, button 태그 말고 li 태그를 사용하신 이유가 혹시 있으신지 궁금해요!

Copy link
Collaborator Author

@joohaem joohaem Apr 13, 2022

Choose a reason for hiding this comment

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

저는 햄버거의 카테고리를 나눠주는 의미가 더 강하다고 생각했어요
그래서 "누르면 햄버거를 바뀌게 동작시킨다" 라는 것보다 "이런 리스트가 있다"에 초점을 맞춰 li 태그를 사용한 것 같네욥
@yunsun99

Comment on lines +51 to +53
.main__nav-lists > li:not(:last-child) {
margin-bottom: 5px;
}

Choose a reason for hiding this comment

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

오 이런 방식으로 테두리를 제외하고 일정하게 margin을 줄 수 있군요. 스타일링할 때 매번 고민하는 부분이었는데 배워가요!

background-color: burlywood;
}

.main__nav .main__nav-title {

Choose a reason for hiding this comment

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

.main__nav-title만 써도 코드는 동작할 것 같은데, 전부 다 이렇게 두 class가 있어야 작동하게 코드를 작성하셨더라고요. 혹시 코드 재사용을 위한 건지, 아니면 이렇게 쓰는 게 일반적으로 권장되는 지 알 수 있을까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

보다 더 정확한 지정을 위해서입니다! 2~3 개를 겹쳐 사용한다고도 하네요!!
@yunsun99

margin: 15px;
}

.main__lists .main__list {

Choose a reason for hiding this comment

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

이렇게 class를 복수형과 단수형으로 구분해서 wrapper는 복수형으로 쓰고 각각의 item은 단수형으로 className을 주는 코드를 작성하는 것이 개인적으로 정말 좋은 것 같아요. 항상 보면서 이렇게 작성하려 하는데 생각보다 어렵더라고요ㅎㅎ..

Comment on lines +100 to +102
.main__lists .main__list:nth-child(2n) {
margin-right: 4%;
}

Choose a reason for hiding this comment

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

어... 제가 제대로 이해를 못한 것 같은데요. 실행화면 보면 main__navmain__list 사이 간격과 main__listmain__cart 사이 간격이 동일해 보이는데, 위에서 main__wrapper class에서 justify-content: space-around;로 스타일링을 마치신 줄 알았거든요. 이렇게 하면 main__listmain__cart 사이에 4%만큼 간격이 더 생기는 거 아닌가요..? 잘 이해가 안되어서 여쭤봅니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1️⃣ 1주차 1주차 과제에요.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants