
![그림](/assets/img/2024-08-19-gRPCInterceptorsinPython_0.png)

# 간단한 소개 (건너뛸 수 있음)

다른 많은 스타트업들과 마찬가지로, 규모가 커지면서 단일체(monolith)에서 마이크로서비스 아키텍처로 전환해야 했습니다. 우리는 gRPC를 주요 프로토콜로 선택했는데, 높은 성능, 강력한 유형의 계약, 여러 언어 지원, 비동기 지원, 그리고 양방향 스트리밍을 좋아해서 선택했습니다 (사실 파이썬의 특정 성능 문제 때문에 이후에 양방향 스트리밍을 사용하지 않았지만... 이에 대해서는 나중에 다시 언급하겠습니다).

파이썬을 주요 코딩 언어로 삼은 우리는 서로 다른 gRPC 서비스 간의 내부 통신을 형식화하고, 모든 RPC 메서드에 적용될 동작을 구현해야 했습니다. 이 때 우리는 gRPC 인터셉터를 마이크로서비스 생태계에 도입했습니다.

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

이 글에서는 gRPC 인터셉터가 무엇이며 간단한 예제를 사용하여 동기 및 비동기 구현으로 어떻게 구현하는지에 대해 살펴볼 것입니다. 이 글의 끝에는 사용하고 코드를 확인할 수 있는 모니터링 인터셉터의 실제 예제도 얻을 수 있을 것입니다.

# 인터셉터란?

아마도 이미 미들웨어의 개념에 익숙할 것입니다. 두 지점 사이에 사용자 정의 기능의 "다리"를 추가하는 것입니다.

gRPC 인터셉터는 단지 그것뿐이지만 gRPC를 위해입니다. 클라이언트와 서버에서 요청과 응답을 가로채고 추가 동작 및 조작을 추가할 수 있습니다. 여러 인터셉터를 구성할 수 있으며 순서대로 실행됩니다. 인터셉터의 일반적인 사용 사례는 인증, 권한 부여, 로깅, 오류 처리 및 메트릭스가 있습니다.

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

gRPC에는 2가지 구현 방식이 있습니다. 동기(sync)와 비동기(async - asyncio 사용). 그에 따라 인터셉터도 클라이언트 및 서버의 동기 및 비동기 클라이언트 및 서버를 위해 2가지 다른 구현 방식이 있습니다.

# 파이썬에서 인터셉터 구현하기

인터셉터에는 채널(Channel)과 서버(Server) 두 가지 유형이 있습니다. 이 두 유형은 구현 위치에 따라 다릅니다:

- 채널 인터셉터는 클라이언트 측에 있으며 클라이언트가 수행하는 각 호출을 가로챕니다.
- 서버 인터셉터는 서버 측에 있으며 서버가 받는 각 호출을 가로챕니다.

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

다음은 요청과 응답의 경로에 있는 채널 및 서버 인터셉터의 배치를 대략적으로 보여주는 다이어그램이 있어요:

![gRPC Interceptors in Python](/assets/img/2024-08-19-gRPCInterceptorsinPython_1.png)

이제 구현하는 방법을 살펴볼까요?

간단한 재시도 인터셉터를 구현할 건데요, gRPC 오류가 발생했을 때 지수적으로 대기하고 지정된 회수 이후에 중지하는 방식입니다. 대기 시간을 관리하기 위해 다음 코드를 사용할 거예요:

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

```js
import asyncio
import grpc
import time


class WaitExponential:
    def __init__(self, multiplier, min, max):
        self.multiplier = multiplier
        self.min = min
        self.max = max

    def calculate_exponential_waiting_time(self, attempt: int) -> int:
        exp = 2 ** attempt
        result = self.multiplier * exp

        return max(0, self.min, min(result, self.max))

    def wait(self, seconds: int):
        time.sleep(seconds)

    async def wait_async(self, seconds: int):
        await asyncio.sleep(seconds)


class InterceptorRetry:
    def __init__(self, wait: WaitExponential, stop: int):
        self.wait = wait
        self.stop = stop
```

WaitExponential 클래스의 calculate_exponential_waiting_time은 시도 횟수에 따라 기다려야 하는 시간을 반환하며, wait 함수는 실제 대기를 수행하고, wait_async는 비동기 구현을 위해 동일한 작업을 수행합니다. InterceptorRetry 클래스는 인터셉터 초기화를 돕습니다.

## 채널 인터셉터

인터셉터에 대한 완전한 코드는 여기에 있습니다. 걱정 마세요, 이것이 무엇을 하는지 곧 설명하겠습니다:

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

```python
import grpc
import InterceptorRetry

class RetryOnErrorClientInterceptor(grpc.UnaryUnaryClientInterceptor,
                                    grpc.StreamUnaryClientInterceptor,
                                    grpc.UnaryStreamClientInterceptor,
                                    grpc.StreamStreamClientInterceptor):
    def __init__(self, interceptor_retry: InterceptorRetry):
        self.waiting = interceptor_retry.wait
        self.stop = interceptor_retry.stop

    def _intercept_call(self, continuation, client_call_details, request_or_iterator):
        response = continuation(client_call_details, request_or_iterator)

        for retry_attempt in range(0, self.stop - 1):
            if isinstance(response, Exception):
                waiting_time = self.waiting.calculate_exponential_waiting_time(
                    retry_attempt)

                self.waiting.wait(seconds=waiting_time)

                response = continuation(client_call_details,
                    request_or_iterator)

        return response

    def intercept_unary_unary(self, continuation, client_call_details, request):
        return self._intercept_call(continuation, client_call_details, request)

    def intercept_stream_unary(self, continuation, client_call_details, request_iterator):
        return self._intercept_call(continuation, client_call_details, request_iterator)

    def intercept_unary_stream(self, continuation, client_call_details, request):
        return self._intercept_call(continuation, client_call_details, request)

    def intercept_stream_stream(self, continuation, client_call_details, request_iterator):
        return self._intercept_call(continuation, client_call_details, request_iterator)
```

채널 인터셉터를 사용하면 가능한 옵션 중 원하는 호출 유형을 명시적으로 인터셉트해야 합니다: unary-unary, stream-unary, unary-stream, stream-stream.

저희의 인터셉터는 모든 가능한 호출을 인터셉트하길 원하기 때문에 RetryOnErrorClientInterceptor는 네 개의 gRPC 클라이언트 인터셉터 인터페이스(UnaryUnaryClientInterceptor, StreamUnaryClientInterceptor, UnaryStreamClientInterceptor, StreamStreamClientInterceptor)를 모두 구현합니다. 네 개의 인터페이스를 통해 구현해야 할 네 가지 인터셉터 메서드인 intercept_unary_unary, intercept_stream_unary, intercept_unary_stream, intercept_stream_stream이 제공됩니다.

각 인터셉터 메서드는 다음과 같은 인자를 받습니다:

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

- continuation — RPC 호출을 계속하고 서버로 호출을 합니다.
- client_call_details — RPC 호출에 대한 메타데이터를 보유하며, 이는 서버로 보내기 전에 검사하거나 조작할 수 있습니다.
- request/request_iterator — 클라이언트로부터 받은 요청으로, 클라이언트의 요청이 Unary인지 Streaming인지에 따라 달라집니다.

RetryOnErrorClientInterceptor는 초기화될 때 interceptor_retry에 InterceptorRetry 유형의 재시도 구성을 가져옵니다.

각 Interceptor 메서드에서 \_intercept_call을 호출하는데, 이는 호출을 가로채는 데 사용하는 구현을 보유합니다. 먼저, continuation을 사용하여 서버 호출을 수행하고 응답을 받은 후, interceptor_retry의 stop count 범위에서 루프로 감싸서 응답이 예외인지 확인하고, 그 경우 시도에 따라 대기 시간을 계산하고 호출을 다시 시도합니다. 호출이 성공하거나 모든 시도가 실패할 때까지, 응답은 Interceptor에서 반환됩니다.

채널 가로채기:

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

```js
interceptor_retry = InterceptorRetry((wait = WaitExponential((multiplier = 0.5), (min = 0.5), (max = 3))), (stop = 5));
interceptor = RetryOnRpcErrorClientInterceptor(interceptor_retry);

channel = grpc.insecure_channel("localhost:50051");
intercept_channel = grpc.intercept_channel(channel, interceptor);
```

우리는 InterceptorRetry를 사용하여 RetryOnRPCErrorClientInterceptor를 초기화하고 gRPC 채널을 받은 후 intercept_channel을 호출하여 interceptor로 채널을 중간에 가로챕니다.

비동기 interceptor 버전:

```js
import grpc
from grpc import aio
import InterceptorRetry


class RetryOnErrorClientInterceptorAsync(aio.UnaryUnaryClientInterceptor,
                                         aio.StreamUnaryClientInterceptor,
                                         aio.UnaryStreamClientInterceptor,
                                         aio.StreamStreamClientInterceptor):
    def __init__(self, interceptor_retry: InterceptorRetry):
        self.waiting = interceptor_retry.wait
        self.stop = interceptor_retry.stop

    async def _intercept_call(self, continuation, client_call_details, request_or_iterator):
        response = await continuation(client_call_details, request_or_iterator)

        for retry_attempt in range(self.stop):
            try:
                await response.wait_for_connection()
                return response
            except grpc.RpcError as error:
                waiting_time = self.waiting.calculate_exponential_waiting_time(
                    retry_attempt)

                await self.waiting.wait_async(seconds=waiting_time)

                response = await continuation(client_call_details, request_or_iterator)

        return response

    def intercept_unary_unary(self, continuation, client_call_details, request):
        return self._intercept_call(continuation, client_call_details, request)

    def intercept_stream_unary(self, continuation, client_call_details, request_iterator):
        return self._intercept_call(continuation, client_call_details, request_iterator)

    def intercept_unary_stream(self, continuation, client_call_details, request):
        return self._intercept_call(continuation, client_call_details, request)

    def intercept_stream_stream(self, continuation, client_call_details, request_iterator):
        return self._intercept_call(continuation, client_call_details, request_iterator)
```

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

RetryOnErrorClientInterceptor 이후에 이 내용은 익숙할 것입니다. 개념은 같습니다. RetryOnErrorClientInterceptorAsync는 네 개의 gRPC 클라이언트 인터셉터 인터페이스를 구현합니다. 다만, 이번에는 grpc.aio에서 가져옵니다.

\_intercept_call도 약간 다릅니다. 이제는 continuation에서 응답을 기다려야 하며, response.wait_for_connection()을 호출하여 RPC가 성공적으로 연결되었는지 확인해야 합니다. 그렇지 않은 경우 예외가 발생하며, 이를 response 유형을 확인하는 대신 except로 캐치할 수 있습니다. 또한 InterceptorRetry의 self.waiting.wait_async로 비동기적으로 대기합니다.

채널을 가로지르는 비동기 버전:

```js
channel = grpc.aio.insecure_channel("localhost:50051", (interceptors = [interceptor]));
```

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

인터셉터 초기화는 단항 인터셉터와 동일합니다. 차이는 채널 생성 방법에 있습니다. 비동기 채널에서는 grpc.aio.insecure_channel로 채널을 만들 때 인터셉터를 구성할 수 있습니다.

## 서버 인터셉터

서버 인터셉터 구현은 더 간단합니다. 저희 인터셉터는 ServerInterceptor 인터페이스를 구현하고 intercept_service 메서드를 구현해야 합니다. 호출이 가로챌 수 있도록 handler_call_details와 함께 continuation을 호출하는 것으로 RPC 서버 호출이 이루어집니다. 이미 재시도 코드를 래핑하는 방법을 알고 계시므로 중요한 부분만 보여드리겠습니다:

```js
import grpc
from grpc import ServerInterceptor

class RetryOnErrorServerInterceptor(ServerInterceptor):
    def __init__(self, interceptor_retry: InterceptorRetry):
        ...

    async def intercept_service(self, continuation, handler_call_details):
        # 재시도하는 중...
        response = continuation(handler_call_details)
        # 재시도하는 중...

        return response
```

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

서버를 가로채보겠습니다:

```js
interceptor_retry = InterceptorRetry((wait = WaitExponential((multiplier = 0.5), (min = 0.5), (max = 3))), (stop = 5));
interceptor = RetryOnRpcErrorClientInterceptor(interceptor_retry);

server = grpc.server(futures.ThreadPoolExecutor(), (interceptors = interceptor));
```

비동기 서버 인터셉터:

비동기에서는 grpc.aio에서 ServerInterceptor를 얻어서 다음과 같이 사용할 것입니다:

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

```js
response = await continuation(handler_call_details);
```

비동기 서버를 가로채기:

```js
interceptor_retry = InterceptorRetry((wait = WaitExponential((multiplier = 0.5), (min = 0.5), (max = 3))), (stop = 5));
interceptor = RetryOnRpcErrorClientInterceptor(interceptor_retry);

server = grpc.aio.server((interceptors = [interceptor]));
```

# 실제 예제

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

간단한 예제는 배우는 데 좋지만, 실제로 운영 가능한 코드를 볼 수 있는 실제 사례가 있으면 더 좋죠. 걱정 마세요! 저희는 Python async gRPC 서비스를 모니터링하는 인터셉터를 Prometheus를 사용하여 만들었습니다. 여기에서 확인하실 수 있어요: https://github.com/taranisag/py-async-grpc-prometheus. 또한 이 인터셉터를 서비스에 사용하는 방법에 대한 글도 작성했어요.

간단한 재시도 예제와 함께 동기 및 비동기 채널 및 서버 인터셉터를 구현하는 방법과, 모니터링을 위한 복잡한 gRPC 서비스 인터셉터의 실제 사용 사례를 보았습니다. 이를 확인하고 활용해보세요.

읽어 주셔서 감사합니다. 본문이 gRPC 작업에 유용하게 사용되었으면 좋겠습니다!


파이썬에서 gRPC Interceptor 활용하기


웹 개발은 오늘날 가장 필수적인 기술 중 하나입니다. 이는 브라우저를 통해 접근할 수 있는 사용자 친화적이고 매력적인 웹사이트를 만드는 것을 포함합니다. 웹 개발자가 되기 위한 첫 번째 단계는 HTML을 이해하는 것입니다.

![HTML 이미지](/assets/img/2024-08-19-DevelopyourselftobuildWebUIsPart1UnderstandingHTML_0.png)

HTML (하이퍼텍스트 마크업 언어)은 모든 웹 페이지의 기초입니다. 이는 웹페이지의 구조를 결정하고 콘텐츠가 브라우저에서 어떻게 표시되는지를 결정하는 표준 언어입니다. 페이지의 외관은 CSS(계단식 스타일 시트)에 의해 결정되고 기능은 JS(자바스크립트)에 의해 담당하지만, HTML은 기본 뼈대나 구조를 담당합니다.

본 강좌의 이 부분에 진입하기 전에, 여정에서 사용될 유명하고 반복되는 용어를 이해하는 것이 중요합니다. 이는 진행함에 따라 개념을 이해하는 데 도움이 될 뿐만 아니라, 저자가 설명을 쉽게 하도록 도와줍니다 ;-)

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

## 용어 이해하기

- 프로그래밍 언어: 컴퓨터가 실행할 수 있는 특정 구문(프로그래밍 언어의 방식)으로 작성된 지시 사항의 모음입니다. 컴퓨터는 오직 이진 코드(1 또는 0)만을 이해한다는 점을 기억하세요. 우리(인간)는 컴퓨터가 논리를 이해하고, 또한 트레이드 오프를 찾기 위해 프로그래밍 언어를 만들었습니다. 즉, 우리가 코딩하기 쉽고, 컴퓨터가 이해하기 쉽게 만든 것입니다.
- 컴파일러: 프로그래밍 언어로 작성된 코드를 컴퓨터가 이해하고 실행할 수 있는 기계어로 번역하는 도구입니다.
- 구문: 프로그래밍 언어의 구조를 정의하는 규칙입니다. 문장에서 단어가 배열되는 방식으로 생각해 보세요.
- 주석: 코드 내에 있는 코드 일부가 무엇을 하는지 설명하는 메모입니다. 주석은 다른 개발자(또는 미래의 본인)가 코드 논리를 이해하는 데 도움이 됩니다.
- DOM (문서 객체 모델): DOM은 HTML 문서의 트리 형태 표현입니다. HTML의 각 태그는 이 트리에서 노드가 됩니다. 예를 들어, HTML에 `body` 태그와 `p` (문단)이 포함된 경우, 브라우저는 본문 노드를 만들고 이를 자식으로 가지는 단락 노드를 생성합니다.
- 자식: 진행하면서 이를 이해할 것입니다. 다른 요소 내에 중첩된 요소입니다. 예를 들어, HTML에서 `div` 태그 내에 있는 단락 태그(`p`)는 div의 자식으로 간주됩니다.
- 블록 수준 요소: 진행하면 소개될 것입니다. 일반적으로 요소가 전체 사용 가능 폭을 차지할 기능을 설명하는 용어입니다.

## HTML로 활기차게 시작하기

HTML은 Hyper Text Markup Language의 약자입니다.

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

- 하이퍼텍스트: HTML의 다른 문서를 연결하는 능력을 가리킵니다.
- 마크업 언어: 텍스트를 주석 처리하기 위해 태그를 사용하며, 브라우저에서 어떻게 표시해야 하는지 정의합니다.

다음은 HTML 문서의 기본 구조입니다:

```js
<!DOCTYPE html>
<html>
  <head>
    <title>HTML 튜토리얼</title>
  </head>
  <body>
    <p>안녕, 세상!</p>
  </body>
</html>
```

- 태그: HTML에서 태그는 요소를 정의하는 데 사용됩니다. 태그는 `<html>`이나 `<p>`와 같이 꺾쇠 괄호로 둘러싸여 있습니다.
- 요소: 여는 태그와 닫는 태그로 구성되며 내용을 포함할 수 있습니다. 예를 들어, `<p>안녕, 세상!</p>`은 문단 요소입니다.

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

## HTML 문서 구조

모든 HTML 문서는 기본적인 구조를 따릅니다:

- `!DOCTYPE html`: 문서 유형 및 HTML 버전을 선언합니다.
- `html`: 다른 HTML 요소를 포함하는 루트 요소입니다.
- `head`: 문서에 대한 메타 정보를 포함하며, 제목 및 스타일시트 링크를 담고 있습니다.
- `title`: 웹페이지의 제목을 설정하며, 브라우저의 제목 표시줄이나 탭에 표시됩니다.
- `meta`: 문자 집합, 저자 및 뷰포트 설정과 같은 HTML 문서에 대한 메타데이터를 제공합니다. 자체 종료 태그입니다.
- `style`: HTML 요소를 스타일링하는 CSS 코드를 삽입합니다.
- `script`: 웹페이지에 상호 작용을 추가하기 위한 JavaScript 코드를 삽입합니다.
- `body`: 웹페이지에서 사용자에게 보이는 콘텐츠를 감싸는 요소입니다.

## 자주 사용되는 HTML 요소

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

많이 사용하는 기본 HTML 요소들을 소개해드릴게요:

- ` p``/p `: 단락을 정의합니다.
- ` div``/div `: 다른 요소들을 그룹화할 때 사용하는 블록 수준 요소입니다.
- ` span``/span `: 스타일링을 위해 텍스트를 그룹화하는 인라인 요소입니다.
- ` header``/header `: 섹션의 소개 콘텐츠나 내비게이션 링크를 나타냅니다.
- ` h1``/h1 ` ~ ` h6``/h6 `: `h1`이 가장 높은 수준이고 `h6`이 가장 낮은 수준인 헤딩입니다.
- `br`: 줄 바꿈을 삽입합니다 (닫는 태그가 필요없는 self-closing tag입니다).
- ` form``/form `: 사용자 입력을 위한 HTML 폼을 만드는 데 사용됩니다.
- `input`: 일반적으로 폼 내에서 사용되는 입력 필드를 생성합니다.
- ` select``/select `: 드롭다운 리스트를 생성합니다.
- ` label``/label `: 폼 요소에 텍스트 라벨을 연결합니다.
- ` table``/table `: 테이블을 정의합니다.
- ` tr``/tr `: 테이블 내의 한 행을 정의합니다.
- ` td``/td `: 테이블 행 내의 셀을 정의합니다.
- ` th``/th `: 테이블 행 내의 헤더 셀을 정의합니다.
- ` ul``/ul `: 정렬되지 않은 (글머리 기호가 있는) 목록을 정의합니다.
- ` ol``/ol `: 순서대로 번호가 매겨진 목록을 정의합니다.
- ` li``/li `: 목록 항목을 정의합니다.

## 첫 HTML 파일 만들기

HTML 파일을 만들기 위해서는 메모장이나 VS Code와 같은 텍스트 편집기를 사용하시면 됩니다. 간단한 예시를 들겠습니다:

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

- 텍스트 편집기를 열고 다음 코드를 입력하세요:

```js
<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>
  <h1>Example Number 1</h1>
  <p>Hello, world!</p>
</body>
</html>
```

- 파일을 .html 확장자로 저장하세요 (예: index.html)
- 웹 브라우저에서 파일을 열어 첫 번째 HTML 웹페이지를 확인해보세요!
- 코드를 검사하려면 Google Chrome에서 Ctrl + Shift + C를 눌러 개발자 도구를 열고 DOM 구조를 탐색하세요.
- 개발자 도구의 네트워크 탭으로 이동하여 브라우저 탭을 새로고침해주세요.

사진에서 저장한 이름으로 요청이 있는 것을 확인할 수 있습니다.

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

아래는 당신이 작성한 코드를 찾을 수 있는 응답 탭입니다.

이제 파일을 열면 저장한 HTML 파일을 실행하기 시작했고, 컴퓨터는 브라우저에서 파일을 실행시키고 싶어했습니다. 브라우저가 보여줄 것이 필요했고, 파일이 실행된 위치에서 브라우저에게 요청을 보냈습니다. 파일은 브라우저에 코드를 제공했고, 이것이 응답 섹션에 발견됐습니다. HTML 파일이었기 때문에, 브라우저는 위에서 아래로 HTML 코드를 읽기 시작했습니다. 이 과정을 파싱이라고 합니다. 파싱 중에 브라우저는 다른 HTML 태그(예: `html`, `head`, `body` 등)를 만나며 이 태그들을 기반으로 하는 DOM이라는 구조를 만들기 시작합니다. 브라우저가 DOM을 구축하는 동안 화면에 내용을 렌더링하게 됩니다.

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

## 표 만들기

이번에는 HTML에서 간단한 표를 만들어 보겠습니다:

- 동일한 HTML 파일을 열고 `body` 태그 안에 다음 코드를 추가하세요:

```js
<p>표 예제</p>
| Name   | Power     | Is Kurama Present |
|--------|-----------|-------------------|
| Naruto | Rasengan  | Yes               |
| Sasuke | Sharingan | No                |
```

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

- 파일을 저장하고 브라우저를 새로 고침하여 표가 표시되는지 확인하세요.

표 제목이 문단 태그에 의해 렌더링되는 것을 알 수 있습니다. 대신 `caption` 태그를 사용할 수도 있는데, 이는 표의 제목을 가운데 정렬합니다. `caption` 태그를 사용해보고 변경을 확인하려면 새로고침하세요.

`caption` 태그는 `table` 시작 태그 바로 뒤에 사용되어야 합니다.

이제 HTML에서 기본 표를 성공적으로 만들었습니다. HTML 구문에 더 익숙해지기 위해 추가적인 행과 열에 대해 실험해 보세요.

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

## 마무리

HTML로 웹 개발의 첫걸음을 밟으셨군요! HTML을 마스터하는 비결은 연습입니다. 다양한 요소들을 실험하고, 자신만의 웹페이지를 만들어보세요. 실수를 두려워하지 마세요 — 모든 에러는 학습의 기회입니다.

기억하세요, 이것은 시작에 불과합니다. 이 기초 위에 더 쌓아나가면 곧 더 복잡하고 동적인 웹사이트를 만들 수 있을 겁니다. 우리 함께 웹을 더 나은 곳으로 만들어봅시다. 한 줄의 코드씩.

본 문서는 IT와 기계 공학 분야에서 경험을 쌓은 전문가 Anantha Krishnan이 작성했습니다. 풀스택 개발에 대한 배경과 기계 및 전기 시스템에 대한 열정을 갖고 있는 Anantha Krishnan은 이제 자신의 전문 분야에서 초보자들을 돕기 위한 교육 콘텐츠 작성에 주력하고 있습니다.


웹 UI를 만들기 위해 알아둬야할 HTML

![2024-08-19-BuildingAccessibleWebApplicationsAFront-EndDevelopersGuide_0.png](/assets/img/2024-08-19-BuildingAccessibleWebApplicationsAFront-EndDevelopersGuide_0.png)

웹 접근성 있는 웹 애플리케이션을 구축하는 것은 도덕적이고 법적인 책임뿐만 아니라 모든 사용자에게 포괄적인 경험을 제공할 수 있는 기회입니다. 이 안내서의 목적은 초보자부터 전문가까지 프론트엔드 개발자들이 웹 접근성 있는 웹사이트를 만드는 데 필요한 지식과 도구를 제공하는 것입니다. 우리는 웹 접근성의 기본을 다루고, 최선의 방법을 살펴보며, 이러한 개념을 효과적으로 구현하는 데 도움이 되는 코드 조각을 제공할 것입니다.

# 웹 접근성 이해하기

웹 접근성은 시각적, 청각적, 운동적, 인지적 장애를 가진 사람들이 웹사이트와 애플리케이션을 사용할 수 있도록 보장합니다. 웹 콘텐츠 접근성 지침(WCAG)은 웹 디지털 콘텐츠를 만드는 포괄적인 프레임워크를 제공합니다.

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

## 접근성의 주요 원칙 (POUR)

1. **Perceivable(인지 가능한)**: 정보 및 사용자 인터페이스 구성 요소는 사용자가 인지할 수 있는 방식으로 제공되어야 합니다.
2. **Operable(조작 가능한)**: 사용자는 인터페이스를 조작하고 사이트를 탐색할 수 있어야 합니다.
3. **Understandable(이해 가능한)**: 정보 및 사용자 인터페이스의 작동은 이해할 수 있어야 합니다.
4. **Robust(강력한)**: 콘텐츠는 보조 기술을 포함한 다양한 사용자 에이전트에서 해석할 수 있을만큼 견고해야 합니다.

# 코드에서 접근성 구현하기

## 1. 의미 있는 HTML

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

의미 있는 HTML 요소를 사용하면 SEO를 개선할 뿐만 아니라 접근성도 향상됩니다. 의미 있는 요소는 콘텐츠와 목적을 명확히 정의하여 보조 기술이 페이지 구조를 해석하기 쉽게 만듭니다.

```js

<div onclick="location.href='/home';">Home</div>


<a href="/home">Home</a>
```

## 2. ARIA 역할 및 속성

ARIA(Accessible Rich Internet Applications) 역할 및 속성은 특히 동적 웹 애플리케이션에서 접근성을 개선하는 데 도움이 됩니다.

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

```js
## 3. 키보드 탐색

모든 상호 작용 요소에 키보드로 액세스할 수 있도록 해주세요. 마우스를 사용할 수 없는 사용자들에게 필수적입니다.


<button>제출</button>

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

`tabindex="-1"`을 사용하여 요소를 탭 순서에서 제거하는 것을 피하고, 모든 포커스 가능한 요소가 Tab 키를 사용하여 탐색할 수 있는지 확인해주세요.

## 4. 색 대비와 시각적 요소

텍스트와 배경색 사이에 충분한 색 대비를 확보해주세요. WebAIM Contrast Checker와 같은 도구를 사용하여 대비 비율을 테스트할 수 있습니다.

/* 고대비 예시 */
.text {
  color: #000;
  background-color: #fff;
}

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

## 5. 반응형 디자인

반응형 디자인을 통해 콘텐츠가 작은 화면을 포함한 모든 기기에서 접근할 수 있습니다. `em`이나 `rem`과 같은 상대적 단위를 사용하여 폰트와 레이아웃을 유연하게 만들 수 있습니다.

/* 반응형 타이포그래피 */
body {
  font-size: 1rem;
}

# 접근성 테스트

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

액세스 가능한 애플리케이션을 구축하는 데 테스팅은 중요한 부분입니다. 접근성을 평가하기 위해 자동화된 도구와 수동 테스트 방법을 활용해보세요.

## 자동화된 테스트 도구

1. Axe DevTools: 웹 페이지에서 접근성 문제를 스캔하는 브라우저 확장 프로그램입니다.
2. Wave: 웹 콘텐츠의 접근성에 대한 시각적 피드백을 제공하는 도구입니다.

## 수동 테스트

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

1. 키보드 네비게이션: 키보드만 사용하여 사이트를 탐색할 수 있도록 보장하세요.
2. 화면 낭독기: NVDA나 VoiceOver와 같은 인기 있는 화면 낭독기로 사이트를 테스트하여 콘텐츠가 어떻게 읽히는지 이해하세요.

# 결론

접근성은 웹 개발 프로세스의 중요한 부분이어야 합니다. 최상의 방법을 유지하고 의미 있는 HTML, ARIA 역할, 그리고 강력한 테스트를 활용하는 것으로 모든 사용자에게 포괄적이고 접근성 있는 웹 애플리케이션을 만들 수 있습니다. 프론트엔드 개발자로써, 우리는 누구에게나 환영받을 수 있는 웹을 구축할 책임과 도구를 갖고 있습니다.

## 행동 요청

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

만약 이 안내서가 도움이 되었다면, 귀하의 네트워크와 공유해 주세요! 함께 웹을 더 접근 가능하게 만들기 위해 노력해 봅시다. 웹 접근성에 대한 추가 자료 및 자원이 필요하다면, 공식 [W3C 웹 접근성 이니셔티브](https://www.w3.org/WAI/) 사이트를 방문해 보세요.

아래 댓글에 생각이나 질문을 자유롭게 남겨주세요. 우리가 어떻게 실천을 개선하고 보다 포용적인 웹을 만들 수 있는지 함께 논의해 봐요!
```

웹 접근성 고려한 웹 애플리케이션 만드는 방법

![Table](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_0.png)

웹 개발의 세계는 끊임없는 혁신과 발전으로 가득 차 있습니다. 이러한 발전 중 하나가 HTML5에 의해 가져온 기능입니다. HTML5는 웹 페이지를 더 인상적이고 기능적으로 만드는 일련의 속성을 제공합니다. 이러한 속성은 웹 개발자들에게 더 많은 유연성, 성능 및 사용자 경험을 제공하기 위해 설계되었습니다. 본 문서에서는 HTML5의 잘 알려지지 않은 15가지 유용한 속성을 살펴보겠습니다.

## 1. contenteditable

contenteditable 속성은 사용자가 요소의 내용을 편집할 수 있도록 만듭니다.

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

```js
<div contenteditable="true">편집 가능한 텍스트입니다.</div>
```

<img src="/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_1.png" />

## 2. spellcheck

스펠체크 속성은 텍스트 입력 또는 텍스트 필드의 맞춤법을 확인합니다. 사용자가 입력한 텍스트가 올바른지 확인하고 잘못 입력된 단어를 표시하도록 이 속성을 사용할 수 있습니다.

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

```js
<p spellcheck="true" contenteditable="true">
  여기에 콘텐츠를 추가하세요.
</p>
```

![Useful HTML5 Attributes](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_2.png)

## 3. 번역

translate 속성은 텍스트 조각이 번역되는지 여부를 나타내는 데 사용됩니다. 예를 들어, 로고, 회사 이름 또는 브랜드 이름 등이 있습니다.

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

```js
<footer>
  <small>
    © 2024 <span translate="no">회사명</span> All right reserved.
  </small>
</footer>
```

<img src="/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_3.png" />

## 4. multiple

`multiple` 속성은 양식 요소에 동시에 여러 옵션을 선택할 수 있는 속성입니다. 일반적으로 `select`와 `input` 태그와 함께 사용됩니다.

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

```html
<label for="cars">좋아하는 자동차를 선택하세요:</label>
<select id="cars" name="cars" multiple>
  <option value="volvo">볼보</option>
  <option value="mercedes">메르세데스</option>
  <option value="peugeot">푸조</option>
  <option value="audi">아우디</option>
</select>
```

![Useful HTML5 Attributes You Should Know About](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_4.png)

## 5. reversed

reversed 속성은 번호가 매겨진 목록에서 사용되는 속성입니다. 이 속성은 목록 항목의 순서를 반대로 바꾸는 데 사용됩니다. 일반적으로 `ol` (순서가 지정된 목록) 요소 내부에서 사용됩니다.

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

1. Strawberry
2. Cherry
3. Peach

<img src="/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_5.png" />

## 6. draggable

드래그 앤 드롭을 허용할지 여부를 결정하는 속성입니다. 이 속성을 사용하면 사용자가 마우스를 사용하여 항목을 드래그 앤 드롭할 수 있습니다.

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

```js
<p draggable="true">이것은 끌어서 놓기 가능한 텍스트입니다.</p>
```

📌 끌어서 놓기 속성은 부울(boolean)이 아니라 열거형 속성입니다. HTML 사양에 따르면 이 속성을 사용할 때 "true" 또는 "false" 값을 명시적으로 지정해야 합니다.

## 7. accesskey

accesskey 속성을 사용하면 사용자가 키보드에서 특정 키 조합(일반적으로 [Alt] 키와 함께 글자 또는 숫자)을 눌러 특정 요소에 빠르게 액세스할 수 있습니다.

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

[Contact](https://www.example.com){:accesskey="c"} - [Alt]+C를 눌러 액세스할 수 있습니다.

![Useful HTML5 Attributes You Should Know About](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_6.png)

## 8. poster

poster 속성을 사용하면 비디오 플레이어가 로드할 비디오와 관련된 포스터 이미지를 지정할 수 있습니다. 포스터 이미지는 비디오 플레이어가 로드되는 동안 표시될 수 있으며 사용자에게 비디오의 미리보기를 제공합니다.

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

<video width="380" height="240" poster="video_poster.jpg" controls>
  <source src="video.mp4" type="video/mp4">
  <source src=" video.ogg" type="video/ogg">
  Your browser does not support the video tag. 
</video>

![Useful HTML5 Attributes](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_7.png)

## 9. onerror

`onerror` 속성은 외부 파일(이미지 또는 다른 미디어 요소)을로드하는 동안 오류가 발생할 경우 트리거되는 JavaScript 코드를 지정하는 데 사용됩니다.

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

![](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_8.png)

## 10. theme-color

theme-color 속성은 웹 페이지의 테마 색상을 웹 브라우저에 지정합니다. 이 색상은 브라우저 인터페이스에 통합되어 사용자가 브라우저에서 탐색하는 동안 특정 테마 색상을 제공합니다.

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

```js
<meta name="theme-color" content="#007bff">
```

![Image](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_9.png)

## 11. favicon

파비콘은 웹 사이트의 브라우저 탭이나 즐겨찾기에 나타나는 작은 아이콘입니다. 사용자가 웹 사이트 간에 쉽게 이동할 수 있도록 도와줍니다.

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

```html
[마크다운 형식으로 변경]
```

![Touch-icons](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_10.png)

## 12. 터치 아이콘

터치 아이콘(touch-icons)은 스마트폰이나 태블릿의 홈 화면에 웹 사이트나 웹 애플리케이션을 위한 바로 가기 아이콘으로 추가됩니다. 이 아이콘을 통해 사용자는 웹 사이트나 애플리케이션에 빠르게 액세스할 수 있습니다.

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

[link rel]="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"
[link rel]="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"
[link rel]="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"

![Example Image](/assets/img/2024-08-19-15UsefulHTML5AttributesYouShouldKnowAbout_11.png)

## 13. loading

The loading attribute is used to control the loading behavior of a resource by the browser. This attribute can delay or prioritize the loading of resources while the browser waits for the page to load or be processed. This is used to improve page performance and enhance user experience.

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

`img`, `iframe`, `script`, `link rel=”stylesheet” href=”styles.css”`와 같은 요소에서 특히 사용됩니다.

```js

<img src="image.jpg" loading="lazy">


<img src="image.jpg" loading="eager">
```

🔸예시 1: loading="lazy" ➔ 이것은 페이지 로딩이 완료될 때까지 이미지의 가시성을 지연시킵니다. 사용자가 이미지를 볼 수 있을 때만 로드됩니다. 이는 페이지 로딩 속도를 높이고 사용자 경험을 향상시킬 수 있습니다. 특히 페이지에 많은 큰 이미지가 있거나 스크롤을 내릴 때 특히 유용할 수 있습니다.

🔸예시 2: loading="eager" ➔ 이것은 브라우저에 즉시 이미지를 처리하도록 지시합니다. 사용자는 즉시 이미지를 볼 수 있지만 페이지 로딩 시간이 늘어날 수 있습니다. 특히 이미지가 크거나 이미지 수가 많은 페이지에서 유용합니다.

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

## 14. async

async 어트리뷰트는 브라우저에서 스크립트 파일을 다운로드하는 동안 HTML 콘텐츠의 처리를 멈추지 않습니다. 스크립트 파일이 준비되면 다운로드가 완료될 때 처리됩니다.

```js
<script src="example.js" async></script>
```

## 15. defer

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

defer 속성은 브라우저가 스크립트 파일을 다운로드하는 동안 HTML 처리를 계속할 수 있게 합니다. 스크립트 파일은 HTML 내용을 처리한 후에 실행됩니다. defer로 로드된 스크립트는 순차적으로 실행됩니다.

```js
<script src="example.js" defer></script>
```

# 결론

그 결과로, HTML5의 15가지 잘 알려지지 않았지만 매우 유용한 기능에 대한 이 기사는 웹 개발자의 더 효과적이고 효율적인 작업에 기여하고자 합니다. 이러한 기능들은 초보 개발자에게 새로운 정보를 제공할 뿐만 아니라, 경험豊富한 개발자들이 작업 흐름을 개선하는 데 도움을 줍니다. HTML5가 제공하는 이러한 깊은 기능을 탐색함으로써 웹 애플리케이션을 보다 강력하고 접근성이 좋고 사용자 친화적으로 만들 수 있습니다.

유용한 HTML5 속성 15가지 정리


# 개요

이 샘플 스크립트는 Google 스프레드시트 내에서 JavaScript 및 HTML을 활용하여 분할 비동기 프로세스를 사용해 여러 파일을 업로드하는 방법을 보여줍니다.

# 설명

이전 보고서인 "Google 드라이브를 위한 여러 파일의 일시 중단 가능한 업로드와 비동기 프로세스"에서 파일을 비동기적으로 업로드하는 방법을 제시했습니다.

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

이 스크립트는 그 개념을 기반으로 하며, 업로드 파일들을 분할 비동기 프로세스를 이용하여 여러 개의 파일을 업로드하는 방법을 소개합니다.

다음은 프로세스의 요약입니다:

- 파일 선택: 사용자가 업로드할 파일을 선택합니다.
- 청킹: 각 선택한 파일은 더 작은 청크로 분할됩니다.
- 각 청크의 비동기 업로드: 각 파일의 각 청크는 각각 비동기적으로 업로드됩니다.
- 동기적인 청크 처리: 청크는 스크립트 내에서 동기적으로 처리됩니다.

이 접근법을 통해 리써머블 업로드 기능을 활용하여 파일을 분할 비동기 프로세스를 통해 업로드할 수 있습니다.

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

# 사용 방법

# 1. 스프레드시트 준비하기

여기서는 샘플로 자바스크립트와 HTML이 Google 스프레드시트에서 실행됩니다. 새 Google 스프레드시트를 만들고 스크립트 편집기를 엽니다.

# 2. 드라이브 API 활성화하기

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

Drive API를 고급 Google 서비스에서 활성화해 주세요. 참조

# 3. 스크립트

다음 Google Apps 스크립트 (code.gs)와 HTML (index.html)를 복사하여 붙여넣어 주세요.

code.gs

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

```js
function getAuth() {
  // DriveApp.createFile(blob) // 이것은 "https://www.googleapis.com/auth/drive" 범위를 추가하는 데 사용됩니다.
  return ScriptApp.getOAuthToken();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile("index");
  SpreadsheetApp.getUi().showSidebar(html);
}
```

index.html

```js
<input type="file" id="file" multiple="true" />
<input type="button" onclick="run()" value="업로드" />
<div id="progress"></div>

<script src="https://cdn.jsdelivr.net/gh/tanaikech/ResumableUploadForGoogleDrive_js@2.0.2/resumableupload_js.min.js"></script>
</script>

<script>
function run() {
  google.script.run.withSuccessHandler(accessToken => ResumableUploadForGoogleDrive(accessToken)).getAuth();
}

function upload({ accessToken, file, idx }) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.fileName = file.name;
    fr.fileSize = file.size;
    fr.fileType = file.type;
    fr.readAsArrayBuffer(file);
    fr.onload = e => {
      var id = `p_${idx}`;
      var div = document.createElement("div");
      div.id = id;
      document.getElementById("progress").appendChild(div);
      document.getElementById(id).innerHTML = "초기화 중입니다.";
      const f = e.target;
      const resource = {
        fileName: f.fileName,
        fileSize: f.fileSize,
        fileType: f.fileType,
        fileBuffer: f.result,
        accessToken: accessToken,
        folderId: "root",
      };
      const ru = new ResumableUploadToGoogleDrive();
      ru.Do(resource, function (res, err) {
        if (err) {
          reject(err);
          return;
        }
        console.log(res);
        let msg = "";
        if (res.status == "Uploading") {
          msg = Math.round((res.progressNumber.current / res.progressNumber.end) * 100) + `% (${f.fileName})`;
        } else {
          msg = `${res.status} (${f.fileName})`;
        }
        if (res.status == "Done") {
          resolve(res.result);
        }
        document.getElementById(id).innerText = msg;
      });
    };
  });
}

async function ResumableUploadForGoogleDrive(accessToken) {

  const n = 2; // 청크 크기를 조정할 수 있습니다. 기본값은 2입니다.

  const f = document.getElementById("file");
  const files = [...f.files];
  const splitFiles = [...Array(Math.ceil(files.length / n))].map((_) => files.splice(0, n));
  for (let i = 0; i < splitFiles.length; i++) {
    const res = await Promise.all(splitFiles[i].map(async (file, j) => await upload({ accessToken, file, idx: `${i}_${j}` })));
    console.log(res);
  }
}
</script>
```

- 이 예제에서는 파일이 루트 폴더에 업로드됩니다. 특정 폴더에 파일을 업로드하려면 folderId: "root", 를 folderId: "###당신의 폴더 ID###",로 수정해주세요.
- 이 예제에서는 청크 크기가 2입니다. 파일이 매 2개마다 업로드됩니다. 이를 변경하려면, const n = 2;의 2를 자신의 상황에 맞게 수정해주세요.

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

# 4. 테스트

이 스크립트를 실행하면 다음 결과가 나타납니다.

![image](https://miro.medium.com/v2/resize:fit:920/0*wzkUAstazI9nzwXy.gif)

# 참고문헌

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

- ResumableUploadForGoogleDrive_js
- Google Drive를 위한 파일 멈춤 전송
- Google Drive를 위한 비동기 프로세스로 다중 파일의 멈춤 전송


Google 스프레드시트에서 파일을 분할 비동기 프로세스로 여러 개 업로드하고 이어받기 업로드하는 방법


HTML은 웹의 기본 요소이며 제목, 단락, 목록, 링크, 인용 부분 등 텍스트 구조를 통해 웹 문서를 구성하는 데 사용됩니다.

소스 코드 다운로드

HTML은 가장 쉬운 프로그래밍 언어로, 개발자가 배워야 할 첫 번째 언어입니다. 이 강의에서는 모든 웹 디자이너에게 중요한 기본 태그와 속성만 설명합니다.

이 글의 끝에는 이러한 태그와 속성을 적용하여 초보적인 웹 페이지를 만들 수 있는 위치에 있게 될 것입니다.

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

# HTML 태그와 속성이란?

HTML에서 태그는 HTML 문서 내에서 객체를 만드는 데 사용됩니다. 이러한 태그는 꺾쇠 괄호 ` ` 안에 포함됩니다. 예를 들어 `p` 태그는 텍스트 단락을 정의하는 데 사용될 수 있습니다. 대부분의 HTML 태그는 여는 태그(예: `p`)와 닫는 태그(예: `/p`)로 구성된 쌍으로 이루어져 있습니다. 그러나 닫는 태그를 필요로하지 않는 Self-closing 태그도 있는데, 예를 들어 `br` 태그가 있습니다.

속성은 기본 HTML 태그에 대한 확장으로, 태그와 관련된 더 구체적인 세부 정보를 제공합니다. 속성은 항상 여는 태그에 포함되며 이름/값 쌍으로 구성되어야 합니다. 예를 들어 `img` 태그에서 사용되는 'src'는 해당 이미지의 소스를 나타냅니다.

이제 HTML 초급 과정에서 주로 다루게 될 HTML 태그와 속성을 함께 살펴보겠습니다.

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

# 태그 설명 목록

- 단락 태그
- 목록 태그
- 제목 태그
- 링크 태그
- 이미지 태그
- 줄 바꿈 태그
- 굵게, 기울임, 밑줄 태그
- 큰 글씨와 작은 글씨 태그
- 수평선 태그
- 아래 첨자 및 위 첨자 태그
- 미리 서식 지정된 태그

# 단락 태그 (`p`)

'`p`' 태그는 텍스트 단락을 정의하는 데 사용됩니다. 어떤 워드 처리 프로그램에서 입력하는 다른 단락에 비해 위아래로 약간의 공간을 추가합니다.

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

```js
<p>이것은 텍스트 단락입니다.</p>
```

속성들

align: 단락 텍스트의 정렬을 지정합니다. 가능한 값은 left, right, center, justify입니다.

속성을 사용한 예제

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

```js
<p style="text-align: centre;">이 단락은 가운데 정렬됩니다.</p>
<p style="text-align: left;">이 단락은 가운데 정렬됩니다.</p>
<p style="text-align: right;">이 단락은 가운데 정렬됩니다.</p>
<p style="text-align: justify;">이 단락은 가운데 정렬됩니다.</p>
```

# 리스트 태그 (`li`, `ol`, `ul`)

리스트는 관련 항목을 그룹화하는 데 사용됩니다. HTML은 순서가 지정된 목록 (`ol`)과 정렬되지 않은 목록 (`ul`)을 지원합니다. 목록 항목은 `li` 태그를 사용하여 정의됩니다.

정렬되지 않은 목록 예제

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

```js
* Item 1
* Item 2
* Item 3
```

Ordered list example

```js
1. First item
2. Second item
3. Third item
```

# Heading Tag (`h1` to `h6`)

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

가장 일반적으로 사용되는 태그는 제목 태그입니다. 이 태그들은 콘텐츠 내에서 순서를 정리하고 SEO를 위해 도움이 되는 제목을 만드는 데 사용됩니다. 일반적인 제목 또는 부제목 계층 구조가 `h1`부터 `h6`까지 있으며, `h1`이 가장 중요합니다.

```js
# 주요 제목
## 부제목
### 서브 부제목
#### 제목
##### 제목
###### 제목
```

## 링크 태그 (`a`)

가장 중요한 것 중 하나는 하이퍼링크를 만드는 데 사용되는 `a` 태그입니다. `a` 태그의 경우 유일하게 필수 매개변수는 링크의 위치를 나타내는 href입니다.

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

```js
[방문하기](https://www.example.com)
```

속성

- href: 링크가 가리키는 페이지의 위치 또는 URL(Uniform Resource Locator)을 제공합니다.
- target: 링크된 문서가 열리는 위치를 명시합니다. \_blank는 새 탭에서 문서가 열립니다.

속성과 함께 예시

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

[새 탭에서 예시 열기](https://www.example.com){:target="\_blank"}

# 이미지 태그 (`img`)

Html 문서에 이미지를 삽입하는 방법은 `img` 태그를 사용하는 것입니다. 이 태그는 입력된 후 자동으로 HTML 태그를 닫습니다.

![이미지 설명](image.jpg)

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

속성

- src: 이미지의 경로를 제공합니다.
- alt: 이미지를 설명하는 텍스트를 제공하거나 이미지가 작동하지 않을 때 이미지의 대체물을 제공합니다.
- width: 이미지의 가로 크기를 넓이를 표시하여 제공합니다.
- height: 이미지의 높이를 설정합니다.

속성을 사용한 예시

```js
<img src="image.jpg" alt="이미지 설명" width="500" height="300">
```

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

# 줄 바꿈 태그 (`br`)

이 태그는 텍스트 내에서 줄 바꿈을 생성하는 데 사용됩니다. 텍스트의 계속이 다음 줄에서 시작됩니다. 다음 새 줄을 입력하면 자동으로 닫히는 태그입니다.

```js
이것은 줄 바꿈입니다<br>새 줄이 여기서 시작됩니다.
```

# 굵은 글꼴, 이탤릭체, 밑줄 태그 (`b`, `i`, `u`)

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

이것들은 텍스트에 스타일을 적용하는 데 사용되는 태그들이에요.

```js
**진한 텍스트**
*기울임꼴 텍스트*
<ins>밑줄 텍스트</ins>
```

# 크고 작은 태그 (`big`, `small`)

Big 태그는 텍스트의 글꼴 크기를 증가시키고 Small 태그는 텍스트의 글꼴 크기를 줄입니다.

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

```js
<big>This text is big.</big>
<small>This text is small.</small>
```

# 수평선 태그 (`hr`)

`hr` 태그는 콘텐츠를 구분하는 데 사용할 수있는 수평 선을 삽입하는 데 사용됩니다.

```js
<p>첫 번째 단락.</p>
<hr>
<p>두 번째 단락.</p>
```

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

# 아래첨자 및 윗첨자 태그 (`sub`, `sup`)

이것들은 각각 아래첨자 위치와 윗첨자 위치에 쓰여진 스크립트를 정의하는 데 사용되는 태그들입니다.

```js
H<sub>2</sub>O (물)
E=mc<sup>2</sup> (아인슈타인의 방정식)
```

# 서식이 적용된 텍스트 태그 (`pre`)

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

`pre`태그는 텍스트를 정렬하여 Notepad에 입력한 대로 보존하고 보이게합니다.

```js
<pre>이것은 서식이 있는 텍스트입니다. 들여쓰기가 보존됩니다.</pre>
```

# 소스 코드 다운로드

간편함을 위해, 이 문서에서 설명하는 모든 예시 코드들은 무료로 다운로드할 수 있습니다. 이 튜토리얼에서 설명하는 모든 단계의 소스 코드를 다운로드하려면 아래 버튼을 클릭하세요.


HTML 기본 태그들 속성 설명


사용자 친화적 인터페이스에 대한 수요가 증가함에 따라 애플리케이션이 다크 모드와 라이트 모드와 같은 여러 테마를 지원해야 할 것으로 기대됩니다. 동적 테마 스위처는 사용자 경험을 향상시키는 데에 도움이 되며 애플리케이션에 개인화 수준을 더해줍니다. 이 글에서는 CSS 변수를 사용하여 Vue 3에서 동적 테마 스위처를 구축하는 방법에 대해 살펴보겠습니다. 사용자는 다크 모드, 라이트 모드 및 사용자 정의 테마 사이를 전환할 수 있습니다.

## 단계 1: 테마를 위한 CSS 변수 정의

CSS 변수(또는 CSS 사용자 지정 속성이라고도 함)는 실시간으로 동적으로 업데이트할 수 있기 때문에 테마 스타일을 정의하는 데 적합합니다. 전역 스타일을 저장하는 위치(src/assets/styles.css 또는 선호하는 위치)에서 라이트 및 다크 테마를 위한 몇 가지 CSS 변수를 정의해봅시다.

```css
//styles.css
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --primary-color: #d2e8de;
}

[data-theme="dark"] {
  --background-color: #090808;
  --text-color: #efefef;
  --primary-color: #374241;
}

[data-theme="grape"] {
  --background-color: #9919c4;
  --text-color: #8c64dc;
  --primary-color: #490e81;
}

[data-theme="lemon"] {
  --background-color: #be9523;
  --text-color: #e5df6c;
  --primary-color: #ea9e2c;
}
```

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

이 예시에서는 여러 테마를 정의했습니다. 각 테마는 동일한 세트의 CSS 변수(--배경-색상, --텍스트-색상 및 --기본-색상)를 수정합니다.

이러한 테마를 전역적으로 적용하려면 style 시트를 main.js로 가져와야 합니다.

```js
//main.js

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/styles.css";

createApp(App).mount("#app");
```

## 단계 2: 테마 전환 컴포넌트 작성하기

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

src/components 디렉토리 안에 ThemeSwitcher.vue 라는 새 컴포넌트를 만들어보세요:

```js
<script setup>
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/stores/themeStore.js';
import { watch } from "vue";

const themeStore = useThemeStore();
const { currentTheme } = storeToRefs(themeStore);

const updateTheme = (theme) => {
  themeStore.setTheme(theme);
};

watch(currentTheme, (newTheme) => {
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
});
</script>

<template>
  <div class="theme-switcher">
    <label>
      <input type="radio" name="theme" value="light" @change="updateTheme('light')" :checked="currentTheme === 'light'" />
      라이트
    </label>
    <label>
      <input type="radio" name="theme" value="dark" @change="updateTheme('dark')" :checked="currentTheme === 'dark'" />
      다크
    </label>
    <label>
      <input type="radio" name="theme" value="grape" @change="updateTheme('grape')" :checked="currentTheme === 'grape'" />
      포도
    </label>
    <label>
      <input type="radio" name="theme" value="lemon" @change="updateTheme('lemon')" :checked="currentTheme === 'lemon'" />
      레몬
    </label>

    <div class="card">
      <h2>카드 제목</h2>
      <p>이것은 카드 컴포넌트입니다. 테마 스위처가 스타일을 변경합니다.</p>
      <button class="primary-button">주 버튼</button>
    </div>

    <div class="form-group">
      <label for="name">이름:</label>
      <input type="text" id="name" placeholder="이름을 입력하세요" />
    </div>
  </div>
</template>

<style>
h1 {
  color: var(--primary-color);
  margin-bottom: 20px;
}

.card {
  background-color: var(--background-color);
  border: 1px solid var(--primary-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.primary-button {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.primary-button:hover {
  background-color: darken(var(--primary-color), 10%);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-color);
}

.form-group input {
  padding: 10px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  width: 100%;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.form-group input:focus {
  outline: none;
  border-color: darken(var(--primary-color), 10%);
  background-color: lighten(var(--background-color), 5%);
  color: var(--text-color);
}

</style>
```

이 컴포넌트를 사용하면 사용자가 사용자 정의 테마를 선택할 수 있습니다. currentTheme ref는 현재 선택된 테마를 저장합니다. updateTheme 함수는 새로 선택된 테마 이름을 전달받고 currentTheme을 업데이트하며, html 요소의 data-theme 속성도 업데이트하여 해당하는 CSS 변수를 트리거합니다. 또한, 테마가 "다크" 모드로 기본 설정되어 있습니다. 수정을 통해 이러한 설정을 로컬 저장소나 상태 저장소와 함께 사용하여 영구적인 설정을 가능하게 할 수 있습니다.

## 단계 3: 테마 스위처 컴포넌트 사용하기

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

애플리케이션에 테마 스위처를 통합하려면 App.vue나 다른 전역 컴포넌트에 포함시키세요:

```js
//App.vue
<template>
  <div id="app">
    <ThemeSwitcher />
  </div>
</template>

<script setup>
import ThemeSwitcher from './components/ThemeSwitcher.vue';
</script>

<style>
#app {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1 {
  color: var(--primary-color);
}
</style>
```

이제 배경색, 텍스트 색상 및 기본 색상은 CSS 변수에 의해 제어되며 활성 테마에 따라 동적으로 변경됩니다. 배경 및 텍스트 색상에 대한 전환 효과는 테마를 전환할 때 부드러운 시각적 경험을 제공합니다.

<img src="https://miro.medium.com/v2/resize:fit:1200/1*ae9MMYsflT83Q-GK5T9NbQ.gif" />

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

## 단계 4: 테마 확장 및 사용자 정의

이 설정을 사용하여 새 테마를 추가하거나 기존 테마를 사용자 정의하는 것은 간단합니다. 새 테마를 위한 추가 CSS 변수를 styles.css에 정의하고 ThemeSwitcher.vue 구성 요소를 이러한 새 옵션을 포함하도록 업데이트하면 됩니다.

예를 들어, "blue" 테마를 추가하려면 다음과 같이 styles를 편집합니다:

```js
[data-theme="blueberry"] {
    --background-color: #0d4fde;
    --text-color: #0ec3e3;
    --primary-color: #0c408d;
}
```

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

```js
    <label>
      <input type="radio" name="theme" value="blueberry" @change="updateTheme('blueberry')"
             :checked="currentTheme === 'blueberry"/>
      Blueberry
    </label>
```

## 결론

CSS 변수를 활용한 Vue 3에서 동적 테마 스위처를 만드는 것은 사용자 경험을 향상시키는 강력하면서도 간단한 방법입니다. Vue 3의 반응성과 CSS 변수의 유연성을 활용하여 사용자의 기호에 쉽게 적응할 수 있는 매우 사용자 정의 가능한 테마 관리 시스템을 구축할 수 있습니다.

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

이 방식은 귀하의 애플리케이션의 시각적 매력을 향상시키는 것뿐만 아니라 사용자에게 보다 개인화된 경험을 제공하여 현대 웹 개발에서 점차적으로 중요해지고 있습니다. 전체적으로 테마 상태를 관리하고 시스템을 추가 테마로 확장하며 사용자 기호를 세션 간에 지속 가능한 채광하여 Vue 3 애플리케이션에서 견고한 테마 시스템의 기초가 마련되었습니다.


Vue 3에서 CSS 변수를 활용한 동적 테마 스위처 만들기


웹 디자인에서 목록은 정보를 명확하고 효과적으로 구성할 수 있는 기본 요소입니다. 그러나 때로는 사이트 디자인에 더 잘 어울리도록 모양을 맞추어야 할 필요가 있습니다. 이 글에서는 HTML과 CSS만을 사용하여 순서 없는 목록(`ul`)의 점의 색상과 순서 있는 목록(`ol`)의 숫자의 색상을 변경하는 방법을 안내해 드리겠습니다.

# 간단한 해결책

처음에는 복잡해보일 수 있지만, 목록의 점과 숫자의 색상을 사용자 정의하는 것은 ::marker 가상 요소 덕분에 간단합니다. 이 가상 요소를 사용하면 목록의 마커에 특정 스타일을 적용할 수 있습니다. 점, 숫자 또는 다른 기호인지에 관계없이 목록의 마커에 특정 스타일을 적용할 수 있습니다.

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

# 코드 예시

이 사용자 정의를 구현하는 데 필요한 코드는 다음과 같습니다:

# HTML

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lists with Custom Colors</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>Unordered List</h2>
    <ul class="custom-ul">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    <h2>Ordered List</h2>
    <ol class="custom-ol">
      <li>Item A</li>
      <li>Item B</li>
      <li>Item C</li>
    </ol>
  </body>
</html>
```

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

# CSS

```js
/* 순서 없는 목록의 불릿 색상 변경 */
.custom-ul {
    list-style-type: disc; /* 불릿을 사용하도록 설정 */
}

.custom-ul li::marker {
    color: blue; /* 불릿의 색상 변경 */
}

/* 순서 있는 목록의 숫자 색상 변경 */
.custom-ol {
    list-style-type: decimal; /* 숫자를 사용하도록 설정 */
}

.custom-ol li::marker {
    color: red; /* 순서 있는 목록의 숫자 색상 변경 */
}
```

# 코드 설명

- ::marker 가상 요소: 이 가상 요소는 목록 (`ul` 및 `ol`)의 마커를 선택하고 스타일을 적용하는 데 사용됩니다.
- `ul`에서 불릿 사용자 정의: .custom-ul li::marker 에서 'color: blue;'를 사용하여 순서 없는 목록의 불릿 색상을 파란색으로 지정합니다.
- `ol`에서 숫자 사용자 정의: .custom-ol li::marker 에서 'color: red;'를 사용하여 순서 있는 목록의 숫자 색상을 빨간색으로 변경합니다.

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

# 결론

HTML 및 CSS를 사용하여 목록의 불릿과 번호의 색상을 사용자 정의하는 것은 생각보다 쉽습니다. ::marker 가상 요소를 사용하면 목록의 모양을 간단하고 효과적으로 수정하여 웹사이트의 스타일에 더 적합하게 만들 수 있습니다. 이 해결책이 도움이 되었으면 좋겠습니다!


HTML과 CSS를 사용하여 목록 불릿과 번호 색상을 커스텀하는 방법


![Fit-content() CSS Function](/assets/img/2024-08-19-Decodingthefit-contentCSSFunction_0.png)

이 글에서는 fit-content() CSS 함수를 살펴보겠습니다. 이 함수는 최근 CSS에 추가된 것으로, CSS 그리드 모듈에서 주로 사용되어 그리드 레이아웃을 구성합니다. 일관된 그리드 레이아웃과 구조를 만드는 데 가장 유용한 도구 중 하나입니다. 이 기능이 어떻게 작동하는지 살펴보고 때로는 원하는 결과를 제공하지 않는 이유를 알아볼 것입니다.

# fit-content()는 무엇을 하는가요?

그리드 요소의 grid-template-columns 및 grid-template-rows 속성에서 사용되어 그리드 항목의 차원을 지정합니다. MDN에 따르면, "fit-content() CSS 함수는 주어진 크기를 형식에 맞추는데, 이는 주어진 수식에 따라 가능한 크기에서 값을 판단합니다 (최대 크기, 최소 크기, 인수)." 좋아요, 그런데 이게 무슨 뜻이죠?

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

간단히 말해서, fit-content()은 그리드 항목을 최소 내용보다 크고 최대 내용보다 작을 경우 인수에 맞게 크기를 조정합니다. 콘텐츠가 최대 크기보다 클 경우에는 인수가 무시되고 그리드 항목은 최대 내용으로 자체를 설정합니다.

이는 요소의 높이와 너비를 모두 조정하는 데 사용될 수 있습니다. 이 기사에서는 두 가지 경우를 살펴보겠습니다. 우선 높이를 조정하는 것부터 시작해보죠.

예를 들어봅시다. 간단한 레이아웃이 있다고 가정해보겠습니다–

```js
<div class="grid">
  <div class="item">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
```

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

간단한 .grid 컨테이너 요소에 .item 그리드 항목을 추가했어요. 다음 CSS 코드를 추가했어요 -

```js
.grid {
    display: grid;
    height: 300px;
    width: 500px;
}

.item {
    padding: 1rem;
    font-family:'Arial', sans-serif;
    background-color: antiquewhite;
}
```

.grid 컨테이너에는 너비가 500픽셀이고 높이가 300픽셀이에요. 또한 배경색, 일부 타이포그래피 및 패딩을 그리드 항목에 추가하여 조금 더 멋지게 보이게 했어요. 결과는 이렇게 보여야 해요 -

<img src="/assets/img/2024-08-19-Decodingthefit-contentCSSFunction_1.png" />

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

위에서 보듯이, .grid 컨테이너에는 샘플 텍스트가 있는 .item 그리드 아이템이 있습니다. 컨테이너 요소의 크기는 500\*300px입니다. 이제 그리드 항목의 높이를 콘텐츠에 맞게 조정하는 방법을 살펴보겠습니다.

## 행에 대한 fit-content() 함수

fit-content() 함수가 그리드 항목의 높이에 어떻게 영향을 미치는지 보려면 다음 CSS를 .grid 컨테이너 요소에 추가해 보세요 -

```js
.grid {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-rows: fit-content(10%);
}
.
.
.
```

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

안녕하세요! 표 태그를 Markdown 형식으로 변경하시라고 하셨네요.

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

지금은 최대 크기가 그리드 항목이 달성할 수 있는 최대 높이입니다. 이전과 비슷하게, 여기에서 그리드 항목의 최대 가능한 높이를 얻으려면 height: max-content CSS 속성을 사용할 수 있습니다. 콘텐츠가 더 이상 확장되지 않으므로 최대 크기는 106px이 될 것입니다. 이제 우리의 식에 따라 최소 크기와 최대 크기가 있습니다. 우리는 10%를 인수로 사용했습니다. 컨테이너 높이가 300px이므로 절대적으로 인수는 (300의 10%) 30px가 될 것입니다. 이를 우리의 식에 사용하면 -

```js
min(106, max(106, 30)); // 결과: 106
```

따라서 공식에 따른 콘텐츠의 높이는 106px입니다. 최소 콘텐츠와 최대 콘텐츠 값이 같기 때문에 인수의 값이 무엇이든 상관없이 결과는 항상 같을 것입니다. 우리의 그리드 항목은 항상 콘텐츠에 맞게 맞출 것입니다.

지금까지 fit-content()를 사용하여 그리드 항목의 높이를 콘텐츠에 맞게 조절하는 방법을 살펴보았습니다. 이제 fit-content()가 그리드 항목의 너비에 어떻게 영향을 미치는지 살펴봅시다.

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

## fit-content()를 사용한 열

여기서 fit-content() 함수가 정말 빛을 발합니다. 이 함수를 열 기반 레이아웃에 적용합니다. .grid 컨테이너의 CSS를 다음과 같이 수정해보세요 -

```js
.grid {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-columns: fit-content(10%);
}
.
.
.
```

원하는 브라우저에서 레이아웃 변경 사항을 확인하세요. 그리드 항목의 너비가 줄어들고, 높이는 내용을 맞추기 위해 비례적으로 증가했음을 알 수 있습니다.

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

![그리드 항목이 너비를 계산하는 방법을 살펴보겠습니다. 위의 코드에서 fit-content에 동일한 10%를 인수로 제공했습니다. 이 경우, 최소 사이즈는 width: min-content를 사용하여 계산됩니다. 텍스트 내용의 최소 너비를 계산하기 위해 컨텐츠는 가능한 매 회마다 감싸져 가장 긴 단어가 될 때까지 넓어져서 가장 작은 너비를 얻습니다. 그리드 항목에 width: min-content를 적용하면 최소 너비는 약 115px 정도 될 것입니다.](/assets/img/2024-08-19-Decodingthefit-contentCSSFunction_5.png)

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

그리드 항목의 최대 크기는 width: max-content를 사용하여 계산됩니다. 텍스트의 경우 줄 바꿈을 무시하고 모든 텍스트를 한 줄에 놓고 계산됩니다. 이 경우 최대 크기는 1680픽셀까지 확장됩니다.

![이미지](/assets/img/2024-08-19-Decodingthefit-contentCSSFunction_6.png)

따라서 최소 크기는 115px이고 최대 크기는 1680px입니다. 또한 우리는 10%를 인수로 사용했습니다. 절대값으로는 (500의 10%) 50px입니다. 이러한 모든 값을 우리의 공식에 적용하면 다음과 같습니다 -

```js
min(1680, max(115, 50)); // 결과: 115
```

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

그리드 항목은 너비를 115픽셀로 계산하게 됩니다.

이제 코드를 바꿔서 fit-content()에 다른 값 할당해보겠습니다. 인자를 200픽셀로 변경하세요 -

```js
.grid {
    display: grid;
    height: 300px;
    width: 500px;
    grid-template-columns: fit-content(200px);
}
.
.
.
```

이제 그리드 항목이 200픽셀의 너비를 갖게 됨을 알 수 있습니다.

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

아래는 Markdown 형식의 텍스트입니다.

이미지를 확인해보세요.

```js
min(1680, max(115, 200)); //결과: 200
```

여기에는 여러분이 직접 값을 바꿔가며 결과를 확인할 수 있는 펜이 있습니다. 함께 놀아보세요.

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

# 마무리

그래서, 그게 다야! fit-content()는 CSS의 최근 추가 사항이며 브라우저 지원이 의문스러울 수 있습니다. 그러나 여전히 CSS에서 강력한 도구로 복잡한 레이아웃을 만드는 데 사용할 수 있습니다. 저는 제작한 테마 중 하나에서 효과적으로 사용하여 주요 뉴스 영역을 만들었습니다.

이 글에서 무언가를 배울 수 있었으면 좋겠어요. 웹 개발 관련 팁, 트릭 및 튜토리얼에 관심이 있다면, 제 사이트인 IndiThemes.com을 확인해보세요. 여기에서는 웹 개발 관련 기사를 정기적으로 게시하는 것 외에도 WordPress 테마를 포함한 서비스를 제공합니다. 다음에 또 만나요!


fit-content CSS 함수 정리

![HTML 기본](/assets/img/2024-08-19-BasicsofHTML_0.png)

HTML (HyperText Markup Language)은 웹 페이지를 만드는 데 사용되는 표준 언어입니다. HTML은 웹 페이지의 구조와 콘텐츠를 제공하며, CSS를 사용하여 스타일을 지정하고 JavaScript를 사용하여 상호 작용성을 부여합니다. HTML의 기본 사항을 알아보겠습니다:

# 1. HTML 문서 구조

HTML 문서는 선얹어로 시작해서 태그로 감싸인 일련의 요소로 이어집니다:

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

```js
<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first webpage.</p>
  </body>
</html>
```

- `!DOCTYPE html`: HTML 문서 유형과 버전을 선언합니다. 브라우저가 문서가 HTML5로 작성되었음을 이해할 수 있도록 도와줍니다.
- `html`: 페이지의 모든 다른 HTML 요소를 포함하는 루트 요소입니다.
- `head`: 문서에 대한 메타 정보(제목, 스타일시트 또는 스크립트에 대한 링크 등)를 포함합니다.
- `title`: 웹페이지의 제목을 설정하며, 브라우저의 제목 표시줄이나 탭에 표시됩니다.
- `body`: 텍스트, 이미지, 링크 등과 같은 웹페이지의 콘텐츠를 포함합니다.

# 2. HTML 태그 및 요소

- 태그: `h1` 또는 `p`와 같이 꺽쇠 괄호로 둘러싸인 키워드입니다. 일반적으로 시작 태그 (`h1`)와 종료 태그 (`/h1`)의 쌍으로 구성됩니다.
- 요소: 시작 태그, 콘텐츠 및 종료 태그로 구성됩니다. 예시:
- `h1`Hello, World!`/h1`

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

# 3. HTML 속성

속성은 HTML 요소에 대한 추가 정보를 제공합니다. 이러한 속성들은 항상 여는 태그에 포함되며 이름="값" 쌍으로 작성됩니다:

```js
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="설명 텍스트">
```

- href: `a` (앵커) 태그에서 사용되며 링크의 대상을 지정합니다.
- src: `img` 태그에서 이미지의 소스를 지정합니다.
- alt: 이미지에 대한 대체 텍스트를 제공하며, 접근성을 위해 사용되거나 이미지가 표시되지 않을 때 대체로 사용됩니다.

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

# 4. HTML 헤딩

헤딩은 웹페이지에서 제목과 부제목을 만드는 데 사용됩니다:

```js
<h1>이것은 주요 제목입니다</h1>
<h2>이것은 부제목입니다</h2>
<h3>이것은 더 작은 부제목입니다</h3>
```

- `h1`부터 `h6`까지: 각기 다른 수준의 헤딩을 나타냅니다. `h1`이 가장 중요하고 `h6`이 가장 덜 중요합니다.

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

# 5. HTML 단락

단락은 텍스트 블록을 작성하는 데 사용됩니다:

```js
<p>This is a paragraph of text. HTML automatically adds some space before and after paragraphs.</p>
```

- `p`: 단락을 생성하기 위해 텍스트 블록을 감쌉니다.

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

# 6. HTML 줄 바꿈과 수평선

- 줄 바꿈 (`br`): 텍스트 내에서 줄 바꿈(새 줄)을 만드는 데 사용됩니다.
- 수평선 (`hr`): 주제를 분리하거나 수평선을 만드는 데 사용됩니다:

```js
<p>이것은 첫 번째 줄입니다.<br>이것은 두 번째 줄입니다.</p>
<hr>
<p>수평선 뒤의 텍스트입니다.</p>
```

# 7. HTML 주석

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

브라우저에는 주석이 표시되지 않으며 코드를 설명하는 데 사용됩니다:

```js

<p>이 텍스트는 보입니다.</p>
```

- `!-- Comment --`: 텍스트를 주석으로 처리할 때 사용합니다.

# 8. HTML 링크

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

링크를 통해 사용자들은 다른 페이지로 이동할 수 있어요:

```js
[Example](https://www.example.com)를 방문하려면 여기를 클릭해주세요.
```

- `a`: 앵커 태그는 하이퍼링크를 생성합니다. href 속성은 링크를 클릭했을 때 이동할 URL을 지정합니다.

# 9. HTML 이미지

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

이미지를 삽입하려면 `img` 태그를 사용하면 됩니다:

```js
<img src="image.jpg" alt="이미지에 대한 설명">
```

- `img`: 이미지를 삽입하는 데 사용됩니다. `src` 속성은 이미지 소스를 지정하고 `alt`는 설명 텍스트를 제공합니다.

# 10. HTML 목록

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

HTML은 정돈된 목록과 정돈되지 않은 목록을 지원합니다:

- 정돈되지 않은 목록(`ul`):

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

- 정돈된 목록(`ol`):

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

- `ul`: 원형 기호가 있는 정돈되지 않은 목록을 생성합니다.
- `ol`: 숫자가 있는 정돈된 목록을 생성합니다.
- `li`: 목록의 각 항목을 나타냅니다.

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

# 11. HTML 메타데이터

메타데이터는 다른 데이터에 대한 정보를 제공하는 데이터입니다. 이는 `head` 섹션 안에 배치되며, 문자 세트, 작성자 및 페이지 설명과 같은 정보를 포함합니다:

```js
<meta charset="UTF-8">
<meta name="description" content="HTML 기초 예제">
<meta name="keywords" content="HTML, 튜토리얼, 기초">
<meta name="author" content="Saide Hossain">
```

# 12. HTML 문서 구조 요약

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

간단한 모든 기본 요소를 결합한 HTML 문서가 여기 있어요:

```js
<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 HTML 페이지</title>
    <meta charset="UTF-8">
    <meta name="description" content="HTML 기초 학습">
    <meta name="keywords" content="HTML, 기초, 튜토리얼">
    <meta name="author" content="Saide Hossain">
  </head>
  <body>
    <h1>내 웹사이트에 오신 것을 환영합니다</h1>
    <p>이것은 나의 첫 웹페이지입니다. HTML을 배우고 있어요!</p>
    <p>HTML은 배우기 쉽고 사용하기 즐거운 언어입니다.</p>
    <hr>
    <h2>내가 좋아하는 웹사이트 몇 가지:</h2>
    <ul>
      <li><a href="https://www.example.com">Example.com</a></li>
      <li><a href="https://www.anotherexample.com">Another Example</a></li>
    </ul>
    <h2>내가 좋아하는 이미지:</h2>
    <img src="https://images.pexels.com/photos/287240/pexels-photo-287240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="300" alt="아름다운 풍경">
    <hr>
    <p>문의 사항은 <a href="mailto:saide2857@gmail.com">saide2857@gmail.com</a>으로 연락해주세요</p>
  </body>
</html>
```

# 주요 포인트들

- HTML은 콘텐츠를 구조화하기 위해 태그를 사용하는 것이 중요해요.
- 제목, 문단, 목록, 링크, 이미지 등의 기본 구성 요소가 있어요.
- 모든 HTML 문서는 올바른 구조가 필요하며 `!DOCTYPE html`로 시작하고 `html`, `head`, `body` 태그 내에서 콘텐츠를 감싸야 해요.

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

이 기본 사항을 활용하여 웹 페이지 제작을 시작할 수 있어요!

출처: HTML TUTE BLOG

Posts