Day6, 레이아웃을 구성하기 위한 CSS언어의 속성에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 J,K,L,M으로 시작하는 태그에 대해서 복습하고 넘어가자.
Inline : <kbd></kbd>,<label></label>,<map></map>,<mark></mark>
Block : <legend></legend>,<li></li>,<main></main>
오늘 무엇을 배웠지?
레이아웃
Z-index
: z 축에 영향을 미치는 속성 -> 디자인을 할 때 '맨 앞으로' '뒤로' 등 z축에 관련된 정렬을 설정
- z축이라는 '3차원'속성을 가진 position에서만 설정 가능(static은 안됨)
- 'z-index:숫자;'로 설정, 미설정시 z-index: 0; 이 기본값
+++TIP!
형제자매관계의 공간은 첫번째 공간이 3차원으로 설정한 경우 레이아웃이 겹칠 수 있지만,
2차원으로 설정하고, 다음 공간을 3차원으로 설정하면 레이아웃이 겹치지 않는다
Float, Cear
- float : 웹브라우저 크기와 관계없이 동일한 정렬 설정
- float: left; 좌측정렬
- float: right: 우측정렬
└ blue는 float: left; , green은 float: right;로 설정 - float: all; 설정한 공간크기에 맞는 x축 전체에 공간 차지
└ blue는 float: all; , green은 float: right;로 설정 - clear : float의 기능을 끌 때 설정 -> float 사용한 마지막 태그 다음에 사용하면 됨
+++TIP!
① 자식태그의 공간이 고정값인 경우, 부모태그도 고정값으로 공간을 설정해 주자!
(모든 태그의 공간이 고정 값인 경우, 좌우정렬에 대한 설정값이 변하지 않으므로 브라우저 크기가 굉장히 작아지는 경우에는 layout이 깨질 수 도 있음->공간의 부모의 태그가 가변값이 아닌 경우는 깨지지 않음)
② float 을 사용한 영역의 높이 값은 부모 태그 영역의 높이 값에 영향을 주지 않는다!
but, "overflow: hidden;"을 이용해 부모태그의 높이 값에 영향을 줄 수 있도록 할 수 있다!
③ float 사용은 position이 static/relative 인 경우에만 적용 가능하다!
④ float 값을 clear 하고 빠르게 파악하기 위해 관례적으로 사용하는 태그
html : <div class="clearfix"></div>
css : .clearfix {clear: both;}
∴ "clearfix" 클래스 전으로 float 기능이 켜져있고, 후로 꺼져 있다는 것을 빠르게 파악 할 수 있다.
overflow
- overflow : 공간보다 많은 정보를 담을 때 사용
- "overflow-y: scroll;" : y축을 기준으로 스크롤
- "overflow-x: scroll;" : x축을 기준으로 스크롤
- "overflow: hidden;" : 공간 크기를 벗어나는 정보는 숨김
flex
- flex : 레이아웃 정렬 기능
- "display: flex;" : 자동으로 설정한 container(부모태그영역)안에 순서대로 정렬
└ flex-direction: ; - "flex-direction: row;" :기본값, x축기준으로 정렬(좌->우)
- "flex-direction: colum;" : y축 기준으로 정렬(상->하)
- "flex-direction: row-reverse;" : x축 기준 반대로 정렬(우->좌)
- "flex-direction: colum-reverse;" : y축 기준 반대로 정렬(하->상)
└ flex-wrap: ; - "flex-wrap: nowrap;" : 기본값, 부모영역의 공간에 맞춰 자동으로 속해있는 영역의 값이 조정됨
- "flex-wrap: wrap;" : 속한 영역의 합이 설정한 부모영역보다 큰 경우 자동으로 줄바꿈해서 표현-> 속한 영역의 크기변화 없음
└ flex-fow: ; ->direction과 wrap을 한꺼번에 설정 - "flex-flow: row wrap;" : "flex-direction: row;"과 "flex-wrap: wrap;"
└ justify-content: ; x축 방향 정렬 - "justify-content: flex-start;" : 기본값, 시작점을 기준으로 정렬
- "justify-content: flex-end;" : 끝점을 기준으로 정렬
- "justify-content: center; : 중앙을 기준으로 정렬
- "justify-content: space-between;" : 아이템 사이에 균일한 간격을 만들어 정렬
- "justify-content: space-around;" : 아이템들의 둘레에 균일한 간격을 만들어 정렬
└ align-items: ; y축 방향 정렬 - "align-items: flex-start;" : 기본값, 시작점을 기준으로 정렬
- "align-items: flex-end;" : 끝점을 기준으로 정렬
- "align-items: center;" : 중앙을 기준으로 정렬
- "align-items: baseline;" : 각 영역들 중 가장 기저점을 기준으로 정렬
+++TIP!
flexbox.help 사이트를 이용하자! (https://flexbox.help/)
중앙정렬
① "margin: 0 auto;" : 상하는 0px, 좌우는 자동으로 정렬 ->Block 요소 주로 사용하는 중앙정렬
② "left: 50%; margin-left: 숫자px;" : 숫자는 공간의 너비의 절반값
ex) width: 300px인 경우 150px ->공간의 크기에 따라 숫자를 재설정해주어야 함.
무엇이 어려웠지?
시간상으로는 짧은 시간이지만, 빽빽히 새로운 내용으로 알차게 들어있는 수업내용이 오늘 수업 중 가장 어려운 부분이었다. 저번주에 한 position에 대한 개념도 확실하게 자리를 잡고 있던 상태는 아니었던 터라 저번주 내용 파생된 내용으로 굉장히 많은 양을 새로 배우니 흡수하는 속도가 점점 느려지는게 느껴졌다.
어떻게 해결했지?
수업을 한시간 쯤 들었을 때인가, 새로 배우는 양이 점점 많아져서 머리에서 부담을 느낄 때였다. 그때 선생님이 '아 너무 많아서 flex에 대한 내용은 포기를 해야할까?' 이런 생각이 들 수도 있다고 하셨다. (귀신같으심..) 그러면서 알려주신 것이 'flexbox help'이다. 이 사이트에서 flex의 기능에 대한 설명을 아주 직관적으로 잘 볼 수 있어서 도움이 된다고 알려주셨다. (최대한 모든 내용을 숙지하고 응용하면 더할나위 없이 좋겠지만...)
그래서?
매일 공부하다가 2일 쉬었다고 내용을 살짝 잊었다. 근데 저번주를 바탕으로 더 확장된 개념을 새로 배우는 거라 복습 없이는 배운걸 제대로 활용 못할것 같다는 느낌을 아주 강렬하게 받고 있다. 내일 실습을 하는데 저번주까지 배운 내용을 총 망라하는 실습일 테니 오늘 배운것까지 복습을 많이 해야 잘 따라 갈 것 같아서 조금더 복습하고 오늘을 마무리 해야겠다.
sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0705
