HTML/CSS 활용

Minsu Lee·2023년 4월 14일

✨ SEB FE

Unit4 HTML/CSS 활용

💡 용기를 가지고, 위험을 감수하라. 왜냐하면 이 세상에서 경험을 대신할 수 있는 것은 아무것도 없기 때문이다.
"Be Brave. Take Risks. Nothing can substitute experience."
-파울로 코엘료(Paul Coelho)

📌 레이아웃(Layout)

레이아웃 : 요소의 위치를 목적에 맞게 배치하는 것

🔍 와이어프레임(Wireframe)과 목업(Mock-up)

와이어프레임(Wireframe)

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다.

목업(Mock-up)

대부분의 산업에서 목업은 실물 크기의 모형을 뜻한다. 실물 제품이 없는 무형의 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다.

🔍 화면 나누기

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

[수직 분할] 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치하기다.
[수평 분할] 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치한다.
수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있다.

display : flex

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

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

flex-direction : 정렬 축 정하기

flex-wrap : 줄 바꿈 설정하기

justify-content : 축 수평 방향 정렬

align-items : 축 수직 방향 정렬

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

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

💻 화면 나누기 실습

결과

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="vsc">
      <!-- 아이콘 영역 -->
      <div class="icons">
        <div class="icon">아이콘1</div>
        <div class="icon">아이콘2</div>
        <div class="icon">아이콘3</div>
      </div>

      <!-- 영역 1~3 -->
      <div class="area-div1">
        <div class="area1_1">영역1</div>
        <div class="area1_1">영역2</div>
        <div class="area1_2">영역3</div>
      </div>

      <!-- 영역 4~5 -->
      <div class="area-div2">
        <div class="area2_1">영역4</div>
        <div class="area2_2">영역5</div>
      </div>
    </div>
  </body>
</html>

* {
  box-sizing: border-box;
  font-size: large;
}
body {
  margin: 0;
  padding: 0;
  height: 80vh;
  justify-content: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

body .vsc {
  display: flex;
  width: 80%;
  height: 55%;
}

/* 아이콘 영역 */
.vsc div.icons {
  border: 1px solid seagreen;
  flex-grow: 1;
  margin: 1px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.icons .icon {
  border: 3px dotted tomato;
  width: 60%;
  height: 15%;
  margin: 10px 0;
}

/* 영역 1~3 */
.vsc div.area-div1 {
  border: 1px solid seagreen;
  flex-grow: 4;
  margin: 1px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vsc div.area-div1 div {
  margin: 5px 0;
}

div.area-div1 .area1_1 {
  border: 3px dotted tomato;
  width: 80%;
  flex-grow: 2;
}

div.area-div1 .area1_2 {
  border: 3px dotted tomato;
  width: 80%;
  flex-grow: 1;
}

/* 영역 4~5 */
.vsc div.area-div2 {
  border: 1px solid seagreen;
  flex-grow: 6;
  margin: 1px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vsc div.area-div2 div {
  margin: 5px 0;
}

div.area-div2 .area2_1 {
  border: 3px dotted tomato;
  width: 80%;
  flex-grow: 4;
}

div.area-div2 .area2_2 {
  border: 3px dotted tomato;
  width: 80%;
  flex-grow: 1;
}