[1주차] 햄식이를 도와줘...🍔 #1

songah119 · 2022-04-03T17:15:49Z

✨ 구현 기능 명세
기본과제를 완성했습니다!

장바구니 고정 -> sticky 이용했어요.
햄버거 두줄배치 -> 이번 세미나에서 했던 것 처럼 flex 사용했고, 다른 item배치 할 때도 마찬가지로 flex 이용했습니다!
햄버거 카드에는 4가지 속성 포함 -> 맥도날드에서 url가져와서 사진 붙였고, 이름, 가격, 설명 써두었습니다.
box-shadow -> box-shadow: 3px 3px 3px grey 로 적용해줬습니다.

반응형 웹 공부를 안해서 심화과제는 아직 안했는데 일단 평일에 해볼게요~
심화과제를 완성했습니다!

버거카드에 :hover 속성을 적용해서 마우스를 올릴 때에 색상이 변경되도록 적용해주었어요!
분기점 1200px , 900px 을 기준으로 잡고, 옵션 적용해주었습니다!

🎁 PR Point
시멘틱 태그를 잘 사용한게 맞나요? div 몇개 썼는데..
클래스이름 잘 지었는지
CSS에서 피드백해주세요!

😭 어려웠던 점
아직 align-items 랑 justify-contents 헷갈려서 둘다 적용했다가 뺐다가 하느라 시간이 조금 걸렸어요!
주로 카멜케이스로 변수명 작성하는데 세미나에서는 -을 써서 변수명이 좀 왔다갔다 하는것 같아요
미디어쿼리를 처음 써봐서 헤맸습니당!

😎 구현 결과물

Nahee-Park · 2022-04-07T07:30:01Z

week1/index.html

+
+  <body>
+    <header>
+      <div class="headerColorBox">


js에서 변수명을 지을 때에는 주로 camelCase를 지향하지만, class 이름을 지을 때 camelCase는 지양하고 있어요! (참고 링크)

class이름을 짓는 것에 대해 다양한 방법론들이 있는데, 하나의 방법론을 정해 일관성 있는 클래스 이름을 짓는 것을 연습해보면 좋을 것 같아요.

class name의 방법론에 대해 정리된 블로그 링크 : https://whales.tistory.com/33
주로 솝트에서 협업할 땐 BEM방법론을 적용하고 있어서 전반적으로 클래스 네임을 BEM 방법론을 대입해 수정해보면 좋을 것 같습니다!

Nahee-Park · 2022-04-07T07:33:00Z

week1/index.html

+    <header>
+      <div class="headerColorBox">
+      <h1>💛🍔 햄식이를 도와줘 🍔💛</h1>
+      </div>
+    </header>


Suggested change

<header>

<div class="headerColorBox">

<h1>💛🍔 햄식이를 도와줘 🍔💛</h1>

</div>

</header>

<header class="header">

<h1>💛🍔 햄식이를 도와줘 🍔💛</h1>

</header>

이런 식으로 header 테그 자체를 wrapper로 이용해도 좋을 것 같아요! semantic tag가 wrapper역할을 할 수 있다면, 불필요한 div테그를 사용하지 않아도 좋을 것 같습니다 : )

오 header를 wrapper로 사용할 수 있는 지는 몰랐어요! 지식 +1해갑니당

Nahee-Park · 2022-04-07T07:41:31Z

week1/index.html

+      </aside>
+      <section class="burger">
+        <article class="burger_card">
+          <img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥사진">


img테그의 alt 속성엔 "사진" 이나 "이미지"같은 워딩을 사용하지 않아요!
기본적으로 alt 속성을 적는 이유가 웹접근성을 위한 건데, img테그를 쓴 시점에서 이미 이 요소는 이미지임이 읽히기 때문에 alt속성 사진이라는 워딩을 넣으면 불필요하게 의미가 중복되게 됩니다 !

Suggested change

<img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥사진">

<img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥">

진짜....대박대박.....필기해둘게요 담엔 꼬옥 써먹어야지....

Nahee-Park · 2022-04-07T07:43:19Z

week1/index.html

+          <img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥사진">
+          <div class="burger_content">
+            <h2 class="buger_name">빅맥</h2>
+            <div class="burger_price">5,500</div>


가격정보도 p테그를 이용하는 것이 좋을 것 같아요!

Suggested change

<div class="burger_price">5,500</div>

<p class="burger_price">5,500</p>

@Nahee-Park 대박꼼꼼해><<

Nahee-Park · 2022-04-07T07:47:52Z

week1/index.html

+        <article class="burger_card">
+          <img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥사진">
+          <div class="burger_content">
+            <h2 class="buger_name">빅맥</h2>


heading 테그는 웹페이지 전체에서 대표할 수 있는 내용에 쓰여서 여기선 strong테그가 더 적절한 것 같아요!
참고자료 )
https://blog.hubspot.com/marketing/header-tags

Suggested change

<h2 class="buger_name">빅맥</h2>

<strong class="buger_name">빅맥</strong>

앗 질문이 있어요 커멘트 써주신거 기반으로 서칭을 조금해봤는데 strong이랑 비슷하게 강조 처리를 해주는 태그가 em , b도 있더라구요! 그러면 이 과제에서는 strong이 가장 적절할까요?

@songah119 b테그같은 경우 "중요하다"는 의미를 담기보다는 단순히 글자를 굵게 만들어주는 느낌이고, em테그와 strong테그의 경우엔 "중요하다"는 의미를 담고 있는 느낌이에요! em테그보다 strong테그가 더 중요도가 높은 느낌입니다!

근데 제가 송아님 리뷰한 이후 과제를 하면서 좀 더 찾아봤는데, article테그 내부에는 heading테그가 있는 게 권장되고 있더라고요,, 헤헤 ,,, 그래서 여기서 층위에 맞게 h3테그를 쓰는 편이 좋을 것 같다는 생각이.. 이제야 들었네여 ㅎ...ㅎ.. 죄송합미다 😅

Suggested change

<h2 class="buger_name">빅맥</h2>

<h3 class="buger_name">빅맥</h3>

Nahee-Park · 2022-04-07T08:03:09Z

week1/index.html

+      <aside class="sidebar">
+        <section class="option_card">
+          <h2 class="optionTitle">다른거 먹자</h2>
+          <div class="option"> 
+            <p class="macdonalds">맥도날드</p>
+            <p class="burgerking">버거킹</p>
+          </div>
+        </section>
+      </aside>


Suggested change

<aside class="sidebar">

<section class="option_card">

<h2 class="optionTitle">다른거 먹자</h2>

<div class="option">

<p class="macdonalds">맥도날드</p>

<p class="burgerking">버거킹</p>

</div>

</section>

</aside>

<aside class="sidebar">

<h2 class="sidebar__title">다른거 먹자</h2>

<ul class="sidebar__option">

<li class="sidebar__option-li">맥도날드</li>

<li class="sidebar__option-li">버거킹</li>

</ul>

</aside>

aside테그와 section테그가 모두 구획을 나눠주는 테그라 둘 중 하나만 사용해서 스타일링 하는 편이 좀 더 시멘틱한 것 같아요! aside테그 자체를 박스로 만들고, 이 박스의 배치에 대한 스타일을 상위 테그인 main에서 하는 편이 좀 더 직관적일 것 같습니다!

option은 list테그를 사용하는 편이 좀 더 시멘틱할 것 같아요! 아마 기본적으로 list에 먹혀있는 css스타일이 있을텐데, 테그를 시맨틱하게 사용하기 위해서 처음에 모든 테그에 대한 기본 css 를 reset시켜주는 reset.css를 링크해두면 아마 스타일링 하기 더 편리할 것 같습니다! 위에 어떤 식으로 링크할 수 있는지 적어둘게요 !

BEM방식으로 어떻게 클래스 네임을 짓는지 느낌을 알았으면 좋겠어서 클레스네임도 한 번 바꿔봤습니다 ! 참고하면 좋을 것 같습미다

아 그렇군요 구획을 나누는 태그라는 거 쇽샥 알아갑니다 :) 그리고, 질문이있어요! 제가 버거킹이랑 맥도날드 css에서 색을 다르게 적용해두었는데, 저렇게 classname을 같은걸로 적용한 후에 다른 색을 설정해야하는 경우에는 :nth-child(num) 요걸로 css 추가해주면 될까요? 아니면 다른 방법이 있을까요?!

@songah119 이건 컨벤션의 영역일 것 같아요! :nth-child(num)로 스타일을 줘도 좋을 것 같고, 클래스명을 달리줘도 될 것 같습니다! 근데 리스트 요소에 대해서는 :nth-child(num)를 사용하는 것이 조금 더 일반적인 것 같아요 !

Nahee-Park · 2022-04-07T08:04:04Z

week1/index.html

+    <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="style.css">


Suggested change

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

여기에 이런 식으로 구글링한 reset.css를 먹이면, 테그에 기본적으로 먹혀있는 스타일들이 리셋돼서 시맨틱 테그를 이용하기 더 편리해져요!

Nahee-Park · 2022-04-07T08:05:52Z

week1/index.html

+          </div>
+        </section>
+      </aside>
+      <section class="burger">


h2 테그를 사용한다면, 이 section구획에 맞는 제목을 h2테그로 적어둘 수 있을 것 같습니다!

Suggested change

<section class="burger">

<section class="burger">

<h2>햄버거 리스트</h2>

�h테그는 이런 느낌으로 사용해야 콘텐츠 전체의 구조를 파악하는데 있어서 의미있는 heading테그가 되는 것 같아요!

h 테그의 층위 ? 에 대한 느낌을 주기 위해... 추가한 것이지.. 꼭 넣으라는 것은 아닙미다 !

아아~~~~~! 위에서 살짝 뇌절왔는데 뭔지 딱알았어요

Nahee-Park · 2022-04-07T08:14:00Z

week1/index.html

+    </main>
+
+    <footer>
+      <p>🍔개인정보 이용약관 맥도날드덕🍔</p>


ㅋㅋㅋㅋㅋㅋ 너무 귀여워요 맥도날드덕🍔

Nahee-Park · 2022-04-07T08:21:10Z

week1/index.html

+      <aside class="cart">
+        <section class="cart_card">
+          <h2>장바구니</h2>
+          <hr class="white">
+          <h2>누적금액</h2>
+          <h3>0원</h3>
+          <hr class="white">
+          <div class="cart_button">
+            <button class="order">주문하기</button>
+            <button class="cancel">취소하기</button>
+          </div>
+        </section>
+      </aside>


Suggested change

<aside class="cart">

<section class="cart_card">

<h2>장바구니</h2>

<hr class="white">

<h2>누적금액</h2>

<h3>0원</h3>

<hr class="white">

<div class="cart_button">

<button class="order">주문하기</button>

<button class="cancel">취소하기</button>

</div>

</section>

</aside>

<section class="cart_card">

<h2>장바구니</h2>

<hr class="white">

<h2>누적금액</h2>

<p>0원</p>

<hr class="white">

<div class="cart_button">

<button class="order">주문하기</button>

<button class="cancel">취소하기</button>

</div>

</section>

이 부분은 aside테그보단 section테그가 더 잘 어울리는 것 같습니다! 사이드메뉴같은 느낌보다 하나의 구획인 느낌이라, section테그로 박스를 만들고 main테그에서 이 박스의 위치를 정의해주는 게 좋을 것 같아요!

금액 정보는 p테그가 조금 더 적절할 것 같습니다!

Happhee · 2022-04-07T14:04:24Z

week1/style.css

+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}


구글폰트 임포트해서 내가 원하는 글꼴 사용도 가능해 ㅎㅅㅎ 함바바여

github-actions · 2022-04-08T07:05:21Z

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

github-actions · 2022-04-08T07:12:52Z

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

github-actions · 2022-04-08T08:21:51Z

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

github-actions · 2022-04-08T09:03:38Z

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

1주차 과제 1차완! 심화 아직

e772b94

songah119 added the 1️⃣ 1주차 1주차 과제에요. label Apr 3, 2022

songah119 requested review from Nahee-Park and NaveOWO April 3, 2022 17:15

songah119 self-assigned this Apr 3, 2022

songah119 requested a review from Brokyeom April 5, 2022 13:29

THE-SOPT-WEB deleted a comment from github-actions bot Apr 6, 2022

Nahee-Park suggested changes Apr 7, 2022

View reviewed changes

Happhee reviewed Apr 7, 2022

View reviewed changes

songah119 added 4 commits April 8, 2022 15:31

마크다운 수정

8ddd7b6

마크다운 수정

9cf33aa

Merge branch 'main' of github.com:THE-SOPT-WEB/jooSongAh into week1

1825145

피드백 수정

5327798

폰트 추가!

9222a00

심화과제 완성

6ae59e6

git ignore추가

03d263d

songah119 merged commit 43678c3 into main Apr 13, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 햄식이를 도와줘...🍔 #1

[1주차] 햄식이를 도와줘...🍔 #1

songah119 commented Apr 3, 2022 •

edited

Loading

Nahee-Park Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

joohaem Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

Nahee-Park Apr 7, 2022

songah119 Apr 7, 2022

Nahee-Park Apr 7, 2022

Nahee-Park Apr 7, 2022

Happhee Apr 7, 2022

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

	<img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥사진">
	<img src="https://www.mcdonalds.co.kr/upload/product/pcfile/1583727855319.png" alt="빅맥">

	<div class="burger_price">5,500</div>
	<p class="burger_price">5,500</p>

	<h2 class="buger_name">빅맥</h2>
	<strong class="buger_name">빅맥</strong>

	<h2 class="buger_name">빅맥</h2>
	<h3 class="buger_name">빅맥</h3>

	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

	<section class="burger">
	<section class="burger">
	<h2>햄버거 리스트</h2>

[1주차] 햄식이를 도와줘...🍔 #1

[1주차] 햄식이를 도와줘...🍔 #1

Conversation

songah119 commented Apr 3, 2022 • edited Loading

😎 구현 결과물

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

github-actions bot commented Apr 8, 2022

songah119 commented Apr 3, 2022 •

edited

Loading