# Table 레이아웃

cart.html 파일 생성&#x20;

{% code title="cart.html" %}

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<body>

</body>
</html>
```

{% endcode %}

### Vertical-align 속성

```html
 <div>
    <p style="font-size: 50px;">
        greetings
        <span style="font-size: 20px; vertical-align: middle;">안녕</span>
    </p>
</div>
```

{% embed url="<https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align>" %}

display : inline 혹은 inline-block 요소들을 나란히 배치하면 상하정렬이 이상한 경우가 있습니다.

특히 **큰 이미지와 글**,

또는 **큰 글씨옆에 있는 작은 글씨**

이런걸 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많은데

이럴 때 margin-top 이런거 대신 쓰는 속성입니다.

Table 에서는 top / middle / bottom 만 가능&#x20;

### display : inline&#x20;

항상 옆으로 채워지는 폭과 너비가 없는 요소&#x20;

```html
// Test Code
 <span>123asd</span>
 <span>123asd</span>
 <span>123asd</span>
```

✨과제. 아래 그림을 보고 html / css 작성하기기

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2FPPOT4dqnJiptrGrYBWtx%2FScreenshot_97.png?alt=media&#x26;token=f39a4be2-1704-4f26-aaef-a7f6c899b111" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/html-css/table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
