오늘도 삽질중

CSS(레이아웃 리셋, Flexbox) (수정중) 본문

HTML,CSS

CSS(레이아웃 리셋, Flexbox) (수정중)

해빋 2021. 9. 7. 13:58

 

기본 스타일링을 제거하는 CSS 코드의 예시

 

<body>태그는 기본 스타일에 약간의 여백이 있다. 

width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다.

브라우저(크롬,사파리)마다 기본 스타일이 조금씩 다르다.

이 모든 문제들을 아래의 코드를 적용시키면 기본 스타일링을 제거하여 디자인한 대로 레이아웃 구현 가능

* {
 box-sizing: border-box;
 }
 
 body {
 margin: 0;
 padding: 0;
 }

 

flexbox로 레이아웃 잡기

flexbox로 레이아웃을 잡는다 = 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는다.

 

🤜  display : flex 

- 부모박스 요소에 display : flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법

기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치된다.

<div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>
#outer {
  display:flex;
  border:1px dotted red;
  padding: 10px;
}
.box {
  border: 1px solid teal;
  padding: 10px;
  margin-right: 10px;
}

🤜  flex 요소에 방향 지정하기( flex-direction )

기본적으로 flexbox는 박스가 수직으로 분할되는 것이 기본이지만 방향을 설정해주면 수평으로도 가능하다

flex-direction 속성은 부모 박스요소에 적용한다. 자식 박스에 특별한 속성을 주지 않아도, 부모 요소에 의해 자식 요소가 영향을 받는다.

(이게 어떻게 사용했지>>...?)

row(기본값)

column

 

기억!

display 속성에 flex 적용시키는것은 부모 요소이다.( display : flex )

자식 요소는 flex라는 속성에 값을 적용한다. ( flex : 0 1 auto )

 

🤜  flex: <grow> <shrink> <basis>  

자식 박스에 어떠한 속성도 주지 않으면, 왼쪽부터 오른쪽으로 컨텐츠의 크기만큼 배치가 된다.

flex 속성에 적용되는 세가지는 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있다. (순서, 기본값 꼭 외우기)

flex : 0 1 auto;  // 자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값

grow, shrink , basis 도 각 값을 따로 지정할 수 있다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라진다.

 

🤜  grow:   자식 박스는 얼마나 늘어날 수 있을까?

 

.target { 
	flex : 1 1 auto;
}

예시

<div id="outer">
  <div class="box target">.box.target</div>
  <div class="box">.box</div>
  <div class="box">.box</div>
</div>
#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
}

.box.target {
  flex : 1 1 auto;
}

target 클래스에만 flex-grow 속성에 1을 적용한 경우

target 클래스에서, flex-grow속성의 값을 1로 변경한다.

target클래스를 가지고 있는 첫 번째 자식박스는 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어난다. 전체 자식요소가 가진 grow값의 합은 1 + 0 + 0 = 1 이므로, target클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 이다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제와한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이이다.

 

- box 클래스의 flex-grow는 기본값이 0이다. 만약 box클래스의 flex-grow속성에 값을 1로 설정하면, 모든 박스가 1의 비율로 늘어나려고 하기때문에 각각 1+ 1+ 1 , 각각 1/3 크기를 가진다. 

모든 자식 박스의 flex-grow속성이 0보다 큰 값을 동일하게 가지는 경우, 각 박스의 가로 길이는 동일한 비율을 가진다.

.box { 
	flex: 1 1 auto;
   }

box 클래스의 flex-grow 속성에는 1을 그대로 두고, target 클래스의 flex-grow속성의 값을 변경해보자

.box {
	flex : 1 1 auto;
}

.target {
	flex : 2 1 auto;
}

// 자식 박스가 총 3개인데, target만 2의 비율을 가진다.
// 2(target) + 1(box2) + 1(box3) = 4이므로,
// target의 비율은 50%이다.

<위의 내용 정리>

- target 클래스에 적용된 flex-grow 속성의 값이 1, box클래스에 적용된 flex-grow 속성의 값이 1일 경우, grow가 적용도니 전체 값은 1+1+1 = 3 이다. 따라서 각 자식 박스의 가로 길이는 1/3의 길이를 가진다.

- target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex - grow 속성의 값이 1일경우, grow가 적용된 전체 값은 2+1+1 =4 이다.  따라서, target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이를 가진다.

🤜 shrink : 자식 박스는 얼마나 줄어들 수 있음?

shrink는 설정한 비율만큼 박스 크기가 작아진다. 보통 flex-grow속성과 flex-shrink속성은 같이 사용되지 않는데, 그 이유는 실제 크기를 예측하기 어렵기 때문이다. 따라서 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto 와 같이 사용한다.

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink속성은 기본값인 1로 두어도 무방하다.

 

🤜  basis: 이 박스의 기본 크기는 몇인가?

- 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다.

flex-grow가 0일때, basis크기를 지정하면 그 크기는 유지된다. (기억하기)

<div id="outer">
  <div class="left">메뉴</div>
  <div class="right">본문</div>
</div>
* {
  box-sizing: border-box;
}

#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.left {
  border: 1px solid green;
  padding: 10px;
  flex: 0 1 100px;     // grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. 
}

.right {
  border: 1px solid green;
  padding: 10px;

.right {
  flex: 1 1 auto;		// 우측 박스는 grow를 1로 설정해 나머지 공간을 채워준다.
}

 

'HTML,CSS' 카테고리의 다른 글

CSS(Selector 구체적으로)  (0) 2021.09.07
css(시맨틱태그,em/rem,css내용분해,class/id,background)  (0) 2021.08.30
inline  (0) 2021.08.30
HTML  (0) 2021.08.27
css(margin, border, padding)  (0) 2021.08.25
'HTML,CSS' Related Articles more
Comments