기본적으로
화면을 구성하다보면 내마음대로 되지않는경우를 많이느낀거같다.
CSS 정말 내마음대로 되지않는 녀석이였다.
width , height , margin, padding 거기에 absolute에 각 좌표들 들어가고
하다보면 나중에 각 영역들이 상호간 겹치고
어떤 특정 값들은 우선순위에서 밀려서 취소선 그어져있고..
하여간 마음댜로안되는 친구인데
css를 배우면서 유일하게 첫 스타트가 좋았던게 바로
display : flex이다.
(추후 grid라는 더좋은것이 있는데 flex에 대해서 어느정도 알아야 이해가 쉽다)
<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>
.w70 { width: 70%; }
.h40 { height: 40%; }w70이나 ,h40 같은 클래스이름 직관적으로 어떤걸 의미하는지 알거같은
CSS작성기법을 Atomic CSS방법론 이라고한다.
레이아웃 리셋
HTML 문서에서 기본적으로 default 인 속성들이있다.
바디에 약간의 여백이있고
- (0,0)의 위치에서 시작하고싶은데
<body>태그가 약간의 여백을 가지고있다. - width,height 계산이 여백을 포함하지않아서 계산하기 힘들다. ( 박스크기 측정기준
box-sizing) - 브라우저마다 여백이나 글꼴이 조금씩 다르다
이러한 수요로 초기화를 위한 다양한 라이브러리가 등장했지만 , 굳이 쓸필요없으며 밑에 코드 몇줄이면 도움이된다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
Flexbox로 레이아웃 잡기
기본적으로 container와 item으로 구분된다.
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
.container {
display: flex;
border: 1px dotted red;
padding: 10px;
}
.item {
border: 1px solid green;
padding: 10px;
}
우리가 알던 div는 block에 한줄씩 자리잡아가면서
밑으로 쌓여간다.
하지만 display : flex 적용하자마자 , item들이 옆으로 쌓여간다. ( 디폴드 값이 row )
이 방향을 잡아주는 속성이바로
정렬할때 쓰는
컨텐츠 수평 정렬 (justify-content)
바깥 박스에 justify-content 속성을 이용하면, 주축을기준으로 아이템을 정렬한다
- flex-start
- flex-end
- center
- space-between
컨텐츠 수직 정렬 (align-items)
바깥 박스에 align-items 속성을 이용하면, 교차축을 기준으로 아이템을 정렬한다.
- flex-start
- flex-end
- center
- stretch
방향 flex-direction
기본값 : row
세로로 쌓이게하는 : column
flex속성
flex속성은 하위 아이템들에게 부여하는 속성이다.
flex : flex-grow , flex-shrink , flex-basis 를 포함하는 단축속성이다.
(따로 지정해줄수 있다는 얘기)
flex-grow
flex-grow는 각아이템들이 비율로 너비를 가질수있다.
예를들어 아이템이 3개이고 flex-grow값이 각각 1,2,1 이라면
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 된다.
flex-shrink
flex-shrink는 감소너비를 얘기하는데. 요소의 너비에 영향을 받기 때문에 계산하기 ㄷ까다롭다.
너비에 영향을 받는다 = width,height,flex-basis 등 너비가 지정된 경우를 의미
감소비율이 높으면 화면이 줄어들을때 먼저 빠르게 줄어든다.
flex-basis
기본너비를 의미합니다. 단축속성내에서 기본값은 0 이다.
내부 컨텐츠가 만큼 포함하고 증가너비를 잡아줄것인지에 대한것 같은 ?
auto : 아이템 내부에 컨텐츠길이만큼 일단 제외하고 나머지 너비를 기준으로 grow를 잡아서 비율로 나눠가진다.
0 : 아이템 내부이 컨텐츠길이를 고려하지않고 grow의 비율만큼 나눠서 가진다.
숫자 px : 기본적으로 이정도는 가진다. 라는 기본 너비를 잡아주는것이다. 컨텐츠가 짧아도 이정도는 기본적으로 너비로 할당되어라 라는 것
