[코드스테이츠 FE 45기] _2023.04.14

[코드스테이츠 FE 45기] _2023.04.14 _ Day 4

프론트앤드 부트캠프/Day

by 코린’s 2023. 4. 15. 12:56

728x90

오늘은 Day 4

2023년 04월 14일

오늘도 오전 9시부터 12시 전 까지는 자습 시간이다.

오늘도 자습을 시작해 보자!!

오늘 부터 페어 활동을 한다고 한다.

처음 해보지만 모두 모두

화이팅!!

9 : 00 ~ 12:00

자습

Unit4 [HTML/CSS] 활용

오늘의 목차

Chapter1. 레이아웃 Chapter2. Flexbox Chapter3. 실습

Chapter1. 레이아웃

Chapter1-1. 와이어프레임

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다.

목업(Mock-up)

프론트엔드 개발에서 목업(mock-up)은 디자인 시안 혹은 시뮬레이션으로, 개발하려는 웹사이트나 어플리케이션의 디자인을 시각적으로 보여주기 위한 것입니다. 목업은 보통 그래픽 디자인 툴(예: 포토샵, 일러스트레이터)을 사용하여 제작하며, 레이아웃, 색상, 폰트, 그림 등의 디자인 요소를 담고 있습니다.

목업은 개발자와 디자이너, 고객 간의 의사소통 수단으로 사용됩니다. 디자이너가 고객의 요구사항을 바탕으로 디자인을 만들어 개발자에게 전달하면, 개발자는 목업을 참고하여 웹사이트나 어플리케이션을 개발합니다. 이렇게 함으로써 개발자와 디자이너 간의 의사소통이 원활하게 이루어지며, 개발과 디자인의 일관성을 유지할 수 있습니다.

또한, 목업은 고객이 디자인을 미리 확인할 수 있게 해줍니다. 고객은 목업을 보고 디자인에 대한 의견을 제시하거나 수정 요청을 할 수 있으며, 이를 바탕으로 디자이너는 더 나은 디자인을 제공할 수 있습니다.

총론적으로 목업은 개발자와 디자이너, 고객 간의 의사소통을 원활하게 하고, 디자인의 일관성을 유지하며, 고객이 디자인을 미리 확인할 수 있게 해주는 중요한 도구입니다.

하드코딩이란?

하드코딩(Hard coding)은 소프트웨어 개발에서, 코드를 수정하거나 변경하기 어려운 방식으로 프로그램을 작성하는 것을 말합니다.

즉, 하드코딩된 코드는 프로그램을 수정하거나 유지보수하는 데 어려움을 줄 수 있습니다.

하드코딩은 보통, 상수(constant)나 변수(variable) 대신에 값을 직접 코딩하는 방식을 말합니다. 예를 들어, 프로그램에서 사용되는 특정 값을 변경해야 할 경우, 해당 값을 직접 코드에 삽입해 놓은 경우를 하드코딩으로 볼 수 있습니다.

하드코딩의 가장 큰 문제점은 유지보수와 확장성에 있습니다. 하드코딩된 값은 변경하기 어렵기 때문에, 프로그램에 새로운 기능을 추가하거나, 변경사항을 적용할 때 많은 어려움을 겪게 됩니다. 또한, 같은 값을 여러 곳에서 사용하는 경우, 값이 변경되었을 때 이를 일일이 찾아 변경해주어야 하기 때문에 오류가 발생할 가능성이 높습니다.

따라서, 하드코딩은 최대한 피하는 것이 좋습니다. 상수나 변수를 사용하여 값을 설정하고, 값을 변경해야 할 경우에는 해당 변수의 값을 변경하는 방식으로 코드를 작성하는 것이 좋습니다. 이렇게 하면 코드의 수정과 유지보수가 훨씬 쉬워지며, 확장성이 좋아집니다.

Chapter2. Flexbox

Chapter2-1. Flexbox

Flexbox는 CSS3에서 도입된 레이아웃 모듈로, 웹 페이지에서 요소들을 정렬하고 배치하는데 유용한 방법을 제공합니다. Flexbox는 요소들이 위치할 수 있는 주축(main axis)과 교차축(cross axis)을 기반으로 하는 1차원 레이아웃 시스템입니다.

Flexbox를 사용하면, 각각의 요소들이 주축을 따라 유연하게 배치될 수 있으며, 교차축을 기준으로 정렬할 수도 있습니다. Flexbox는 부모 요소에 대한 설정을 통해 자식 요소들을 배치하며, 부모 요소에 대한 display 속성을 flex로 설정하면 Flexbox 레이아웃이 활성화됩니다.

display: flex 분석하기

display: flex는 CSS에서 Flexbox를 활성화하기 위한 속성입니다.

이 속성을 적용하면 해당 요소의 자식 요소들을 Flexbox 컨테이너로서 배치할 수 있습니다.

여기서 잠깐 다시 부모와 자식 요소 개념 정리

HTML에서 요소(element)는 다른 요소의 부모(parent) 또는 자식(child)이 될 수 있습니다.

<div>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</div>

위 코드에서 <div> 요소는 <h1>과 <p> 요소의 부모입니다. 반면, <h1>과 <p> 요소는 <div> 요소의 자식입니다.

따라서 부모 요소는 자식 요소를 포함하고 있으며, 자식 요소는 부모 요소 내에 위치하게 됩니다. 이러한 부모-자식 관계를 활용하여 원하는 요소들을 그룹화하고, 그룹 내에서 스타일이나 동작 등을 지정할 수 있습니다. 예를 들어, 부모 요소에 스타일을 지정하면 자식 요소들도 해당 스타일을 상속하게 됩니다.

1-1 HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

1-1 CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  margin: 10px;
  padding: 10px;
  background-color: #ddd;
}

실행 결과

1-2 HTML & CSS

<!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>
</head>
<body>
    <div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<style>
    .container {
  display: flex;

}

.item {
  display: flex;  
  margin: 10px;
  padding: 10px;
  background-color: #ddd;
}

</style>
</body>
</html>

1-2 실행결과

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

Flexbox 레이아웃을 구성하기 위해 부모 요소에 적용해야 하는 주요 Flexbox 속성은 다음과 같습니다.

1. display: flex

Flexbox를 활성화하기 위한 속성으로, 부모 요소에 적용되어야 합니다.

.parent {
  display: flex;
}

2. flex-direction : 정렬 축 정하기

Flex Container의 주축 방향을 설정하는 속성으로, row, row-reverse, column, column-reverse 중 하나를 선택하여 적용할 수 있습니다.

.parent {
  flex-direction: row;
  /* row, row-reverse, column, column-reverse */
}

3. flex-wrap : 줄 바꿈 설정하기

Flex Item들이 한 줄에 모두 표시되지 못할 경우 여러 줄로 나누는지 설정하는 속성으로, nowrap, wrap, wrap-reverse 중 하나를 선택하여 적용할 수 있습니다.

.parent {
  flex-wrap: wrap;
  /* nowrap, wrap, wrap-reverse */
}

4. justify-content : 축 수평 방향 정렬

주축 방향으로 Flex Item들의 정렬을 설정하는 속성으로, flex-start, flex-end, center, space-between, space-around, space-evenly 중 하나를 선택하여 적용할 수 있습니다.

.parent {
  justify-content: center;
  /* flex-start, flex-end, center, space-between, space-around, space-evenly */
}

flex-direction : row 인 경우 ↔

flex-direction : column 인 경우 ↕️

5. align-items : 축 수직 방향 정렬

교차축 방향으로 Flex Item들의 정렬을 설정하는 속성으로, flex-start, flex-end, center, baseline, stretch 중 하나를 선택하여

적용할 수 있습니다.

.parent {
  align-items: center;
  /* flex-start, flex-end, center, baseline, stretch */
}

flex-direction : row 인 경우 ↕️

flex-direction : column 인 경우 ↔

Flex 정리

Flex Item	flex, order, align-self
Flex Container	display, flex-direction, justify-content, align-items

1. Flex Container와 Flex Item

Flexbox는 먼저 Flex Container와 Flex Item의 개념을 이해해야 합니다.

Flex Container는 요소들을 담는 부모 요소이고, Flex Item은 Flex Container 안에 들어가는 자식 요소입니다.

2. Flex Container의 속성

Flex Container에는 display, flex-direction, justify-content, align-items 등의 속성이 있습니다.

display: flex; 는 Flex Container를 지정합니다.
flex-direction: row; 또는 flex-direction: column; 으로 Flex Item들을 배치할 방향을 지정할 수 있습니다.
justify-content: center; 또는 justify-content: space-between; 등으로 Flex Item들을 가로 방향으로 정렬합니다.
align-items: center; 또는 align-items: stretch; 등으로 Flex Item들을 세로 방향으로 정렬합니다.

3. Flex Item의 속성

Flex Item에는 flex, order, align-self 등의 속성이 있습니다.

flex: 1; 로 Flex Item의 너비와 높이를 조절할 수 있습니다.
order: 1; 로 Flex Item의 순서를 조절할 수 있습니다.
align-self: center; 로 개별 Flex Item을 세로 방향으로 정렬할 수 있습니다.

728x90

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

[코드스테이츠 FE 45기] _2023.04.18 _ Day 6 (0)	2023.04.18
[코드스테이츠 FE 45기] _2023.04.17 _ Day 5 (0)	2023.04.17
[코드스테이츠 FE 45기] _2023.04.13 _ Day 3 (2)	2023.04.13
[코드스테이츠 FE 45기] _2023.04.12 _ Day 2 (0)	2023.04.12
[코드스테이츠 FE 45기] _2023.04.11 _ Day 1 (1)	2023.04.11

코딩하는 짱구

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문