2024. 11. 13(수) 웹2 1일차

# 수업시간에 띄어놔야 할 창

사이트 이름	사이트 주소
수업페이지	url
코드펜	url
git-hub	url
피그마 예제보기	url
vscode 화면 / 미리보기 화면 띄워두기	-

---

# 1교시

 

지마켓 상단바 구현_피그마 이동)

ㄴ 박스를 나눠서 코딩

 

ㄴ1080 1280 1400

ㄴ 정렬

 

ㄴ 로고박스

ㄴ 메뉴바

ㄴ 사용자 메뉴

 

 

일렬정렬)

- display(속성) flex(속성값)

- display(속성) inline(속성값)

 

 

flex 사용 조건)

- 하나의 박스 안에 있어야 한다.

- 상위태그와 하위태그로 이루어져 있어야 한다. → flex-box를 사용해야 함!

 

ㄴ flex-item은 너비가 작다. 

 

 

목록과 리스트 태그)

- 순서가 있는 구조에 사용하거나 순서는 없고 리스트가 있는 구조에 사용한다.

ㄴ menu-box

 

---

# 2교시

ㄴ li 글씨들에 여백을 한 번에 줘야 하기 때문에 상위 태그인 ul에 gap적용

 

 

# 구글 심볼 불러오기

ㄴ 카피 선택

&icon_names=settings

ㄴrounded

&icon_names=close

 

span 태그

ㄴ 컴포넌트 만들고 &

---

# 3교시