[SEB] Section 1 - Single Page Application[CSS] 레이아웃, Selector(TIL 10일차)

박순호·2021년 10월 23일

코드스테이츠

CSS 중급

HTML 구성하기

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

[수직분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다.
[수평분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치합니다.

수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있습니다.

다음과 같이, VS Code와 비슷한 레이아웃을 적용한다고 가정해 볼 때

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

CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례로 적용합니다.

<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>

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

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

이렇게 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 합니다.

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있습니다. 때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 합니다.

박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, 태그가 가진 기본 스타일에 약간의 여백이 있습니다.
width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다.
브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다릅니다.
이러한 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장했지만, 사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현 가능합니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다.

display: 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"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치

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

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

row (기본값)
column

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

반드시 알아두기: grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
자식 박스에 어떠한 속성도 주지 않으면, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. 자식 요소의 flex 속성을 추가하지 않으면, 다음과 같은 기본값이 적용됩니다.

flex: 0 1 auto;

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

flex: <grow> <shrink> <basis>

이 순서와 기본값은 반드시 기억해야 합니다 "flex: grow shrink basis", "flex: 0 1 auto"
margin이나 padding에서 상하좌우 각 방향을 따로 지정할 수 있었던 것처럼, flex에 적용되는 grow, shrink, basis도 각 값을 따로 지정할 수 있습니다.

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

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다. 부모 박스 안에 n개의 자식 박스가 있다고 가정합니다. 각 자식 박스가 갖는 grow값의 총 합이 n이라면, grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미합니다. grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미합니다.

웹 앱 화면 설계하기

와이어프레임(Wireframe)

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다.

예제를 하나 보면 다음은 특정 목적을 가진 프로그램의 와이어프레임입니다. 이 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추할 수 있다면 이 와이어프레임은 그 목적을 성공적으로 달성한 것입니다.

목업(Mock-up)

대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 실물 제품이 없는 무형의 웹 또는 앱은 어떻게 목업을 만들까요? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식입니다.

하드코딩이란?

만일 JavaScript에서 변수를 사용하지 않고, 구구단을 만든다고 가정합니다. 변수를 사용하지 않고 구구단처럼 보이기 위해서는, 각 숫자의 단을 소스코드에 모두 출력하는 방법뿐입니다.

// 하드코딩의 예
console.log('2 x 1 = 2')
console.log('2 x 2 = 4')
console.log('2 x 3 = 6')
console.log('2 x 4 = 8')

우리가 역동적인 웹 어플리케이션을 만들기 위해서는, HTML 문서에 트윗 작성자, 내용을 변수로 관리하여 값을 동적으로 담아야 합니다.

// JavaScript 어딘가에는 tweet 내용이 담긴 객체가 존재합니다
let tweet = { user: '김코딩', content: 'SNS는 인생의...' }

그러나 아직 <div> 태그 내에 변수의 값을 전달하는 방법을 배우지 않았습니다. 아직은 변수를 이용할 수 없기때문에, HTML 문서에 아래와 같이 하나하나 입력해야 합니다. 이런 방식을 하드코딩이라고 합니다.

<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어가겠죠 -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

Sprint - Twittler 목업 만들기를 하며 느낀 점 : html과 css가 생소해서 처음에 제대로 공부하지 않아서 그런지 만들기가 어려웠다. 특히 css가 쉬우면서도 가장 어려운 것이라고 하는지 조금은 이해 할 것 같다. 원하는 위치와 모양을 만들기 위해 수정을 몇 번을 했는지 모르겠다. 아직 공부가 부족한 것 같아서 여러 번 연습해 봐야 할 것 같다.