Multi Developer SuHo

CSS 디스플레이(Display) && 포지션(Position) 본문

html5+CSS3

CSS 디스플레이(Display) && 포지션(Position)

Dreaming Developer Student 2024. 3. 8. 15:46
SMALL

안녕하세요~ 요즘 활동이 빈번한 점 양해부탁드립니다. 최근 개강하면서 새로운 마음과 목표를 정하다보니 블로그에 글을 남기는게 까먹기도 하고 그러네요 ㅠㅠ  최근 다른 언어도 공부중이기도 합니다.  그럼 본론으로 넘어가겠습니다~ 
오늘은 CSS 디스플레이(Display)와 포지션(Position)에 대해 알아보겠습니다. 

글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.

https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


먼저 디스플레이 속성입니다.
display 속성은 HTML 요소가 문서 내에서 어떻게 표시되어야 하는지를 결정하는 중요한 속성입니다. 이 속성은 요소를 블록 레벨 요소로 만들 것인지, 인라인 레벨 요소로 만들 것인지, 혹은 다른 표시 방법을 사용할 것인지를 정합니다. 
쉽게 말해 요소가 화면에서 어떻게 표현되는가, 어떻게 위치하는 가를 지정하는 속성이라고 보시면 됩니다. 
다음은 디스플레이 속성에 대한 내용입니다.
1. block: 요소를 블록 레벨 요소로 만듭니다. 블록 레벨 요소는 새로운 줄에서 시작하고, 가능한 만큼의 너비를 차지합니다. <div>, <p>와 같은 요소들이 기본적으로 블록 레벨 요소입니다.
2. inline: 요소를 인라인 레벨 요소로 만듭니다. 인라인 레벨 요소는 새로운 줄에서 시작하지 않고, 필요한 만큼의 너비만을 차지합니다. <span>, <a>와 같은 요소들이 기본적으로 인라인 레벨 요소입니다.
3. inline-block: 요소는 인라인 레벨 요소처럼 동작하지만, 블록 레벨 요소의 속성(예: 너비와 높이 설정)을 가질 수 있습니다.
4. none: 요소가 화면에 표시되지 않습니다. 이때, 요소는 문서 레이아웃에서 완전히 제거되며, 공간도 차지하지 않습니다.
5. flex: 요소를 플렉스 컨테이너로 만듭니다. 이는 플렉스 아이템들을 효율적으로 정렬하기 위한 모던한 방법입니다. 플렉스박스 레이아웃은 반응형 디자인에 매우 유용합니다.
6. grid: 요소를 그리드 컨테이너로 만듭니다. CSS 그리드 레이아웃은 2차원 레이아웃을 생성하기 위한 강력한 방법입니다. 복잡한 레이아웃도 비교적 쉽게 구현할 수 있습니다.

이 속성중에서  몇가지만 예를 들어 설명해보겠습니다. 

기본 소스코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 디스플레이 & 포지션  </title>
  <style>
    div {
      width: 120px;
      height: 120px;
      text-align: center;
      border: 5px groove black;
      background-color: rgb(156, 241, 0);
    
    }
  </style>
</head>
<body>
  <div>틈새라면</div>
  <div>신라면</div>
  <div>진라면</div>
  <div>열라면</div>
</body>
</html>

 

 

실행결과를 보면  4개의 요소들이 블록 레벨 요소이기 때문에  따로 디스플레이 속성을 할당해주지 않아도 기본적으로 블록으로 구성되어 각각 새로운 라인에서 나타나는 것을 확인하실 수 있습니다.

1. 디스플레이 속성 none 을 추가하여 소스코드에 적용한 결과입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 디스플레이 & 포지션  </title>
  <style>
    div {
      width: 120px;
      height: 120px;
      text-align: center;
      border: 5px groove black;
      background-color: rgb(156, 241, 0);
      display: none;
    }
  </style>
</head>
<body>
  <div>틈새라면</div>
  <div>신라면</div>
  <div>진라면</div>
  <div>열라면</div>
</body>
</html>

디스플레이 속성을 none으로 지정한 결과

이렇게 none 속성을 할당하면 화면에 아무것도  표시되지 않습니다.

2. inline 속성은 새로운 라인에서 시작하지 않고, 필요한 만큼의 너비만을 차지합니다.
여기서 inline 속성은 블록 레벨 요소의 다음과 같은 특징을 잃게 됩니다.
1. 너비와 높이 2. 상하 여백(margin)과 패딩(padding), 3 줄 바꿈 


다음은 inline 속성을 할당한 소스코드와  실행결과입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 디스플레이 & 포지션  </title>
  <style>
    div {
      width: 120px;
      height: 120px;
      text-align: center;
      border: 5px groove black;
      background-color: rgb(156, 241, 0);
      display: inline;
    }
  </style>
</head>
<body>
  <div>틈새라면</div>
  <div>신라면</div>
  <div>진라면</div>
  <div>열라면</div>
</body>
</html>

 



3, inline-block 

inline-block 으로 속성을 지정하면 외부적으로는 인라인 요소처럼 동작하지만, 내부적으로는 블록 레벨 요소처럼 동작합니다. 쉽게 말해  줄 바꿈 없이 다른 인라인 요소들과 같은 라인에 위치하지만,  width, height 속성들을 적용할 수 있습니다.


포지션(Position)

CSS에서 포지션(position) 속성은 요소의 위치를 어떻게 결정할지를 정의합니다. 

 

포지션 속성을 사용할 때는 구체적인 요소의 위치를 지정하기 위해서 top, left, right, bottom 속성과 함께 사용할 수 있습니다. 
대표적인 포지션 속성으로는 5가지가 있습니다. 이중에서 static, relative, absolute, fixed 정도만 알아주셔도 좋을 것 같습니다.
1. static: 기본 값입니다. 요소들은 문서의 흐름에 따라 자연스럽게 배치됩니다. top, right, bottom, left 속성이 적용되지 않습니다.
2. relative: 요소가 원래 있어야 할 위치를 기준으로 이동합니다. top, right, bottom, left 속성을 사용하여 이동 거리를 지정할 수 있습니다. 원래 자리는 보존되어 다른 요소들에 영향을 주지 않습니다.
3. absolute: 요소가 문서 흐름에서 제거되고, 가장 가까운 위치 지정이 된(즉, position 속성이 static이 아닌) 조상 요소에 대해 상대적으로 배치됩니다. 조상 중 위치 지정된 요소가 없으면 <html> 요소에 대해 상대적으로 배치됩니다. top, right, bottom, left 속성을 사용하여 위치를 조정할 수 있습니다.
4. fixed: 요소가 문서 흐름에서 제거되고, 브라우저 창을 기준으로 위치가 고정됩니다. 스크롤을 해도 같은 위치에 남아 있습니다. 마찬가지로 top, right, bottom, left 속성으로 위치를 지정할 수 있습니다.
5. sticky: 요소가 스크롤에 따라 static과 fixed 포지셔닝 사이를 전환합니다. 스크롤 위치에 따라 요소가 특정 위치에 "붙어있는" 것처럼 동작합니다. 이 역시 top, right, bottom, left 속성으로 "붙는" 위치를 조정할 수 있습니다.


이중에서 몇가지 속성을 예시로 들어 소스코드와 함께 설명해드리겠습니다. 


Fixed 속성을 사용한 소스코드입니다.
Fixed 속성은 고정 위치를 의미하고, 뷰포트를 기준으로 위치를 지정합니다.  fixed로 지정된 요소들은 웹 페이지의 사이즈가 변하거나 스크롤이 생성되도 고정적인 위치에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Static Position 사용예시</title>
    <style>
         .fixed{
            position: fixed; /* 고정 위치를 설정 */
            bottom: 20px; /* 하단에서 20px 떨어진 위치 */
            right: 20px; /* 오른쪽에서 20px 떨어진 위치 */
            background-color: #4CAF50; /* 배경 색상 */
            color: white; /* 글자 색상 */
            padding: 10px 20px; /* 패딩 설정 */
            border: none; /* 테두리 없음 */
        }

        .content {
            height: 2000px; /* 내용을 길게 만들어 스크롤이 생기게 함 */
        }
    </style>
</head>
<body>

<div class="content">
    <p>스크롤을 내려보세요. 버튼은 고정된 위치에 있을 것입니다.</p>
</div>

<button class="fixed">고정된 버튼</button>
</body>
</html>

 


소스코드를 적용한 결과입니다. 사용자가 웹 페이지를 아래로 스크롤할 때 "고정된 버튼"이 항상 같은 위치에 고정되어  화면에 나타는 것을 확인할 수 있습니다.

다음은 Relative 속성입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Relative Example</title>
  <style>
    * {
      margin: 5px;
      padding: 5px;
      box-sizing: content-box;

    }

    .title {
      position: relative;
      top: 25px;
      bottom: 30px;
    }
  </style>
</head>
<body>
     <div class="menu"></div>
     <div class="title">지금부터 시작하겠습니다.</div>
     <div class="content"></div>
</body>
</html>


이렇게 현재 위치에서 지정된 오프셋 만큼 상대적으로 위치하는 것을 보실 수 있습니다.

마지막으로  absolute 속성입니다.
absolute 속성은 relative 속성과 반대로 절대적인 위치에서 나타납니다. 이는 요소가 가장 가까운 위치 지정된 조상 요소에 대해 상대적으로 배치된다는 것을 의미합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Relative Example</title>
  <style>
    .relative-container {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: lightblue;
    }
    .absolute-div {
        position: absolute;
        top: 40px; 
        right: 50px; 
        width: 100px;
        height: 100px;
        background-color: lightcoral;
    }
</style>
</head>
<body>

<div class="relative-container">
<div class="absolute-div">절대 위치 absolute</div>
</div>
</body>
</html>

실행한 결과  외부 <div> position : relative; 로  설정되어 내부 <div> 요소의 절대적  위치 배치에 대한 기준점 역할을 합니다. 내부 <div> 요소는  absolute 속성과 함께 top, right 속성을 사용하여, 부모 요소 내에서 상단으로부터 40px, 오른쪽으로부터 50px 떨어진 위치에 배치됩니다. 

이상으로 디스플레이와 포지션 내용이었습니다. 저도 이해하는데 어려운 부분이 있었고,  참고용으로 봐주셨으면 합니다. 감사합니다. 

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS 박스 모델(Box Model) && 박스 사이즈(box-sizing)  (0) 2024.03.03
CSS 여백과 테두리 스타일 적용  (0) 2024.02.29
CSS 배경에 적용할 수 있는 속성(Background-Style)  (0) 2024.02.29
CSS 가상 선택자(Pseudo-selector)  (0) 2024.02.24
CSS 링크(link), 리스트 스타일(list-style)  (0) 2024.02.24
'html5+CSS3' Related Articles more