웹퍼블리싱 18

Youtube: 몰입코딩 아카이브

수업페이지 바로가기 

몰입코딩 바로가기

코드몽키 바로가기

 

지디웹: 웹디자인사이트 모음

 

[선택자]

https://flukeout.github.io/

CSS Diner

 

*: 태그 구분없이 자식이기만 하면 된다. 즉, 전체선택자

공백: 후손선택자, 자식선택자. 바로 자식이건 후손이건 section안에 있는 것들 모두.

>: section의 자식만.

~: 동생선택자.

+: 인접동생선택자.

 

only-child

ㄴ 형제 없는 엘리먼트

 

 

div:nth-of-type(1)   // div type 중에서 첫번째

div:nth-child(1)   // div type 이면서 첫번째 (두가지 조건을 모두 만족해야함)

 

 

[111강]

• CODEPEN - 튜토리얼, 단계 1
• CODEPEN - 튜토리얼, 단계 2
• CODEPEN - 튜토리얼, 단계 3
• CODEPEN - 튜토리얼, 단계 4
• CODEPEN - 튜토리얼, 단계 5
• CODEPEN - 튜토리얼, 단계 6
• CODEPEN - 튜토리얼, 단계 7
• CODEPEN - 튜토리얼, 단계 8
• CODEPEN - 튜토리얼, 단계 9
• CODEPEN - 튜토리얼, 단계 10

- 2차메뉴는 1차메뉴의 a 안에 넣는다.

 

111강 1차 코드펜

111강 2차 코드펜

111강 3차 코드펜

111강 4차 코드펜

111강 5차 코드펜

111강 6차 코드펜

111강 7차 코드펜

111강 8차 코드펜

111강 9차 코드펜

111강 10차(완성) 코드펜

 

-- 복습 --

111강 1차 복습 코드펜

[!!!]111강 2차 복습 코드펜

111강 3차 복습 코드펜

[!!!]111강 4차 복습 코드펜

111강 5차 복습 코드펜

111강 6차 복습 코드펜

111강 7차 복습 코드펜

[!!!]111강 8차 복습 코드펜

111강 9차 복습 코드펜

 

 

[112강]

• CODEPEN - 시작
• CODEPEN - 정답예시
• CODEPEN - 정답

-- 자습 --

112강 자습 코드펜

 

[113강]

• CODEPEN - 시작
• CODEPEN - 정답

연습 코드펜

복습 코드펜

 

 

[116강]

• CODEPEN - 시작
• CODEPEN - 정답예시
• CODEPEN - 정답

- white-space: nowrap;   // 줄바꿈 안되게 하는 코드

- overflow: hidden;

- text-overflow: ellipsis;   // 넘쳐서 숨겨지는 텍스트 ... 처

 

[117강]

• CODEPEN - 시작
• CODEPEN - 정답예시

1차시도 코드펜

2차시도 코드펜

3차시도 코드펜

4차시도 코드펜

 

[숙제]

82강: 5분 안에 구현 코드펜 2:30

CSS DINER: 5분 안에 구현 바로가기 4:01

117강: 10분 안에 구현 코드펜 3:56

 

---

 

[코드몽키]