CSS 속성 및 플로트(Float) 활용

1. 폰트 스타일 속성

1.1 폰트 패밀리

font-family 속성은 텍스트에 사용할 글꼴을 지정합니다. 여러 개의 글꼴을 쉼표로 구분하여 지정할 수 있으며, 브라우저가 순차적으로 지원 여부를 확인합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Font Family Demo</title>
    <style>
        .text-primary {
            font-family: 'Malgun Gothic', sans-serif;
        }
        .text-secondary {
            font-family: 'Nanum Gothic', serif;
        }
        .text-accent {
            font-family: 'Jeju Gothic', 'Gothic A1', sans-serif;
        }
    </style>
</head>
<body>
    <p class="text-primary">동해물과 백두산이 마르고 닳도록</p>
    <p class="text-secondary">동해물과 백두산이 마르고 닳도록</p>
    <p class="text-accent">동해물과 백두산이 마르고 닳도록</p>
</body>
</html>

1.2 폰트 크기

font-size 속성은 텍스트의 크기를 설정합니다. px, em, rem, % 등 다양한 단위를 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Font Size Demo</title>
    <style>
        .small-text {
            font-size: 14px;
        }
        .medium-text {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p class="small-text">하느님이 보우하사</p>
    <p class="medium-text">하느님이 보우하사</p>
</body>
</html>

1.3 폰트 굵기

font-weight 속성은 텍스트의 굵기를 지정합니다. 키워드(normal, bold) 또는 숫자 값(100~900)을 사용할 수 있습니다.

  • normal: 일반 굵기 (400과 동일)
  • bold: 굵은 글꼴 (700과 동일)
  • lighter: 상속된 값보다 얇게
  • bolder: 상속된 값보다 두껍게
  • 100~900: 숫자로 굵기 조절 (100: 가장 얇음, 900: 가장 두껍음)
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Font Weight Demo</title>
    <style>
        .weight-normal {
            font-weight: normal;
        }
        .weight-heavy {
            font-weight: 800;
        }
    </style>
</head>
<body>
    <p class="weight-normal">남산 위에 저 소나무 철갑을 두른 듯</p>
    <p class="weight-heavy">남산 위에 저 소나무 철갑을 두른 듯</p>
</body>
</html>

1.4 폰트 색상

color 속성은 텍스트 색상을 지정합니다. 색상 이름, RGB, RGBA, HEX 등 다양한 방식으로 표현할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Font Color Demo</title>
    <style>
        .color-named {
            color: crimson;
        }
        .color-rgb {
            color: rgb(64, 224, 208);
        }
        .color-hex {
            color: #8B4513;
        }
    </style>
</head>
<body>
    <p class="color-named">바람 서리 불변함은 우리 기상일세</p>
    <p class="color-rgb">바람 서리 불변함은 우리 기상일세</p>
    <p class="color-hex">바람 서리 불변함은 우리 기상일세</p>
</body>
</html>

2. 텍스트 속성

2.1 텍스트 정렬

text-align 속성은 블록 레벨 요소 내의 텍스트 수평 정렬 방식을 지정합니다.

값 설명
left 왼쪽 정렬 (기본값)
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 정렬 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Text Align Demo</title>
    <style>
        .align-right {
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="align-right">무궁화 삼천리 화려 강산</p>
</body>
</html>

2.2 텍스트 장식

text-decoration 속성은 텍스트에 장식선(밑줄, 취소선 등)을 추가하거나 제거합니다.

값 설명
none 장식선 제거 (링크 기본 밑줄 제거에 사용)
underline 밑줄
overline 텍스트 위 선
line-through 취소선

a 태그의 기본 밑줄을 제거하는 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Link Without Underline</title>
    <style>
        .no-underline {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <a href="#" class="no-underline">구글로 이동</a>
</body>
</html>

2.3 텍스트 들여쓰기

text-indent 속성은 첫 번째 줄의 들여쓰기 크기를 지정합니다. 양수는 들여쓰기, 음수는 내어쓰기입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Text Indent Demo</title>
    <style>
        .indent {
            text-indent: 24px;
        }
    </style>
</head>
<body>
    <p class="indent">무궁화 삼천리 화려 강산</p>
</body>
</html>

3. 배경 속성

3.1 배경색

background-color 속성은 요소의 배경색을 지정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Background Color Demo</title>
    <style>
        body {
            background-color: #f0f8ff;
        }
    </style>
</head>
<body>
    <div>Alice Blue 배경색</div>
</body>
</html>

3.2 배경 이미지

이미지 추가

background-image 속성을 사용하여 배경 이미지를 지정합니다. 이미지가 요소보다 작으면 반복되어填充됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Background Image Demo</title>
    <style>
        .bg-container {
            height: 600px;
            width: 600px;
            background-color: #e0ffff;
            background-image: url("pattern.png");
        }
    </style>
</head>
<body>
    <div class="bg-container"></div>
</body>
</html>

반복 방식 설정

background-repeat 속성은 배경 이미지의 반복 방식을 지정합니다.

  • repeat: 가로와 세로 모두 반복 (기본값)
  • no-repeat: 반복 없음
  • repeat-x: 가로 방향만 반복
  • repeat-y: 세로 방향만 반복
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Background Repeat Demo</title>
    <style>
        .no-repeat {
            background-repeat: no-repeat;
        }
        .repeat-x-axis {
            background-repeat: repeat-x;
        }
        .repeat-y-axis {
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div style="height:400px;width:400px;background-image:url('pattern.png');" class="no-repeat"></div>
</body>
</html>

이미지 위치 설정

background-position 속성은 배경 이미지의 시작 위치를 지정합니다. 키워드(left, right, top, bottom, center) 또는 좌표값(px, %)을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Background Position Demo</title>
    <style>
        .positioned {
            height: 400px;
            width: 400px;
            background-color: #e0ffff;
            background-image: url("pattern.png");
            background-repeat: no-repeat;
            background-position: bottom 20px right 20px;
        }
    </style>
</head>
<body>
    <div class="positioned"></div>
</body>
</html>

단축 속성

background 속성을 사용하여 여러 배경 속성을 한 줄로 정의할 수 있습니다.

background: #e0ffff url("pattern.png") no-repeat 20px 20px;

4. 테두리 속성

4.1 개별 테두리 설정

border-{방향}-color, border-{방향}-width, border-{방향}-style로 각 테두리를 개별적으로 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Individual Border Demo</title>
    <style>
        .box-border {
            background-color: #ffe4e1;
            border-left-color: #2e8b57;
            border-left-width: 4px;
            border-left-style: solid;
            padding: 16px;
        }
    </style>
</head>
<body>
    <div class="box-border">밝은 빛깔의 봄날</div>
</body>
</html>

4.2 테두리 방향별 설정

border-top-color: #ff6347;
border-bottom-width: 6px;
border-right-style: dashed;
border-left-color: teal;

4.3 통합 테두리 설정

border 속성으로 네 면의 테두리를 한 번에 설정합니다. 속성 순서는 상관없습니다.

  • solid: 실선
  • dashed: 사선
  • dotted: 점선
  • double: 이중 선
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Border Shorthand Demo</title>
    <style>
        .unified-border {
            background-color: #ffe4e1;
            border: 3px solid #4682b4;
            padding: 16px;
        }
    </style>
</head>
<body>
    <div class="unified-border">밝은 빛깔의 봄날</div>
</body>
</html>

4.4 둥근 모서리

border-radius 속성을 사용하여 모서리를 둥글게 만들 수 있습니다. 50%로 설정하면 원이 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Border Radius Demo</title>
    <style>
        .circle {
            background-color: #deb887;
            height: 180px;
            width: 180px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

5. display 속성

5.1 display 기본 개념

CSS의 display 속성은 요소가 어떻게 표시되는지를 결정합니다.

  • 블록 레벨 요소: 브라우저 전체 너비를 차지 (div, p, h1 등)
  • 인라인 요소: 내용물만큼만 너비를 차지 (span, a 등)

display: block: 인라인 요소를 블록 레벨로 변환. 너비와 높이 설정 가능

display: inline: 블록 레벨 요소를 인라인으로 변환. 너비와 높이 설정 불가

display: inline-block: 블록과 인라인의 특성을 모두 가짐. 너비/높이 설정 가능하면서도 다른 요소와 한 줄에 표시

display: none: 요소를 화면에서 숨김 (레이아웃에서 완전히 제거)

5.2 display: inline 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Display Inline Demo</title>
    <style>
        .inline-box {
            background-color: #deb887;
            height: 150px;
            width: 150px;
            display: inline;
        }
    </style>
</head>
<body>
    <div class="inline-box"></div>
</body>
</html>

5.3 display: block 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Display Block Demo</title>
    <style>
        .block-text {
            background-color: #deb887;
            height: 80px;
            width: 80px;
            display: block;
        }
    </style>
</head>
<body>
    <span class="block-text">Avril Lavigne</span>
</body>
</html>

5.4 display: inline-block 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Display Inline-Block Demo</title>
    <style>
        .inline-block-item {
            background-color: #deb887;
            height: 80px;
            width: 80px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="inline-block-item">사과</div>
    <div class="inline-block-item">포도</div>
</body>
</html>

5.5 요소 숨기기

display: none과 visibility: hidden의 차이점:

  • display: none: 요소를 숨기고 레이아웃에서 완전히 제거
  • visibility: hidden: 요소를 숨기지만 원래 공간은 유지
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Hide Elements Demo</title>
    <style>
        .hidden {
            display: none;
        }
        .invisible {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <p class="hidden">숨겨진 요소</p>
    <p>보이는 요소 1</p>
    <p class="invisible">공간은 유지</p>
    <p>보이는 요소 2</p>
    <p>보이는 요소 3</p>
    <p>보이는 요소 4</p>
</body>
</html>

6. 박스 모델

6.1 박스 모델 개념

박스 모델은 CSS에서 모든 요소를 사각형 박스로 표현하는 방식입니다. 각 박스는 네 개의 영역으로 구성됩니다:

영역 설명
content 실제 내용 (텍스트, 이미지 등)
padding 내용과 테두리 사이의 내부 여백
border 테두리 두께
margin 요소 간의 외부 간격

6.2 margin 초기화

body 요소는 기본적으로 margin이 설정되어 있습니다. 이를 제거하려면 margin을 0으로 설정합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Margin Reset Demo</title>
    <style>
        .box {
            background-color: #b0c4de;
            height: 80px;
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="box">테스트</div>
</body>
</html>

여백을 제거하려면:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Margin Reset Demo</title>
    <style>
        body {
            margin: 0;
        }
        .box {
            background-color: #b0c4de;
            height: 80px;
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="box">테스트</div>
</body>
</html>

6.3 margin 값 설정

margin에 전달하는 값의 개수에 따라 적용 방식이 다릅니다:

  • 1개: 네 방향 모두 동일한 값
  • 2개: 첫 번째 값은 상하, 두 번째 값은 좌우
  • 3개: 첫 번째는 상, 두 번째는 좌우, 세 번째는 하
  • 4개: 상, 우, 하, 좌 순서
margin: 10px 20px 30px 40px;  /* 상:10px, 우:20px, 하:30px, 좌:40px */
margin: 10px 20px 30px;       /* 상:10px, 좌우:20px, 하:30px */
margin: 10px 20px;            /* 상하:10px, 좌우:20px */
margin: 10px;                 /* 네 방향:10px */

7. 플로트(Float)

7.1 플로트 개념

float 속성은 요소를 좌우 방향으로 부동시켜常规 문서 흐름에서 분리합니다. 이를 통해 여러 블록 요소를 한 줄에 배치할 수 있습니다.

  • float: left: 요소를 왼쪽으로 부동
  • float: right: 요소를 오른쪽으로 부동

7.2 플로트 기본 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Float Left Demo</title>
    <style>
        .float-left-item {
            height: 80px;
            width: 80px;
            background-color: #b0c4de;
            float: left;
        }
        .float-right-item {
            height: 80px;
            width: 80px;
            background-color: #ffa500;
            float: right;
        }
    </style>
</head>
<body>
    <div class="float-left-item"></div>
    <div class="float-right-item"></div>
</body>
</html>

두 요소를 모두 왼쪽으로 플로트:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Two Floats Demo</title>
    <style>
        .item-a {
            height: 80px;
            width: 80px;
            background-color: #b0c4de;
            float: left;
        }
        .item-b {
            height: 80px;
            width: 80px;
            background-color: #ffa500;
            float: left;
        }
    </style>
</head>
<body>
    <div class="item-a"></div>
    <div class="item-b"></div>
</body>
</html>

7.3 플로트의 영향

플로트된 요소는 부모 요소의 컨테이너에서脱离됩니다. 마치 주머니 안의 물건을 꺼낸 것처럼 동작합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Float Parent Collapse</title>
    <style>
        .inner-a {
            height: 80px;
            width: 80px;
            background-color: #b0c4de;
        }
        .inner-b {
            height: 80px;
            width: 80px;
            background-color: #ffa500;
        }
        .parent-container {
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="parent-container">
        <div class="inner-a"></div>
        <div class="inner-b"></div>
    </div>
</body>
</html>

플로트 적용 시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Float Collapsed Demo</title>
    <style>
        .inner-a {
            height: 80px;
            width: 80px;
            background-color: #b0c4de;
            float: left;
        }
        .inner-b {
            height: 80px;
            width: 80px;
            background-color: #ffa500;
            float: left;
        }
        .parent-container {
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="parent-container">
        <div class="inner-a"></div>
        <div class="inner-b"></div>
    </div>
</body>
</html>

7.4 플로트와 텍스트

플로트된 요소 아래에 있는 텍스트는绕开하여 표시됩니다. 이를 텍스트 흐름이라고 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Float Text Wrap Demo</title>
    <style>
        .floating-box {
            height: 200px;
            width: 200px;
            background-color: #b0c4de;
            float: left;
        }
        .content-box {
            height: 200px;
            width: 200px;
            background-color: #6495ed;
        }
        .parent-container {
            border: 2px solid #333;
        }
    </style>
</head>
<body>
    <div class="parent-container">
        <div class="floating-box"></div>
        <div class="content-box">안녕하세요</div>
    </div>
</body>
</html>

7.5 플로트 해제 방법

플로트된 요소를 포함하는 부모 요소가塌陷하는 문제를 해결해야 합니다. clear 속성을 사용하거나 클리어픽스 기법을 적용합니다.

값 설명
left 왼쪽 플로트 요소 제거
right 오른쪽 플로트 요소 제거
both 양쪽 플로트 모두 제거

클리어픽스 기법: ::after 가상 요소를 사용하여 플로트를 자동으로 해제합니다.

.clearfix::after {
    content: '';
    clear: both;
    display: block;
}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Clearfix Demo</title>
    <style>
        .item-a {
            height: 80px;
            width: 80px;
            background-color: #b0c4de;
            float: left;
        }
        .item-b {
            height: 80px;
            width: 80px;
            background-color: #ffa500;
            float: left;
        }
        .wrapper {
            border: 2px solid #333;
        }
        .clearfix::after {
            content: '';
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
    <div class="wrapper clearfix">
        <div class="item-a"></div>
        <div class="item-b"></div>
    </div>
</body>
</html>

태그: CSS font-family font-size text-align background-image

7월 13일 00:40에 게시됨

인기 태그

©2026 괴물 클럽