⭐️ 3번 과제 ➡️ 햄식이를 도와줘...🍔

[Chedda98]

과제 설명

1주차의 3번 과제는 햄식이를 도와줘 예요.

이번 과제를 통해 여러분은 크게 3가지를 학습하게 될거에요.

1. HTML 마크업을 시맨틱하게 작성하는 방법
2. Flexbox를 사용해 레이아웃 구조를 설계하는 방법
3. HTML 요소들을 원하는대로 스타일링하는 방법

구현사항

1. 우측에 있는 장바구니는 페이지를 스크롤하더라도 해당 위치에 고정되어 있어야해요.
2. 햄버거는 기본적으로 두줄로 배치해요. 이 때 flex 혹은 grid를 사용하여 레이아웃을 구성하시면 돼요.
3. 햄버거 카드에는 버거 이미지 버거 이름 버거 가격 간단한 설명 이 4가지가 반드시 포함되어 있어야해요.
4. 각 카드에는 box-shadow 속성을 사용해 그림자를 나타나게 해요.

참고사항

1. 이미지와 색상은 자유롭게 선택하시면 돼요. 각자만의 개성 있는 과제가 나오길 바라요 😄
2. 자잘한 margin이나 padding등 요소간의 간격은 크게 고려하지 않아요. 여러분이 자유롭게 스타일링해주세요.
3. semantic tag를 사용해주세요.
4. JS는 사용하지 마세요. 다음 과제에서 실컷 쓰시게 될거에요.

심화 과제 구현사항

1. 햄버거 카드에 mouse hover 했을 때 카드의 배경색을 변경해요.
2. 미디어 쿼리를 활용해 2개의 너비 분기점을 생성해요.
   1. 첫번째 분기점에서는 좌측에 있던 사이드바를 페이지 좌측 상단으로 고정시켜야해요. 이 때 다른거 먹자 텍스트는 보이지 않아야해요.
   2. 두번째 분기점에서는 2줄로 배치되어 있던 햄버거를 1줄로 변경해요.