Table 레이아웃

cart.html 파일 생성

cart.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>

Vertical-align 속성

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

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

특히 큰 이미지와 글,

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

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

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

Table 에서는 top / middle / bottom 만 가능

display : inline

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

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

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

Previousform & inputNextTable 실습

Last updated