Written by flask-style
on 2021-04-21

21.04.21(수) | #6.27 ~ #6.28 강의노트 | 2시간만에 뚝-딱

안녕하세요~ 코더_추입니다.

2021.04.20 - [Education/HTML&CSS; | 카카오톡 클론코딩 by 노마드 코더] - 21.04.20(화) | #6.25 ~ #6.26 강의노트 | 니콜라스쌤 감사해요!!

카카오톡 클론코딩 일곱 번째 시간입니다.

카카오톡 클론코딩 끝내면,

Class 101에서 유료 강의 하나 더 신청할 예정입니다!

#6. 27 ~ 28

header.alt-header>div.alt-header__column*3

1. 한 줄 코드로 html 바로 만들기

1) 먼저 생각한 후,

2) 한 줄 코드로 빠르게 뼈대를 잡아줍니다.

.alt-header__column:first-child { margin-right: auto; } .alt-header__column:last-child { margin-left: auto; }

2. Settings가 정중앙에 오게 하는 또 한 가지 방법

1) .alt-header__column:first-child, .alt-header__column:last-child 를 지칭합니다.

2) margin-right와 left를 각각 auto로 줘서 가운데로 오게 합니다.

Notices Kakao Lab Version

3. 옆에 그림처럼 만들고 싶다면?

1) ul.settings-list>(li.settings-setting>span)*3

2) 한 줄 코드로 손쉽게 뼈대를 잡아줍니다.

.settings__setting { padding: 20px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-size: 20px; display: flex; align-items: center; }

4. Icon들과 text를 중앙 정렬시키고 싶다면?

1) display: flex; 주고

2) align-items: center;로 중앙 정렬시킵니다.

Version Latest Version

.settings__setting:last-child { padding-bottom: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); justify-content: space-between; }

5. 여기에 새로운 column을 어떻게 넣어서 Latest Version을 적지?

1) 일단 옆에 Icon은 opacity 0.8로 회색 느낌 내게 가능!!

2) HTML) 보면 Icon&Version;이랑 Latest Version을 크게 둘로 나눠야 됩니다.

3) 그러려면, Icon&Version;을 settings__setting-column으로 묶어주고 새로 settings__setting-column 만들어줍니다.

4) CSS) Latest Version을 지칭하는 settings__setting-column의 last-child을 불러서 space-beween을 줘서 떨어뜨립니다.

+) 만약 settings__setting에 space-between 해버리면 위의 두 줄도 같이 거리두기가 시작됩니다..;;

6. '<'를 눌렀을 때, More로 넘어가게 하고 싶다면?

1) Icon 태그를 찾아줍니다.

2) 그 i 태그에 a 태그로 덮어줍니다. href ="more.html" !!!

??) 비뚤빼뚤한거 어떻게 정렬할까요...

더 공부가 필요한 부분인 것 같습니다.

#6.27 ~ 28

오늘은 2시간 만에 뚝-딱 만들어냈습니다.

점점 속도가 빨라지네요.

그래도 아직 디테일한 부분 못하는 게 있어서

더 겸손하고 낮은 자세로 배워야 할 듯합니다.

긴 글 읽어주셔서 감사합니다.

오늘도 좋은 하루 보내세요~

from http://chuwinwin.tistory.com/10 by ccl(A) rewrite - 2021-04-21 19:01:04

Top