Post

CSS) position_ fixed 속성에 대한 모든 것

Posted
Preview Image
By parksohyunnn 6 min read

안녕하세요, 웹 개발자 여러분! 오늘은 CSS의 중요한 속성 중 하나인 position: fixed; 속성에 대해 깊이 있게 알아보는 시간을 가져보겠습니다. 이 글을 통해 position: fixed;의 정의, 사용 방법, 기본값, 그리고 실전 예제까지 모두 다룰 예정이니 끝까지 함께 해주세요!

position: fixed; 정의

CSS에서 position 속성은 요소의 배치 방식을 정의합니다. 그 중에서도 position: fixed;는 화면에 고정된 위치에 요소를 배치하는 데 사용됩니다. 스크롤을 해도 고정된 위치에 머무르게 할 수 있어 사용자 인터페이스(UI) 디자인에 매우 유용합니다.

사용 방법

position: fixed; 속성은 HTML 요소에 직접 적용할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11

.fixed-element {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 50px;
    background-color: #333;
    color: white;
    text-align: center;
    line-height: 50px;
}

그리고 HTML 파일에서 이렇게 사용할 수 있습니다:

1

<div class="fixed-element">고정된 요소</div>

위 코드는 브라우저 창의 오른쪽 상단에 고정된 200x50 픽셀 크기의 요소를 생성합니다. 페이지를 스크롤해도 이 요소는 항상 오른쪽 상단에 고정되어 있습니다.

기본값

position 속성의 기본값은 static입니다. 즉, 기본적으로 모든 HTML 요소는 문서의 정상적인 흐름에 따라 배치됩니다. fixed 속성을 사용하면 문서 흐름과는 독립적으로 고정된 위치에 배치됩니다.

언제 많이 쓰이는가?

position: fixed; 속성은 다양한 상황에서 매우 유용합니다. 그중 몇 가지 대표적인 예를 살펴보겠습니다:

  • 고정된 네비게이션 바: 사용자가 페이지를 스크롤할 때도 항상 상단에 고정된 네비게이션 바를 만들 때 사용됩니다.
  • 백투탑 버튼: 페이지 하단에 도달했을 때 나타나는 “맨 위로” 버튼을 만들 때 유용합니다.
  • 모달 창: 화면에 고정된 모달 창을 만들 때 사용됩니다.
  • 실전 예제: 고정된 네비게이션 바 만들기 이제 position: fixed; 속성을 사용하여 고정된 네비게이션 바를 만들어보겠습니다. 이 예제는 웹 사이트의 상단에 항상 고정되어 있는 네비게이션 바를 구현합니다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고정 네비게이션 바</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <ul>
            <li><a href="#home">홈</a></li>
            <li><a href="#about">소개</a></li>
            <li><a href="#services">서비스</a></li>
            <li><a href="#contact">연락처</a></li>
        </ul>
    </nav>
    <div class="content">
        <section id="home">
            <h1>홈 섹션</h1>
            <p>여기에 홈 섹션 내용이 들어갑니다.</p>
        </section>
        <section id="about">
            <h1>소개 섹션</h1>
            <p>여기에 소개 섹션 내용이 들어갑니다.</p>
        </section>
        <section id="services">
            <h1>서비스 섹션</h1>
            <p>여기에 서비스 섹션 내용이 들어갑니다.</p>
        </section>
        <section id="contact">
            <h1>연락처 섹션</h1>
            <p>여기에 연락처 섹션 내용이 들어갑니다.</p>
        </section>
    </div>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.navbar {
    position: fixed; /* 고정 위치 설정 */
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px 0;
    z-index: 1000; /* 다른 요소들보다 위에 배치 */
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.navbar ul li {
    display: inline;
    margin: 0 15px;
}

.navbar ul li a {
    color: white;
    text-decoration: none;
}

.content {
    padding-top: 60px; /* 네비게이션 바 높이만큼 패딩 */
}

section {
    padding: 20px;
    margin: 20px 0;
}

section h1 {
    margin-top: 0;
}

마무리

이렇게 해서 position: fixed; 속성을 이용해 고정된 네비게이션 바를 만들어 보았습니다. position: fixed; 속성은 고정된 위치에 요소를 배치하는 데 매우 유용하며, 사용자 경험을 향상시키는 데 큰 도움을 줍니다.

이 속성을 이용하여 더욱 멋진 웹사이트를 만들어 보세요! 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

이상으로 CSS position: fixed; 속성에 대한 블로그 글을 마칩니다. 다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github