(2-1) HTML/CSS 중급 - 레이아웃

 

HTML 구성하기

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐른다. CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행한다.

 

 

실제 VS Code 의 레이아웃을 분석해 큰 틀에서 추상화하면 다음과 같이 영역을 나눌 수 있다.

 

 

CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례로 적용한다. 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>

[코드] 레이아웃을 고려해 작성된 HTML 파일

 

 

참고 : 클래스 이름으로 지정된 w10, w20, w70 또는 h20, h40, h80 을 CSS로 구현하면 다음과 같다.

.w70 { width : 70%; }
.h40 { height : 40%; }

[코드] 클래스 이름에 맞는 CSS 구현

 

 

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있다. 때때로 HTML 문서가 갖는 기본 스타일이 레이아웃을 잡는 데 방해가 되기도 한다. 아래의 코드는 그럴 때 활용할 수 있는 기본 스타일링을 제거하는 CSS 코드의 예시 중 하나이다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

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

 

 

Flexbox 로 레이아웃 잡기

flexbox 로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. flex 속성이 무엇을 뜻하는지 구체적으로 학습해보자.

 

 

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>

[코드] "display: flex"를 적용시키는 예시를 위해 작성한 HTML 코드

 

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

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

[코드] HTML의 div 요소를 선택하여 부모요소에 "display: flex" 를 적용한 예시

 

 

[그림] "display: flex"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치된다.

 

변경사항은  codepen 에서 확인할 수 있다.

 

 

 

 

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

flexbox 는 박스가 수직으로 분할되는 것이 기본값이다. 그러나 방향만 설정해주면 수평으로도 분할할 수 있다. flex-direction 속성은 부모 박스요소에 적용한다. 자식 박스에 특별한 속성을 주지 않아도  부모 요소에 의해 자식 요소가 영향을 받는다. 주요 속성은 다음과 같다.

• row (기본값)
• column

 

주의! display 속성에 flex 를 적용하는 것은 부모 요소에 적용한다. ( display : flex ) 자식 요소는 flex 라는 속성에 값을 적용한다. ( flex : 0 1 auto )

 

 

반드시 알아두기: grow(팽창 지수), shirink(수축 지수), basis(기본 크기)

자식 박스에 어떠한 속성도 주지 안으면 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다. flex 속성을 추가하지 않으면 다음과 같은 기본값이 적용된다.

flex: 0 1 auto;

[코드] 자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값

 

flex 속성에 적용되는 세가지 영역은 margin이나 padding에서 띄어쓰기를 기준으로 의미하는 바가 구분되는 것과 동일하다. 그러나 flex 속성에 적용되는 세 가지는 기본 크기를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용된다. 각각의 값이 의미하는 것은 다음과 같다.

flex: <grow> <shirink> <basis>

[코드] flex 속성에 적용되는 세 가지 값의 종류

 

이 순서와 기본값은 반드시 기억하자. "flex: grow shirink basis", "flex: 0 1 auto"

margin이나 padding에서 상하좌우 각 방향을 따로 지정할 수 있었던 것처럼 flex에 적용되는 grow, shirink, basis도 각 값을 따로 지정할 수 있다.

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

[코드] flex에 입력되는 세 속성을 따로 입력할 수도 있다.

 

grow, shirink 속성은 단위가 없고 비율에 따라 결과가 달라진다. 부모 박스 안에 n개의 자식 박스가 있다고 가정해보자. grow 값의 합이 총 n이라면 grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미이다. grow 속성의 값을 2로 지정하면 2/n 의 길이를 의미한다. HTML 파일을 다음과 같이 변경하고 첫 번째 자식 박스에 target 클래스를 추가한 다음 여러가지 방법으로 접근해보겠다.

<div id= "outer">
  <div class= "box target">.box.target.</div>
  <div class= "box">.box</div>
  <div class= "box">.box</div>
</div>

[코드] html 파일에서 자식 박스 요소 중 첫 번째 자식 요소에 target 클래스를 추가한다.