CodeGym /자바 코스 /Frontend SELF KO /포지셔닝 유형

포지셔닝 유형

Frontend SELF KO

레벨 21 , 레슨 0

사용 가능

1.1 static 포지셔닝

CSS에서 포지셔닝은 엘리먼트들이 웹페이지에 어떻게 배치되는지를 결정해. 여러 가지 포지셔닝 타입을 이해하면 복잡하고 동적인 레이아웃을 만들 수 있어. 지금부터 static, relative, absolute, fixed, sticky 같은 각 포지셔닝 타입을 자세히 살펴보자.

static은 모든 엘리먼트의 기본 포지셔닝 값이야. 이 타입의 포지셔닝을 가진 엘리먼트들은 문서 흐름에 따라서 배치되며, HTML 마크업에 정의된 순서를 따르게 돼.

사용 예시:

CSS

    
      .static-box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        margin: 10px;
      }

HTML

    
      <div class="static-box">엘리먼트 1</div>
      <div class="static-box">엘리먼트 2</div>
      <div class="static-box">엘리먼트 3</div>

코드 설명:

.static-box: position: static;인 엘리먼트들이 문서의 정상 흐름에서 하나씩 배치되어 있어

1.2 relative 포지셔닝

relative는 엘리먼트를 문서 흐름의 정상 위치에 상대적으로 위치시킬 수 있어. 엘리먼트는 문서의 정상 흐름에 남아 있지만, top, right, bottom, left 속성을 사용해서 이동시킬 수 있어.

사용 예시:

CSS

    
      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .relative-box {
        position: relative;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }

HTML

    
      <div>
        <div class="box">일반 엘리먼트</div>
        <div class="box relative-box">이동된 엘리먼트</div>
        <div class="box">일반 엘리먼트</div>
      </div>

코드 설명:

.relative-box: position: relative;를 가진 엘리먼트가 정상 위치에서 아래로 15픽셀, 오른쪽으로 15픽셀 이동했어

1.3 absolute 포지셔닝

absolute는 가장 가까운 조상 엘리먼트의 포지셔닝을 참조하여 엘리먼트를 위치시키게 해 줘. 만약 그런 조상 엘리먼트가 없다면, 문서의 초기 컨텍스트(<html>)에 상대적으로 위치시키게 돼.

사용 예시:

CSS

    
      .container {
        position: relative;
      }

      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .absolute-box {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }

HTML

    
      <div class="container">
        <div class="box">일반 엘리먼트</div>
        <div class="box absolute-box">절대 포지셔닝된 엘리먼트</div>
        <div class="box">일반 엘리먼트</div>
      </div>

코드 설명:

.container: position: relative;를 가진 컨테이너 내부에 absolute 엘리먼트가 위치해
.absolute-box: position: absolute를 가진 엘리먼트가 컨테이너에 상대적으로 위치되고, 컨테이너의 왼쪽 상단 모서리에서 아래로 15픽셀, 오른쪽으로 15픽셀 이동했어

1.4 fixed 포지셔닝

fixed는 엘리먼트를 브라우저 창에 상대적으로 위치시킬 수 있어. 이렇게 하면 페이지 스크롤 시에도 그 자리에서 고정되어 있어.

사용 예시:

CSS

    
      .container {
        height: 200px;
        overflow: auto;
      }
      .fixed-box {
        position: fixed;
        background-color: #f39c12;
        color: white;
        padding: 20px;
        top: 15px;
        right: 15px;
      }

HTML

    
      <div class="container">
        <div class="fixed-box">고정된 엘리먼트</div>
        Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
        Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
        Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
        Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
        Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
        Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
      </div>

코드 설명:

.fixed-box: position: fixed;를 가진 엘리먼트는 페이지 스크롤 시에도 그 자리에 고정돼. 브라우저 창의 오른쪽 상단에 위치하고 있어

1.5 sticky 포지셔닝

sticky는 엘리먼트가 스크롤 시 설정된 위치에 도달할 때까지는 relative처럼 동작하고, 이후에는 fixed처럼 고정돼.

사용 예시:

CSS

    
      .sticky-box {
        position: sticky;
        background-color: #8e44ad;
        color: white;
        padding: 20px;
        top: 0;
      }

      .text {
        margin-top: 15px;
      }

      .content {
        height: 200px;
        background-color: #ecf0f1;
        overflow: auto;
      }

HTML

    
      <div class="content">
        <div class="sticky-box">고정되는 엘리먼트</div>
        <div class="text">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
          Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
          Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
          Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
        </div>
      </div>

코드 설명:

.sticky-box: position: sticky;를 가진 엘리먼트는 스크롤 할 때까지 relative처럼 동작하다가, 상단에 도달하면 그 위치에 고정돼

1.6 포지셔닝 타입 비교

포지셔닝 타입 비교:

포지셔닝 타입	설명	사용 예
static	기본 포지셔닝. 엘리먼트들은 문서의 정상 흐름 대로 따라가.	기본 엘리먼트 배치.
relative	엘리먼트의 정상 위치에 상대적인 포지셔닝.	정상 흐름에서 제거되지 않고 엘리먼트를 이동.
absolute	static 이 아닌 가장 가까운 조상 엘리먼트를 기준으로 포지셔닝.	정확한 엘리먼트 배치를 위해.
fixed	브라우저 창을 기준으로 포지셔닝.	스크롤 시에도 고정되어 있어야 하는 엘리먼트.
sticky	엘리먼트가 특정 위치에 도달할 때까지 relative로 동작하다가 그 이후에는 고정돼.	스크롤 시 엘리먼트를 고정.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION