CSS는 어렵지 않습니다(기본 사항이 누락되었을 뿐입니다)

집

웹 프론트엔드

CSS 튜토리얼

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

Susan Sarandon

Dec 17, 2024 am 06:23 AM

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

이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.