집 >웹 프론트엔드 >CSS 튜토리얼 >CSS는 어렵지 않습니다(기본 사항이 누락되었을 뿐입니다) - 기초 익히기(2부)

CSS는 어렵지 않습니다(기본 사항이 누락되었을 뿐입니다) - 기초 익히기(2부)

Susan Sarandon원래의: 2024-12-17 06:23:24953검색

지난 기사에 댓글을 달아주신 모든 분들께 감사드립니다. 정말 큰 의미가 있습니다. 이 글을 통해 한두 가지 교훈을 얻으시길 바랍니다.

이 기사에서는 CSS의 두 가지 기본 개념인 위치 지정과 레이아웃을 살펴보겠습니다. 위치 지정과 레이아웃은 시각적으로 매력적이고 기능적인 웹페이지를 만드는 핵심입니다. 이러한 개념을 익히면 사용자 경험을 향상시키는 반응형 디자인을 만들 수 있습니다. 마지막에는 이러한 기술을 사용하여 전문가처럼 웹페이지를 구성하는 방법을 알게 될 것입니다.

- 위치 및 레이아웃

CSS 위치 지정은 요소가 웹페이지에 배치되는 방식을 제어합니다. 위치 지정은 해당되는 경우 위쪽, 아래쪽, 왼쪽 및 오른쪽 오프셋 값의 영향을 받습니다. 5가지 주요 CSS 위치 값이 있습니다.

1. 정적: 모든 HTML 요소는 기본적으로 정적으로 배치됩니다. 이는 단순히 요소가 변경되지 않고 이동하지 않으며 위쪽, 아래쪽, 왼쪽 및 오른쪽 오프셋 값의 영향을 받지 않음을 의미합니다.

2. 상대: 요소는 일반 위치를 기준으로 배치됩니다.

3. 절대: 요소는 가장 가까운 상위(상위) 또는 뷰포트를 기준으로 배치됩니다.

4. 고정: 요소는 뷰포트를 기준으로 위치가 지정되며 스크롤하는 동안 고정된 상태로 유지됩니다.

5. 고정: 고정 위치 지정을 사용하면 요소가 스크롤 위치와 오프셋 값 위쪽, 아래쪽, 왼쪽 및 오른쪽을 기준으로 상대 위치와 고정 위치 간에 전환할 수 있습니다.

아래는 CSS 위치 지정을 설명하는 그림입니다.

CSS Is Not Hard(You

그림에 생기를 불어넣는 데 도움이 된 코드는 다음과 같습니다. 자유롭게 복사하고 수정해 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

— 잠시 멈추고 심호흡을 한 후 진행하세요!!—
- CSS 레이아웃

1. Flexbox: 항목을 단일 축(가로 및 세로)으로 배치하는 데 사용되는 1차원 레이아웃 방법입니다.

Flexbox의 기능

display: flex - 컨테이너에 대한 flexbox를 생성합니다.
align-items: center - 컨테이너의 수직 정렬을 제어합니다.
justify-content: space-between - 컨테이너의 가로 정렬을 제어합니다.
gap: 여백 없이 플렉스 항목 사이에 간격을 추가합니다.

간단한 네비게이션 바의 전후 모습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

결과:

CSS Is Not Hard(You

2. 그리드: 행과 열을 만들 때 사용하는 2차원 레이아웃 방식입니다.

특징

디스플레이: 그리드 - 컨테이너용 그리드를 생성합니다.
Grid-template-columns/grid-template-rows - 컨테이너의 행 또는 열을 정의합니다.
반복(2, 1fr) - 너비가 같은 2개의 열을 생성합니다.
gap: 10px- 그리드 항목 사이에 간격을 추가합니다.

다음은 Unsplash에서 찾은 고양이 사진의 전후입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

결과:

CSS Is Not Hard(You

비교표

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

위치와 레이아웃은 CSS의 기본입니다. 언제, 어떻게 사용하는지 이해하면 스타일링이 더욱 쉬워질 뿐만 아니라 더욱 즐겁고 효율적이 됩니다. 이 기사에서는 Flexbox 및 Grid를 시작하는 데 도움이 되지만, 이들의 고급 기능, 팁 및 요령을 탐색하는 보다 심층적인 가이드를 곧 게시할 예정입니다. 계속 지켜봐 주시기 바랍니다!

이제 CSS 기초 익히기가 끝났습니다. 제가 이 글을 쓰면서 즐거웠던 만큼 여러분도 이 글을 재미있게 읽으셨기를 바랍니다. 하지만 헤어지기 전에 여러분의 의견을 듣고 싶습니다.

Flexbox와 Grid 중 어떤 CSS 레이아웃 방법을 프로젝트에 선호하시나요? 왜요?

아래 댓글로 여러분의 생각을 자유롭게 공유해 주세요.

이제 안녕!!!!

위 내용은 CSS는 어렵지 않습니다(기본 사항이 누락되었을 뿐입니다) - 기초 익히기(2부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html Static switch for while copy default this display position viewport column flex table Foundation

성명：

이전 기사：CSS `calc()` 값을 효과적으로 디버깅하려면 어떻게 해야 합니까?다음 기사：CSS `calc()` 값을 효과적으로 디버깅하려면 어떻게 해야 합니까?