현재 프론트엔드 인턴으로 있는 곳에서 웹페이지 개선 작업을 하던 중, position 속성과 인터랙티브 웹 속성에 대해서 알면 좋을 것 같아 공부를 하면서 정리를 해 볼 예정이다.

position 속성과 인터랙티브 웹 속성에 대해서 공부 겸 포스트를 작성 할 예정이다. (인터랙티브 웹 관련 속성은 웹페이지 개선 작업 사례를 통해 정리 해 볼 예정이다.) 즉, 내가 써 본 속성들을 정리 할 예정 !!

1. CSS 속성 : position

• position 속성은 웹 문서 안에 요소들을 배치하기 위한 속성이다.
• position 속성의 종류에는 static, relative, absolute, fixed 가 있다.
• position은 offset(top, right, bottom, left)을 이용하여 떨어진 정도를 설정 할 수 있으며, 각 속성의 기준이 어디인지를 아는 것이 중요하다

1-1. static

• 기본값. top, right, bottom, left을 지정해도 반영되지 않는다.

1-2. relative

• 상대적. offset를 지정하여 기준위치에서 떨어진 곳으로 이동.
• 기준위치란? : 다른 요소의 위치를 신경 쓰지 않고 원래 나타나야 하는 그 위치를 의미함.
• relative로 position 속성을 지정하더라도 offset를 지정하지 않으면 static과 동일.
  

1-3. absolute

• 절대적. 가장 가까운 곳에 위치한 조상(position 속성이 static이 아닌) 요소가 기준.
• position 속성이 static이 아니다 => position이 relative, absolute, fixed인 부모
• 그러한 기준 부모(조상)이 없다면 body 태그가 기준이 된다.
• 일반적으로 부모 요소는 relative, 자식 요소는 absolute로 설정 !!! (자식은 부모를 따라다니는 것이 일반적)
  
  
  부모인 container 위치를 기준으로 top : 250px이 적용된 것을 알 수 있다.

relative(부모) - absolute(자식) 관계

부모 자식 관계는 부모요소를 기준으로 자식요소의 위치를 결정하거나, 자식이 공간을 차지하지 않고 떠있게 하고 싶을 경우 유용하게 쓰인다.

1-4 fixed

• 다른 어떤 요소와도 상관 없이 브라우저의 0, 0(좌측 상단)을 기준으로 offset 결정.
• navigation bar, sidebar, footer와 같이 스크롤, 창의 크기 등에 관계없이 항상 고정된 위치에 요소를 배치하고 싶은 경우 사용한다.
• 대표적인 사용 : 스크롤에 상관없이 고정되는 메뉴 (헤더)
• 공간은 차지하지 않고 떠있다.

2. 웹페이지 개선 작업 사례

HTML 코드

import React from 'react';
import "../style/MarketPlacePopUp.css";

const MarketPlacePopUp = () => {
    return (
        <section>
            <div className='popUp'>테스트 입니다.</div>
        </section>
    );
};

export default MarketPlacePopUp;

CSS 코드

.popUp {
    width: 500px;
    height: 500px;
    z-index: 2;
    background-color: aqua;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 뷰포트 기준 인 듯 */
}

결과물

absolute 속성을 가진 popUp 태그는 기준 부모가 따로 없기 때문에 body가 기준이 됐다.
aqua 색을 가진 너비 500px, 높이 500px인 박스의 좌측 상단 (0, 0) 점이 top 50%, left 50% 의 위치에 가있는 것을 알 수 있다.

하지만 본래의 의도는, 웹페이지가 열렸을 때 아쿠아색을 가진 박스가 화면 정중앙에 오는 것을 목표로 하였다. 하지만 현재의 상황은 박스의 좌측 상단 (0, 0) 지점의 점이 화면 정중앙에 위치 해 있다. 이를 해결하기 위해선 transform 속성을 사용해야 한다는 것을 웹페이지 개선 작업을 하면서 알 수 있었다. transform 속성에 대해선 인터랙티브 웹 관련 포스트에 작성하려고 한다.👊