1.후기
CSS로 계산기를 꾸며보았다. CSS로 이것저것 해보는 것이 재밌었다. 마치 이케아 가구 조립하는 것 같은 느낌도 들었다. 그런데 웹페이지 전체에 CSS를 입히고 관리해야 한다고 생각하면 굉장히 머리가 지끈거릴 것 같다. 처음부터 HTML을 구조적으로 잘 작성해야 관리가 쉽겠다고 생각했다. 어쨌든 실습하면서 파고들다 보니 새로운 지식을 알게 되고, 알고 있었는데 적용은 안 해봤던 것들도 다룰 수 있어서 뿌듯한 하루였다.
2.새롭게 알게 된 것
Section1 Unit6 - [HTML/CSS] 활용
Chapter1. 레이아웃
Chapter2. Flexbox
<Chapter1. 레이아웃>
1) 와이어프레임(Wireframe)
레이아웃의 뼈대를 그리는 단계
화면의 영역 구분, 주요 태그를 정하는 단계
2) 목업(Mock-up)
원래는 실물 크기의 모형을 의미. 하지만 실물 제품이 없는 무형의 웹 또는 앱에서의 목업은 하드코딩 의미.
3) 웹 프로그래밍 순서
와이어프레임 작성 -> 목업 -> HTML -> CSS -> JS
4) HTML 구성 순서
수직 분할 -> 수평 분할
<div id="container">
<div class="col w10"> //수직 분할
<div class="icon">아이콘 1</div> //수평 분할
<div class="icon">아이콘 2</div>
<div class="icon">아이콘 3</div>
</div>
<div class="col w20">
<div class="row h40">영역1</div>
<div class="row h40">영역2</div>
<div class="row h20">영역3</div>
</div>
<div class="col w70">
<div class="row h80">영역4</div>
<div class="row h20">영역5</div>
</div>
</div>5) Atomic CSS 방법론
클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법
.w70 { width: 70%; }
.h40 { height: 40%; }6) 레이아웃 리셋
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}<Chapter2. Flexbox>
1)
-부모 요소에 적용해야 하는 flexbox 속성: 자식 요소들의 정렬과 관련(: 기본값)
flex-direction: row
flex-wrap: nowrap
justify-content: flex-start
align-items: flex-start
-자식 요소에 적용해야 하는 flexbox 속성: 요소가 차지하는 공간과 관련(: 기본값)
flex-grow: 0
flex-shrink: 1
flex-basis: auto
축약형: flex: grow shrink basis
2) flex-grow(팽창 지수)
container의 남은 여백을 어떤 비율로 나누어 가질 것인가는 결정
-예시
flex-grow: 1;
item의 너비 비율을 1:1로 맞추어 준다는 의미(X)
container의 여백을 item들에게 1:1로(똑같이) 나누어 준다는 의미(O)
-item의 너비 1:1을 원하는 경우
flex-basis: 0; :아이템의 기본 너비를 0으로 만들고(container의 여백을 100%로 만들고)
flex-grow: 1;: 그것을 각 item에 나누어준다.
참고 사이트: https://chaeyoung2.tistory.com/9
3) flex-shrink(수축 지수)
비율이 높을수록 박스 크기가 더 많이 줄어듦.
flex-grow 속성과 flex-shrink 속성을 함께 사용하는 것은 권장되지 않음.
flex-shrink 속성은 width 나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문.
4) flex-basis(기본 크기)
자식 박스가 flex-grow 나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기.
5) 우선순위
width와 flex-basis 중, flex-basis가 우선.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있음.
6)
flex-direction: row이면 flex-basis는 width 방향
flex-direction: column이면 flex-basis는 height 방향
7) flex-grow와 flex-basis의 관계
flex-grow와 flex-basis는 상충 관계. flex-grow는 container의 상대적 크기 유지를 위한(여백을 일정 비율로 받기 위한) 속성이고, flex-basis는 절대적 크기를 유지를 위한(여백을 받지 않기 위한) 속성이기 때문. 그래서 둘 중 하나를 제대로 표현하려면 나머지 하나는 0으로 고정해 주어야 함.
-item의 절대적 크기를 고정하기 위해
flex-grow: 0;, flex-basis: npx;
여백 받아서 모양이 망가지면 안 되므로, flex-grow: 0
-item의 상대적 크기(비율)를 고정하기 위해
flex-grow: n;, flex-basis: 0;
item 크기가 0이라고 치고 전체 container에서 나눠 가져야 하므로, flex-basis: 0
8) align-items: stretch
9) align-items를 적용했는데도 그대로라면, 부모 요소(보통 <body>)의 height를 확인. height를 따로 지정해주지 않으면 자식 요소의 height의 합이 부모 요소의 height로 잡히므로 딱 맞아서 움직이지 않을 수 있음.
10) box-shadow 시 그림자 방향
-: 왼쪽 위로 그림자 생성
+: 오른쪽 아래로 그림자 생성
위, 아래로 생각하지 말고 왼쪽, 오른쪽 수평선을 생각하여 기억.
