[DAY11] HTML/CSS 활용 + 과제

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

와이어프레임과 목업, HTML/CSS 활용에서 Flexbox를 이용한 레이아웃 구성 방법과 각 속성의 적용에 대해 정리한다.

 

와이어프레임 / 목업	와이어프레임은 디자인 전 단계에서 선으로 화면의 윤곽을 잡는 작업이고, 목업은 실제 제품처럼 HTML 문서를 하드코딩하여 구성하는 방식임.
HTML 구성 원칙	콘텐츠 흐름(좌→우, 위→아래)에 따라 수직 분할 후 수평 분할 순서로 레이아웃을 구성함.
Flexbox — 부모 속성	flex-direction으로 정렬 축, flex-wrap으로 줄 바꿈, justify-content로 축 수평 정렬, align-items로 축 수직 정렬을 설정함.
Flexbox — 자식 속성	flex: grow shrink basis 형태로 자식 요소의 팽창·수축·기본 크기를 제어함. 기본값은 flex: 0 1 auto임.

 

⭐HTML/CSS 활용

---

1. 와이어프레임(Wireframe)

[그림] 특정 목적을 가진 프로그램의 와이어프레임

2. 목업(Mock-up)

---

• 목업: 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 구성하는 것이다.
• 예를 들어, 트위터에서 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식이다.

1) 하드코딩이란?

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

[코드] 하드코딩한 2단의 일부

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

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

[코드] 변수를 이용한 데이터 관리

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

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

[코드] 하드코딩한 HTML 문서

와이어프레임과 목업을 작성하는 단계를 건너뛰고 JavaScript로 동작하는 애플리케이션을 만들고 싶겠지만, 반드시 진행해야 한다. HTML 문서를 통해 화면을 다 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 설계도 없이 건물을 짓는 것과 같다.

와이어프레임의 목적

상단의 와이어프레임은 POS기(상품 주문 시스템)를 나타내고 있다. 메뉴와 카트, 총합계가 잘 나타나 있는지 확인한다.

3. HTML 구성하기

---

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

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

1) Flexbox로 레이아웃 잡기

---

Flex(Flexible)는 "잘 구부러지는, 유연한"을 의미한다. 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

2) display: flex 분석하기

---

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

우선 HTML로 3개의 <div> 요소를 자식으로 가진 <main> 요소를 작성한다.

<main>
	<div>box1</div>
	<div>box2</div>
	<div>box3</div>
</main>

각 요소들이 눈에 잘 보이도록 CSS로 <main> 요소에는 빨간색 점선, <div> 요소들에는 초록색 실선으로 테두리를 설정하고, 전체적으로 margin과 padding도 10픽셀씩 설정한다.

main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}

다음과 같은 화면이 나오는 것을 확인할 수 있다. <div> 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지한다.

이번에는 부모 요소인 <main> 요소에 display: flex 속성을 적용한다.

main {
  **display: flex;**
  border: 1px dotted red;
}

...

속성을 적용하면 자식 요소인 <div> 요소들이 왼쪽부터 가로로 정렬되고, 내용만큼의 공간만 차지하는 것을 확인할 수 있다.

이처럼 Flexbox 속성들을 활용하면 요소의 정렬과 요소가 차지하는 공간을 설정할 수 있다.

4. 부모 요소에 적용해야 하는 Flexbox 속성들

---

Flexbox 속성을 사용할 때는 "속성을 지정해 주는 위치"를 유의해야 한다. Flexbox 속성 중에는 부모 요소에 적용해야 하는 속성들과 자식 요소에 적용해야 하는 속성들이 있다. 적절한 위치에 속성을 지정하지 않으면 요소들이 원하는 대로 정렬되지 않는다.

1) flex-direction : 정렬 축 정하기

부모 요소에 설정하는 속성으로, 자식 요소들을 정렬할 축을 정한다. 아무 설정도 하지 않으면 기본적으로 가로 정렬을 한다.

main {
	display: flex;
	**flex-direction : row;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

주요 속성값은 다음과 같다.

2) flex-wrap : 줄 바꿈 설정하기

하위 요소들의 크기가 상위 요소의 크기를 넘을 때 자동 줄 바꿈을 할 것인지 정한다. 설정하지 않으면 줄 바꿈을 하지 않는다.

main {
	display: flex;
	**flex-wrap : nowrap;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

주요 속성값은 다음과 같다.

3) justify-content : 축 수평 방향 정렬

자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 가로 방향을, 세로로 정렬되어 있다면 세로 방향을 기준으로 정렬 방식을 지정하는 속성이다.

주요 속성값으로는 flex-start, flex-end, center, space-between, space-around가 있다. 각 속성값의 특성이 잘 드러날 수 있도록 자식 요소의 크기를 동일하게 설정하였다.

• flex-direction: row인 경우 ↔

• flex-direction: column인 경우 ↕️

4) align-items : 축 수직 방향 정렬

자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 세로 방향을, 세로로 정렬되어 있다면 가로 방향을 기준으로 정렬 방식을 지정하는 속성이다.

주요 속성값으로는 stretch, flex-start, flex-end, center, baseline이 있다. 각 속성값의 특징이 명확하게 드러날 수 있도록 자식 요소의 글씨 크기를 각각 다르게 설정하였다.

• flex-direction: row인 경우 ↕️

• flex-direction: column인 경우 ↔

5. 자식 요소에 적용해야 하는 Flexbox 속성들

---

• Flexbox 속성들을 활용해 요소의 정렬과 요소가 차지하는 공간을 설정할 수 있다.
• 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있다면, 자식 요소에 적용해야 하는 flex 속성은 요소가 차지하는 공간과 관련이 있다.

1) flex 속성의 값

---

flex 속성은 세 가지 값을 지정할 수 있다.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수): 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다.
• shrink(수축 지수): 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지를 의미한다.
• basis(기본 크기): 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기가 얼마인지를 의미한다.

flex 속성을 설정하지 않으면 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다.

flex: 0 1 auto;

이 순서와 기본값은 반드시 기억해야 한다. flex: grow shrink basis → flex: 0 1 auto

 

flex 속성 안에 세 가지 값을 한 번에 설정할 필요 없이, 각 값을 따로 지정할 수도 있다.

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

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

---

• 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다.
• 자식 <div> 요소들에 id를 추가해서 grow 값을 변경하며 화면 변화를 확인해 보자.

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

grow의 기본값인 0은 빈 공간이 있어도 늘어나지 않는다. 따라서 빈 공간이 있어도 박스들이 늘어나지 않는다. grow의 값을 변경하며 어떤 변화가 생기는지 확인해 보자.

box1만 flex-grow: 1로 설정한다. flex-grow의 기본값은 0이므로 나머지 박스는 flex-grow: 0인 상태이다.

box2도 flex-grow: 1로 설정한다. box3만 flex-grow: 0인 상태이다.

box3도 flex-grow: 1로 설정한다. 세 박스 모두 flex-grow: 1인 상태이다.

grow(팽창 지수)는 정렬 축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 이해하면 된다.

• 첫 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 0 : 0이므로 box1이 모든 공간을 차지한다.
• 두 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 1 : 0이므로 box1과 box2가 1:1로 공간을 나눠 가진다.
• 세 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 1 : 1이므로 세 박스가 1:1:1로 공간을 나눠 가진다.

팽창 지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져간다. 팽창 지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 된다.

3) shrink : 자식 박스는 얼마나 줄어들 수 있을까?

---

• grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다. 비율이 클수록 더 많이 줄어든다.
• flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 권장하지 않는다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장한다. flex-shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문이다.
• flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다.

4) basis : 이 박스의 기본 크기는 얼마일까?

---

• 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다.
• flex-grow가 0일 때, basis 크기를 지정하면 그 크기가 유지된다.

grow를 0 : 1 : 1로 설정하고, box1에 flex-basis: 50px를 설정한다.

box1의 크기가 늘어나거나 줄어들지 않고 50px을 유지하는 것을 확인할 수 있다.

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지된다.

display: flex가 적용된 컨테이너 내부의 자식 박스는 경우에 따라 basis로 설정된 크기가 항상 유지되는 것은 아니다. flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis에 적용한 값보다 커질 수도 있다. 실제 레이아웃을 구현하다가 막히는 경우에는 다음의 원리를 참고할 수 있다.

🚀 참고

• width와 flex-basis를 동시에 적용하는 경우 flex-basis가 우선된다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확한 크기를 보장하지 않는다.
• flex-basis를 사용하지 않는다면, 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해 width 대신 max-width를 쓸 수 있다.

⭐후기

---

• 와이어프레임과 목업을 통해 웹 페이지의 기본 구조를 이해하는 데 많은 도움이 되었다.
• 내용이 조금 어려웠지만, 기본적인 구성과 속성들을 실습해 보며 웹 페이지의 구조와 디자인에 대해 파악할 수 있었다.

⭐과제

---

계산기

• font-family 속성으로 폰트를 계산기처럼 설정하였다. background-color 속성으로 디스플레이 배경 색상을 실제 계산기 색상으로 지정하였다. border-radius 속성으로 계산기와 버튼의 모서리를 둥글게 하였다. 사진으로는 보이지 않지만 :hover를 사용하여 마우스를 올리면 색이 바뀌는 효과를 설정하였다.
• background-image 속성으로 body 태그의 배경을 이미지로 지정하려고 했는데, 적절한 이미지를 찾지 못하여 연두색으로 배경색을 지정하였다. 공학용 계산기처럼 만들고 싶었으나 생각대로 구현이 되지 않았다.
• 제출 완료.

⭐참고자료

---

1) Sandbox, "css-flex-todo", https://codesandbox.io/s/css-flex-todo-slvutb

2) Flexbox Froggy, https://flexboxfroggy.com/#ko

3) Sandbox, "day2-calculator", https://codesandbox.io/s/happy-zhukovsky-kp85lr?file=/session.css

4) fejigu.log, "HTML, CSS 계산기 만들기", 2022.07.04, https://velog.io/@fejigu/HTML-CSS-계산기-목업-만들기

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.