12일차

2021. 08. 03 화요일

1. Today's Key points!

• CSS 중급. id와 class 목적
• Mock-up만들기. 구조 설계. 수직분할, 수평분할, flex-box
• 다양한 방법으로 사용할 수 있는 Selector

2. 공부해보자!

• 셀렉터 : h1 { }, div { } ...
• 전체 셀렉터 : * { }
• Tag 셀렉터 : section, h1 { }
• ID 셀렉터 : #only { }
• class 셀렉터 : .widght { }, .center{ }
• 후손 셀렉터 : header h1 { }  후손 셀렉터는 부모 셀렉터 자식 셀렉터 보다 더 아래에 있는 셀렉터
• 자식 셀렉터 : header > p { }  자식 셀렉터는 부모 셀렉터 바로 아래에 있는 셀렉터
• 인접 형제 셀렉터 : section + p { }  같은 부모를 가지고, section바로 뒤에 오는 p에만 적용.
• 형제 셀렉터 : section ~ p { }  같은 부모를 가지고, section 뒤에 오는 p에 적용. (바로 뒤에 올 필요는 없음)
• flex 속성 : grow(팽창 지수)-아이템이 늘어나서 여백을 채우는, 늘어나는 비율에 대한 속성, shrink(수축 지수)-공간이 부족할 때, 각 아이템의 사이즈를 얼마까지 줄일 것인지 속성. shrink는 실제로 크기를 예상하기 어렵기 때문에 그냥 기본값을 사용하는것이 좋다. basis(기본 크기)-아이템의 기본 크기. grow와 shrink는 같이 조절하면 안된다. 왜냐하면 서로 상충되는 속성이기 때문에 한가지만 조절해서 사용해야한다. 기본값은 'flex : 0 1 auto'.
• flex-direction : 원래 display에 flex를 적용하지 않으면 main axis는 column인데, flex를 적용하면 main axis는 row(수평정렬)가 된다. 그래서 flex를 적용하고 column(수직)으로 정렬하려면 flex-dirextion : column으로 다시 입력해 주어야 한다.

3. 복습하기!

VS Code와 비슷한 레이아웃을 적용하는 연습을 해보았다. 실제 VS Code의 레이아웃을 분석해 큰 틀에서 추상화하면, 다음과 같이 영역을 나눌 수 있다.

만들어야 하는 레이아웃 추상화

Urclass에 있는 html 코드를 참고해서 css를 만들어 보았다.

나는 모든 구역을 px로 박스 크기를 조절했고, flex속성을 제대로 이해하지 못한채 만들었다. 그래서 세션 강의를 들은 후 우선은 크기를 조절할 때 vh, vw, rem을 사용해서 css를 작성해보려 한다.

내가 만든 vs code 레이아웃

4. 오늘 느낀 감정.

css에 많은 어려움을 느꼈다. 아무래도 익숙하지않은 상태에서 수많은 지식이 한꺼번에 들어오다보니까 과부하가 걸린것 같다. 또 익숙하지 않다보니까 자신도 없어서 어려워질 수록 힘들어지고 무기력감을 느낀다. 다시 개념잡는것 부터 복습하면서 지식을 탄탄히 해나가야겠다. 위의 레이아웃을 만드는것부터 익숙해진 뒤에 오늘 과제로 했던 twittler 목업도 내가 만들고 싶은 디자인을 구상해서 만들어서 블로깅 해야겠다.