[TIL] 24.12.10(화)

웹 퍼블리싱(2)

'CSS'의 정의

CSS는 웹 페이지를 꾸미는 마법의 붓으로, HTML로 만든 뼈대에 색깔, 글꼴, 간격, 위치 등을 입혀서 더 예쁘게 만드는 역할을 함.

HTML이 제목과 문단을 만들면, CSS는 그 제목을 파란색으로 바꾸고 크기를 키우는 것!

CSS의 풀 네임은 Cascading Style Sheets

Cascading: "차곡차곡 적용된다"는 뜻
Style Sheets: 스타일을 적용하는 설계도라는 뜻

'CSS'의 구조

전체 구조는 rule set이라 불림.

선택자 (Selector)

"누굴 꾸밀지 선택하는 이름표"

Ruleset의 맨 앞에 위치
HTML에서 꾸밀 요소를 선택
예: <p> 요소를 꾸미려면 선택자로 p를 사용

선언 (Declaration)

"무엇을 어떻게 꾸밀지 적는 규칙"

Ruleset 안에 포함된 한 줄의 꾸미기 명령
예: color: red;는 글자 색을 빨간색으로 바꾸는 규칙

속성 (Property)

"무엇을 꾸밀지 결정하는 이름"

글자 색깔, 크기, 여백 등 여러 요소를 꾸밀 때 속성을 사용
예: color는 글자 색을 꾸미는 속성

속성 값 (Value)

"어떻게 꾸밀지 정하는 값"

속성이 어떻게 적용될지 결정하는 값
예: color: red;에서 red는 글자 색을 빨간색으로 설정하는 값

'CSS Ruleset'의 전체 구조

p {
  color: red;
  font-size: 16px;
}

p: 선택자 → 문단을 꾸미겠다는 뜻
color: red;: 선언 → 글자 색을 빨간색으로 바꿈
font-size: 16px;: 선언 → 글자 크기를 16픽셀로 바꿈

'CSS Ruleset'의 작성 규칙

1. 중괄호 {}로 감싸기 (모든 선언은 {}로 감싸야 함)

p {
  color: blue;
}

2. 속성과 값은 콜론 : 으로 연결하기 (속성 이름과 값 사이에 :를 사용 / 예시: color: red; )

3. 선언 끝에는 세미콜론 ; 사용 (여러 선언을 작성할 때는 각각 끝에 세미콜론을 붙임)

p {
  color: red;
  font-size: 20px;
}

'선택자'의 종류

1. 요소 선택자: HTML 태그 이름을 선택

p {
    color: blue;
}

2. 클래스 선택자: 여러 요소를 한꺼번에 꾸밀 때 사용

.highlight {
    color: orange;
}

<div class="highlight">하이라이트</div>

<!DOCTYPE html>
<html>
<head>
    <title>클래스 선택자 예제</title>
    <style>
        .box {
            border: 2px solid blue; /* 테두리 */
            background-color: lightblue; /* 배경색 */
            padding: 10px; /* 안쪽 여백 */
            margin: 10px; /* 바깥쪽 여백 */
        }
    </style>
</head>
<body>
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
    <div>세 번째 박스</div>
</body>
</html>

3. 아이디 선택자: 특정 요소 하나를 꾸밀 때 사용

#unique {
    color: red;
}

<div id="unique">유니크</div>

<!DOCTYPE html>
<html>
<head>
    <title>클래스 선택자 예제</title>
    <style>
        .box {
            border: 2px solid blue; /* 테두리 */
            background-color: lightblue; /* 배경색 */
            padding: 10px; /* 안쪽 여백 */
            margin: 10px; /* 바깥쪽 여백 */
        }
        #unique-box {
            border: 2px solid red; /* 테두리 */
            background-color: pink; /* 배경색 */
            padding: 10px; /* 안쪽 여백 */
            margin: 10px; /* 바깥쪽 여백 */
        }
    </style>
</head>
<body>
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
    <div>세 번째 박스</div>
    <div id="unique-box">유일한 박스</div>
</body>
</html>

독릭 선택자: 여러 선택자 꾸미기

한 번에 여러 요소를 꾸미고 싶을 때 선택자를 콤마(,)로 연결해서 여러 요소를 꾸밀 수 있음

<!DOCTYPE html>
<html>
<head>
    <style>
        h1, p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>이 제목은 빨간색이에요.</h1>
    <p>이 문장도 빨간색이에요.</p>
</body>
</html>

관계 선택자: 선택자간 관계에 따른 꾸미기

여러 선택자간에 콤마(,)를 생략하면 부모-자식 관계로 해석

예를 들어, h1 p는 h1 안에 있는 p 요소에만 해당 스타일이 적용되게 됨

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>이 제목은 빨간색이 아니에요.</h1>
    <h1>
        <p>이 문장만 빨간색이에요.</p>
    </h1>
</body>
</html>

가상 클래스

가상 클래스는 "특별한 상태일 때만 작동하는 CSS 스타일"

평소에는 보이지 않다가, 마우스를 올리거나, 특정 조건을 만족할 때 스타일이 적용됨

예를 들어, "이 버튼에 마우스를 올리면 색을 바꿔줘!", "특별한 상황에서만 스타일을 바꿔줘!"와 같이 특별한 조건을 설정하는 것

대표적인 가상 클래스

1. hover ("마우스를 올렸을 때" 작동)

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 기본 버튼 스타일 */
        button {
            background-color: lightblue; /* 버튼 배경색은 연파란색 */
            color: black; /* 글자 색은 검정색 */
            padding: 10px 20px; /* 버튼 안쪽 여백: 위아래 10px, 양옆 20px */
            border: none; /* 테두리 없음 */
            font-size: 16px; /* 글자 크기는 16px */
            cursor: pointer; /* 마우스를 올리면 손 모양으로 변경 */
        }

        /* 마우스를 올렸을 때의 스타일 */
        button:hover {
            background-color: darkblue; /* 배경색이 어두운 파란색으로 변경 */
            color: white; /* 글자 색이 하얀색으로 변경 */
        }
    </style>
</head>
<body>
    <button>마우스를 올려보세요!</button>
</body>
</html>

2. focus ("클릭하거나, 입력창에 포커스가 맞춰질 때" 작동)

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 기본 입력창 스타일 */
        input {
            padding: 10px; /* 입력창 안쪽 여백: 위아래 10px */
            border: 2px solid gray; /* 테두리는 회색, 두께는 2px */
            outline: none; /* 클릭했을 때 기본 파란 테두리를 없앰 */
        }

        /* 입력창에 포커스가 맞춰졌을 때의 스타일 */
        input:focus {
            border-color: blue; /* 테두리 색을 파란색으로 변경 */
        }
    </style>
</head>
<body>
    <input type="text" placeholder="여기를 클릭해보세요!">
</body>
</html>

2. active ("버튼을 누르고 있는 동안" 작동)

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 기본 버튼 스타일 */
        button {
            background-color: green; /* 버튼 배경색은 초록색 */
            color: white; /* 글자 색은 하얀색 */
            padding: 10px 20px; /* 버튼 안쪽 여백: 위아래 10px, 양옆 20px */
            border: none; /* 테두리 없음 */
            font-size: 16px; /* 글자 크기는 16px */
            cursor: pointer; /* 마우스를 올리면 손 모양으로 변경 */
        }

        /* 버튼을 누르는 순간의 스타일 */
        button:active {
            background-color: darkgreen; /* 배경색이 짙은 초록색으로 변경 */
        }
    </style>
</head>
<body>
    <button>눌러보세요!</button>
</body>
</html>

CSS 적용 방법

CSS는 세 가지 방법으로 사용 가능

1. 인라인 CSS: 태그 안에 직접 스타일을 작성

<h1 style="color: blue;">파란색 제목</h1>

2. 내부 CSS: <style> 태그를 사용해서 HTML 파일의 <head> 태그 안에 스타일을 작성

<style>
    h1 {
        color: green;
        font-size: 24px;
    }
</style>

3. 외부 CSS: 별도의 .css 파일을 만들어 연결

- index.html과 같은 위치에 style.css 파일 생성

- style.css 파일에 스타일을 입력

/* styles.css */
body {
    background-color: lightblue; /* 페이지 배경색을 연파란색으로 */
}

h1 {
    color: darkblue; /* 제목 색상을 어두운 파란색으로 */
    text-align: center; /* 제목을 가운데 정렬 */
}

p {
    font-size: 18px; /* 문단 글자 크기를 18px로 설정 */
    color: darkgreen; /* 문단 글자 색상을 짙은 녹색으로 설정 */
}

- index.html에 방금 만든 style.css를 연결, <head>태그 안에 <link>태그로 연결

<!DOCTYPE html>
<html>
<head>
    <title>외부 CSS 연결 예제</title>
    <!-- 외부 CSS 파일 연결 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>CSS 연결 예제</h1>
    <p>이 페이지는 외부 CSS 파일을 사용하여 스타일링되었습니다.</p>
    <p>HTML과 CSS를 분리하면 관리가 더 편리해요!</p>
</body>
</html>

HTML의 부모 자식 관계

HTML에서 부모-자식 관계는 요소가 다른 요소 안에 포함되어 있는 구조를 뜻함

부모 요소: 다른 요소를 감싸고 있는 요소

자식 요소: 부모 요소 안에 포함된 요소

<!DOCTYPE html>
<html>
<head>
    <title>부모-자식 관계</title>
    <style>
        .parent {
            border: 2px solid blue; /* 부모 테두리 */
            padding: 10px; /* 안쪽 여백 */
            background-color: lightgray; /* 부모 배경색 */
        }

        .child {
            border: 2px solid green; /* 자식 테두리 */
            padding: 5px;
            background-color: lightgreen; /* 자식 배경색 */
            margin-top: 5px; /* 부모 안에서의 간격 */
        }
    </style>
</head>
<body>
    <div class="parent">
        부모 박스
        <div class="child">자식 박스 1</div>
        <div class="child">자식 박스 2</div>
    </div>
</body>
</html>

박스 모델

모든 HTML 요소는 기본적으로 박스 모양. 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각 가능

CSS 레이아웃은 박스 모델을 주 기반으로 하고 있음

padding

내용과 테두리 사이의 간격

단위(px, %, em 등)를 사용

padding: 값; > 모든 방향에 동일한 값 적용

padding: 위 아래 값 좌우 값; > 위와 아래, 좌우에 서로 다른 값 적용

padding: 위 값 오른쪽 값 아래 값 왼쪽 값; > 네 방향을 각각 지정

div {
    padding: 20px; /* 모든 방향에 20px */
    padding: 10px 15px; /* 위, 아래는 10px, 좌우는 15px */
    padding: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽 순서 */
}

<!DOCTYPE html>
<html>

<head>
    <title>Padding 예제</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .box {
            background-color: lightblue; /* 패딩 영역 시각적으로 보기 좋게 */
            border: 2px solid blue; /* 경계선을 추가해 패딩을 강조 */
            margin-bottom: 20px; /* 각 박스 사이 여백 */
            color: white;
        }

        /* 모든 방향에 동일한 패딩 */
        .padding-all {
            padding: 20px;
        }

        /* 위아래 10px, 좌우 15px */
        .padding-vertical-horizontal {
            padding: 10px 15px;
        }

        /* 위, 오른쪽, 아래, 왼쪽 */
        .padding-individual {
            padding: 5px 10px 15px 20px;
        }
    </style>
</head>

<body>
    <h1>Padding 적용 예제</h1>

    <!-- 모든 방향에 동일한 패딩 -->
    <div class="box padding-all">
        <p>모든 방향에 <b>20px</b> 패딩 적용</p>
    </div>

    <!-- 위아래와 좌우 패딩 다르게 적용 -->
    <div class="box padding-vertical-horizontal">
        <p>위아래는 <b>10px</b>, 좌우는 <b>15px</b> 패딩 적용</p>
    </div>

    <!-- 개별 패딩 값 적용 -->
    <div class="box padding-individual">
        <p>위: <b>5px</b>, 오른쪽: <b>10px</b>, 아래: <b>15px</b>, 왼쪽: <b>20px</b> 패딩 적용</p>
    </div>
</body>

</html>

border

테두리

border: 두께 스타일 색상;

스타일은 solid(실선), dashed(점선), dotted(점), none 등 사용 가능

div {
    border: 2px solid black; /* 두께 2px, 실선, 검정색 */
    border: 5px dashed red; /* 두께 5px, 점선, 빨간색 */
    border: none; /* 테두리 없음 */
}

<!DOCTYPE html>
<html>

<head>
    <title>Border 스타일 예제</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .box {
            width: 200px;
            height: 100px;
            margin-bottom: 20px;
            /* 박스 간 간격 */
            text-align: center;
            /* 텍스트 가로 중앙 정렬 */
            font-size: 16px;
            /* 글자 크기 */
        }

        /* 실선 테두리 */
        .border-solid {
            border: 2px solid black;
            /* 두께 2px, 실선, 검정색 */
            background-color: #f0f0f0;
            /* 배경색 */
        }

        /* 점선 테두리 */
        .border-dashed {
            border: 5px dashed red;
            /* 두께 5px, 점선, 빨간색 */
            background-color: #ffe4e1;
            /* 배경색 */
        }

        /* 테두리 없음 */
        .border-none {
            border: none;
            /* 테두리 없음 */
            background-color: #d3f9d8;
            /* 배경색 */
        }
    </style>
</head>

<body>
    <h1>Border 스타일 예제</h1>

    <!-- 실선 테두리 -->
    <div class="box border-solid">
        실선 테두리 (2px solid black)
    </div>

    <!-- 점선 테두리 -->
    <div class="box border-dashed">
        점선 테두리 (5px dashed red)
    </div>

    <!-- 테두리 없음 -->
    <div class="box border-none">
        테두리 없음 (none)
    </div>
</body>

</html>

margin

박스와 박스 사이의 간격

margin: 값; > 모든 방향에 동일한 값을 적용

margin: 위 아래 값 좌우 값; > 위와 아래, 좌우에 다른 값 적용

margin: 위 값 오른쪽 값 아래 값 왼쪽 값; > 네 방향을 각각 지정

div {
    margin: 20px; /* 모든 방향에 20px */
    margin: 10px 15px; /* 위, 아래는 10px, 좌우는 15px */
    margin: 5px 10px 15px 20px; /* 위, 오른쪽, 아래, 왼쪽 순서 */
}

<!DOCTYPE html>
<html>

<head>
    <title>Margin 스타일 예제</title>
    <style>
        /* 공통 스타일 */
        body {
            font-family: Arial, sans-serif;
        }

        .box {
            height: 100px;
            /* 박스 높이 */
            background-color: lightblue;
            /* 박스 배경색 */
            border: 2px solid black;
            /* 박스 테두리 */
            text-align: center;
            /* 텍스트 가로 중앙 정렬 */
            line-height: 100px;
            /* 텍스트 세로 중앙 정렬 */
            font-size: 16px;
            color: black;
        }

        /* 모든 방향에 동일한 margin */
        .margin-all {
            margin: 20px;
            background-color: #e0f7fa;
            /* 배경색 */
        }

        /* 위, 아래는 10px, 좌우는 15px */
        .margin-vertical-horizontal {
            margin: 10px 15px;
            background-color: #ffe0b2;
            /* 배경색 */
        }

        /* 위, 오른쪽, 아래, 왼쪽 순서 */
        .margin-individual {
            margin: 5px 10px 15px 20px;
            background-color: #dcedc8;
            /* 배경색 */
        }
    </style>
</head>

<body>
    <h1>Margin 스타일 예제</h1>

    <!-- 모든 방향에 동일한 margin -->
    <div class="box margin-all">
        margin: 20px;
    </div>

    <!-- 위, 아래는 10px, 좌우는 15px -->
    <div class="box margin-vertical-horizontal">
        margin: 10px 15px;
    </div>

    <!-- 위, 오른쪽, 아래, 왼쪽 순서 -->
    <div class="box margin-individual">
        margin: 5px 10px 15px 20px;
    </div>
</body>

</html>

margin이 겹치는 이유: 마진 상쇄(Margin Collapsing)

HTML과 CSS에서 두 요소의 상하 마진(위쪽과 아래쪽의 마진)이 서로 만나게 되면, 두 마진이 겹치지 않고 더 큰 값 하나만 적용됨

이를 마진 상쇄(Margin Collapsing)라고 함.

마진 상쇄 방지 방법

요소 사이에 다른 콘텐츠 추가하기

padding, border 또는 다른 요소를 추가하면 상쇄가 발생하지 않음

<div style="margin-bottom: 20px; background-color: lightblue; padding-bottom: 1px;">박스 1</div>
<div style="margin-top: 30px; background-color: lightgreen;">박스 2</div>

플렉스 박스(Flexbox)나 그리드(Grid) 사용

Flexbox나 Grid를 사용하면 마진 상쇄가 발생하지 않음

<div style="display: flex; flex-direction: column;">
    <div style="margin-bottom: 20px; background-color: lightblue;">박스 1</div>
    <div style="margin-top: 30px; background-color: lightgreen;">박스 2</div>
</div>

overflow 속성 설정

부모 요소에 overflow: hidden; 또는 overflow: auto;를 설정하면 자식 요소 간 마진 상쇄가 방지됨

<div style="overflow: hidden; background-color: lightblue; margin-top: 30px;">
    <p style="margin-top: 20px; background-color: lightgreen;">텍스트</p>
</div>

display: inline-block; 사용

블록 요소 대신 display: inline-block; 으로 변경하면 상쇄를 방지할 수 있음

width

한 요소의 너비

고정 값: 단위를 사용 (예: px, em, %)

자동 값: auto는 부모 요소의 크기를 기준으로 계산

div {
    width: 300px; /* 너비를 300px로 설정 */
    width: 50%; /* 부모 요소의 50% 너비 */
    width: auto; /* 기본 값: 자동 계산 */
}

background-color

요소의 콘텐츠와 padding의 배경 색

색상 이름 (예: red, blue)

16진수 색상 코드 (예: #ff0000 > 빨강)

RGB 또는 RGBA (예: rgb(255, 0, 0), rgba(255, 0, 0, 0.5) > 반투명 빨강)

div {
    background-color: lightblue; /* 연파란색 */
    background-color: #ffcc00; /* 16진수 노란색 */
    background-color: rgba(0, 255, 0, 0.3); /* 투명한 초록색 */
}

color

한 요소의 콘텐츠 색 (일반적으로 글자색)

색상 이름, 16진수, RGB, RGBA 사용 가능 (배경색과 동일)

p {
    color: black; /* 검정색 글자 */
    color: #333333; /* 16진수 회색 글자 */
    color: rgb(255, 0, 0); /* 빨간색 글자 */
}

text-align

텍스트 정렬 방식

left: 왼쪽 정렬 (기본값)

right: 오른쪽 정렬

center: 가운데 정렬

justify: 양쪽 정렬 (양 끝을 맞춤)

p {
    text-align: center; /* 텍스트를 가운데 정렬 */
    text-align: right; /* 텍스트를 오른쪽 정렬 */
    text-align: justify; /* 텍스트를 양쪽 정렬 */
}

<!DOCTYPE html>
<html>

<head>
    <title>Text Align 예제</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .text-box {
            border: 1px solid #ddd; /* 박스 테두리 */
            margin-bottom: 20px; /* 박스 간 간격 */
            padding: 10px; /* 내부 여백 */
            background-color: #f9f9f9; /* 박스 배경색 */
        }

        /* 텍스트 가운데 정렬 */
        .text-center {
            text-align: center;
        }

        /* 텍스트 오른쪽 정렬 */
        .text-right {
            text-align: right;
        }

        /* 텍스트 양쪽 정렬 */
        .text-justify {
            text-align: justify;
        }
    </style>
</head>

<body>
    <h1>Text Align 예제</h1>

    <!-- 텍스트 가운데 정렬 -->
    <div class="text-box text-center">
        <p>이 문장은 <strong>가운데 정렬</strong>되어 있습니다. 모든 텍스트가 박스의 중앙에 배치됩니다.</p>
    </div>

    <!-- 텍스트 오른쪽 정렬 -->
    <div class="text-box text-right">
        <p>이 문장은 <strong>오른쪽 정렬</strong>되어 있습니다. 모든 텍스트가 박스의 오른쪽 끝에 배치됩니다.</p>
    </div>

    <!-- 텍스트 양쪽 정렬 -->
    <div class="text-box text-justify">
        <p>이 문장은 <strong>양쪽 정렬</strong>되어 있습니다. 텍스트가 양쪽 끝에 고르게 맞춰지며, 줄 사이 간격이 균등하게 조정됩니다.</p>
    </div>
</body>

</html>

기초 css 기법

텍스트 가로 중앙 맞추기 (text-align: center; 속성을 사용)

<!DOCTYPE html>
<html>
<head>
    <title>텍스트 가로 중앙 맞추기</title>
    <style>
        .center-text {
            text-align: center; /* 텍스트를 가로 중앙 정렬 */
            border: 1px solid black; /* 박스 테두리 */
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="center-text">
        이 텍스트는 가로로 중앙에 있어요! 😊
    </div>
</body>
</html>

텍스트 세로 중앙 맞추기 (박스의 높이와 line-height를 같게 설정하면 텍스트가 세로로 중앙에 맞춰짐)

<!DOCTYPE html>
<html>
<head>
    <title>텍스트 세로 중앙 맞추기 (line-height)</title>
    <style>
        .center-vertical {
            height: 100px; /* 박스 높이 */
            line-height: 100px; /* 텍스트 높이를 박스 높이와 같게 설정 */
            border: 1px solid black; /* 박스 테두리 */
            text-align: center; /* 가로 중앙 정렬 */
        }
    </style>
</head>
<body>
    <div class="center-vertical">
        세로 중앙! 😊
    </div>
</body>
</html>

폰트 변경하는 법

font-family 속성을 이용하여 변경 가능

font-family: "폰트 이름", "대체 폰트", generic-family;

"폰트 이름": 사용할 폰트 이름

"대체 폰트": 첫 번째 폰트를 사용할 수 없는 경우 사용할 폰트

generic-family: 기본 폰트 계열 (serif, sans-serif, monospace 등)

<!DOCTYPE html>
<html>
<head>
    <title>기본 폰트 변경</title>
    <style>
        body {
            font-family: "Arial", "Helvetica", sans-serif; /* 폰트를 Arial로 설정 */
        }
    </style>
</head>
<body>
    <h1>이 문장은 Arial 폰트입니다!</h1>
</body>
</html>

Google Fonts 사용하는 법

<!DOCTYPE html>
<html>

<head>
    <title>Google Fonts 사용</title>
    <!-- Google Fonts 링크 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Serif+KR:wght@200..900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: "Black Han Sans", sans-serif;
            /* Google Fonts의 Roboto 사용 */
        }
    </style>
</head>

<body>
    <h1>이 문장은 Black Han Sans 폰트입니다!</h1>
</body>

</html>

폰트 스타일 변경

font-family: 폰트 종류 지정

font-size: 폰트 크기 지정 (단위: px, %, em, rem 등)

font-weight: 글자의 두께 설정 (normal, bold, 숫자 값)

font-style: 글자 스타일 (normal, italic, oblique)

line-height: 줄 간격 (행간)

letter-spacing: 글자 간격 (자간)

text-transform: 대소문자 변환 (uppercase, lowercase, capitalize)

body {
    font-family: "Black Han Sans", sans-serif;
    font-size: 16px; /* 폰트 크기 */
    font-weight: bold; /* 폰트 두께 */
    font-style: italic; /* 폰트 스타일 (기울임) */
    line-height: 1.5; /* 줄 간격 */
}

디스플레이 속성

display 속성은 HTML 요소가 페이지에서 어떻게 배치되고 보여질지 결정함

각 값에 따라 요소의 동작 방식과 배치가 달라짐

block

요소가 블록(block)처럼 동작

한 줄 전체를 차지하고, 다른 요소는 다음 줄로 밀려남

<div>, <p>, <h1> 같은 태그가 기본 속성으로 가지고 있음

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            display: block; /* 블록 요소 */
            background-color: lightblue;
            width: 200px;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div>첫 번째 블록 요소</div>
    <div>두 번째 블록 요소</div>
</body>
</html>

inline

요소가 인라인(inline)처럼 동작

내용 크기만큼 공간을 차지하고, 다른 요소와 같은 줄에 배치됨

<span>, <a>, <img>같은 태그가 기본 속성으로 가지고 있음

<!DOCTYPE html>
<html>
<head>
    <style>
        span {
            display: inline; /* 인라인 요소 */
            background-color: lightgreen;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p>
        문장 중에 <span>첫 번째 인라인 요소</span>와
        <span>두 번째 인라인 요소</span>가 들어갑니다.
    </p>
</body>
</html>

inline-block

요소가 인라인(inline)처럼 보이지만, 블록(block)처럼 동작

인라인처럼 같은 줄에 배치되지만, 블록 요소처럼 크기와 여백(padding, margin)을 가질 수 있음

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            display: inline-block; /* 인라인-블록 요소 */
            background-color: lightcoral;
            width: 100px;
            height: 50px;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
</body>
</html>

none

요소를 숨김

화면에 보이지 않으며, 레이아웃에서도 공간을 차지하지 않음

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden {
            display: none; /* 숨김 */
        }
    </style>
</head>
<body>
    <p>이 문장은 보입니다.</p>
    <p class="hidden">이 문장은 숨겨져 있습니다.</p>
</body>
</html>

포지셔닝 속성

포지셔닝 속성은 요소가 페이지 안에서 어떻게 배치될지를 결정함

position: static

기본값으로, 요소는 HTML 문서의 순서대로 배치됨

top, right, bottom, left 값이 적용되지 않음

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            position: static; /* 기본값 */
            background-color: lightblue;
            padding: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>첫 번째 상자 (static)</div>
    <div>두 번째 상자 (static)</div>
</body>
</html>

position: relative

요소가 기본 위치에 있고, top, right, bottom, left를 사용해 기준 위치에서 이동

요소의 공간은 원래 위치를 유지함

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            position: relative; /* 상대 위치 */
            top: 20px; /* 원래 위치에서 아래로 20px 이동 */
            left: 30px; /* 원래 위치에서 오른쪽으로 30px 이동 */
            background-color: lightgreen;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>상대적으로 이동한 상자</div>
</body>
</html>

position: absolute

absolute를 적용한 요소는 기본적으로 문서의 처음부터(즉, body 기준) 배치됨

하지만, 상위 요소 중에서 position이 relative, absolute, fixed, 또는 sticky로 설정된 조상이 있다면, 그 조상을 기준으로 위치가 잡힘

요소는 문서의 기본 배치 흐름에서 벗어나고, HTML 문서의 흐름에서 공간을 차지하지 않음

<!DOCTYPE html>
<html>
<head>
    <style>
        .absolute {
            position: absolute; /* 절대 위치 */
            top: 50px;
            left: 50px;
            background-color: lightgreen;
            padding: 10px;
        }
        .static {
            position: static; /* 기본 위치 */
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="absolute">절대 위치 상자</div>
    <div class="static">이 상자는 첫 번째 상자의 아래에 있습니다.</div>
</body>
</html>

fixed

요소가 브라우저 화면을 기준으로 고정됨

스크롤을 해도 요소는 같은 위치에 남아 있음

요소는 문서의 기본 배치 흐름에서 벗어나고, HTML 문서의 흐름에서 공간을 차지하지 않음

<!DOCTYPE html>
<html>
<head>
    <style>
        .fixed-box {
            position: fixed; /* 화면에 고정 */
            top: 10px; /* 화면 위에서 10px */
            right: 10px; /* 화면 오른쪽에서 10px */
            background-color: lightcoral;
            padding: 20px;
        }
        p {
	         height: 800px;
        }
    </style>
</head>
<body>
    <div class="fixed-box">고정된 상자</div>
    <p>스크롤을 내려도 상자는 고정된 위치에 있습니다.</p>
    <p>스크롤 테스트용 텍스트</p>
    <p>스크롤 테스트용 텍스트</p>
    <p>스크롤 테스트용 텍스트</p>
</body>
</html>

부모-자식 관계에서의 포지셔닝

부모가 relative이면, 자식이 absolute일 경우 부모를 기준으로 배치됨

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative; /* 부모를 기준으로 자식이 배치됨 */
            top: 100px; /* 부모를 HTML 문서에서 아래로 100px 이동 */
            left: 100px; /* 부모를 HTML 문서에서 오른쪽으로 100px 이동 */
            background-color: lightblue;
            width: 200px;
            height: 200px;
            top: 50px;
        }
        .child {
            position: absolute; /* 부모(.parent)를 기준으로 배치 */
            bottom: 5px;
				    right: 5px;
            background-color: coral;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        부모 (relative)
        <div class="child">자식 (absolute)</div>
    </div>
</body>
</html>

부모가 relative, 자식이 relative인 경우, 자식 자신의 원래 위치를 기준으로 이동

부모의 이동은 자식 요소의 원래 위치에 영향을 주지 않음
자식 요소는 자신의 원래 위치에서 아래로 50px, 오른쪽으로 30px 이동

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative; /* 부모: 상대 위치 */
            top: 100px; /* 부모를 HTML 문서에서 아래로 100px 이동 */
            left: 100px; /* 부모를 HTML 문서에서 오른쪽으로 100px 이동 */
            background-color: lightblue;
            width: 200px;
            height: 200px;
            top: 50px;
        }
        .child {
            position: relative; /* 자식: 자신의 원래 위치 기준으로 이동 */
            bottom: 5px;
				    right: 5px;
            background-color: coral;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        부모 (relative)
        <div class="child">자식 (relative)</div>
    </div>
</body>
</html>

부모가 absolute, 자식이 absolute인 경우, 부모를 기준으로 배치

부모는 HTML 문서의 시작점에서 top: 100px, left: 100px만큼 이동
자식은 부모를 기준으로 top: 50px, left: 50px만큼 이동

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: absolute; /* 부모가 절대 위치 */
            top: 100px;
            left: 100px;
            background-color: lightblue;
            width: 200px;
            height: 200px;
        }
        .child {
            position: absolute; /* 부모(.parent)를 기준으로 배치 */
            bottom: 5px;
				    right: 5px;
            background-color: coral;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="parent">
        부모 (absolute)
        <div class="child">자식 (absolute)</div>
    </div>
</body>
</html>

부모 위치	자식 위치	기준
static	static	HTML 문서 순서대로 배치
static	absolute	HTML 문서의 시작점 기준
relative	absolute	부모를 기준으로 배치
absolute	absolute	부모를 기준으로 배치

display: flex와 display: grid

flex와 grid는 요소를 배치하고 정렬하는데 사용하는 레이아웃 도구

부모 요소에 display: flex, 혹은 display: grid 속성을 주면 그 안의 자식 요소들이 영향을 받음

요소들을 가로 또는 세로 방향으로 정렬할 때, 중앙 정렬, 간격 조정, 배치 제어가 가능

flex

요소를 가로 또는 세로로 정렬하는 유연한 레이아웃(flexbox)로 만듦

부모 요소에 display: flex;를 설정하면, 자식 요소들이 한 줄 또는 여러 줄로 정렬됨

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex; /* 플렉스 컨테이너 활성화 */
            flex-direction: row; /* 가로 방향으로 정렬 */
            justify-content: space-between; /* 자식 요소 간 간격 균등 */
            align-items: center; /* 세로 방향 가운데 정렬 */
            background-color: lightblue;
            padding: 20px;
        }
        .box {
            background-color: coral;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

grid

요소를 그리드 레이아웃(grid layout)으로 만듦

부모 요소에 display: grid;를 설정하면, 자식 요소들을 행과 열로 정렬함

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid; /* 그리드 컨테이너 */
            grid-template-columns: 100px 100px 100px; /* 3개의 열 */
            gap: 10px; /* 요소 간의 간격 */
        }
        .grid-item {
            background-color: lightgray;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
    </div>
</body>
</html>

(위 코드블럭에 따르면 5개의 div가 행과 열로 배치됨)

'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글

[TIL] 24.12.12(목) (1)	2024.12.12
[TIL] 24.12.11(수) (0)	2024.12.11
[TIL] 24.12.09(월) (2)	2024.12.09
[TIL] 24.12.05(목) (2)	2024.12.05
[TIL] 24.12.04(수) (0)	2024.12.04

블로그

[TIL] 24.12.10(화)

웹 퍼블리싱(2)

'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글

티스토리툴바

[TIL] 24.12.10(화)

웹 퍼블리싱(2)

'[내일배움캠프] 프로덕트 디자인 8기 > TIL(Today I Learned)' 카테고리의 다른 글

'[내일배움캠프] 프로덕트 디자인 8기/TIL(Today I Learned)' Related Articles

티스토리툴바