




# css :has() 속성 사용법

::: tip 💡이 포스팅을 읽으면

:::


css has 속성 사용하는 방법

# HTML 이메일 템플릿 마크업하는 방법

이메일 템플릿을 HTML로 직접 만들 수 있습니다.

서비스회사에서 일을 하다보면 자연스럽게 이메일 마크업을 필요로 하는 경우가 생기는데요.
회원가입, 인증 번호, 결제 내역 등등 많은 프로세스에서 메일을 필요로 하고 있습니다.

하지만 요즘 받는 메일들을 보면 모두 텍스트로만 되어있지 않고
아래와 같이 이미지 및 레이아웃이 있는 구조로 되어있는데요.

<img src="./img/2022-12-22-HTML-이메일-템플릿-마크업하는-방법-1.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

메일 템플릿을 만드는 방법과 주의해야할 점에 대해서 알아봅니다.

## 1. 이메일 템플릿 마크업 방법

이메일 템플릿에서는 기본적으로 table구조로 모든 것을 만든다고 보시면 됩니다.

<img src="./img/2022-12-22-HTML-이메일-템플릿-마크업하는-방법-5.png" width="500" />

### 큰 table 만들기

가장 먼저 큰 table을 만들어줍니다.
이메일 마크업은 모든 css를 인라인 스타일로 넣어주어야합니다.
table에 사용되는 기본적인 csse들을 넣어줍니다.

```html
<table align="center" style="width: 596px; table-layout: fixed; max-width: 596px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr></tr>
  </tbody>
</table>
```

### 간격 지정하기

간격을 사용할 때도 아래와 같이 td를 사용합니다.
빈 td 태그를 사용해서 좌우 여백 20px를 구현합니다.

그냥 웹사이트를 마크업 했다면 `padding: 0 20px`와 같은 쉬운 방식으로 했을텐데 매우 복잡하죠?
그래서 이메일 마크업을 하는 것이 번거롭고 안되는 것들이 많은거랍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```html
<table align="center" style="width: 596px; table-layout: fixed; max-width: 596px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 20px"></td>
      <td></td>
      <td style="width: 20px"></td>
    </tr>
  </tbody>
</table>
```

### 이미지 사용하기

이미지를 사용할 때는 td 태그 안에 img 태그를 이용해서 작업할 수 있습니다.
모바일 PC에 따른 반응형으로 작업하고 싶다면 `style="max-width: 100%"` 를 넣어주어서 모바일 기기에서도 깨지지 않게 작업해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```html
<table align="center" style="width: 596px; table-layout: fixed; max-width: 596px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 20px"></td>
      <td>
        <img src="" width="300" height="100" alt="" style="max-width: 100%; height: auto; vertical-align: top" />
      </td>
      <td style="width: 20px"></td>
    </tr>
  </tbody>
</table>
```

<img src="./img/2022-12-22-HTML-이메일-템플릿-마크업하는-방법-2.gif" width="500" />

### 배경 이미지 사용하기

배경 이미지를 사용할 때는 table요소에 직접 배경을 주는 방식으로 적용하셔야합니다.
td 요소에 `position: absolute`를 줘서 background를 지정하는 등 다른 방식은 문제가 발생합니다.

**이메일 플랫폼에서는 `position: absolute`를 사용할 경우 코드를 블락시키기 때문에 배경이 제대로 노출되지 않을 수 있습니다.**
[caniemail](https://www.caniemail.com/features/css-position/)사이트를 참고하면 이메일에 사용가능한 css 속성이 무엇이 있는지 확인할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```html
<table align="center" style="width: 596px; table-layout: fixed; max-width: 596px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 20px"></td>
      <td>
        <table
          style="
                position: relative;
                border-collapse: collapse;
                width: 100%;
                -webkit-text-size-adjust: 100%;
                background-image: url('');
                background-repeat: no-repeat;
                background-position: 0 0;
                background-size: 100% 600px;
              "
        ></table>
      </td>
      <td style="width: 20px"></td>
    </tr>
  </tbody>
</table>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<img src="./img/2022-12-22-HTML-이메일-템플릿-마크업하는-방법-3.png"  />

추가로, background 속성을 사용할 때는 축약형을 사용하면 제대로 적용이 되지 않습니다. [참고 사이트](https://www.caniemail.com/search/?s=background)

<img src="./img/2022-12-22-HTML-이메일-템플릿-마크업하는-방법-4.png"  />

### 텍스트 사용하기

텍스트를 사용할 때는 아래와 같이 td태그에 font에 대한 속성들을 전부 넣어주어야합니다.
table태그에서 font 값을 지정하면 하위에서 다 적용되지 않아? 라고 생각하실 수 있지만
이메일에서는 그렇게 되지 않아서 번거롭지만 폰트사이즈, 색상, 폰트 스타일 등 다양한 속성들을 직접 적용해야합니다.

```html
<table align="center" style="width: 596px; table-layout: fixed; max-width: 596px" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="width: 20px"></td>
      <td
        style="padding-bottom: 80px; line-height: 35px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, Dotum, sans-serif; font-weight: 700; font-size: 25px; color: #000; text-align: center"
      >
        제목
      </td>
      <td style="width: 20px"></td>
    </tr>
    <tr>
      <td style="width: 20px"></td>
      <td
        style="padding-bottom: 80px; line-height: 35px; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, Dotum, sans-serif; font-weight: 700; font-size: 25px; color: #000; text-align: center"
      >
        소제목
      </td>
      <td style="width: 20px"></td>
    </tr>
  </tbody>
</table>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 마무리

table 요소로 구조를 잡아야된다는 점과 속성을 맘껏 사용하지 못한다는 점
게다가 inline style로 스타일을 작성해야한다는 점 등 이메일 템플릿 작성하는데에는 까다로운 점이 많은데요.

하지만, 위 와 같이 이미지, 배경 이미지, 텍스트 만 적용할 수 있어도 웬만한 메일 템플릿 마크업은 할 수 있답니다.
까다로운 만큼 디자인 가이드가 어렵게 나오지는 않기 때문에 table 속성을 사용해야한다는 점 유의해서
작업하면 큰 문제 없을 것으로 보여집니다.

HTML을 이용해 outlook까지 대응 가능한 이메일 템플릿을 직접 마크업하는 방법에 대해서 공유합니다

HTML css로 이메일 템플릿 마크업하는 방법






# html css로 이미지 수평 중앙 정렬하는 방법

브라우저 사이즈에 상관 없이 이미지를 수평 중앙 정렬할 수 있습니다.

이미지 수평 정렬하는 케이스는 여러가지가 있는데요. <br>
**브라우저 사이즈에 상관없이 이미지를 화면의 수평 중앙 정렬 시키는 방법**에 대해 알아보겠습니다.

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-1.png"  />

수평 정렬이면 그냥 `margin: auto` 쓰면 되는거 아냐? 라고 생각하실 수 있지만<br>
이미지보다 너비가 작은 레이아웃에서도 이미지를 중앙 정렬 시킬 때는 `margin: auto` 속성만으로는 동작이 안됩니다.

이미지 수평 정렬의 경우 이미지를 감싸고 있는 요소의 상태에 따라서 나눠서 생각해볼 수 있는데요.
아래와 같이 두 가지 케이스로 나누어서 정리해보겠습니다.

1. 전체 레이아웃이 고정 너비를 가지는 경우
2. 전체 레이아웃의 너비와 상관 없는 정렬방법

### 1. 전체 레이아웃이 고정 너비를 가지는 경우

이미지가 전체 레이아웃의 너비보다 큰 경우가 있을 수 있는데요.
이런 경우에도 이미지를 중앙 정렬 시킬 수 있습니다. <br>
예를 들어 이미지의 너비는 1920, wrapper의 최소 너비는 1420으로 고정이 되어있을 경우에 아래와 같이 중앙정렬 시킬 수 있습니다.

#### 1.1 wrapper의 최소 width 값을 갖는 태그로 이미지 감싸기

1920사이즈의 이미지를 고정 레이아웃 너비인 1420px 인 div로 감싸줍니다.

```html
<div class="banner">
  <div class="banner_img_wrapper">
    <img src="./img/@collections_head.jpg" width="1920" height="445" alt="" class="banner_img" />
  </div>
</div>
```

```css
.banner {
  display: block;
  background-color: #8abefa;
}

.banner_img_wrapper {
  width: 1420px;
}
```

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-2.png"  />

#### 1.2 `banner_img_wrapper`중앙정렬

```css
.banner_img_wrapper {
  width: 1420px;
  margin: 0 auto;
}
```

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-3.png"  />

이렇게 이미지를 감싸는 요소에 추가하면 `banner_img_wrapper`가 항상 화면 중앙에 위치하게됩니다. <br>
하지만 실제 이미지의 위치 값은 `banner_img_wrapper`를 기준으로 시작하기 때문에 우측으로 치우치게 됩니다. <br>
1920사이즈의 이미지는 1420 요소에 넣게 되면 500px이 넘치게 되므로 이것의 절반만큼 이동시켜준다면 이미지 또한 화면의 중앙에 올 수 있습니다.

#### 1-3 이미지 위치 보정

```css
.banner_img {
  margin-left: -250px;
}
```

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-4.png"  />

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-5.png"  />

이미지가 중앙 정렬된 모습을 확인하실 수 있습니다. <br>
이런 방법은 레이아웃도 1420px로 고정되어있고 이미지도 1920px로 고정되어있는 경우에만 사용할 수 있다는 제약이 있습니다. <br>
요즘 서비스의 경우 이렇게 고정 너비를 사용하는 서비스가 많지 않기 때문에 이렇게 해결할 수 있는 경우는 드물 것이라고 생각되네요.

### 2. wrapper의 사이즈에 상관 없는 정렬방법

그럼 이제 고정 레이아웃이 아닌 레이아웃의 너비에 상관 없이
이미지를 수평 중앙 정렬할 수 있는 방법에 대해서 정리해봅니다.

```html
<div class="banner">
  <img src="./img/@collections_head.jpg" width="1920" height="445" alt="" class="banner_img" />
</div>
```

```css
.banner {
  display: block;
  background-color: #8abefa;
}

.banner_img {
  position: relative;
  left: 50%;
}
```

이번에는 이미지를 감싸는 요소는 없이 작업이 가능합니다.

1. 이미지를 화면의 절만만큼 오른쪽으로 이동
2. 이미지를 이미지의 절반만큼 왼쪽으로 이동

위와 같은 방식으로 이미지 위치를 이동시키면 **레이아웃의 너비에 상관 없이 항상 이미지는 중앙에 위치**할 수 있습니다.

#### 2.1 이미지를 화면의 절만만큼 오른쪽으로 이동

left:50% 속성을 통해서 현재 레이아웃에 50% 지점에서 이미지가 위치할 수 있도록 작성해줍니다.

```css
.banner_img {
  position: relative;
  left: 50%;
}
```

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-6.png"  />

#### 2.2 이미지를 이미지의 절반만큼 왼쪽으로 이동

그 다음에는 이미지를 왼쪽으로 이미지 사이즈의 절반만큼 이동시켜야합니다.

```css
.banner_img {
  position: relative;
  left: 50%;
  margin-left: -960px;
}
```

이미지 사이즈의 절반인 960만큼 margin-left의 - 값으로 이동시켰는데요. <br>
이렇게 이미지의 사이즈가 고정적인 경우에는 css에 값을 넣어두는 방식으로 작성할 수 있지만
이미지의 값이 유동적일 경우 이렇게 값을 지정해둘 수 없는데요.

그럴 경우에는 아래와 같이 transform속성을 통해서 작성할 수 있습니다.

```css
.banner_img {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
```

<img src="./img/2022-12-22-html-css로-이미지-반응형-중앙-정렬하는-방법-7.png"  />

#### 2.3 스크롤 블락

이런 방식으로 이미지를 중앙에 위치시키게 되면
이미지 사이즈가 브라우저 사이즈보다 크게 되기 때문에
스크롤이 발생하기 때문에 이미지를 감싸는 태그에 `overflow:hidden`을 줘야합니다.

```css
.banner {
  display: block;
  overflow: hidden;
}
```

이런식으로 이미지를 수평 중앙 정렬하는 방법에 대해서 정리해보았습니다.
다음은 이미지를 수직 정렬하는 방법에 대해서 정리해보도록 하겠습니다.


left, transform 속성으로 이미지를 중앙 정렬하는 방법에 대해서 정리합니다

htmlcss로 이미지 수직 수평 중앙 정렬하는 방법

# 이메일 템플릿 마크업에 사용해도 되는 CSS 속성인지 확인하는 방법

이메일 템플릿 마크업에 사용해도 되는 css 속성인지 체크할 수 있습니다.

## 1. 이메일 템플릿 css 속성 확인 사이트

[caniemail](https://www.caniemail.com/)이라는 사이트를 통해서 이메일 마크업시 사용해도 되는 css를 확인할 수 있습니다.

<img src="./img/2022-12-22-이메일-템플릿-마크업에-사용해도-되는-CSS-속성인지-확인하는-방법-1.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

caniuse 사이트와 유사한데요. caniuse가 브라우저 지원 범위를 확인하는 사이트라면
caniemail은 이메일에 사용 가능한 css속성을 확인할 수 있습니다.

그럼 몇가지 헷갈리는 속성들을 직접 확인해보며 사용방법을 알려드리겠습니다.

### absolute 가능 여부

이메일에서는 absolute속성을 써야될 일이 있지는 않겠지만 혹시 써야할 수 도 있으니
지원 범위를 한번 살펴보겠습니다.

<img src="./img/2022-12-22-이메일-템플릿-마크업에-사용해도-되는-CSS-속성인지-확인하는-방법-2.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위 사진을 보시면 특정 환경에 따라서 absolute를 지원하지 않는 경우가 있는데요.
대부분의 이메일 폼에서 지원하는 메일 템플릿을 만들려고 한다면 사용해서는 안되는 속성입니다.

그리고 absolute의 경우 낚시형 이메일을 만들어 클릭 실수를 유발하게끔하는 방식으로 사용되기 때문에
대부분의 메일 플랫폼에서 absolute를 사용하면 스타일을 다 제거해버리고 있습니다.

### background 가능 여부

요즘 사용되는 이메일 템플릿의 경우 텍스트만 사용되는 것이 아니라 배경 이미지도 사용되기 때문에
background 속성은 많이 필요로 할 것 같은데요.

<img src="./img/2022-12-22-이메일-템플릿-마크업에-사용해도-되는-CSS-속성인지-확인하는-방법-3.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

background 속성은 대부분의 메일에서 지원하고 있지만 주의할 점이 있네요.
background는 주로 축약형을 많이 사용하곤 하는데 이메일 템플릿 작성시에는
축약형을 사용하지 않고 background-image, background-position, background-size와 같이 각각 따로 지정해주어야합니다.

이메일 템플릿을 사용할 때는 외에도 많은 속성들을 사용하게 될 텐데요.

이메일 템플릿의 경우 css를 인라인으로 작성하다보니 작업이 완료된 후에 수정하는 것 또한 큰 공수가 들어가게 됩니다.
그렇기 때문에 작업 전에 사용할 속성에 대해서 caniemail에서 확인한 후에 진행하는 것이 좋을 것이라 생각됩니다.

까다로운 이메일 템플릿 마크업에 사용해도 되는 속성인지 확인할 수 있는 사이트를 소개합니다

이메일 템플릿 마크업에 사용해도 되는 CSS 속성인지 확인하는 방법

# selenium으로 화면 스크린샷 찍는 방법

## takeScreenshot()

셀레니움으로 화면 전체 혹은 특정 요소만 캡쳐하는 것이 가능한데요.
`element.takeScreenshot()` 으로 할 수 있답니다.

저는 아래와 같이 만들어서 사용하고 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
async function capture({ driver, css, dir, fileName, position = 200 }) {
  await driver.wait(until.elementLocated(By.css(css)), 10000);
  let el = await driver.findElement(By.css(css));
  await driver.executeScript("arguments[0].scrollIntoView(true);", el);
  await driver.executeScript(`window.scrollTo(0, window.scrollY - ${position})`);
  await driver.sleep(1000);
  el.takeScreenshot().then(function (image, err) {
    require("fs").writeFile(`${dir}/${fileName}.png`, image, "base64", function (err) {
      if (err) console.log(err);
      else {
        console.log(chalk.bold.hex("#3498db")(fileName), chalk.bold.hex("#7f8c8d")("캡쳐 완료"));
      }
    });
  });
  await driver.sleep(2000);
}
```

코드를 순서대로 자세히 살펴보겠습니다.

### 1. 스크린 샷 찍을 요소가 있을 때까지 대기

```js
await driver.wait(until.elementLocated(By.css(css)), 10000);
```

### 2. 스크린 샷 찍을 요소까지 스크롤

**캡쳐를 할 때 주의할 점은 캡쳐 하는 요소에 스크롤이 이동되어있어야한다는 점인데요.**
그래서 아래 코드 부분처럼 특정 요소가 위치한 곳으로 스크롤하는 부분도 추가해두었습니다.
position은 여유롭게 더 스크롤하기 위한 값으로 추가해두었습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```js
let el = await driver.findElement(By.css(css));
await driver.executeScript("arguments[0].scrollIntoView(true);", el);
await driver.executeScript(`window.scrollTo(0, window.scrollY - ${position})`);
```

### 3. 스크린 샷 후 파일 저장

`takeScreenshot()`함수에 `.then()` 콜백함수를 넣어서 스크린 샷 찍은 파일을 로컬에 저장할 수 있습니다.
로컬에 스크린샷을 저장할 때는 fs의 writeFile 함수를 통해서 원하는 경로를 받아 저장하도록 했습니다.

```js
el.takeScreenshot().then(function (image, err) {
  require("fs").writeFile(`${dir}/${fileName}.png`, image, "base64", function (err) {
    if (err) console.log(err);
    else {
      console.log(chalk.bold.hex("#3498db")(fileName), chalk.bold.hex("#7f8c8d")("캡쳐 완료"));
    }
  });
});
```

위와 같은 캡쳐 함수를 만들어둔다면 특정 요소의 사진이 필요할 때 손쉽게 캡쳐할 수 있습니다.

셀레니움을 통해서 화면이나 특정 요소를 캡쳐하는 방법에 대해서 정리했습니다

자바스크립트 selenium으로 화면 스크린샷 찍는 방법

# 2024 최신 반응형 웹 개발 트렌드

2024년 반응형 웹 개발을 할 때 어떤 고민들을 해야하는지 알 수 있습니다.

## 인공지능과 머신러닝의 활용

인공지능(AI)과 머신러닝(ML) 기술은 현재 우리의 삶과 사회에 놀라운 영향을 미치고 있습니다. 이러한 기술은 다양한 산업 분야에서 혁신을 이끌고 있으며, 웹 개발 분야에서도 그 활용이 더욱 확대되고 있습니다.

### 웹 개발에서의 AI 및 ML 활용

1. **자동화된 디자인 프로세스**

   - AI를 활용한 디자인 시스템은 사용자의 취향과 행동을 학습하여 자동으로 웹사이트 디자인을 최적화합니다.
   - ML 알고리즘은 웹사이트의 성능 데이터를 분석하여 사용자 경험을 개선하는데 활용됩니다.

2. **개인화된 사용자 경험 제공**

   - 사용자 행동 데이터를 수집하고 분석하여 개인화된 콘텐츠 및 추천 기능을 제공합니다.
   - ML 알고리즘은 사용자의 행동 패턴을 예측하여 사용자에게 맞춤형 콘텐츠를 제공합니다.

3. **자연어 처리 및 음성 인식 기술의 적용**

   - AI 기술을 활용한 자연어 처리(NLP) 및 음성 인식 기술은 웹사이트의 상호작용을 개선하고 사용자 인터페이스를 향상시킵니다.
   - 챗봇이나 음성 인식 기능을 통해 사용자와의 상호작용을 강화합니다.

4. **이미지 및 미디어 관련 기술의 발전**
   - 이미지 인식 및 분석 기술은 웹사이트에서의 이미지 관리와 분류를 자동화합니다.
   - ML 알고리즘은 사용자가 업로드한 이미지를 분석하여 관련 콘텐츠를 추천하거나 태그를 자동으로 생성합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 모션 디자인의 증가

최근 몇 년간 웹 디자인에서 모션 디자인의 중요성은 더욱 커지고 있습니다. 모션은 정적인 디자인을 더 동적이고 생동감 있게 만들어주며, 사용자 경험을 향상시키는 데 기여합니다. 아래에서는 모션 디자인의 증가와 관련된 몇 가지 트렌드와 그 중요성에 대해 알아보겠습니다.

### 트렌드와 관련된 내용

1. **애니메이션의 활용**

   - 웹사이트에서의 애니메이션은 사용자의 시선을 끌고 상호작용을 유도하는 데 효과적입니다.
   - [Lottie](https://airbnb.design/lottie/)와 같은 애니메이션 라이브러리의 등장으로 애니메이션 구현이 간편해지고 있습니다.

2. **스크롤 애니메이션**

   - 사용자가 페이지를 스크롤할 때마다 발생하는 애니메이션은 웹사이트의 동적인 요소를 부각시키고 사용자의 관심을 끌어냅니다.
   - [ScrollMagic](http://scrollmagic.io/)과 같은 라이브러리를 사용하여 스크롤 애니메이션을 쉽게 구현할 수 있습니다.

3. **반응형 애니메이션**
   - 반응형 웹 디자인과 함께, 화면 크기에 따라 애니메이션의 속도, 크기 등을 자동으로 조정하는 기술이 발전하고 있습니다.
   - CSS의 미디어 쿼리와 JavaScript를 결합하여 반응형 애니메이션을 구현할 수 있습니다.

### 모션 디자인의 중요성

- **사용자 경험 향상**: 모션은 사용자의 시선을 끌고 웹사이트의 주요 요소에 관심을 끌어냅니다.
- **브랜드 아이덴티티 강화**: 독특하고 일관된 모션은 브랜드의 아이덴티티를 강화하고 사용자에게 브랜드를 기억할 만한 경험을 제공합니다.
- **상호작용 유도**: 애니메이션을 통해 사용자와의 상호작용을 유도하여 사용자 참여를 촉진합니다.

## 다크 모드 및 주간/야간 모드 전환

최근 몇 년간 사용자들 사이에서 다크 모드가 인기를 끌면서, 웹사이트에서는 주간과 야간의 모드 전환 기능이 중요한 요소로 부상하고 있습니다. 이 기능은 사용자에게 선택의 폭을 넓혀주고 시각적 편의성을 제공하는데 중요한 역할을 합니다. 아래에서는 다크 모드와 주간/야간 모드 전환에 관련된 내용과 중요성에 대해 알아보겠습니다.

### 주요 내용

1. **다크 모드의 인기 상승**

   - [다크 모드의 혜택과 트렌드](https://www.yes24.com/Product/Goods/85733628): 사용자들이 눈의 피로를 줄이고 에너지를 절약하기 위해 다크 모드를 선호하는 이유에 대해 다룬 책입니다.
   - 모바일 운영체제와 웹 브라우저에서 다크 모드 기능을 제공함에 따라 사용자들의 다크 모드 사용이 증가하고 있습니다.

2. **주간/야간 모드 전환 기능의 필요성**

   - 웹사이트에서 주간과 야간의 모드 전환 기능은 사용자에게 시각적 편의성을 제공합니다.
   - [주간/야간 모드 전환 기능의 구현 방법](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/): 웹사이트에서 주간/야간 모드 전환 기능을 구현하는 방법에 대해 상세히 다룬 글입니다.

3. **사용자 경험의 향상**
   - 다크 모드와 주간/야간 모드 전환 기능은 사용자의 취향과 환경에 따라 웹사이트의 디자인을 조정할 수 있도록 합니다.
   - 사용자들에게 선택의 자유를 제공하고 사용자 경험을 향상시키는 데 도움이 됩니다.

### 중요성

- **시력 보호 및 사용자 편의성 강화**: 다크 모드는 눈의 피로를 줄이고 보다 편안한 사용 환경을 제공합니다.
- **시간대에 따른 사용자 경험 개선**: 주간/야간 모드 전환 기능은 사용자의 시간대에 따라 웹사이트의 디자인을 자동으로 조정하여 사용자 경험을 최적화합니다.
- **디자인의 다양성과 개성화**: 사용자들에게 선택의 폭을 넓히고 다양한 사용자 경험을 제공함으로써 웹사이트의 디자인을 더욱 다양화시킵니다.

## 퍼포먼스 및 속도 최적화

웹사이트의 퍼포먼스 및 로딩 속도는 사용자 경험에 매우 중요한 요소입니다. 느린 웹사이트는 사용자들의 이탈을 유발하고 검색 엔진 순위 하락으로 이어질 수 있습니다. 따라서 웹 개발자들은 퍼포먼스 및 속도 최적화에 주목해야 합니다.

### 주요 전략과 기술

1. **이미지 최적화**

   - 이미지의 크기를 최소화하고 압축하여 로딩 시간을 단축합니다.
   - [이미지 최적화를 위한 툴](https://tinypng.com/): 이미지를 압축하여 파일 크기를 줄일 수 있는 온라인 툴입니다.

2. **캐싱과 브라우저 캐시 이용**

   - 정적 리소스를 브라우저에 캐시하여 반복적인 요청을 최소화합니다.
   - 적절한 캐싱 정책을 설정하여 리소스의 유효기간을 조절합니다.

3. **렌더링 최적화**

   - CSS와 JavaScript 파일을 압축하고 최소화하여 렌더링 속도를 향상시킵니다.
   - [웹페이지 성능 분석 도구](https://developers.google.com/speed/pagespeed/insights/): Google의 페이지 스피드 인사이트를 활용하여 웹사이트의 성능을 분석하고 개선할 수 있습니다.

4. **비동기 로딩과 지연 로딩**

   - 페이지 로딩 시 필요하지 않은 리소스의 로딩을 지연시켜 초기 로딩 속도를 향상시킵니다.
   - JavaScript 파일을 비동기적으로 로딩하여 페이지의 렌더링을 차단하지 않습니다.

5. **모바일 최적화**
   - 모바일 기기에서의 웹사이트 접근성을 고려하여 이미지와 스크립트를 최적화합니다.
   - 모바일 특화 페이지를 제작하여 모바일 사용자들에게 더 빠르고 효율적인 경험을 제공합니다.

### 중요성

- **사용자 경험 개선**: 빠른 로딩 속도는 사용자들의 만족도를 높이고 이탈률을 줄입니다.
- **검색 엔진 최적화 (SEO)**: 검색 엔진은 빠른 웹사이트를 선호하며, 높은 성능은 검색 엔진 순위를 높일 수 있습니다.
- **모바일 사용자 고려**: 모바일 트래픽의 증가로 인해 모바일 사용자들에게 빠른 웹사이트 로딩은 더욱 중요해지고 있습니다.

## 접근성 및 포괄적 디자인 강화

접근성과 포괄적 디자인은 모든 사용자가 웹사이트를 쉽게 이용할 수 있도록 하는 데 중요한 역할을 합니다. 이를 통해 장애를 가진 사용자들도 동등하게 정보에 접근할 수 있으며, 모든 사용자들에게 편리한 사용 경험을 제공할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 주요 전략과 기술

1. **웹 표준 준수**

   - 웹 표준을 준수하여 모든 사용자가 일관된 경험을 얻을 수 있도록 합니다.
   - [W3C 웹 표준](https://www.w3.org/standards/webdesign/accessibility)에 대한 준수는 웹 접근성을 향상시키는 데 중요한 역할을 합니다.

2. **스크린 리더 호환성**

   - 웹사이트를 스크린 리더와 호환되도록 개발하여 시각 장애를 가진 사용자들에게 정보에 접근할 수 있는 기회를 제공합니다.
   - [NVDA](https://www.nvaccess.org/)와 같은 스크린 리더를 사용하여 웹사이트의 접근성을 테스트할 수 있습니다.

3. **키보드 네비게이션**

   - 마우스 사용이 어려운 사용자들을 위해 키보드만으로도 웹사이트를 쉽게 탐색할 수 있도록 합니다.
   - 웹사이트의 모든 기능이 키보드로 사용 가능하도록 개발하는 것이 중요합니다.

4. **명료한 내비게이션과 레이아웃**

   - 명확하고 일관된 내비게이션 메뉴를 제공하여 사용자들이 쉽게 정보를 찾을 수 있도록 합니다.
   - 레이아웃은 간결하고 구조적으로 설계하여 사용자들이 콘텐츠를 쉽게 이해할 수 있도록 합니다.

5. **색각 장애 대응**
   - 적절한 색상 대비를 사용하여 색각 장애를 가진 사용자들도 콘텐츠를 쉽게 읽을 수 있도록 합니다.
   - [색각 장애 시뮬레이터](https://www.toptal.com/designers/colorfilter)를 사용하여 웹사이트의 색상 대비를 테스트할 수 있습니다.

### 중요성

- **모든 사용자 포용**: 접근성을 강화함으로써 모든 사용자들이 웹사이트를 이용할 수 있는 기회를 얻을 수 있습니다.
- **법적 요구 준수**: 접근성은 법적으로 요구되는 사항이며, 준수하지 않을 경우 법적 문제에 직면할 수 있습니다.
- **포괄적 사용자 경험**: 포괄적 디자인은 모든 사용자들에게 일관된 경험을 제공함으로써 사용자들의 만족도를 향상시킵니다.

## 디자인 시스템의 활용

디자인 시스템은 일관된 사용자 경험을 제공하고 개발 과정을 효율화하는 데 중요한 역할을 합니다. 이는 디자이너와 개발자 간의 협업을 강화하고 시간과 비용을 절감하는 데 도움이 됩니다. 아래에서는 디자인 시스템의 활용과 관련된 내용을 다루겠습니다.

### 주요 내용

1. **컴포넌트 기반 접근**

   - 디자인 시스템은 컴포넌트 기반으로 구축되어 재사용 가능한 디자인 요소를 포함합니다.
   - [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/)과 같은 접근 방식을 활용하여 컴포넌트를 설계하고 관리합니다.

2. **일관된 디자인 패턴**

   - 디자인 시스템은 일관된 디자인 패턴과 가이드라인을 제공하여 사용자들에게 일관된 경험을 제공합니다.
   - [Material Design](https://material.io/design)과 [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)와 같은 디자인 시스템은 각각의 플랫폼에 대한 일관성을 유지합니다.

3. **효율적인 협업과 업데이트 관리**

   - 디자인 시스템은 디자이너와 개발자 간의 협업을 강화하고, 업데이트 및 변화를 효율적으로 관리할 수 있는 플랫폼을 제공합니다.
   - 도구와 프로세스를 통해 디자인 시스템을 지속적으로 개선하고 유지보수합니다.

4. **디자인 시스템의 확장**
   - 디자인 시스템은 단순한 디자인 가이드를 넘어서서 디자인 시스템을 기반으로 한 디자인 툴과 프로토타이핑 툴을 활용하여 디자인 프로세스를 더욱 효율적으로 만듭니다.
   - [Figma](https://www.figma.com/)와 [Sketch](https://www.sketch.com/)와 같은 디자인 툴은 디자인 시스템을 지원하고 확장할 수 있는 기능을 제공합니다.

### 중요성

- **일관된 사용자 경험**: 디자인 시스템을 통해 일관된 디자인 패턴과 요소를 사용하여 사용자들에게 일관된 경험을 제공합니다.
- **협업의 강화**: 디자인 시스템은 디자이너와 개발자 간의 협업을 강화하고 효율적인 업무를 가능하게 합니다.
- **유지보수 및 확장성**: 디자인 시스템은 유지보수가 쉽고 확장 가능한 디자인 시스템을 구축하는 데 도움이 됩니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 모바일 퍼스트 디자인

모바일 퍼스트 디자인은 사용자들이 모바일 기기를 주로 사용하는 현대의 웹 환경에 적합한 디자인 전략입니다. 이전에는 데스크톱을 우선적으로 고려한 디자인이 일반적이었지만, 최근에는 모바일 사용이 더욱 증가하면서 모바일 퍼스트 디자인이 더욱 중요해지고 있습니다. 아래에서는 모바일 퍼스트 디자인에 대한 내용을 다루겠습니다.

### 주요 내용

1. **디바이스 다양성 고려**

   - 다양한 화면 크기와 해상도를 고려하여 모바일 기기에서 웹사이트가 올바르게 표시될 수 있도록 합니다.
   - [Responsive Web Design](https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/)와 같은 기술을 활용하여 다양한 디바이스에 대응합니다.

2. **포커스된 사용자 경험**

   - 모바일 화면에서의 사용자 경험을 우선적으로 고려하여 간결하고 직관적인 인터페이스를 제공합니다.
   - 사용자가 쉽게 콘텐츠를 찾고 목적을 달성할 수 있도록 설계합니다.

3. **성능 최적화**

   - 모바일 퍼스트 디자인은 성능을 최적화하여 빠른 로딩 속도와 부드러운 사용자 경험을 제공합니다.
   - 이미지 최적화, 렌더링 최적화 및 데이터 압축 등의 기술을 활용하여 성능을 향상시킵니다.

4. **터치 제스처 고려**
   - 모바일 환경에서의 터치 제스처를 고려하여 인터랙션 디자인을 설계합니다.
   - 사용자가 편리하게 화면을 탐색하고 작업을 수행할 수 있도록 합니다.

### 중요성

- **사용자 중심의 디자인**: 모바일 퍼스트 디자인은 사용자의 편의성과 효율성을 최우선으로 고려합니다.
- **모바일 트래픽 증가**: 모바일 트래픽이 계속해서 증가하고 있기 때문에 모바일에 최적화된 디자인이 필수적입니다.
- **검색 엔진 최적화 (SEO)**: 모바일 퍼스트 인덱싱으로 인해 검색 엔진 순위에도 영향을 미치므로 모바일 퍼스트 디자인은 SEO에도 중요한 요소입니다.

2024 최신 반응형 웹 디자인 트렌드






# CSS Filter로 다양한 효과 주는 방법 (블러,흑백,반전)



## CSS 필터: 웹 요소에 시각적 효과 추가하기

CSS 필터는 웹 개발자들이 이미지와 그래픽 요소에 다양한 시각적 효과를 적용할 수 있게 해주는 강력한 도구입니다. 이를 통해 그림자, 흐림, 색상 변형 등 다양한 효과를 손쉽게 적용할 수 있습니다.

## 필터 속성

CSS 필터는 filter 속성을 통해 적용됩니다. 이 속성에는 다양한 필터 함수가 존재하며, 각 함수는 특정한 시각적 효과를 나타냅니다. 주요 필터 함수에 대한 설명은 다음과 같습니다:

- blur(): 요소에 블러 효과를 적용합니다. 이 함수는 blur() 함수의 매개변수로 흐리게 하고자 하는 정도를 지정합니다.
- brightness(): 요소의 밝기를 조절합니다. brightness() 함수의 매개변수는 0부터 1 사이의 값으로 지정하며, 1보다 큰 값으로 밝기를 높일 수 있습니다.
- contrast(): 요소의 대비를 조절합니다. contrast() 함수의 매개변수는 대비를 조절하는 비율을 나타냅니다.
- drop-shadow(): 요소에 그림자 효과를 추가합니다. 이 함수는 그림자의 위치, 흐림 정도, 색상 등을 설정할 수 있습니다.
- grayscale(): 요소를 흑백으로 변환합니다. grayscale() 함수의 매개변수는 흑백으로 변환할 정도를 나타냅니다.
- hue-rotate(): 요소의 색상을 회전시킵니다. hue-rotate() 함수의 매개변수는 각도로 지정되며, 색상을 회전시킴으로써 다양한 색상 효과를 만들 수 있습니다.
- invert(): 요소의 색상을 반전시킵니다. invert() 함수의 매개변수는 반전시킬 정도를 나타냅니다.
- opacity(): 요소의 투명도를 조절합니다. opacity() 함수의 매개변수는 0부터 1 사이의 값으로 지정하며, 요소의 투명도를 조절합니다.
- saturate(): 요소의 채도를 조절합니다. saturate() 함수의 매개변수는 채도를 조절하는 비율을 나타냅니다.
- sepia(): 요소에 세피아 효과를 적용합니다. sepia() 함수의 매개변수는 세피아 효과를 적용하는 정도를 나타냅니다.

```css
/* 이미지에 블러 효과 적용 */
.blur {
  filter: blur(5px);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-6.png" width="500" />

```css
/* 이미지의 채도를 감소시킴 */
.desaturate {
  filter: saturate(0);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-7.png" width="500" />

```css
/* 그림자 효과 추가 */
.shadow {
  filter: drop-shadow(8px 8px 10px #000);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-1.png" width="500" />

```css
/* 이미지에 그림자와 회전 효과를 적용 */
.image-effect {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)) hue-rotate(90deg);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-2.png" width="500" />

```css
/* 이미지에 세피아 효과와 채도 조절 효과를 적용 */
.sepia-effect {
  filter: sepia(100%) saturate(150%);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-3.png" width="500" />

```css
/* 배경 이미지에 흑백 필터와 밝기 조절 효과를 적용 */
.background-effect {
  filter: grayscale(100%) brightness(80%);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-4.png" width="500" />

```css
/* 텍스트에 그림자와 색상 반전 효과를 적용 */
.text-effect {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) invert(100%);
}
```

<img src="./img/2024-02-10-CSS-Filter로-다양한-효과-주는-방법-5.png" width="500" />

## 브라우저 호환성

대부분의 최신 브라우저에서 CSS 필터가 지원되지만, 모든 필터가 모든 브라우저에서 완벽하게 작동하지는 않을 수 있습니다. 특히 오래된 브라우저나 모바일 기기에서는 일부 필터가 제대로 지원되지 않을 수 있으니 이 점을 유의해야 합니다.


CSS Filter로 다양한 효과 주는 방법(블러,흑백,반전)

# Html Unclosedtag encoundtered Error 해결방법

## 에러 메세지

```bash
Error: Unclosed tag <div> encountered. Expected </div> before the end of the document.
```

## 에러 원인

태그 오류는 HTML 문서에서 가장 흔하게 발생하는 오류 중 하나입니다. 이러한 오류는 보통 태그를 열거나 닫지 않았거나, 태그를 잘못 중첩했거나, 잘못된 태그를 사용했을 때 발생합니다. 이런 경우에는 브라우저가 HTML을 해석하는 동안 오류를 감지하고, 사용자에게 해당 오류에 대한 메시지를 표시합니다.

## 해결 방법

태그를 닫기: 태그를 열었으면 해당 태그를 반드시 닫아야 합니다. 대부분의 HTML 태그는 `</tagname>` 형식으로 닫습니다. 예를 들어, `<div>` 태그를 열었다면 `</div>`로 닫아주어야 합니다.

중첩된 태그 확인: 태그를 중첩할 때는 올바른 순서로 중첩해야 합니다. 예를 들어, `<div>` 안에 `<p>`를 넣었다면, `<div>`를 닫기 전에 `<p>`를 닫아야 합니다.

태그 속성 검토: 태그를 사용할 때 필요한 속성을 모두 제공했는지 확인해야 합니다. 일부 태그는 필수 속성을 요구할 수 있습니다. 예를 들어, `<img>` 태그는 src 속성을 가져야 합니다.

HTML 검증 도구 사용: 온라인 HTML 검증 도구를 사용하여 문서를 검사하고 오류를 찾을 수 있습니다. 이러한 도구는 문서에 있는 태그 오류를 식별하고 해결하는 데 도움이 됩니다.

문서 유효성 검사: HTML 문서가 W3C 표준에 따라 작성되었는지 확인하는 것이 중요합니다. W3C의 HTML 유효성 검사기를 사용하여 문서를 검사하고 표준에 맞게 수정할 수 있습니다.

태그 오류를 해결하는 것은 HTML 문서의 유효성을 유지하고 웹 페이지의 올바른 동작을 보장하는 데 중요합니다. 따라서 문제를 신속하게 식별하고 수정하는 것이 좋습니다.

HTML 문서를 검증하고 오류를 찾는 데 도움이 되는 몇 가지 인기 있는 온라인 HTML 검증 도구를 추천해 드립니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

[W3C Markup Validation Service](https://validator.w3.org/): W3C가 제공하는 공식 HTML 유효성 검사 도구로, HTML 문서를 W3C 표준에 따라 검사하여 오류를 식별합니다.

[Validator.nu](https://validator.nu/): HTML5 문서를 검증하는 데 사용되는 또 다른 인기 있는 검증 도구입니다. 특히 HTML5와 관련된 오류를 찾는 데 특화되어 있습니다.

[HTML Validator (Firefox 확장 프로그램)](https://addons.mozilla.org/en-US/firefox/addon/html-validator/): Firefox 브라우저용 확장 프로그램으로, 웹 페이지를 검증하여 HTML 오류를 식별하는 데 사용됩니다. 브라우저에서 바로 검사할 수 있어 편리합니다.

[Online-HTML-Validator.net](https://www.online-html-validator.net/): 온라인에서 사용할 수 있는 무료 HTML 검증 도구로, 문서를 업로드하거나 직접 입력하여 검사할 수 있습니다.

이러한 도구들은 HTML 문서를 검증하여 표준에 부합하는지 확인하고, 문서에 있는 오류를 식별하여 수정하는 데 유용합니다. 선택하신 도구를 사용하여 웹 페이지의 유효성을 확인하고 개선하는 데 도움이 되기를 바랍니다.

Html Unclosedtag encoundtered Error 해결방법

# 가장 많이 실수하는 CSS attribute Error

html/css를 작성할 때 가장 많이 하는 css 속성 관련 에러에 대해서 알 수 있습니다.

속성 오류는 HTML 요소에 사용된 속성이 유효하지 않거나 잘못된 경우에 발생합니다. 다음은 속성 오류에 대한 예시 메시지 5가지입니다:

## 1. css 속성이 누락된 경우

Missing required attribute "alt"

`<img>` 태그에서 alt 속성이 누락된 경우 발생하는 오류 메시지입니다. alt 속성은 이미지에 대한 대체 텍스트를 제공해야 합니다.

## 2. 사용되지 않는 css 속성을 사용한 경우

Unknown attribute "align"

: HTML5에서는 `<div>` 요소에 align 속성을 사용할 수 없습니다. 이 속성은 더 이상 사용되지 않으며, CSS를 사용하여 레이아웃을 정렬해야 합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 3. css 속성에 올바르지 않은 값을 넣었을 경우

Invalid attribute value "red" for "href"

: `<a>` 태그의 href 속성에 유효하지 않은 값이 사용된 경우 발생하는 오류 메시지입니다. href 속성은 유효한 URL을 가져야 합니다.

## 4. css 속성에 잘못된 문자열을 포함했을 경우

Unexpected token '=' in attribute name

: 속성 이름에 등호(=)가 포함된 경우 발생하는 오류 메시지입니다. HTML 속성 이름에는 등호를 포함할 수 없습니다.

## 5. 하나의 태그에 중복된 속성을 사용했을 때 발생하는 에러

Duplicate attribute "id"

: 하나의 HTML 요소에 둘 이상의 동일한 속성이 사용된 경우 발생하는 오류 메시지입니다. 각 속성은 유일해야 하므로, 중복된 속성이 있는 경우 수정해야 합니다.

이러한 에러 메시지들은 속성 오류를 식별하고 해결하는 데 도움이 됩니다. 올바른 속성을 사용하고 값을 올바르게 제공하여 HTML 문서를 유효하고 정확하게 만들 수 있습니다.

가장 많이 실수하는 CSS attribute Error

# html css js로 progressbar 만드는 방법

<img src="./img/2024-02-23-html-css-js로-progressbar-만드는-방법-1.gif" width="500" />

# 소개:

Progress Bar는 포트폴리오와 이력서에서 흔히 볼 수 있는 기능으로, 어드민 페이지 같은 데이터를 많이 사용하는 곳에서 이용되는데요.
이 글에서는 HTML, CSS 및 JavaScript를 사용하여 인터랙티브한 Progress Bar를 만드는 방법에 대해 살펴보겠습니다.

# HTML 구조:

Progress Bar의 HTML 구조를 먼저 작성해보겠습니다. 콘텐츠를 구성하기 위해 'section', 'h3', 'div', 'p'와 같은 의미 있는 HTML 요소를 사용합니다. 이름, 진행 막대 및 퍼센트를 나타내는 컨테이너로 사용될 요소들입니다.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
      rel="stylesheet"
    />
    
    <title>Skill Bar</title>
  </head>
  <body>
    <section class="skills" id="skills">
      <h3 class="skills-header">My Skills</h3>
      <div class="skills-container">
        <div class="skill-container">
          <p>HTML</p>
          <div class="percentage html-percentage">90%</div>
          <div class="bar">
            <span class="html"></span>
          </div>
        </div>

        <div class="skill-container">
          <p>CSS</p>
          <div class="percentage css-percentage">90%</div>
          <div class="bar">
            <span class="css"></span>
          </div>
        </div>

        <div class="skill-container">
          <p>JavaScript</p>
          <div class="percentage javascript-percentage">80%</div>
          <div class="bar">
            <span class="javascript"></span>
          </div>
        </div>

        <div class="skill-container">
          <p>React.JS</p>
          <div class="percentage react-percentage">70%</div>
          <div class="bar">
            <span class="react"></span>
          </div>
        </div>

        <div class="skill-container">
          <p>Node.JS</p>
          <div class="percentage node-percentage">50%</div>
          <div class="bar">
            <span class="node"></span>
          </div>
        </div>
      </div>
    </section>
    <script src="./script.js"></script>
  </body>
</html>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

# CSS 스타일링:

다음으로 CSS를 사용하여 Progress Bar를 스타일링합니다. 전반적인 레이아웃, 진행바 컨테이너, 진행 막대 및 퍼센트 표시기에 대한 스타일을 정의합니다. 또한 막대의 시각적 매력을 높이기 위해 애니메이션을 포함합니다.

```css
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background: #111222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.skills {
  width: 600px;
  min-width: 300px;
  max-width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.skills-header {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.skills-container {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
}

.skill-container {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
}

.skill-container p {
  margin: 5px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}

.bar {
  width: 100%;
  background: #475472;
  display: block;
  height: 20px;
  border: none;
  border-radius: 100vw;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 8, 0.25, 1);
}

.bar span {
  height: 20px;
  float: left;
  background: #5271ff;
  border: none;
  border-radius: 100vw;
}

/* adding animation to skill bar */

.html.animate,
.css.animate {
  width: 90%;
  animation: html_css 3s;
}

.javascript.animate {
  width: 80%;
  animation: javascript 3s;
}

.react.animate {
  width: 70%;
  animation: react 3s;
}

.node.animate {
  width: 50%;
  animation: node 3s;
}

@keyframes html_css {
  0% {
    width: 0%;
  }

  100% {
    width: 90%;
  }
}

@keyframes javascript {
  0% {
    width: 0%;
  }

  100% {
    width: 80%;
  }
}

@keyframes react {
  0% {
    width: 0%;
  }

  100% {
    width: 70%;
  }
}

@keyframes node {
  0% {
    width: 0%;
  }

  100% {
    width: 50%;
  }
}

.percentage {
  content: "";
  position: absolute;
  top: 12px;
  width: 25px;
  height: 20px;
  background: #5271ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border-radius: 2px;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.percentage::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  margin: auto;
  width: 10px;
  height: 10px;
  background: #5271ff;
  z-index: -1;
}

/* adding animation to .percentage */

.html-percentage.animate,
.css-percentage.animate {
  left: 90%;
  animation: html_css_percentage 3s;
}

.javascript-percentage.animate {
  left: 80%;
  animation: javascript_percentage 3s;
}

.react-percentage.animate {
  left: 70%;
  animation: react_percentage 3s;
}

.node-percentage.animate {
  left: 70%;
  animation: react_percentage 3s;
}

@keyframes html_css_percentage {
  0% {
    left: 0;
  }
  100% {
    left: 90%;
  }
}

@keyframes javascript_percentage {
  0% {
    left: 0;
  }
  100% {
    left: 80%;
  }
}

@keyframes react_percentage {
  0% {
    left: 0;
  }
  100% {
    left: 70%;
  }
}

@keyframes node_percentage {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
  }
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

# JavaScript 상호작용:

Progress Bar를 상호작용 가능하게 만들기 위해 JavaScript를 사용합니다. 막대가 화면에 나타날 때 애니메이션을 트리거하기 위해 Intersection Observer API를 사용합니다. 또한 막대의 너비를 기반으로 퍼센트 표시기의 위치를 동적으로 계산하고 설정합니다.

```js
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    spans.forEach((span, index) => {
      const percentage = percentages[index];
      if (entry.isIntersecting) {
        span.classList.add("animate");
        percentage.classList.add("animate");
      } else {
        span.classList.remove("animate");
        percentage.classList.remove("animate");
      }
    });
  });
});

const skillContainer = document.querySelector(".skills-container");
const spans = document.querySelectorAll(".bar span");
const percentages = document.querySelectorAll(".percentage");
observer.observe(skillContainer);

function updatePercentagePositions() {
  const barWidth = document.querySelector(".bar").clientWidth;
  percentages.forEach((percentage) => {
    const widthPercentage = parseFloat(percentage.textContent) / 100;
    percentage.style.left = `${barWidth * widthPercentage - 12.5}px`;
  });
}

updatePercentagePositions(); // Call initially
```

# 결론:

이 튜토리얼에서는 HTML, CSS 및 JavaScript를 사용하여 인터랙티브한 Progress Bar를 만드는 방법을 배웠습니다. 이러한 기술을 결합하여 웹사이트와 포트폴리오에서 기술을 시각적으로 매력적이고 매력적으로 표현할 수 있습니다.

Posts