[CSS] - (4) Float 실습 2

bellong·2026년 2월 11일

CSS

김버그의 CSS는 재밌다 - 강의 정리

목록 보기

4/16

float 를 이용해서 아래의 그림과 같이 카드 레이아웃을 만들어보았다.

단순히 따라 만드는 게 아니라,
만들면서 헷갈렸던 부분들을 정리해보려고 한다.

만들면서 궁금했던 점들

1. 조상 1개 + 자식 2개라면 float는 둘 다 줘야 할까?

예를 들어 이런 구조일 때:

<div class="card">
  <img class="card-user" />
  <div class="card-content"></div>
</div>

이미지와 콘텐츠를 가로로 배치하고 싶다면?
→ 두 요소 모두 float: left; 를 줘야 한다.

.card-user,
.card-content {
  float: left;
}

한 요소만 float 주면 나머지 요소는 흐름에 따라 배치된다.

2. 간격은 padding일까? margin일까?

간격이 있다면 padding인가.. margin인가.. 진짜 헷갈렸다.

padding = 내 안쪽 공간
margin = 나와 다른 요소 사이 거리

이번 실습에서는:

이미지와 콘텐츠 사이 간격 → margin-right
카드 안쪽 여백 → padding

.card {
  padding: 20px;
}

.card-user {
  margin-right: 20px;
}

3. 텍스트 간 간격 조정 안되는 이유는?

<strong> 아래 간격
처음에는 margin-bottom 이 안 먹었다.

왜?
→ <strong> 은 기본적으로 inline 요소이기 때문.

inline 요소는 위/아래 margin 이 정상적으로 적용되지 않는다.

해결 방법

.card-content strong {
  display: block;
  margin-bottom: 12px;
}

위/아래 margin 이 안 먹으면 display 를 의심하자 !

코드

html 코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Float 2</title>
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <div class="card">
            <img src="./assets/user.jpg" alt="Customer support" class="card-user" />
            <div class="card-content">
                <h1>RE: 안녕하세요 배송 관련 문의드립니다</h1>
                <strong>customer support</strong>
                <p>안녕하세요 우현님. 문의 드린 사항에 대한 답변드립니다. 지난 12...</p>
            </div>
        </div>
    </body>
</html>

css 코드

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    letter-spacing: -0.02em;
    background-color: black;
}

h1 {
    font-size: 16px;
    font-weight: 400;
    color: #1f2d3d;
    line-height: 1.25;
}

strong {
    font-size: 14px;
    font-weight: 400;
    color: #afb3b9;
    line-height: 1.4285714286;
}

p {
    font-size: 16px;
    color: #79818b;
    line-height: 1.5;
}

.card {
    max-width: 540px;
    background-color: white;
    padding: 20px;
}

.card::after {
    content: '';
    display: block;
    clear: left;
}

.card-user {
    float: left;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 20px;
}

.card-content {
    float: left;
}
.card-content h1 {
    margin-bottom: 4px;
}
.card-content strong {
    display: block;
    margin-bottom: 12px;
}