공부위키

# 2024-08-16 UIUX 웹 21일차

## 다중선택자

```css

```html

```js

[과제]

- 118강 6단계

ㄴ15분 안에 구현

- 122강 10단계

ㄴ 20분 안에 구현

---

# 2024 - 08 -19 UIUX 웹 22일차

## 122강 복습(1분 47초)

• 조건 : 20분안에 구현
  • 구현영상
  • CODEPEN - 시작소스코드
  • CODEPEN - 완료소스코드
  [NWZXyZJ

...

codepen.io](https://codepen.io/jangka44/pen/NWZXyZJ?editors=0100)

- GoFullPage

전체 화면 페이지 캡쳐

https://chromewebstore.google.com/detail/%EC%A0%84%EC%B2%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%99%94%EB%A9%B4-%EC%BA%A1%EC%B2%98/pmabjgjpcbofkbbeiphkiaanogobokgg?gad_source=1&gclid=Cj0KCQjw2ou2BhCCARIsANAwM2F7U_hOXuhevJ1CjaXMwerk81DZ3lF5rARr1h5fia4LOujGG-F93tMaAucwEALw_wcB

[전체 페이지 화면 캡처 - Chrome 웹 스토어

웹 페이지의 전체 페이지 스크린 샷을 한 번 클릭하십시오. 전체 페이지를 쉽게 캡처하십시오

chromewebstore.google.com](https://chromewebstore.google.com/detail/%EC%A0%84%EC%B2%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%99%94%EB%A9%B4-%EC%BA%A1%EC%B2%98/pmabjgjpcbofkbbeiphkiaanogobokgg?gad_source=1&gclid=Cj0KCQjw2ou2BhCCARIsANAwM2F7U_hOXuhevJ1CjaXMwerk81DZ3lF5rARr1h5fia4LOujGG-F93tMaAucwEALw_wcB)

- 홈페이지 제작

https://likelion.net/

[멋쟁이사자처럼

IT분야의 TECH 인재를 키우는 교육 커뮤니티, 멋쟁이사자처럼!

likelion.net](https://likelion.net/)

- ctrl + shift + c 를 누르면 개발자 모드 너비 확인 가능
- 우클릭 -> 요소검사 -> 어플리케이션 -> 로컬 스토리치 / F12(단축키)

- 선택자가 길수록 세다

[부분 모작]

2024. 08. 19 p13693, 2강 상단 광고바 시작

Tailwind

https://nerdcave.com/tailwind-cheat-sheet

[Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com](https://tailwindcss.com/)

css 작업 방식

- 일반 방식

- 테일윈드 2.x

- 테일윈드 3.x(가장 선진화된 방식)

* 테일윈드(노멀라이즈 자동 정의) 2.0 기준 메뉴얼

</ scrip>

- 자동으로 노멀라이즈를 해줌

- 노멀라이즈를 싹다 불러와줌

-> 테일윈드를 사용하면 css 탭에 라이브러리를 따로 만들지 않아도 돼서 훨씬 더 간단함

[과제]

- 멋쟁이 사자처럼 부분모작 스스로 만들어보기_10단계

ㄴ css 버전 / 10분 안에 구현

---

# 2024 - 08 -20 UIUX 웹 23일차

## 부분모작 복습

[폰트 어썸]

https://fontawesome.com/

[Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com](https://fontawesome.com/)

ㄴFree라고 꼭 선택하고 검색해서 필요한 부분 사용

[폰트 어썸 불러오기]

https://cdnjs.com/

[cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil

cdnjs.com](https://cdnjs.com/)

ㄴ css는 링크로 불러옴

ㄴ

<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

text-lg : 폰트 사이즈 크게 하는 수식어

* 클릭요소 키우기(마우스 커서) : alline-self-stretch

* 부분유령화 (-음수 마진)

* html( a태그 안에 a를 못 넣음)

* 제이퀄 : $(this) → 클릭된 부모의 부모를 삭제한다.

* 삭제 : remove

* 가깝다 : closest

*flex -> 자식의 크기가 stretch됨

[과제]

- 멋쟁이 사자처럼 부분모작 스스로 만들어보기

ㄴ css 버전

ㄴ 테일윈드 버전

---

# 2024 - 08 -21 UIUX 웹 24일차

## 멋쟁이 사자_부분모작 상단바 복습

position : fixed = po sition : absolute

https://codepen.io/enxaneta/full/adLPwv/

[Flexbox playground

...

codepen.io](https://codepen.io/enxaneta/full/adLPwv/)

부모가 flex이고 align-strech 일 때 너비 안줘도 됌

* 수직정렬

display: flex, align-items: center

ㄴ 오른쪽 상단 Docs 클릭

ㄴ Play CDN 클릭

ㄴ테일윈드에서 주소 따오기 → 코드펜 html에 복붙

* 외부 입장에서 flex=block 같은 입장

[과제]

- 122강 스스로 혼자 만들어 보기

ㄴ 30분 안에 구현

---

# 2024 - 08 -22 UIUX 웹 25일차

## 122강 복습

main 태그는 html에서 문서상 1번 밖에 못쓰임

변수는 --로 시작

ㄴ 위치도 정할 수 있음

ㄴ ex) body{ --top-bar-heght: 64px;} / heght : var( --top-bar-heght); /* +500px */

1단계 : 구분선
2단계 : 메뉴 2(이벤트, 기업문의)
3단계 : 맨 우측에 로그인 버튼
4단계 : 탑바 하단에 border-bottom
5단계 : 최상단에 top-ad-bar
6단계 : main>lorem*100, 그래야 스크롤링이 가능
7단계 : sticky top 0 bg-white