Layout-Pratice

👾 Language:

Contents

• modal-ad
• giggle-search
• pizza-dropdown
• product-card
• responsive-header
• loading-bar
• button-with-shadow

1. modal-ad

DESCRIPTION

• css animation으로 팝업 애니메이션 효과
• JS는 function과 addEventlistener 주로 사용
• 버튼 클릭시 새 html 파일로 이동

👍 ref. 김버그의 HTML & CSS는 재밌다

2. giggle-search

DESCRIPTION

• 사용자가 이름을 입력하면 팝업창에서 값을 전달받음.
• 메뉴 버튼에 마우스가 올라가면 css transtion 효과
• 팝업창은 메뉴버튼을 클릭해야만 닫을 수 있음.

👍 ref. Google

3. pizza-dropdown

DESCRIPTION

• html,css는 이미 만들어진 상태
• js로 드롭다운 구현
• blur의 개념 이해
• for Each 활용하기

👍 ref. 김버그의 DOM 강의 ch.5

4. product-card

DESCRIPTION

• aria-label, aria-hidden
• boxshadow 사용법
• JS ❌

👍 ref. 김버그의 HTML & CSS는 재밌다

5. responsive-header

DESCRIPTION

• media query를 이용한 반응형 헤더 구현
• 간단한 드롭다운 JS로 구현

6. loading-bar

👍 ref. 김버그의 HTML & CSS는 재밌다

DESCRIPTION

• 간단한 로딩창 구현

7. button-with-shadow

• version 1

+ version 2

👍 ref. 김버그의 HTML & CSS는 재밌다

DESCRIPTION

• box-shadow 연습