-
Notifications
You must be signed in to change notification settings - Fork 0
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
Conversation
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
빅맥에 밀맥 한잔하쉴? |
There was a problem hiding this 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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
WOWOWOWOWOWOWOW~~~~~~ 이거를 고칠 생각을 한번도 안해봤는데!!!! 대박이네요 두번째줄부터 웹표준 이주함 선생님인거 다아시겠네
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
와 센스 미쳤다 ㄷ ㄷ !!!!!!
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이게 먼가 했다!! 또 새로 배웁니다... reset.css 는 동일한 CSS 스타일을 보여주기 위해
디폴트 값을 초기화 시켜주는 친구다~!!
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
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 스러워졌네요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분에 대해서 제 코드에도 리뷰 남겨주셔서 정말 궁금했는데, 다른 링크 주소로 직접 이동하는 게 아니라 페이지만 변화하더라도 nav
태그를 자주 사용하나요? 페이지가 변하는 태그 작성할 때마다 항상 고민이 되어 여쭤봅니다!
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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="햄버거 사진"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
css가 아닌 html 파일에 바로 width랑 height를 준 이유가 있나용 ?.?
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수평선을 긋는 hr 태그도 있더라구요!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ㄴ오 hr 태그는 첨 알았네요 저는 수평선 가상요소로 했어요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hr
태그는 내용이 완전히 구분될 때에 더 적합하다고 생각합니다!!
미관상의 구분선인 듯 하여 div
태그로 스타일링하였어요!-
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저는 border-bottom
을 이용해서 구분선을 스타일링 했는데, 혹시 border
을 이용한 스타일링보다 div
로 스타일링 하는게 더 나을까요? 아니면 취향 차이일까요?
There was a problem hiding this comment.
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; | ||
} | ||
|
||
/* -------------------- */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Kiaaaaaaaaaaaaaa~!!!!! 이런 센스!!!!!!!!!!!! 미친거 아냐!?!??!!??!?!?!
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
우와 우와 저 이건 처음 보는데 calc() 속성 유용하게 사용할 수 있을 거 같아요!!
주햄 멋지네요! |
오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :) |
</section> | ||
<section class="main__cart box"> | ||
<h2 class="main__cart-title">장바구니</h2> | ||
<div class="main__cart-line"></div> |
There was a problem hiding this comment.
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); |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
매번 margin이나 padding줘서 버튼 간격 조절했었는데 gap 배워갑니다...
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
rem에서 px로 바꾼 이유가 몰까여🤔
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오호,,,클래스명을 명확하게 작성하는 방법,,,체고다,,이렇게는 생각안해밧는데!!
There was a problem hiding this comment.
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를 만드신 이유가 궁금합니다!
There was a problem hiding this comment.
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를 만드신 이유를 알 수 있을까요..?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
웹 접근성으로 "햄버거 리스트"를 헤딩 태그로써 명시를 해주고 싶어서 보이지 않는 헤딩태그를 만들어 주었어요
display: none
은 요소에서 아예 사라지게 되어 접근성에 영향을 미치지 못한다고 알아요
@yunsun99
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yunsun99
section
태그를 쓰면 헤딩 태그를 써주는 걸 권장하는 걸로 알고 있어요. 헤딩 태그로 이게 뭐하는 섹션인지 명시하고 화면에는 보이지 않게 숨기신 것 같아요.
There was a problem hiding this 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"> |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
article테그 내부에 h3테그가 아닌 strong테그를 쓴 이유가 있나욤 ?.?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
햄버거 리스트가 더더 많아진다면,
페이지 내의 h3 태그가 계속해서 생길 것 같아 뭔가 의미가 안 맞다고 생각했어요
차라리 "햄버거 리스트" 를 헤딩태그로 정의해서 숨기는 게 더 옳다고 생각되는??
위의 레퍼런스를 보면 도서 제목을 전부 strong
태그로 정의하였는데
그에 감명을 받아 햄버거의 이름도 strong
태그로 정의하였습니다 :!:)
@Nahee-Park
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
주함님께서 말씀해주신 headingsMap 크롬 익스텐션을 보니까 확실히 h태그는 진짜 굵직굵직한 제목들에만 사용하는 것 같더라고요! 정말 많은 도움이 될 것 같아요ㅎㅎ strong 태그는 b 태그랑 무슨 차이인지 머리로는 알겠는데 아직 실제로 어떤 상황에서 많이 쓰는지 잘 모르겠어서 감이 안잡히네요.. 개발자 도구로 여러 사이트 살펴봐야겠어요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
b
태그 같은 경우에는 "굵은 텍스트" 를 나타내는 태그이지만, 의미가 명시적으로 드러나지 않아요
그래서 "중요하다"라는 시멘틱을 보여주기 위해 srong
혹은 em
태그를 쓴다고 알고 있습니다-
어떤 의미인지를 보여주는 태그를 사용하면 보다 더 좋을 것이라고 생각합니다!!
@yunsun99
There was a problem hiding this 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"> |
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
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"> |
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
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를 만드신 이유가 궁금합니다!
<li class="main__nav-list">맥도날드</li> | ||
<li class="main__nav-list">버거킹</li> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분이 동작하는 건 꼭 button
같은데, button
태그 말고 li
태그를 사용하신 이유가 혹시 있으신지 궁금해요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저는 햄버거의 카테고리를 나눠주는 의미가 더 강하다고 생각했어요
그래서 "누르면 햄버거를 바뀌게 동작시킨다" 라는 것보다 "이런 리스트가 있다"에 초점을 맞춰 li
태그를 사용한 것 같네욥
@yunsun99
.main__nav-lists > li:not(:last-child) { | ||
margin-bottom: 5px; | ||
} |
There was a problem hiding this comment.
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 { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.main__nav-title만 써도 코드는 동작할 것 같은데, 전부 다 이렇게 두 class가 있어야 작동하게 코드를 작성하셨더라고요. 혹시 코드 재사용을 위한 건지, 아니면 이렇게 쓰는 게 일반적으로 권장되는 지 알 수 있을까요?
There was a problem hiding this comment.
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 { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이렇게 class를 복수형과 단수형으로 구분해서 wrapper는 복수형으로 쓰고 각각의 item은 단수형으로 className을 주는 코드를 작성하는 것이 개인적으로 정말 좋은 것 같아요. 항상 보면서 이렇게 작성하려 하는데 생각보다 어렵더라고요ㅎㅎ..
.main__lists .main__list:nth-child(2n) { | ||
margin-right: 4%; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
어... 제가 제대로 이해를 못한 것 같은데요. 실행화면 보면 main__nav
와 main__list
사이 간격과 main__list
와 main__cart
사이 간격이 동일해 보이는데, 위에서 main__wrapper
class에서 justify-content: space-around;
로 스타일링을 마치신 줄 알았거든요. 이렇게 하면 main__list
와 main__cart
사이에 4%
만큼 간격이 더 생기는 거 아닌가요..? 잘 이해가 안되어서 여쭤봅니다!
✨ 구현 기능 명세
장바구니
는 페이지를 스크롤하더라도 해당 위치에 고정되어 있어야해요.--> sticky 속성을 사용하여 구현하였습니다
flex 혹은 grid
를 사용하여 레이아웃을 구성하시면 돼요.--> flex 속성을 주로 사용하여 레이아웃을 잡았습니다
버거 이미지
버거 이름
버거 가격
간단한 설명
이 4가지가 반드시 포함되어 있어야해요.--> 이미지는 cdn 링크를 가져와 사용하였습니다
--> 카드와 박스에 동일한 그림자 속성을 부여하였습니다
header
와main
태그 내nav
,section
,section
으로 레이아웃을 잡았습니다visually_hidden
속성으로main__list
에 헤딩 태그를 넣어주었습니다🎁 PR Point
😭 어려웠던 점
😎 구현 결과물