

저의 이전 글 중 하나에서는 요즘 사람들이 자주 사용하는 HTML의 구식 습관에 대해 썼습니다. 이제 CSS의 구식 속성과 기술에 대해 이야기해보고, 이를 현대화하는 방법에 대해 이야기해보겠습니다.

# Float은 더 이상 사용되지 않습니다!

예전에는 우리 모두 float 속성을 사용했던 고전적인 시절이 있었습니다.

현대 브라우저가 flex와 grid와 같은 속성을 지원하기 시작한 이후로, float의 사용을 계속할 이유가 없다고 생각합니다.

<div class="content-ad"></div>

간단한 페이지 레이아웃을 만들어 보겠습니다. 사이드바와 콘텐츠 영역이 있는 레이아웃입니다.

## ❌ Old Skool

여기에서는 플로트 레이아웃을 사용했습니다:

플로트 속성을 사용하는 주요 단점은 요소가 페이지의 일반 흐름에서 제거된다는 것입니다. 따라서 `aside`와 `article` 요소 모두에 대해 플로트를 사용하면 부모 요소인 `main`이 높이를 가지지 않게 됩니다.

<div class="content-ad"></div>

만약 `footer` 요소에 `clear: both;`를 사용하지 않으면 페이지가 이렇게 보일 거에요:

![이미지](/assets/img/2024-08-26-5Old-SchoolPracticesinCSSShouldBeAvoided_0.png)

그리고 `main` 요소의 높이 값을 수정하려면(동시에 `footer`도 수정됩니다) 이렇게 오래된 녀석을 추가해야 해요:

```js
<div class="clearfix"></div>
```

<div class="content-ad"></div>

```js
.clearfix {
  clear: both;
}
```

너무 많은 수정과 버그가 있는 단순한 레이아웃이잖아요, 그러지 않나요?

## ✅ Knu Skool

<div class="content-ad"></div>

다행히도, Flexbox 레이아웃 방식이 있어요!

요즘에는 훨씬 편리하고 현대적인 방식으로 레이아웃을 다시 만들어봐요:

사이드바는 이제 내용 영역과 함께 전체적으로 늘어날 거예요!

여분의 div가 필요 없어요!

<div class="content-ad"></div>

내가 가장 좋아하는 부분은 자동 응답성 기능이에요! 부모 요소(`main` 예시에서)에 `flex-wrap: wrap;`를 추가하고 `aside` 요소에 고정된 `flex-basis` 값을 설정하면(예를 들면 15rem) 됩니다. 위의 예시를 사용하여 프레임 크기를 조정해보세요. 그러면 이렇게 마법같이 변화하는 것을 보실 수 있어요:

![image](/assets/img/2024-08-26-5Old-SchoolPracticesinCSSShouldBeAvoided_1.png)

자동 응답성에 관한 더 많은 팁은 제 글에서 읽어보세요:

# 열에 대한 측면 패딩

<div class="content-ad"></div>

## ❌ 옛날 얘기..

예전에는 Bootstrap 프레임워크를 많이 사용했었죠. 아마도 당신도 HTML 마크업에서 col-md-4 col-lg-5 col-sm-3 클래스들을 기억하고 계실 것입니다. 그런데 Bootstrap에 대한 내 가장 큰 우려 중 하나는 열 사이에 갭을 만들기 위해 해당 열에 padding-left와 padding-right 값을 추가한다는 점이었습니다.

![이미지](/assets/img/2024-08-26-5Old-SchoolPracticesinCSSShouldBeAvoided_2.png)

그리고 이로 인해 전체 행이 외부 레이아웃보다 작아지기 때문에 행 자체에 음수 마진을 추가해야만 했습니다:

<div class="content-ad"></div>

<img src="/assets/img/2024-08-26-5Old-SchoolPracticesinCSSShouldBeAvoided_3.png" />

## ✅ The modern way

이렇게하면 CSS Grid 레이아웃을 사용하여 쉽게 동일한 열 레이아웃을 만들 수 있습니다:

```js
.row {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
```

<div class="content-ad"></div>

이 방법은 RAM 기법이라고도 불립니다. 다음 기사에서 더 자세히 살펴보세요:

# 컬럼 쌓이는 미디어 쿼리

## ❌ 다시 부트스트랩

이전 예제에 좀 더 오래 머물러 봅시다. 작은 화면에서 컬럼이 쌓이도록 하려면 다음과 같이 미디어 쿼리와 함께 여러 가지 브레이크포인트를 추가해야 했습니다.

<div class="content-ad"></div>


![이미지](/assets/img/2024-08-26-5Old-SchoolPracticesinCSSShouldBeAvoided_4.png)

최소 너비 값을 초과하면 열이 자동으로 쌓일 때 멋지지 않을까요?

## ✅ 2024년에는 이렇게 합시다!

이미 RAM 방법을 언급했으니 그 힘을 빌려봅시다:


<div class="content-ad"></div>

```js
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
```

왔어요!

# 링크의 밑줄 스타일링을 위한 테두리

링크에 밑줄을 추가하는 것은 그들을 강조하는 가장 좋은 (그리고 가장 오래된) 방법입니다. 이것은 이렇게 말하는 것과 같습니다: "저, 단순한 텍스트가 아니에요. 저는 링크야! 클릭할 수 있어요!".

<div class="content-ad"></div>

접근성에도 큰 영향을 미치거든요! 시각 장애가 있는 분들은 기사 텍스트 안에 있는 "약간 더 밝거나 진한" 링크를 감지하는 데 어려움을 겪을 겁니다.

페이지 내 모든 링크에 대해 얘기하는 게 아니에요. 내비게이션 컨텍스트(예: 헤더/푸터 메뉴) 내에 있는 경우는 밑줄을 넣지 않아도 괜찮아요.

그러나 기사 내부나 항상 그 자리에 있을 것으로 예상되지 않는 곳(예: 폼 내부)에 있는 링크에는 꼭 밑줄을 추가해야 해요!

## ❌ 하지만 밑줄은 예쁘지 않다고요...

<div class="content-ad"></div>

개발자들이 웹 사이트에서 기본적으로 모든 링크에 text-decoration: none;을 설정하는 것을 많이 보았어요. 대신, 가상 클래스를 사용하여 밑줄을 추가합니다.

```js
a {
  position: relative;
}
a::after {
  position: absolute;
  content: "";
  height: 1px;
  width: 100%;
  bottom: -5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #3f567e;
}
```

또는 밑줄 대신 하단 테두리를 추가할 수도 있어요.

```js
a {
  border-bottom: 1px solid #3f567e;
}
```

<div class="content-ad"></div>

## ✅ 밑줄을 완전히 제어하세요!

현대적인 CSS 속성 덕분에 우리는 원하는 대로 밑줄을 완전히 사용자 정의할 수 있습니다!

여기 그 속성들의 목록입니다:

- text-decoration-line
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-decoration-color
- text-underline-position
- text-underline-offset

<div class="content-ad"></div>

각 속성을 더 자세히 살펴보려면 MDN 문서를 참조해보세요: [MDN 링크](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

하지만 여 hoe뿐만 아니라 여기에서 각 속성을 실험해볼 수 있는 빠른 데모도 있습니다:

# 여러 값에 transform 속성 사용하기

transform CSS 속성 덕분에 페이지의 요소를 쉽게 변형할 수 있습니다. 레이아웃이나 페인트 단계를 트리거하지 않기 때문에, CSS만으로 부드러운 애니메이션을 만들 수 있습니다!

<div class="content-ad"></div>

# ❌ 그래서 문제가 뭐야?

변형 속성은 요소를 회전, 확대/축소, 기울이기 또는 이동할 수 있게 합니다. 이를 달성하기 위해 적절한 함수를 사용합니다. 그래서 속성에 너무 많은 함수가 있으면 읽기 어려워지고 덮어씌우기가 어려워집니다.

이게 내 말하는 바입니다:

```js
.some-class {
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg) scale3d(2.5, 1.2, 0.3);
}
```

<div class="content-ad"></div>

그리고 `rotateY`만 오버라이드하고 싶다고 가정해 봅시다:

```js
.some-class:hover {
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(20deg) scale3d(2.5, 1.2, 0.3);
}
```

따라서 모든 값을 유지하고 rotateY의 값 하나만 수정하려면 해당 값을 복사하여 수정해야 합니다.

## ✅ transform을 하위 속성으로 분할할 수 있습니다.

<div class="content-ad"></div>

2022년부터 엘리먼트를 변형하기 위해 독립적인 CSS 속성을 사용할 수 있습니다!

다음은 해당 속성들입니다:

- translate
- rotate
- transform
- scale
- perspective

참고로, skew는 독립적인 변형 값이 아닙니다!

<div class="content-ad"></div>

이전 예제를 더 읽기 쉽게 만들기 위해 다음과 같이 다시 작성해 봤어요:

```js
.some-class {
  perspective: 500px;
  translate: 10px 0 20px;
  rotate: y 3deg;
  scale: 2.5 1.2 0.3;
}
```

그리고 rotateY 값을 재정의하기 위해서는 해당 특정 속성만 재정의하면 돼요:

```js
.some-class:hover {
  rotate: y 20deg;
}
```

<div class="content-ad"></div>

개별 변환 속성을 사용할 때 명심해야 할 몇 가지 중요한 변경 사항이 있어요:

- 다른 CSS 속성과 마찬가지로 값을 구분할 때 공백을 사용하세요. 쉼표는 함수에서만 사용해요! (예: 10px 0 20px;)
- 속성 이름에 수정 기호를 사용할 수 없어요(rotateY가 아닌 rotate만 사용 가능해요). 그러나 걱정 마세요. 여전히 단일 값을 수정할 수 있어요(예: rotate: y 3deg;). 다양한 값을 사용하는 방법에 대한 자세한 내용은 MDN의 해당 속성 문서를 확인하세요.

오늘은 여기까지에요! 놓친 것이 있을까요? 어떤 CSS 속성이 널리 사용되길 기다리고 있나요? 댓글에 적어주세요 ;)

그리고 "7가지 HTML 오래된 방식"에 관한 제 글을 놓치신 경우를 위해:

<div class="content-ad"></div>

만약 이 기사를 흥미롭거나 유익하다고 생각하신다면 주저하지 말고 박수를 치고 구독하고 댓글로 생각을 공유해 주세요 😊

읽어 주셔서 감사합니다!
안전하고 평화로운 하루 되세요!

CSS에서 피해야 할 5가지 안좋은 방식

현대 웹 개발에서는 CSS 프레임워크가 프로젝트 간 일관성을 유지하고 속도를 높이는 데 중요한 역할을 합니다. 수많은 프레임워크 중에서 Tailwind CSS는 독특한 유틸리티 중심 접근 방식으로 높은 유연성, 효율성 및 디자인 일관성을 제공하여 주목받고 있어요. 부트스트랩이나 파운데이션과 같은 전통적인 프레임워크와 달리, Tailwind는 사전 구축된 구성 요소에 의존하지 않습니다. 대신, 개발자가 쉽게 완전히 사용자 정의된 디자인을 생성할 수 있도록 하는 저수준 유틸리티 클래스를 제공합니다.

# Tailwind CSS란?

Tailwind CSS는 포괄적인 사전 정의된 클래스 세트를 제공하는 유틸리티 중심 CSS 프레임워크입니다. 이러한 클래스들은 레이아웃, 간격, 타이포그래피, 색상, 테두리, 그림자 등 스타일링의 거의 모든 측면을 다룹니다. 개발자들은 커스텀 CSS를 작성하는 대신, 이 유틸리티 클래스들을 HTML에 직접 적용하여 원하는 스타일을 달성할 수 있어요.

예를 들면:

<div class="content-ad"></div>

```js


<div class="card">
  <h2 class="title">안녕, 세상아!</h2>
  <p class="content">이것은 샘플 텍스트입니다.</p>
</div>
```

```js
/* 사용자 정의 CSS */

.card {
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
}

.title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.content {
  font-size: 1rem;
  color: #6b7280;
}
```

Tailwind CSS를 사용하면 유틸리티 클래스를 직접 사용하여 동일한 디자인을 구현할 수 있습니다:

```js


<div class="p-4 bg-gray-100 rounded-lg">
  <h2 class="text-xl font-bold mb-2">안녕, 세상아!</h2>
  <p class="text-gray-600">이것은 샘플 텍스트입니다.</p>
</div>
```

<div class="content-ad"></div>

테일윈드의 유틸리티 클래스는 사용자 정의 CSS를 작성할 필요없이 컴포넌트를 스타일링할 수 있게 해줍니다. 모든 것이 HTML 내부에서 인라인으로 처리되기 때문에 개발 속도가 더 빨라지고 직관적으로 작업할 수 있습니다.

# 테일윈드 CSS를 선택해야 하는 이유

테일윈드 CSS의 장점은 다음과 같습니다:

- 신속한 개발 속도: HTML에서 직접 스타일을 적용할 수 있기 때문에 HTML과 CSS 파일을 번갈아가며 작업할 필요가 없습니다. 이로 인해 개발 시간이 단축되고 유지보수가 간단해집니다.
- 디자인 일관성: 유틸리티 클래스는 일관된 디자인 패턴을 강제합니다. 예를 들어 `p-4`는 패딩이 컴포넌트 전체에서 일관되게 적용되도록 합니다.
- 사용자 정의: 테일윈드는 매우 사용자 정의가 가능합니다. 설정 파일을 통해 브레이크포인트, 색상, 간격 스케일 등을 조정하여 디자인 요구 사항에 맞추 수 있습니다.
- 반응형 디자인: 테일윈드의 반응형 유틸리티를 사용하면 모바일 중심 디자인을 쉽게 구축할 수 있습니다. `md:bg-blue-500` 또는 `lg:text-2xl`와 같이 브레이크포인트별 클래스를 사용하여 반응형 레이아웃을 손쉽게 생성할 수 있습니다.
- 작은 파일 크기를 위한 PurgeCSS: 테일윈드 CSS는 제품용으로 사용되지 않는 CSS를 자동으로 정리하여 CSS 파일 크기를 최소화하고 더 빠른 로드 시간을 제공합니다.

<div class="content-ad"></div>

# Tailwind CSS 설정하기

프로젝트에서 Tailwind CSS를 시작해봅시다. Tailwind CSS를 통합하는 여러 가지 방법이 있습니다. CDN, npm 또는 Next.js 또는 Laravel과 같은 프레임워크를 사용하는 방법 등이 있습니다. 여기서는 유연성을 높이기 위해 npm을 사용하겠습니다.

## npm을 통해 Tailwind CSS 설치하기:

먼저, Tailwind를 설치하고 구성 파일을 초기화하세요.

<div class="content-ad"></div>

```js
npm install -D tailwindcss
npx tailwindcss init
```

이렇게하면 Tailwind 설정을 사용자 정의할 수있는 `tailwind.config.js` 파일이 생성됩니다.

## 프로젝트 구성하기:

`src/styles.css` (또는 기타 CSS 파일)에서 다음 Tailwind 지시문을 추가하십시오:

<div class="content-ad"></div>

```js
@tailwind base;
@tailwind components;
@tailwind utilities;
```

이러한 지시문은 Tailwind의 미리 만들어진 스타일과 유틸리티 클래스를 가져옵니다.

## Tailwind CSS 빌드하기:

Tailwind CLI를 사용하여 CSS를 컴파일하세요:

<div class="content-ad"></div>

```js
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
```

Tailwind는 파일을 모니터링하고 변경 사항이 있을 때 자동으로 CSS를 컴파일합니다.

## PurgeCSS 설정하기 (선택 사항이지만 권장됨):

최종 빌드에 실제로 사용하는 CSS만 포함되도록 하려면 Tailwind의 구성이 기본적으로 PurgeCSS를 지원합니다.

<div class="content-ad"></div>

```js
// tailwind.config.js
module.exports = {
    purge: ['./src/**/*.html', './src/**/*.js'], // 필요에 따라 경로를 조정하세요
    theme: {
        extend: {},
    },
    plugins: [],
}
```

# Tailwind의 유틸리티 클래스 심층 분석

Tailwind CSS는 작고 단일 목적의 클래스를 결합하여 복잡한 인터페이스를 구축하는 것에 관한 것입니다. 몇 가지 일반적인 유틸리티 카테고리를 예제와 함께 탐색해 봅시다.

## 1. 간격 (패딩 & 마진)

<div class="content-ad"></div>

Tailwind는 패딩과 마진을 제어하기 위한 유틸리티 클래스를 제공합니다. 이러한 클래스들은 스케일을 따르며(e.g., `p-4`, `mt-2`), 각 숫자가 `rem`에서 특정 값에 해당합니다:

```js
<div class="p-4 mb-6">
  <p class="mt-2 text-gray-700">
    이 요소에는 패딩과 마진이 적용되어 있습니다.
  </p>
</div>
```

- `p-4`: 1rem(16px)의 패딩을 추가합니다.

- `mt-2`: 상단 여백 0.5rem(8px)을 추가합니다.

<div class="content-ad"></div>

- `mb-6`: 하단 여백을 1.5rem(24px) 추가합니다.

## 2. 색상 및 배경

테일윈드는 텍스트, 배경, 테두리 및 기타 요소에 사용할 수 있는 다양한 색상 팔레트를 제공합니다:

```js
<div class="bg-blue-500 text-white p-4 rounded-lg">
  <h2 class="text-xl">테일윈드 CSS에 오신 것을 환영합니다!</h2>
</div>
```

<div class="content-ad"></div>

- `bg-blue-500`: 중간 파란색 배경색을 적용합니다.

- `text-white`: 텍스트 색상을 흰색으로 설정합니다.

- `rounded-lg`: 모퉁이를 둥글게 하는 큰 테두리 반지름을 추가합니다.

## 3. 텍스트 디자인

<div class="content-ad"></div>

테일윈드의 타이포그래피 유틸리티를 사용하면 글꼴 크기, 굵기, 줄 간격, 글자 간격 등을 제어할 수 있어요:

```js
<p class="text-lg font-semibold leading-relaxed tracking-wide text-gray-800">
  테일윈드를 사용하면 타이포그래피에 미세한 제어를 할 수 있어요.
</p>
```

- `text-lg`: 글꼴 크기를 1.125rem으로 설정합니다.

- `font-semibold`: 중간 굵기의 글꼴을 적용합니다.

<div class="content-ad"></div>

- `leading-relaxed`: 가독성을 높이기 위해 줄 간겹을 조정합니다.

- `tracking-wide`: 글자 간겹을 증가시킵니다.

## 4. Flexbox와 Grid

Tailwind는 Flexbox 및 Grid 유틸리티를 활용하여 반응형 레이아웃을 구축하는 데 뛰어납니다.

<div class="content-ad"></div>

```js
<div class="flex justify-between items-center">
  <div class="p-4 bg-green-200">Item 1</div>
  <div class="p-4 bg-green-300">Item 2</div>
  <div class="p-4 bg-green-400">Item 3</div>
</div>
```

- `flex`: Flexbox를 활성화합니다.

- `justify-between`: 자식 요소 사이에 공간을 분배합니다.

- `items-center`: 항목을 세로로 중앙에 정렬합니다.

<div class="content-ad"></div>

## 5. 반응형 디자인

**Tailwind**의 반응형 유틸리티를 사용하면 다양한 뷰포인트에서 스타일을 적용할 수 있어요:

```js
<div class="text-sm md:text-lg lg:text-2xl">
  화면 크기에 따라 텍스트 크기가 조절됩니다.
</div>
```

- `text-sm`: 모바일 화면에 작은 텍스트를 적용합니다.

<div class="content-ad"></div>

- `md:text-lg`: `md` (768px) 화면에서 텍스트 크기를 키웁니다.

- `lg:text-2xl`: `lg` (1024px) 화면에서 큰 텍스트 크기를 설정합니다.

# 고급 Tailwind 기능

## 1. 설정 파일을 사용하여 Tailwind 사용자 정의하기

<div class="content-ad"></div>

Tailwind의 구성 파일 (`tailwind.config.js`)은 색상부터 간격까지 모든 것을 사용자 정의할 수 있게 해줍니다:

```js
module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '1E40AF',
      },
      spacing: {
        '72': '18rem',
      },
    },
  },
}
```

이 예제에서는 `customBlue`라는 사용자 정의 색상을 추가하고 간격 스케일에 새 값을 추가했습니다.

## 2. 다크 모드 지원

<div class="content-ad"></div>

테일윈드는 최소한의 구성으로 다크 모드를 쉽게 구현할 수 있도록 해줍니다:

```js
module.exports = {
  darkMode: 'class', // 혹은 'media'
  theme: {
    extend: {},
  },
}
```

HTML에서는 `dark` 클래스를 추가하여 다크 모드를 토글할 수 있습니다:

```js
<div class="bg-white dark:bg-gray-800">
  <p class="text-black dark:text-white">이 텍스트는 다크 모드를 지원합니다.</p>
</div>
```

<div class="content-ad"></div>

## 3. 테일윈드 플러그인

테일윈드의 플러그인 시스템은 기능을 확장시킵니다. 예를 들어, `@tailwindcss/typography` 플러그인을 사용하여 내용이 많은 사이트에서 더 나은 서체 스타일링을 할 수 있습니다:

```js
npm install @tailwindcss/typography
```

구성에 추가해 보세요:

<div class="content-ad"></div>

```js
module.exports = {
  plugins: [
    require ('@tailwindcss/typography'),
  ],
}
```

이제 HTML 콘텐츠에 `prose` 클래스를 적용하여 아름답게 스타일이 적용된 텍스트를 만들어보세요:

```js
<article class="prose">
  <h1>Tailwind CSS로 에세이 작성이 쉬워집니다</h1>
  <p>
      Tailwind의 typography 플러그인은 콘텐츠를 스타일링하는 아름다운 기본 설정을 제공합니다.
  </p>
</article>
```

# Tailwind CSS에 대한 흔한 오해들

<div class="content-ad"></div>

1. "그냥 스타일 속성들(inline styles)의 강화된 버전이에요": Tailwind의 유틸리티 클래스가 인라인 스타일과 비슷하게 보일 수 있지만, 더 강력해요. Tailwind 유틸리티는 반응형이고 사용자 정의가 가능하며 재사용이 가능하므로 훨씬 더 깔끔하고 유지보수가 용이한 코드를 작성할 수 있어요.

2. "Tailwind가 HTML을 너무 많은 클래스로 팽창시킨다": Tailwind는 HTML에 더 많은 클래스를 추가해야하지만, 이는 더 나은 확장성, 일관성, 그리고 디자인 제어를 제공해요. 게다가 CSS에서 `@apply`와 같은 도구를 사용하거나 JavaScript 프레임워크(예: React)에서 재사용 가능한 구성 요소를 추출하여 반복을 줄일 수 있어요.

3. "고유한 디자인 만들기가 어렵다": Tailwind는 매우 사용자 정의가 가능해요. 기본 스타일에 국한되지 않고, 자체 색상 팔레트, 간격 스케일 등을 정의할 수 있어 완전히 고유한 디자인을 만들 수 있어요.

# 실제 예시와 사용 사례

<div class="content-ad"></div>

대부분의 기업과 프로젝트들이 스타트업부터 대기업까지 Tailwind CSS를 채택해왔어요. Tailwind는 특히 다음과 같은 상황에서 유용해요:

- 빠른 프로토타이핑: Tailwind는 프로토타입을 빠르게 구축하고 이를 손쉽게 제품 준비가 된 디자인으로 변환할 수 있어요.

- 디자인 시스템: Tailwind의 일관성과 모듈성은 확장 가능한 디자인 시스템을 구축하는 데 좋은 선택이에요.

- 싱글 페이지 애플리케이션(SPA): React, Vue, Svelte와 같은 프레임워크로, Tailwind의 유틸리티 중심의 접근 방식은 컴포넌트 스타일링에 완벽하게 맞아요.

<div class="content-ad"></div>

# 결론

Tailwind CSS는 단순히 또 다른 CSS 프레임워크가 아닙니다. 현대적인 웹 인터페이스를 구축하는 새로운 방법을 제공하는 강력한 도구입니다. 유틸리티 중심의 마음가짐을 채택함으로써 개발 워크플로우를 최적화하고, 컨텍스트 전환을 줄이며, 프로젝트 전체에서 디자인 일관성을 유지할 수 있습니다. 첫 프로젝트를 구축하려는 초심자든, 효율적인 디자인 방법을 찾는 경험 많은 개발자든, Tailwind CSS는 한 번 시도할 가치가 있습니다.

## 출처:

- https://tailwindcss.com/
- https://www.geeksforgeeks.org/introduction-to-tailwind-css/
- https://github.com/tailwindlabs/tailwindcss
- https://www.freecodecamp.org/news/what-is-tailwind-css-a-beginners-guide/

<div class="content-ad"></div>


![A Complete Guide to Tailwind CSS](/assets/img/2024-08-26-ACompleteGuidetoTailwindCSSTheUtility-FirstCSSFrameworkThatsChangingWebDesign_0.png)

유틸리티-퍼스트 CSS 프레임워크, Tailwind CSS 사용 방법 가이드

사이트에서 JS 코드를 최대한 적게 사용하는 것이 성능면에서 더 좋습니다.

왜냐하면 여러 가지 이유가 있기 때문입니다:

- JS를 적게 사용하면 TBT도 적어집니다.
- CSS는 JS보다 파싱하고 실행하는 속도가 빠릅니다.
- JS를 사용하면 레이아웃이 다시 렌더링되지만 CSS의 경우 그렇지 않습니다.

마지막으로 CSS에 오류가 있다고 해도 페이지 로딩을 막지 않습니다. 그러나 JS 코드에 오류가 있을 경우 페이지 전체가 정상적으로 작동하지 않을 수 있습니다.

<div class="content-ad"></div>

고지! 저는 당신에게 JS 사용을 그만두라고 말하고 있지 않아요 😅

하지만 JS를 CSS로 쉽게 대체할 수 있는 경우에는 대체해 주세요.

CSS만 사용하여 사이트에 유용한 기능 몇 가지를 살펴보세요.

## 호버 시 하위 메뉴

<div class="content-ad"></div>

간단한 것부터 시작해봐요. 서브 메뉴를 만들 때 JS를 사용할 필요는 없어요. 우리 모두 :hover 으로 알려진 가상 클래스를 사용할 수 있으니 망설이지 마세요.

다음은 간단한 메뉴 마크업입니다:

```js
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog 🠋</a>
      <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Interviews</a>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Art</a></li>
        <li><a href="#">Tech</a></li>
        </li>
      </ul>
    </li>
    <li><a href="#">Contacts</a></li>
  </ul>
</nav>
```

일반적으로 서브 메뉴를 숨기기 위해 사람들은 display: none; 방법을 자주 사용해요.

<div class="content-ad"></div>

저는 호버 효과를 부드럽게 만들기 위해 투명도(opacity)와 포인터 이벤트(pointer-events) CSS 속성을 결합해서 사용하는 것을 선호합니다 (브라우저는 아직 display CSS 속성을 애니메이션화 할 수 없습니다). 포인터 이벤트 속성 pointer-events: none;은 하위 메뉴가 표시될 때까지 (상위 요소에 호버될 때까지) 하위 메뉴를 클릭할 수 없게 만듭니다.

```js
/* 하위 메뉴의 부모 요소에 상대적인 위치를 설정하는 것을 잊지 마세요 */
nav > ul > li {
  position: relative;
}
/* 하위 메뉴는 기본적으로 숨겨져 있습니다 */
nav > ul ul {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  translate: 0 25%;
  transition: all 250ms cubic-bezier(.33,.65,.67,.81);
}
/* 호버 시 표시되도록 만듭니다 */
nav > ul > li:hover > ul {
  opacity: 1;
  pointer-events: all;
  translate: 0 0;
}
```

그리고 최종 결과는 다음과 같습니다:

# 탭형 콘텐츠

<div class="content-ad"></div>

`label`과 `input type=”radio”`을 결합하면 마법이 일어날 수 있어요! `label`을 클릭하면 브라우저가 자동으로 해당 입력란으로 초점을 이동시키죠. 라디오 입력란의 경우, 선택될 거예요.

레이아웃은 간단해요: 입력-라벨 요소와 관련 있는 콘텐츠의 div 요소를 여러 개 만들어요.

```js

<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">탭 1</label>

<input type="radio" id="tab2" name="tabs">
<label for="tab2">탭 2</label>

<input type="radio" id="tab3" name="tabs">
<label for="tab3">탭 3</label>


<div class="tab-content" id="content1">
  <h2>탭 1 콘텐츠</h2>
  <p>첫 번째 탭 콘텐츠에요.</p>
</div>

<div class="tab-content" id="content2">
  <h2>탭 2 콘텐츠</h2>
  <p>두 번째 탭 콘텐츠에요.</p>
</div>

<div class="tab-content" id="content3">
  <h2>탭 3 콘텐츠</h2>
  <p>세 번째 탭 콘텐츠에요.</p>
</div>
```

그럼 CSS의 아름다움을 즐기세요!

<div class="content-ad"></div>


/* 라디오 버튼 숨기기 */
input[type="radio"] {
  display: none;
}

/* 레이블을 탭으로 스타일 지정 */
label {
  display: inline-block;
  padding: 10px 20px;
  margin: 0;
  cursor: pointer;
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  transition: background-color 0.3s ease;
}

/* 활성화된 탭의 스타일 지정 */
input[type="radio"]:checked + label {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}

/* 콘텐츠 영역 스타일 지정 */
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  background-color: #fff;
}

/* 활성화된 콘텐츠 표시 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}


CSS에는 확인란(라디오 버튼 및 체크박스 모두)에 대한 기본 :checked 선택자가 있습니다.

그리고 순서 형제 결합자로 공식적으로 묘사되는 ~ (물결표) 덕분에 콘텐트 블록의 가시성을 전환할 수 있습니다. 유일한 요구 사항은 콘텐츠 div가 라디오 입력창 뒤에 배치되어야 한다는 것입니다. 이것이 최종 결과입니다:


<div class="content-ad"></div>

## Snap 블록

데스크톱에서 YouTube Shorts를 스크롤해 본 적이 있나요? 각 휠 스크롤 후 다음 비디오가 페이지 상단에 바로 붙습니다:

![Snap block](/assets/img/2024-08-26-NoJSrequiredyoucandothiswithCSS_0.png)

만약 이게 복잡한 JS 코드라고 생각하신다면 — 그것은 틀렸어요! 이것은 scroll-snap이라는 내장 CSS 기능입니다.

<div class="content-ad"></div>

먼저, 부모 컨테이너에 대해 scroll-snap-type을 설정해야 합니다. YouTube Shorts처럼 작동하도록 설정하려면 y mandatory로 설정해야 합니다.

```js
.scroll-container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  width: 300px;
  height: 80%;
  background-color: #ddd;
  padding: 20px;
  box-sizing: border-box;
  scroll-padding: 10px;
}
```

이는 스크롤 컨테이너가 수직 축에서만 스냅되며 현재 스크롤되지 않았을 때 콘텐츠가 스냅 위치로 이동해야 한다는 것을 의미합니다. 이 속성에 대한 각 가능한 값에 대한 상세한 설명을 위해 MDN 문서를 확인하십시오.

그리고 스크롤된 각 항목에 대해 해당 스냅 영역 내에서 항목의 스냅 위치를 제공해야 합니다. 다시 말해, 항목을 맨 위 (시작), 중앙 또는 맨 아래 (끝)에 스냅시키고 싶은지를 의미합니다. 이는 scroll-snap-align 속성을 통해 가능합니다.

<div class="content-ad"></div>

```js
.scroll-item {
  scroll-snap-align: start;
}
```

데모를 한 번 살펴보세요. 정말 멋진 기능이며 CSS만 사용했어요 😊

저의 머리 속에 떠오른 몇 가지 꿀팁을 공유했지만, 이것들은 얼음산의 일각에 불과해요. 제가 두 번째 부분을 공유하길 원한다면 "박수" 버튼을 클릭해주세요. 저에게 귀여운 관심을 보여주는 것이죠 😊

이 기사가 도움이 되었다면 망설이지 말고 박수를 보내주시고, 구독하고 의견을 남겨주세요 😊


<div class="content-ad"></div>

읽어 주셔서 감사합니다!
안전하고 행복하시고, 평화가 함께 하길 바랍니다!

CSS의 발전으로 할 수 있는 많은 것들




<img src="/assets/img/2024-08-26-UnderstandingClosureinJavascript_0.png" />

클로저는 하나 이상의 함수가 묶여 있는 조합입니다. 이는 함수가 외부 스코프에서 변수나 함수를 기억하고 액세스할 수 있는 능력을 가리킵니다. 심지어 외부 함수가 실행을 마친 후에도 그 변수나 함수에 액세스할 수 있습니다.

```js
function add() {
  const x = 5;

  function addY(element) {
    console.log(x + element);
  }

  return addY;
}

const myClosure = add();
myClosure(10);
myClosure(20);
```

# 설명


<div class="content-ad"></div>

- Outer Function: add은 변수 x와 addY를 정의합니다.
- Inner Function: addY는 외부 범위에 있는 x에 접근합니다.
- Closure: add를 호출하면 addY를 반환합니다. add 함수의 실행이 완료되어도 addY는 여전히 x에 액세스할 수 있습니다. 이는 addY가 클로저를 형성하여 항상 x에 액세스할 수 있도록 "close over"하기 때문입니다.

함수가 외부 범위 변수에 액세스 권한을 유지하는 능력은 JavaScript에서 클로저를 강력한 기능으로 만드는 것입니다.

JavaScript에서 클로저가 내부적으로 어떻게 작동하는지 더 자세히 살펴보겠습니다:

## 1. 렉시컬 환경

<div class="content-ad"></div>

JavaScript에서 함수가 생성되면 해당 함수는 자신의 렉시컬 환경을 참조합니다. 렉시컬 환경이란 함수가 선언된 컨텍스트를 의미합니다. 이 컨텍스트에는 아래와 같은 내용이 포함됩니다:

- 함수가 생성된 시점의 유효 범위 내에 있는 모든 변수들.
- 외부 함수의 변수와 함수에 대한 참조.

## 2. 함수 생성

다른 함수 내부에 함수를 정의할 때, JavaScript는 그냥 내부 함수를 독립적으로 생성하지 않습니다. 대신 함수와 생성된 환경을 결합한 클로저를 만듭니다.

<div class="content-ad"></div>

```js
function outerFunction() {
  let outerVariable = 'Outer';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}
```

위 코드에서:

- innerFunction이 생성될 때, outerFunction에서의 outerVariable에 대한 참조를 가지고 있습니다.

## 3. 실행 후에도 참조 유지하기

<div class="content-ad"></div>

outerFunction이 호출되고 실행이 완료되면 outerVariable이 사라질 것으로 예상할 수 있습니다. 왜냐하면 outerFunction이 끝났기 때문입니다. 그러나 innerFunction이 반환되고 outerFunction 외부에서 사용되기 때문에 outerVariable에 대한 참조가 유지됩니다.

이것은 클로저가 작동하는 방식 때문입니다. JavaScript 엔진은 외부 함수의 실행이 완료될 때 렉시컬 환경을 그냥 버리지 않습니다. 만약 여전히 그 환경에 접근해야 하는 함수(예: innerFunction)가 있다면, 엔진은 해당 환경을 유지합니다.

## 4. 가비지 콜렉션 및 메모리 관리

보통 함수 내부의 변수는 함수의 실행이 끝나면 정리되거나 ("가비지 컬렉션"됨)합니다. 그러나 클로저의 경우, JavaScript 엔진은 해당 변수가 여전히 내부 함수에 의해 필요하다고 인식합니다. 내부 함수가 존재하고 호출할 수 있는 한, 해당 변수가 있는 환경은 가비지 컬렉트되지 않습니다.

<div class="content-ad"></div>

## 예시를 통해 실제 동작을 살펴봅시다:

```js
function counter() {
  let count = 0;

  return function() {
    count += 1;
    return count;
  };
}

const increment = counter(); // `counter`가 호출되지만 그 환경은 계속 유지됩니다.
console.log(increment()); // 출력: 1
console.log(increment()); // 출력: 2
console.log(increment()); // 출력: 3
```

다음은 단계별로 발생하는 일들입니다:

- counter 호출: counter()가 호출될 때 새로운 렉시컬 환경이 생성됩니다. 이 환경에는 0으로 설정된 변수 count가 포함됩니다.
- 내부 함수 반환: 내부 함수가 반환되며, count가 존재하는 렉시컬 환경에 대한 참조를 유지합니다.
- increment 호출: increment()를 호출할 때마다, 처음에 counter()에 의해 생성된 count 변수에 접근합니다. counter()의 실행이 끝났지만 클로저 덕분에 count 변수는 여전히 사용 가능합니다.

<div class="content-ad"></div>

# 클로저의 장점

- 데이터 캡슐화: 클로저를 사용하면 함수 외부에서 직접 액세스할 수 없는 비공개 변수를 생성할 수 있습니다. 이는 데이터 숨김에 유용합니다.
- 함수 팩토리: 클로저를 사용하여 특정 동작을 하는 다른 함수를 생성하는 팩토리 함수를 만들 수 있습니다.
- 상태 유지: 클로저를 사용하여 전역 변수에 의존하지 않고 여러 함수 호출 간에 상태를 유지할 수 있습니다.
- 콜백 및 이벤트 핸들러: 클로저는 콜백 및 이벤트 핸들러에서 맥락을 유지하는 데 자주 사용됩니다.

# 행동 요청

JavaScript의 클로저에 관한 질문이나 통찰이 있으신가요? 아래 댓글로 공유해주세요! 더 많은 JavaScript 튜토리얼과 기사를 보려면 박수를 치고 팔로우하세요!

자바스크립트에서 클로저(closure) 이해하기



화면을 차단하고 회원 가입하거나 동의를 받으세요.

![이미지](/assets/img/2024-08-26-UnderstandingJavaScriptAlertsABeginnersGuide_0.png)

JavaScript 알림은 사용자에게 메시지를 표시하는 데 사용되는 기본 기능입니다.
이들은 정보를 제공하거나 경고를 표시하거나 사용자 확인을 받는 데 자주 사용됩니다. 그렇습니다, 짜증나는 팝업 창, 모두 JavaScript입니다.

이 자습서에서는 JavaScript 알림의 기본 사항, 사용 방법 및 Google Chrome 브라우저 콘솔에서 어떻게 작동하는지를 안내합니다.

<div class="content-ad"></div>

## 자바스크립트 알림이란 무엇인가요?

자바스크립트 알림은 사용자에게 메시지를 표시하는 간단한 팝업 상자입니다. 정보를 사용자에게 전달하기 위해 자주 사용됩니다. 알림 상자가 나타나면 사용자는 계속하려면 "확인"을 클릭해야 합니다.

## 자바스크립트 팝업 상자의 종류

자바스크립트는 세 가지 유형의 팝업 상자를 제공합니다:

<div class="content-ad"></div>

- Alert Box: 메시지와 "OK" 버튼을 표시합니다.
- Confirm Box: "OK"와 "취소" 버튼이 있는 메시지를 표시합니다.
- Prompt Box: 메시지와 텍스트 입력 필드, 그리고 "OK"와 "취소" 버튼이 표시됩니다.

이 튜토리얼에서는 알림 상자에 초점을 맞출 것입니다.

## 알림 상자 만들기

알림 상자를 만들려면 alert() 메서드를 사용합니다. 기본 구문은 다음과 같습니다:

<div class="content-ad"></div>

```js
alert("여기에 메시지를 입력하세요");
```

이 코드를 자세히 살펴보겠습니다:

- alert: 이 메서드는 알림 상자를 생성하는 데 사용됩니다.
- "여기에 메시지를 입력하세요": 알림 상자에 표시될 메시지입니다.

## 예시: 기본 알림 상자

<div class="content-ad"></div>

간단한 알림 상자의 예제입니다:

```js
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Alert Example</title>
</head>
<body>
    <script>
        alert("Hello, this is an alert box!");
    </script>
</body>
</html>
```

이 코드를 코드펜 (codepen.io)에 붙여넣고 알림을 확인해보세요.

위의 예제에서:

<div class="content-ad"></div>

- 기본 HTML 구조로 시작합니다.
- `script` 태그 내부에서 "Hello, this is an alert box!" 메시지를 포함한 alert() 메서드를 호출합니다.

웹 브라우저에서 이 HTML 파일을 열면 해당 메시지가 포함된 경고 상자가 표시됩니다.

## 구글 크롬 콘솔에서 얼럿이 작동하는 방법

구글 크롬 콘솔은 개발자들을 위한 강력한 도구입니다. 여기에서 JavaScript 코드를 실행하고 즉시 결과를 확인할 수 있습니다. 콘솔을 사용하여 얼럿을 생성하는 방법을 살펴보겠습니다:

<div class="content-ad"></div>

- 구글 크롬을 열어주세요.
- 콘솔을 열기 위해 Windows/Linux에서는 Ctrl + Shift + J, Mac에서는 Cmd + Option + J를 눌러주세요.
- 다음 코드를 입력하고 Enter를 눌러주세요:

```js
alert("콘솔에서 알림: 안녕하세요!");
```

화면에 메시지가 포함된 알림 상자가 나타납니다.

![알림 상자 예시](/assets/img/2024-08-26-UnderstandingJavaScriptAlertsABeginnersGuide_1.png)

<div class="content-ad"></div>

## 단계별 설명

과정을 하나씩 살펴보겠습니다:

- 콘솔 열기: 콘솔은 Chrome의 개발자 도구 중 일부입니다. 이를 사용하여 브라우저에서 JavaScript 코드를 직접 작성, 실행 및 디버깅할 수 있습니다.
- 코드: 콘솔에 alert("This is an alert from the console!");을 입력하면 지정된 메시지와 함께 alert() 메소드를 호출합니다.
- 코드 실행: Enter 키를 누르면 코드가 실행되고 경고 상자가 나타납니다.

## 경고창의 실용적인 용도

<div class="content-ad"></div>

알림은 다음과 같은 다양한 목적으로 유용합니다:
- 디버깅: 코드 흐름을 이해하기 위해 변수 값이나 메시지를 표시합니다.
- 사용자 알림: 사용자에게 중요한 정보나 수행해야 할 작업에 대해 알립니다.
- 경고: 사용자에게 잠재적인 문제나 오류에 대해 경고합니다.

## 예시: 디버깅을 위해 알림 사용하기

다음은 디버깅을 위해 알림을 사용하는 예시입니다:

<div class="content-ad"></div>

```html
<!DOCTYPE html>
<html>
<head>
    <title>Debugging with Alerts</title>
</head>
<body>
    <script>
        // 변수 x, y, sum 선언합니다.
        var x = 10;
        var y = 20;
        var sum = x + y;

        // x와 y의 합을 구한 뒤 결과를 알립니다.
        alert("x와 y의 합은: " + sum);
    </script>
</body>
</html>
```

이 예시에서:

- x, y, sum 세 변수를 선언했습니다.
- x와 y의 합을 계산했습니다.
- 결과를 표시하기 위해 alert을 사용했습니다.

웹 브라우저에서 이 HTML 파일을 열면, "x와 y의 합은: 30"이라는 메시지가 표시됩니다.

<div class="content-ad"></div>

## 고급 예제: 함수 내에서 알림 사용하기

함수 내에서도 알림을 사용할 수 있습니다. 아래는 예제입니다:

```js
<!DOCTYPE html>
<html>
<head>
    <title>함수 내 알림</title>
</head>
<body>
    <script>
        function showAlert() {
            alert("이것은 함수에서의 알림입니다!");
        }
        showAlert();
    </script>
</body>
</html>
```

위 예제에서와 같이:


<div class="content-ad"></div>

- alert() 메서드를 호출하는 showAlert 함수를 정의합니다.
- showAlert 함수를 호출하여 경고창을 표시합니다.

## 코드 이해하기

- 함수: 함수는 특정 작업을 수행하는 재사용 가능한 코드 블록입니다. 이 경우 showAlert 함수는 경고를 표시합니다.
- 함수 호출: 함수 내부의 코드를 실행하려면 함수 이름 뒤에 괄호를 붙여 함수를 호출해야 합니다. 예: showAlert().

## 이벤트 리스너와 경고 사용하기

<div class="content-ad"></div>

사용자 작업에 따라 알림을 트리거할 수도 있습니다. 예를 들어, 버튼을 클릭하는 경우 알림을 트리거할 수도 있습니다. 다음은 예제입니다:

```js
<!DOCTYPE html>
<html>
<head>
    <title>Alerts with Event Listeners</title>
</head>
<body>
    <button id="alertButton">Click me</button>
    <script>
        document.getElementById("alertButton").addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>
```

이 예제에서는:

- alertButton이라는 ID를 가진 버튼을 만듭니다.
- 버튼에 클릭 이벤트를 수신하는 이벤트 리스너를 추가합니다.
- 버튼을 클릭하면 "Button clicked!" 메시지가 포함된 알림이 표시됩니다.

<div class="content-ad"></div>

## 코드 이해하기

- 이벤트 리스너: 이벤트 리스너는 클릭, 마우스 이동 또는 키 누름과 같은 특정 이벤트에 응답하여 코드를 실행하는 데 사용됩니다.
- addEventListener 메서드: 이 메서드는 이벤트 핸들러를 요소에 연결합니다. 이 경우에는 버튼에 클릭 이벤트 핸들러를 연결합니다.

## 결론

JavaScript 경고창은 사용자에게 메시지를 표시하는 간단하면서도 강력한 도구입니다. 구현하기 쉽고 디버깅, 사용자 알림 및 경고와 같은 다양한 목적으로 사용할 수 있습니다. 경고창을 만들고 사용하는 방법을 이해함으로써 웹 애플리케이션의 상호 작용성과 기능성을 향상시킬 수 있습니다.

<div class="content-ad"></div>

## 참고 자료

- W3Schools — JavaScript 팝업 창
- TutorialsTeacher — JavaScript 메시지 상자
- GeeksforGeeks — JavaScript에서 alert() 메서드 사용하는 방법
- DigiFisk — JavaScript 경고창 (알아야 할 모든 것!)

# Stackademic 🎓

끝까지 읽어주셔서 감사합니다. 떠나시기 전에:

<div class="content-ad"></div>

- 작가에게 박수를 보내고 팔로우해주세요! 👏
- 팔로우하기: X | LinkedIn | YouTube | Discord
- 다른 플랫폼 방문해주세요: In Plain English | CoFeed | Differ
- 더 많은 콘텐츠는 Stackademic.com에서 확인하세요

자바스크립트 얼럿 사용방법 정리 

300줄의 코드로 Figma 플러그인을 만들기



<img src="/assets/img/2024-08-26-HowtoFixthe100vhHeightIssueforMobileResponsiveness_0.png" />

# 소개

모든 기기에서 매끄럽게 작동하는 반응형 레이아웃을 만드는 것은 현대 웹 개발의 중요한 부분입니다. 그러나 개발자들이 직면하는 일반적인 문제 중 하나는 모바일 기기에서 전체 높이 섹션에 100vh를 사용하는 것입니다. 이는 모바일 브라우저 UI 요소의 동적 성격 때문에 레이아웃의 일부 부분인 액션 바 등이 숨겨질 수 있는 문제로 이어질 수 있습니다. 이 블로그 포스트에서는 이 문제에 대한 제 경험과 프로젝트에서 사용할 수 있는 효과적인 해결책을 소개하겠습니다.

# 모바일 기기에서 100vh의 문제

<div class="content-ad"></div>

웹 레이아웃을 구축할 때 보통 100vh를 사용하여 섹션이 뷰포트의 전체 높이에 걸쳐 나타나게 합니다. 이는 데스크톱에서 잘 작동하지만 모바일 기기에서 문제를 일으킬 수 있습니다. 여기에 대한 이유는 다음과 같습니다:

- 모바일 브라우저는 주소 표시줄이나 도구 모음과 같은 동적 UI 요소를 가지고 있어 사용자가 페이지와 상호 작용함에 따라 보여지는 영역이 변경됩니다.
- 100vh를 사용하면 이러한 UI 요소가 계산에 포함되어 콘텐츠의 일부(예: 하단 작업 표시줄)가 보이지 않거나 예기치 않은 스크롤링을 유발할 수 있습니다.
- 이 문제는 iPhone, iPad 및 다른 기기에서 특히 눈에 띄게 나타납니다. 브라우저 UI가 항상 보이지 않는 경우가 있기 때문입니다.

# 실제 시나리오

저의 프로젝트 중 하나에서 상단 내비게이션 바, 가운데 컨텐츠 뷰 및 "다음" 또는 "취소"와 같은 버튼이 있는 하단 작업 표시줄을 포함한 레이아웃이 있었습니다. 마주한 문제는 이 하단 작업 표시줄이 때로는 모바일 기기에서 가려지는 경우가 있었는데, 특히 브라우저 UI가 보이는 경우에 그랬습니다. 이는 사용자들이 스크롤하지 않으면 작업 버튼을 보거나 사용할 수 없어 불편한 사용자 경험을 초래했습니다.

<div class="content-ad"></div>

# 이전 방법: 100vh와 calc()를 사용한 접근

처음에는 calc() 함수를 사용하여 중간 콘텐츠 섹션의 높이를 계산했습니다. 이 아이디어는 상단 네비게이션 바와 하단 액션 바를 고려한 후 남은 공간으로 중간 콘텐츠 높이를 설정하는 것이었습니다:

```css
.middle-content {
    height: calc(100vh - (var(--top-nav-height) + var(--bottom-nav-height)));
}
```

이 방법은 논리적으로 보였지만, 모바일 기기에서 실패했습니다. 이는 브라우저 UI(예: 주소 표시줄)로 인해 가시적인 뷰포트 높이가 100vh보다 작았기 때문이었습니다. 결과적으로, 하단 액션 바가 종종 화면 밖으로 밀려나가는 문제가 발생했습니다.

<div class="content-ad"></div>

# 해결책 1: SVH (Small Viewport Height) 사용

![이미지](/assets/img/2024-08-26-HowtoFixthe100vhHeightIssueforMobileResponsiveness_1.png)

다양한 해결책을 조사한 후, 100vh 대신 SVH (작은 뷰포트 높이)를 사용하여 문제가 해결되었음을 발견했습니다:

```css
.middle-content {
    height: calc(100svh - (var(--top-nav-height) + var(--bottom-nav-height)));
}
```

<div class="content-ad"></div>

# svh가 작동하는 이유:

- svh는 주소 표시줄과 같이 항상 표시되지 않는 모바일 브라우저 UI 요소가 차지하는 높이를 제외합니다.
- 이는 모바일 기기에 대해 더 신뢰할 수 있는 단위로 만들어줍니다. 내용이 표시 영역 내에 들어가게 하고 하단 작업 표시줄에 접근할 수 있게 합니다.

# 해결책 2: Flexbox를 사용한 더 견고한 접근 방식

![이미지](/assets/img/2024-08-26-HowtoFixthe100vhHeightIssueforMobileResponsiveness_2.png)

<div class="content-ad"></div>

svh가 빠른 해결책을 제공하는 동안, 특히 새 프로젝트에는 flexbox로 레이아웃을 생성하는 것이 더 나은 장기적인 해결책이라고 생각합니다. 이 접근 방식은 고정 높이를 완전히 피하고 레이아웃이 동적으로 조정되도록합니다:


.container {
  display: flex;
  flex-direction: column;
  height: 100vh; 또는 height: 100svh; (정밀도용)
}

.top-nav {
  padding: 16px;
}

.middle-content {
  flex-grow: 1;
  overflow-y: auto;
}


<div class="content-ad"></div>


.bottom-action-bar {
    padding: 16px;
}

## 왜 Flexbox가 최상의 솔루션인가요?

- 동적이고 적응형: 중간 콘텐츠에 flex-grow: 1을 사용하여 상하 섹션 사이의 사용 가능한 공간을 자동으로 차지하며 뷰포트 크기나 방향 변경에 적응합니다.
- 높이 계산 회피: 100vh, svh 또는 dvh와 같은 뷰포트 높이 단위를 사용할 필요가 없습니다. 이로 인해 레이아웃 문제가 발생할 수 있는데, Flexbox가 간겨합니다.
- 더 간단하고 유지보수가 쉬운 CSS: Flexbox는 CSS를 간소화하여 이해하고 유지하기 쉽게 만들어 레이아웃 버그의 위험을 줄입니다.

## 결론


<div class="content-ad"></div>

100vh 높이 문제를 모바일 반응성에서 처리하는 것은 도전적일 수 있지만, 올바른 방법으로 접근하면 모든 기기에서 원활하게 작동하는 레이아웃을 만들 수 있습니다. 기존 프로젝트의 경우 svh를 사용하여 콘텐츠가 보이도록 빠른 해결책을 제공할 수 있습니다. 그러나 새로운 프로젝트의 경우, 플렉스박스 기반 레이아웃을 채택하는 것이 가장 견고하고 확장 가능한 솔루션으로, 모든 기기에서 일관되고 예측 가능한 작동을 보장할 수 있습니다.

반응형 웹사이트를 위한 100vh 높이 문제 해결 방법



# 웹 앱을 만드는 일은 꽤 어렵지만 Flask를 사용하면 간단해집니다. 파이썬 프레임워크를 사용하면 간단하게 웹 애플리케이션을 만들 수 있습니다. 이 블로그에서는 Flask, HTML 및 CSS를 사용하여 간단한 웹 애플리케이션을 만드는 단계를 안내하겠습니다.

필수 준비물

- 기본적인 Python 이해
- HTML 및 CSS 작성 방법
- Flask
- Vs Code (또는 다른 IDE)

단계 1: 환경 설정하기

<div class="content-ad"></div>

패키지 버전이 다른 것으로 인해 문제가 발생하는 것을 원치 않기 때문에 가상 환경을 사용할 것입니다.

```shell
$ python3 -m venv myprojectenv
$ source myprojectenv/bin/activate # Windows일 경우: myprojectenv\Scripts\activate
```

다음으로 Flask를 설치해 보세요:

```shell
$ pip install Flask
```

<div class="content-ad"></div>

Step 2: 플라스크 앱 만들기

프로젝트 디렉토리에 새 파일 'app.py'를 만들고 다음 코드를 사용하세요

```python
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
  return "첫 번째 플라스크 앱에 오신 것을 환영합니다!"

if __name__ == '__main__':
  app.run(debug=True, port=5000)
```

Step 3: 플라스크 앱 실행하기

<div class="content-ad"></div>

플라스크 앱을 실행하려면 터미널에서 다음 명령을 사용하세요:

```shell
$ python app.py
```

터미널에 링크가 표시됩니다. 해당 링크를 브라우저에서 열어서 초기 플라스크 앱을 사용할 수 있습니다.

단계 4: 템플릿 사용

<div class="content-ad"></div>

좀 더 복잡한 애플리케이션을 위해서는 HTML 템플릿을 사용하는 것이 좋습니다. 프로젝트 디렉토리에 templates 폴더를 생성하고 그 안에 home.html 파일을 만들어주세요:

```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
</head>
<body>
<h1>Welcome to your first Flask app!</h1>
</body>
</html>
```

app.py 파일을 수정하여 render templates를 사용하도록 하겠습니다:

```js
from flask import render_template
@app.route('/')
def home():
  return render_template('home.html')
```

<div class="content-ad"></div>

### Step 5: HTML에 CSS 파일 추가하기

```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="{ url_for('static', filename='style.css') }">
</head>
<body>
<h1>Welcome to Your First Flask App!</h1>
</body>
</html>
```

HTML의 7번 줄에 위 코드를 추가하고 CSS에 링크를 생성해주세요.

프로젝트 디렉토리에 **static** 폴더를 생성해주세요. 그 안에 **style.css** 파일을 만들어주세요.

<div class="content-ad"></div>

```js
body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  text-align: center;
  margin-top: 50px;
}
```

브라우저에서 웹 사이트를 새로고침하면 결과를 확인할 수 있어요!

<img src="/assets/img/2024-08-26-BuildingaSimpleWebApplicationwithFlask_0.png" />

축하해요! Flask를 사용하여 간단한 웹 애플리케이션을 만들었네요. 여기서부터는 더 많은 경로, 템플릿 추가, 심지어 데이터베이스와 연결하여 애플리케이션을 확장할 수 있어요. Flask는 이처럼 간단한 프로젝트부터 복잡한 애플리케이션까지 확장이 가능한 강력한 도구로, 웹 개발에 최적한 선택 중 하나에요.

<div class="content-ad"></div>

이제 Flask의 기능을 더 탐구하고 더 정교한 웹 애플리케이션을 만들어 보세요!

Flask를 사용한 간단한 웹 애플리케이션 만드는 방법




![Chrome Extension](/assets/img/2024-08-26-CreateaChromeExtension_0.png)

크롬 익스텐션을 만든 적이 있나요? 저와 같이 새로운 기술 도구에 뛰어드는 것이 항상 흥미로운 분이라면, 나만의 크롬 익스텐션을 만드는 것은 여러분의 브라우징 경험을 향상시키거나 다른 사람들이 사용하는 것을 도와줄 수 있는 보상적인 방법일 것입니다. 이 안내서에서는 크롬 익스텐션을 만드는 기본 사항을 안내하고 참 쉬운 예제를 제공할 것입니다: 모든 새로운(빈) 탭을 닫는 크롬 익스텐션입니다.

## 크롬 익스텐션이란?

크롬 익스텐션은 브라우징 경험을 사용자 지정하는 작은 소프트웨어 프로그램입니다. 크롬의 기능과 동작을 개별적으로 필요에 맞게 조정할 수 있게 해주며, HTML, JavaScript, CSS와 같은 웹 기술을 사용하여 만들어져 웹 개발자들이 모두 사용할 수 있습니다.


<div class="content-ad"></div>

## 기본 사항

크롬 확장프로그램을 만들려면 세 가지 주요 파일이 필요합니다:

1. 매니페스트 파일 (manifest.json): 이 파일은 확장프로그램에 대한 메타데이터입니다. 크롬에 확장프로그램, 버전, 필요한 권한 및 기타 중요한 정보에 대해 알려줍니다.

2. HTML 파일: 확장프로그램에 사용자 인터페이스(UI)가 있다면 HTML과 CSS를 사용하여 디자인합니다.

3. JavaScript 파일: 이 파일에는 확장프로그램의 동작을 제어하는 확장프로그램의 로직이 포함되어 있습니다.

<div class="content-ad"></div>

## 예시: 모든 새 탭을 닫기 위한 Chrome 확장 프로그램 만들기

기술적인 개념을 이해하기 위해 항상 예시를 참조해요. 예를 들어, 종종 너무 많은 탭을 열고 하나의 클릭으로 모든 새 탭을 닫을 수 있는 쉬운 방법이 있었으면 좋겠다고 생각해봅시다. 우리는 그것을 수행하는 확장 프로그램을 만들어볼 거에요!

단계 1: 매니페스트 파일 설정

컴퓨터에 새 폴더를 만들고 manifest.json이라는 파일을 추가하세요. 아래는 어떻게 보일 수 있는지에 대한 기본적인 예시입니다:

<div class="content-ad"></div>

```js
{
 "manifest_version": 3,
 "name": "Close All New Tabs",
 "version": "1.0",
 "description": "열려진 모든 새 탭을 닫습니다.",
 "permissions": ["tabs"],
 "background": {
 "service_worker": "background.js"
 },
 "action": {
 "default_popup": "popup.html"
 }
}
```

## 단계 2: 백그라운드 스크립트 생성하기

동일한 폴더에 `background.js`라는 파일을 만드십시오. 이 스크립트는 탭을 닫는 기능을 관리할 것입니다:

```js
chrome.tabs.query({}, function(tabs) {
 for (let tab of tabs) {
 if (tab.url === 'chrome://newtab/') {
 chrome.tabs.remove(tab.id);
 }
 }
});
```

<div class="content-ad"></div>

## 단계 3: UI 만들기

수동으로 탭 닫기 작업을 트리거하는 버튼을 제공하려면 popup.html 파일을 만드세요:

```js
<!DOCTYPE html>
<html>
 <head>
 <style>
 body { font-family: Arial, sans-serif; padding: 10px; }
 button { padding: 10px; background-color: #f44336; color: white; border: none; cursor: pointer; }
 </style>
 </head>
 <body>
 <button id=”close-tabs”>새 탭 닫기</button>
 <script src=”popup.js”></script>
 </body>
</html>
```

그리고 버튼 클릭을 처리하는 popup.js를 만드세요:

<div class="content-ad"></div>

```js
document.getElementById('close-tabs').addEventListener('click', () => {
  chrome.tabs.query({}, function(tabs) {
    for (let tab of tabs) {
      if (tab.url === 'chrome://newtab/') {
        chrome.tabs.remove(tab.id);
      }
    }
  });
});
```

## 단계 4: Chrome에서 확장 프로그램로 로드하기

1. Chrome을 열고 chrome://extensions/로 이동합니다.
2. 오른쪽 상단의 "개발자 모드"를 활성화합니다.
3. "압축 해제된 확장 프로그램을 로드"를 클릭하고 확장 프로그램 파일이 있는 폴더를 선택합니다.

이제 확장 프로그램을 사용할 준비가 되었습니다! 한 번의 클릭으로 모든 새 탭을 닫아 브라우징 경험을 효율적으로 만들어보세요.

<div class="content-ad"></div>

# Chrome 확장 프로그램을 게시하세요

크롬 확장 프로그램을 만드는 데 많은 노력을 기울인 후, 다음으로 진행할 흥미로운 단계는 Chrome 웹 스토어에 게시하여 전 세계와 공유하는 것입니다. 수백만 명의 사용자에게 확장 프로그램을 제공하려면 다음 빠른 안내서를 따라보세요.

## 단계 1: 확장 프로그램 준비

게시하기 전에, 확장 프로그램이 대중에게 준비되었는지 확인하세요:

<div class="content-ad"></div>

- 철저한 테스트: 확장 기능이 버그 없이 정상적으로 작동하는지 확인하세요. 안정성을 보장하기 위해 다양한 시나리오에서 테스트하세요.
- 에셋 생성: 몇 가지 그래픽이 필요합니다:
  - 128x128 픽셀 아이콘: 스토어에서 당신의 확장 기능을 대표합니다.
  - 스크린샷 (1280x800 또는 640x400 픽셀): 당신의 확장 기능이 작동 중인 clear한 이미지를 제공하세요. 사용자들이 확장 기능이 무엇을 하는지 이해하는 데 도움이 됩니다.
  - 프로모션 이미지 (옵션): 확장 기능을 시각적으로 홍보하기 위한 440x280 픽셀 이미지.

3. 자세한 설명 작성: 확장 기능이 무엇을 하는지 명확히 설명하고, 사용자에게 어떤 이점을 제공하는지 설명하며, 발견성을 향상시키는 데 도움이 되는 관련 키워드를 포함하세요.

## 단계 2: 개발자 계정 생성

<div class="content-ad"></div>

확장 프로그램을 출판하려면 개발자 계정이 필요합니다:

- Chrome 웹 스토어 개발자 대시보드로 이동하세요.
- Google 계정으로 로그인하세요.
- 개발자 계약에 동의하세요.
- $5의 일회성 등록 비용을 지불하세요.

## 단계 3: 확장 프로그램 업로드하기

- 확장 프로그램 압축하기: 확장 프로그램 파일(매니페스트, HTML, CSS, JS 파일 및 이미지 포함)을 .zip 파일로 묶어주세요.
- 개발자 대시보드로 이동: 계정 설정이 완료되면 대시보드에서 "새 항목 추가"를 클릭하세요.
- Zip 파일 업로드하기: 확장 프로그램의 .zip 파일을 선택하고 업로드하세요.

<div class="content-ad"></div>

## 단계 4: 세부 정보 입력

확장 프로그램을 업로드하면 추가 정보를 입력하라는 프롬프트가 표시됩니다:

- 이름 및 설명: 확장 프로그램의 이름과 간결하고 매력적인 설명을 입력하세요.
- 카테고리: 확장 프로그램에 가장 적합한 카테고리를 선택하세요.
- 언어: 확장 프로그램의 기본 언어를 선택하세요.
- 스크린샷 및 아이콘: 미리 준비한 스크린샷과 아이콘을 업로드하세요.
- 권한: 확장 프로그램이 필요로 하는 권한을 검토하고 설명하세요.

## 단계 5: 심사를 위해 제출

<div class="content-ad"></div>

세부 정보를 모두 입력한 후:

- 저장 및 게시: 모든 것에 만족하셨으면 "게시"를 클릭하세요. 휴! 여기서 일이 끝났어요. 구글은 여러분이 작성한 확장 프로그램이 가이드라인을 충족하는지 확인할 것입니다.
- 심사 과정: 심사 과정은 몇 시간에서 몇 일이 걸릴 수 있습니다. 확장 프로그램이 승인되고 게시되면 이메일을 받게 됩니다. (제 경우엔 게시되는 데 하루가 걸렸어요!)

## 단계 6: 확장 프로그램 관리하기

게시한 후, 여러분의 확장 프로그램은 누구나 설치할 수 있는 크롬 웹 스토어에서 이용할 수 있습니다. 개발자 대시보드를 통해 업데이트를 관리하고 성능을 추적하며 사용자 피드백에 응답할 수 있습니다.

<div class="content-ad"></div>

## 나의 첫 번째 크롬 익스텐션

저는 최근에 처음으로 크롬 익스텐션을 출시했어요. 그것은 간단한 단일 탭 정리 도구로, 모든 열린 탭을 닫고 그 링크를 하나의 목록에 저장합니다. 이제 브라우저가 최대 90% 적은 메모리 공간을 차지하며, 원하는대로 모든 탭 또는 개별 탭을 쉽게 다시로드할 수 있어요.

여기서 확인하고 리뷰도 남겨주세요 - Single Tab Organizer.

## 결론

<div class="content-ad"></div>

크롬 익스텐션을 만드는 것은 웹 개발 기술을 향상시키고 자신과 다른 사람들에게 유용한 도구를 제공하는 환상적인 방법입니다. 작게 시작하고 실험해보면 곧 강력한 브라우저 익스텐션 세트를 만들어 세상과 공유할 수 있을 거예요!

여기까지 읽어주셨다면, 이 기사에 👏을 꼭 눌러 주세요.

즐거운 코딩하세요! ✨😁

크롬 익스텐션 만드는 방법과 예제 코드



## 개요:

이 Flask 애플리케이션은 사용자가 웹 인터페이스에서 직접 Google 검색을 수행할 수 있도록 합니다. 백엔드에는 Flask 프레임워크를 사용하고, HTTP 요청을 보내기 위해 requests를 사용하며, Google 검색 결과의 HTML 내용을 파싱하기 위해 BeautifulSoup를 사용합니다. 이 앱은 검색 결과를 반환하고 웹페이지에 표시합니다.

## 폴더 구조:

```js
project_directory/
│
├── templates/
│   └── index.html       # 웹 인터페이스용 HTML 파일
│
└── server.py            # 메인 Flask 애플리케이션 파일
```

<div class="content-ad"></div>

## 의존성:

- Flask: 루트 처리 및 HTML 템플릿 렌더링을 다루는 웹 프레임워크입니다.
- requests: 외부 사이트(Google 검색)로 HTTP 요청을 보내는 라이브러리입니다.
- BeautifulSoup: 검색 결과에서 관련 정보를 추출하는 HTML 파싱 라이브러리입니다.

## 설치:

- 가상 환경 없이 전역적으로 의존성 설치하기:

<div class="content-ad"></div>

- pip install flask requests beautifulsoup4

- 가상 환경을 사용하여 종속성 설치하기(권장 사항):

- 가상 환경 생성:
- python -m venv venv

## 코드 설명:

<div class="content-ad"></div>

server.py:

- 라이브러리 가져오기:

- Flask: 웹 애플리케이션을 만드는 데 사용됩니다.
- request: HTTP 요청에서 쿼리 매개변수에 액세스합니다.
- render_template: HTML 템플릿을 렌더링합니다.
- jsonify: Python 사전을 JSON으로 변환합니다.
- requests: Google에 HTTP 요청을 보냅니다.
- BeautifulSoup: Google의 검색 결과의 HTML 내용을 구문 분석합니다.

- google_search 함수:

<div class="content-ad"></div>

- 입력: 쿼리 (검색어).
- 처리:
  - 검색 쿼리로 Google에 GET 요청을 보냅니다.
  - BeautifulSoup을 사용하여 응답을 파싱하여 검색 결과의 제목, 링크 및 스니펫을 추출합니다.
- 출력: 검색 결과 목록 (제목, 링크, 스니펫).

- 홈 경로 (/):

  - 사용자가 검색 쿼리를 입력할 수 있는 홈페이지 (index.html)를 렌더링합니다.

- 검색 경로 (/search):

<div class="content-ad"></div>

- 입력: 쿼리 매개변수 쿼리.
- 처리: 사용자가 제공한 쿼리로 google_search 함수를 호출합니다.
- 출력: JSON 응답으로 검색 결과를 반환합니다.

- 애플리케이션 시작:

- 스크립트를 직접 실행하면 Flask 개발 서버가 시작되어 애플리케이션에 액세스할 수 있게됩니다.

index.html:

<div class="content-ad"></div>

- 양식:

  - 사용자가 검색어를 입력할 수 있는 입력 필드가 포함되어 있습니다.
  - JavaScript (AJAX)를 사용하여 /search 엔드포인트로 양식을 제출합니다.

- JavaScript:

  - 양식 제출을 캡처하고 Flask 백엔드에서 검색 결과를 가져와 새로 고침 없이 페이지에 표시합니다.

<div class="content-ad"></div>

## 어플리케이션 실행 방법:

- Flask 서버를 실행하려면 다음을 실행하세요: 

```bash
python server.py
```

- 웹 브라우저를 열고 http://127.0.0.1:5000/ 주소로 이동하여 어플리케이션에 접속하세요.
- 검색어를 입력한 후 "검색"을 클릭하면 결과가 페이지에 표시됩니다.

<div class="content-ad"></div>

# 여러 작업 추가하기:

만약 이 애플리케이션의 기능을 확장하여 더 많은 작업(예: 다양한 유형의 검색, 데이터 처리 또는 기타 기능)을 추가하고 싶다면, 다음 단계를 따르세요:

## 1. 새 경로 추가:

다른 작업을 처리하기 위해 새 경로를 추가할 수 있습니다. 예를 들어 날씨 정보를 가져오는 작업을 추가하려면 새 경로를 만드세요:

<div class="content-ad"></div>

```python
@app.route('/weather', methods=['GET'])
def get_weather():
    city = request.args.get('city')
    # 날씨 정보를 가져오는 코드
    weather_data = fetch_weather(city)
    return jsonify(weather_data)
```

## 2. 새 작업을 위한 함수 생성:

google_search와 유사한 작업을 수행하는 함수를 정의하세요. 예를 들어:

```python
def fetch_weather(city):
    # 날씨 서비스에 API 호출
    response = requests.get(f'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q={city}')
    if response.status_code == 200:
        return response.json()
    else:
        return {'error': '날씨 데이터를 가져올 수 없습니다'}
```

<div class="content-ad"></div>

## 3. 프론트엔드 수정:

index.html을 업데이트하여 새 작업을 위한 폼을 포함시킵니다. 예를 들어, 날씨 조회를 처리하는 새로운 폼을 추가하세요:

```js
<form id="weatherForm">
    <input type="text" id="city" name="city" placeholder="도시를 입력하세요">
    <button type="submit">날씨 가져오기</button>
</form>
<div id="weatherResults"></div>
```

```js
<script>
    document.getElementById('weatherForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const city = document.getElementById('city').value;
        fetch(`/weather?city=${city}`)
            .then(response => response.json())
            .then(data => {
                let resultsDiv = document.getElementById('weatherResults');
                resultsDiv.innerHTML = `<p>온도: ${data.temp}°C</p>`;
            });
    });
</script>
```

<div class="content-ad"></div>

## 4. 추가 템플릿 추가하기 (선택사항):

새로운 작업이 다른 HTML 템플릿이 필요하다면, templates 폴더에 추가 HTML 파일을 생성하고 render_template 함수를 사용하여 렌더링할 수 있습니다.

```js
@app.route('/new_task')
def new_task():
    return render_template('new_task.html')
```

# 결론:

<div class="content-ad"></div>

이 문서는 Flask 애플리케이션을 설정, 실행 및 확장하는 방법을 안내합니다. 새로운 라우트와 함수를 만들고 전면 사용자 인터페이스를 필요에 맞게 수정하여 여러 작업을 추가할 수 있습니다.

Posts