🐰 오늘도 실시간 온라인 수업!
오늘은 CSS 문법, 부트스트랩을 배웠고
부트스트랩은 내용이 너무 많아서 다시 복습해서 정리해서 올릴 예정이다!
CSS
- class 선택자는 grouping 할 때 사용하고 id는 개별적인 값을 주고 싶을 때 사용한다.
Grid
Flex는 한 방향 레이아웃(1차원) 시스템이고 Grid는 두 방향 레이아웃 시스템이다!
<div class="container">
<div class="item">G1</div>
<div class="item">G2</div>
<div class="item">G3</div>
<div class="item">G4</div>
<div class="item">G5</div>
<div class="item">G6</div>
<div class="item">G7</div>
<div class="item">G8</div>
<div class="item">G9</div>
</div>부모 요소인 div.container를 Grid Container라고 부르고 자식 요소인 div.item들을 Grid Item이라고 부른다.
container가 전체 공간이고 item이 전체 공간 안에서 배치!
grid-template-columns는 column의 배치grid-template-rows는 row의 배치를 결정한다. px 단위로 표현할수도 있고 $fr을 이용해 비율로 표현할수도 있다.
둘을 같이 쓸 수도 있는데grid-template-columns: 100px 2fr 1fr ;은 첫번째 column는 100px로 고정하고 그 다음 column들은 2:1로 배치된다.
<html>
<body>
<style>
#container {
border: 5px solid green;
display: grid;
/* grid-template-columns: 100px 200px 300px; */
grid-template-columns: 1fr 2fr 1fr ; /*비율*/
}
div{
border: 5px solid blue;
margin: 5px;
}
</style>
<div>TOP</div>
<div id="container">
<div>LEFT</div>
<div>CENTER</div>
<div>RIGHT</div>
</div>
<div>BOTTOM</div>
</body>
</html>수업 때 해 본 예시 코드
Flex
추가로 수업때는 안 배웠지만 flex 이야기가 잠깐 나왔어서 궁금해서 더 찾아봤다.
<div class="container">
<div class="item">f1</div>
<div class="item">f2</div>
<div class="item">f3</div>
</div>부모 요소인 div.container를 Flex Container라고 부르고 자식 요소인 div.item들을 Flex Item이라고 한다.
컨테이너가 flex의 영향을 받는 전체 공간이고 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것
flex의 속성들은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성이 있다
.container {
border: 10px pink solid;
display: flex;
/* display: inline-flex; */
}그냥 flex는 item들을 가로 방향으로 배치시키고 자신이 가진 내용물의 width 만큼만 차지한다. height는 자동으로 컨테이너의 높이만큼 늘어남!
(float과의 차이점)
inline-flex는 컨테이너가 주변요소들과 어떻게 어우러질지 결정!
- flex-direction : 배치 방향 설정
.container {
flex-direction: row;
/* flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse */
}- row: 가로 방향 배치
row-reverse: 역순으로 가로 방향 배치
column: 세로 방향 배치
column-reverse: 역순으로 세로 방향 배치 - flex-wrap: 줄넘김 처리 설정
.container {
/* flex-wrap: nowrap; */
/* flex-wrap: wrap; */
flex-wrap: wrap-reverse;
} - nowrap: 기본값 줄바꿈 X
wrap: 줄바꿈 O 넘치면 내려감
wrap-reverse: 줄바꿈O 역순 배치
flex-direction과 flex-wrap은 flex-flow로 한꺼번에 지정할 수 있다!
- justify-content
.container {
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-around; */
justify-content: space-evenly;
}- justify-content는 메인축 방향으로 아이템들을 정렬한다.
flex-direction이 가로면 가로가 메인축 방향 세로면 세로축 방향
space-between: 아이템들의 사이에 균일한 간격을 만들어 줌
space-around: 아이템들의 around에 균일한 간격을 만들어 줌
space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌 - align-items
.container {
align-items: stretch;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* align-items: baseline; */
}- justify-content와 수직방향의 정렬
stretch: 아이템들이 수직축 방향으로 끝까지 늘어남
flex-start: 아이템들이 시작점으로 정렬
flex-end: 아이템들이 끝으로 정렬
baseline: 아이템들이 텍스트 베이스라인 기준으로 정렬
꾸준히 열심히!