2024-10-21(월) 웹 3일차(display:flex속성)

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

사이트 이름	사이트 주소
수업페이지	url
코드펜	url
git-hub	url
피그마 예제보기	url

 

---

# 1교시_여백(padding, margin)

마켓컬리 와이어프레임 구현(2)

 

ex ) .banner > .container

 ㄴ> : 자식 선택자 

 

line-height 단점

- 유연하게 이동 x

- 높이 값을 바꿨을 때 제대로 작용 x(고정 픽셀이기 때문) 

 

block -레이아웃을 구성하는 태그

 

ㄴpadding

 

 

padding)

: 여백

- 태그를 기준으로 안쪽에 여백을 줌

 

 

margin)

: 여백

- 태그를 기준으로 바깥쪽에 여백을 줌

- 정말 필요하지 않은 이상 위에서 아래로 나온다.(상위태그→하위태그)

 ㄴmargin-left: auto; / margin-right:auto; => 중앙정렬

 

 

도형 중앙정렬)

- margin-left: auto; → 우측 정렬

-  margin-right: auto; → 좌측 정렬

-  margin-left: auto; margin-right: auto; → 중앙 정렬

*  auto : 남은 여백값을 전부 사용하겠다는 의미

 

---

# 2교시_ 와이어 프레임 구현(text-text, bottom-text)

자손선택자)

자손 선택자의 선택자 형태는"선택자 A > 선택자 B" 처럼 쓰며, 선택자 A의 자손에 위치하는 선택자 B를 선택한다. ex) .header > .container {       }

- 참고 사이트

 

 

후손선택자)

후손 선택자의 선택자 형태는 "선택자 A 선택자 B" 처럼 쓰며, 선택자 A의 후손에 위치하는 선택자 B를 선택한다. /* 띄어쓰기 -> 후손 선택자/원하는 안쪽 요소를 자유롭게 선택 */ ex ) .product01 .title-box {        }

- 참고 사이트

 

* block: 한 줄에 하나만 가능

---

# 3교시_flex-box

ㄴ flex-box > flex-container(상위태그) > flex-box(하위태그) > flex-item

 

flex-box 속성)

- 상위태그(flex) + 하위구조 / 상위태그+하위태그 항상 같이 있어야 됨!!! ★

- 상위태그  flex-container 

- 하위태그  flex-item

- 상위 태그 한테 적용 display: flex;

- 장점 : flex를 사용하면 유지보수가 쉬움 / 시간 단축 / 효율적임

- display: block; 태그 사용 x

좌) display: flex;적용하기 전 / 우) display: flex;적용하기 전후

.product01 .product-box {   /*  flex-box 시스템 적용  */   display: flex; }

ㄴ display:flex; 속성이 적용된 요소는  flex-container가 되고, flex-container의 자식 요소는 flex-item이 됨

ㄴ 상위태그한테 텍스트 속성 x(모두 적용됨) 텍스트를 감싸고 있는 태그한테만 사용함

 

- flex-box 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말함

- flex-box 방식에서 요소의 배치와 정렬은 flex-container와 flex-item 간의 상호작용을 통해 결정됨

- flex-container : flex-box 방식으로 레이아웃을 결정할 요소

- flex-item: flex-container 내부에서 flex-box 방식으로 배치되는 요소

- 참고 사이트

- 참고 사이트

---

# 배운 내용(복습 필수)

- 1시간 내로 복습한다고 생각

- 하루에 조금씩 자주해라(아침 20분 / 저녁20분)

 

마켓컬리 와이어프레임 구현(3_header)

마켓컬리 와이어프레임 구현(3_header)

 

마켓컬리 와이어프레임 구현(4_flex-box)

마켓컬리 와이어프레임 구현(4_flex-box)

 

참고 영상