# 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>

