2024. 11. 01 웹 7일차(flex속성, 목록과 리스트 속성...)

juju0409 2024. 11. 1. 16:43

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

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

# 수업시간 공지사항

- 다음 시간에 교재 챙겨오기

# 1교시

- 저번 시간에 진행했던 예제 이어서 진행
- flex 간단한 예제 with 코드펜에서 진행
- 참고 사이트

클래스 선택자)
- div뒤에 .을 쓰는 이유 → . 클래스 선택자

.all-box)
- container
- display: block → flex-item임
- flex는 혼자될 수 없음
- 항상 box가 있어야 함(2개의 구조 / 상위구조 & 하위구조가 있어야 함!!!)
ㄴbox를 만든다 → 속성을 만든다(몇 개는 container에 쓰이고 몇 개는 flex-item에 쓰인다.)

* 문제
- 조건: 여백속성(padding margin)은 사용할 수 없음

문제 1) 오렌지 박스가 가로 중앙 정렬만 되도록 구현

ㄴ flex-box를 만들고 가로 정렬 속성을 사용하여 구현해야 함

문제 2) 오렌지 박스가 정중앙에 정렬 되도록 구현

문제 3) 미리보기 창에서 리스트 글자가 한 줄에 같이 정렬되도록 구현

ㄴ 리스트를 감싸고 있는 nav태그에 적용을 해야함

문제 4) 여백속성(padding, margin), 너비속성 없이 피그마와 동일한 여백 수치 구현

ㄴ gap도 감싸고 있는 nav에 적용해야 함

[찾아 바꾸기]
- Ctrl+ H
- 코드를 단체로 바꿔야 할 때 효율적인 방법

모두바꾸기)
1. 내가 변경하려고 하는 단어를 드래그 해서 선택
2. 그 상태에서 Ctrl + Shift + L를 누르면 내가 드래그 했던 단어들과 같은 단어가 모두 드래그 됨
3. 그 상태에서 단어 하나를 변경하면, 드래그가 된 모든 단어들이 변경됨
- 참고 사이트
- 참고 사이트

ㄴ 바꿀 코드 드래그 + 복사

ㄴ Ctrl+H 하면 중간에 창뜸 → 감싸고 있는 nav 태그 안에 있는 것들도 복사 후 2번 째 줄에 복붙 → 두번째 모두 바꾸기 클릭하면 변경됨

# 2교시

[폰트 두께, 폰트 사이즈, 폰트 컬러 지정]

[글자 변경]

ㄴ피그마에서 복사해서 붙여넣고 Ctrl+X해서 적용하면 됨

목록과 리스트)
- 텍스트가 들어가는 요소에 주로 사용
- 보통 두 개 이상 들어가는 공간에 사용(세 개 부터 사용함!!)
- ul : 목록을 나타냄
- li : 리스트를 나타냄
- ex. 마켓컬리 참고

ㄴ ul>li*3 형식이 정석임

*정석 형태는 코드펜 참고

주의사항)
1. ul태그와 li태그는 항상 무조건 사용해야 함(같이 사용 안하면 웹 표준에 어긋남)
2. 코드가 어려우신 분들은 너무 큰 구조를 구현할 때 li를 사용하지 않는다.
(퍼블리셔나 개발자 취향이기도 하나 처음 구현하는 분들은조금 어려워 함 → 나중에 익숙해지면 정석으로 구현해도 됨)
ㄴ 메뉴바 형식에는 쓴다.
3. ★★★ul자식으로는 li태그만 들어올 수 있다.(웹표준)
4. a태그와 li태그를 같이 사용할 경우 구조는 아래와 같다. → li의 자식으로 a를 사용해야 함
ㄴ <li><a href="#"></a></li> -> block요소 안에 inline요소가 정석이기 때문(참고)
ㄴ (HTML5 부터 a태그 안에 block요소 포함이 허용되었지만 큰 구조 안에 작은 구조를 넣는 것이 안정적임!)
ㄴ li : block / 각각의 역할이 있는 요소만 inline 대부분은 block

노멀라이즈 수정)

css menu-box부분 코드 수정)

# 3교시

ㄴ 이미지 태그 안에 폴더 → 파일 경로 순으로 입력

ㄴ 사용자 메뉴 부분에 여백이 사라짐

ㄴ img 라이브러리

ㄴdisplay: block 부분 주석 처리함

ㄴ 마우스를 li에 호버 했을 때 색깔 변경 하는 법

transtion 속성)
- 애니메이션 효과를 적용할 때 애니메이션 효과가 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는것
- 속성 값 변형 지연(애니메이션)
- 마우스를 list에 호버 했을 때 나타나는 애니메이션
- 참고 사이트
- 참고 사이트

text-decoration: underline 속성)
- 텍스트 주위의 선의 위치를 지정하는 속성(텍스트 밑에 밑줄 효과)
- 참고 사이트

text-decoration-line	선 위치
text-decoration-color	선 색깔
text-decoration-style	선 모양
text-decoration-thickness	선 두께

css 폴더 생성)

ㄴ새폴더 만들기 → css 파일 생성해서 css 파일 드래그 해서 넣기.

ㄴ html에 이미지 연결할 때 처럼 파일 경로 먼저 입력 후 → css 파일 순서대로 연결하는 것이 중요!!!

vscode 필요한 코드만 복붙)
- 복사할 코드 커서를 맨앞에 두고 Ctrl+Shit+End 선택 후 Ctrl+X(잘라내기 + 복사) 해서 필요한 css 파일에 붙여넣기

[배너 구현]

ㄴ 로고 이미지 export(.jpg로 누르고 저장)

background-image)
- background 큰 카테고리 중 background-image 하나의 리스트
- background-color의 특징과 동일함(즉, 너비나 높이 중 하나만 없어도 나오지 않는다.)