HTML 요소의 위치 정의

html 요소의 위치에 대해 알아보자

요소의 위치는 position 속성을 사용한다

우리가 이때까지 각종 태그들을 사용하면 이렇게 왼쪽 맨위 부터 채워졌었다

이것은 position:static; 값으로 html 모든 요소의 기본값이다

<!-- position : static; html 모든 요소는 기본값으로 static, 일반적인 문서의 흐름에 따라서 요소의 위치가 정해짐 -->

각종 position 값의 종류는

static, relative, absolute, sticky 가 있다

<!-- static, relative, absolute, sticky -->

 

relative 포지션

<!-- position:relative -->

    <!-- 일반적인 문서의 흐름에 따라서 요소의 위치가 정해짐 -->

    <!-- top,right, bottom, left 4가지 속성을 같이 사용해서 오프셋을 적용 -->

태그를 만들어 보겠다

 <h2>position : relative;</h2>

    <div>

      원래 자기 자신이 있어야 하는 위치에서 left: 30px만큼 오프셋 됩니다

    </div>

이렇게 <h>태그로 머릿말과 <div>태그로 컨텐츠를 만들고

<style>

      .relative {

        position: relative;

        left: 30px;

        border: 3px solid red;

      }

    </style>

이렇게 클래스 선택자로 

position 은 relative 값

left 은 30px

border 은 3px두께 solid 직선 red 빨간색 으로 값을 주고

<h2>position : relative;</h2>

    <div class="relative">

      원래 자기 자신이 있어야 하는 위치에서 left: 30px만큼 오프셋 됩니다

    </div>

컨텐츠에 relative 클래스 속성을 입히면

 

이렇게 왼쪽에서 30px만큼 떨어져서 위치를 잡는걸 볼 수 있다

 

<style>

      .relative {

        position: relative;

        left: 30px;

        top: 50px;

        border: 3px solid red;

      }

    </style>

top : 50px 값을 주면

위에서 50px 만큼 떨어져서 위치를 잡는다

이렇게 top,right,bottom,left 값으로 위치(position)을 잡을 수 있다

 

fixed 포지션

  <!-- position : fixed; 지정된 위치에 html 요소를 고정 -->

    <!-- top, right, bottom, left 속성을 이용해서 위치를 지정 -->

fixed 포지션은 지정한 위치에 html요소를 고정시키는 포지션이다

<h2>position : fixed</h2>

<button>^</button>

이번에는 <button>태그로 ^ 모양 버튼을 만들어 보겠다

 

<style>

      .fixed {

        position: fixed;

        bottom: 20px;

        right: 20px;

        width: 40px;

        height: 40px;

        border-radius: 20px;

        border: 3px solid green;

        font-size: 25px;

        color: green;

      }

    </style>

클래스 선택자를 만들고

속성값은

fixed 포지션이고

밑에서 20px 만큼 떨어지고

오른쪽에서 20px 만큼 떨어지고

넓이는 40px이고

높이는 40px이고

반지름(반경)은 20px 이고

border 선은 3px에 직선에 초록색인 border선이고

버튼에 폰트 사이즈는 25px이고

버튼 색상은 초록색이다

라는 값을 주고

<h2>position : fixed</h2>

    <button class="fixed">^</button>

<button>태그에 클래스 속성을 입히면

이렇게 오른쪽 밑에 버튼이 생긴걸 볼 수 있다

이 버튼은 fixed 포지션이므로 항상 이 위치에서 고정이 된다(스크롤을 내려도 그위치 고정이다)

 

사용예시로

우리가 스크롤을 내리면 오른쪽 하단에 내가 만든 버튼모양처럼 

최상단으로 올려주는 버튼이 생기는걸 본적이 있을 것이다

이럴때 fixed 를 사용할 수 있다

 

스크롤을 내려야 보이는 버튼이기 때문에

동적인 요소는 자바스크립트에서 한다고 한다

 

그리고 만약 내가 <(꺽새)기호를 쓰고싶은데

이 <(꺽새)기호는 잘 못쓰면 vscode 에서 에러가 날 수 있다고 한다

이렇게 쓰고싶어도 어떤 태그로 인식해버릴 수 있다

그래서 다른 문자로해서 대체할수 있는 것이 있다

&uarr; 이라는 문자로 값을 주겠다

<button class="fixed">&uarr;</button>

버튼의 화살표 모양이 바뀐게 보인다

 

구글에 html special character 이라고 검색하면

각종 기호와 그 기호에 해당하는 문자들이 정리되어 있는 사이트를 볼 수 있다

https://www.html.am/reference/html-special-characters.cfm

HTML Special Characters

 

 

absolute 포지션

absolute 는 절대적인,완벽한 이라는 뜻을 갖는다

뜻만 보면 절대적으로 고정되어 있게 하는거같지만

오해하지 말자

absolute 포지션은 부모 중 relative 포지션에 적용된 가장 가까운 부모를 찾아

그 부모에 대한 상대적인(절대적인,완벽한) 포지션이다

 <!-- position : absolute; -->

    <!-- 현재(position:absolute; 가 적용된) html 요소의 부모 요소 중에서 -->

    <!-- position:relativ; 가 설정된 가장 가까운 부모 요소에 대한 상대적인 위치 -->

 <h2>position : absolute</h2>

    <div>

      position:relative로 설정된 부모

      <div>

        기본값(position:static)

        <div>position : absolute로 설정된 요소</div>

      </div>

    </div>

이렇게 부모 자식 자손 순으로 <div>태그를 만들고

 

<style>

      .relative {

        position: relative;

        width: 400px;

        height: 130px;

        border: 3px solid green;

      }

      .absolute {

        position: absolute;

        top: 80px;

        right: 10px;

        width: 240px;

        border: 3px solid red;

      }

      .general {

        width: 350px;

        border: 3px solid blue;

      }

    </style>

 

이렇게 클래스 선택자를 만들었다

general 선택자는 기본값(static)이다 (position 속성을 적용시키지 않았음으로)

<h2>position : absolute</h2>

    <div class="relative">

      position:relative로 설정된 부모

      <div class="general">

        기본값(position:static)

        <div class="absolute">position : absolute로 설정된 요소</div>

      </div>

    </div>

이렇게 부모에는 class="relative"

자식은 class="general"

자손은 class="absolute" 클래스 값을 주면

이렇게 나오는걸 볼 수 있다

요기서 부모가 가지고 있는 클래스 값인 

relative 값의 위치를 조금 옮겨 보자

 

.relative {

        position: relative;

        top: 50px;

        left: 10px;

        width: 400px;

        height: 130px;

        border: 3px solid green;

      }

top : 50px

left : 10px

만큼 부모요소에 적용하면

 

이렇게 나온다

차이점은 부모인 relative 에 위치를 조금 옮겼는데

absolute 값도 같이 옮겨졌다

이것이 absolute 포지션이 가장 가까운 relative 포지션을 가진 부모에 대해

상대적인 값을 갖는다고 볼 수 있다

가장 가까운 relative 포지션을 가진 부모를 기준으로 좌표가 0인것이

abssolute 포지션이다

 

 

sticky 포지션

 <!-- position : sticky -->

    <!-- 스크롤이 되기 전에는 원래 요소가 있어야 할 위치에 있다가 -->

    <!-- 스크롤이 되면 지정된 위치에 고정 -->

스크롤이 되기 전에는 원래 있어야 할 위치에 있다가

스크롤이 되면 지정된 위치에서 고정되어 있는 포지션이다

 <h2>

      position:sticky가 적용된 요소는 마우스 스크롤시 정의된 위치에 고정해

      줍니다.

    </h2>

    <nav>

      <a href="">메뉴1</a>

      <a href="">메뉴2</a>

      <a href="">메뉴3</a>

      <a href="">메뉴4</a>

      <a href="">메뉴5</a>

    </nav>

이번에는 <nav>라는 태그안에 <a> 태그인 링크 태크를 5개 만들었다

 <style>

      .sticky {

        position: sticky;

        top: 0px;

        padding: 5px;

        background-color: greenyellow;

        border: 2px solid green;

      }

    </style>

그리고 클래스 선택자로 position : sticky 값이 적용된 선택자를 만들고

 <nav class="sticky">

      <a href="">메뉴1</a>

      <a href="">메뉴2</a>

      <a href="">메뉴3</a>

      <a href="">메뉴4</a>

      <a href="">메뉴5</a>

    </nav>

<nav> 태그에 클래스를 적용시키자

그러면 이렇게 <nav> 메뉴 5개가 있는데

스크롤을 내리기 위해 아무 컨텐츠를 쭉 만들어보자

 <div style="padding-bottom: 1000px;">

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

        <p>컨텐츠</p>

    </div>

뭐 대충 이렇게 많이 만든다

그럼 이렇게 스크롤이 생기고

스크롤을 내려보면

이렇게 메뉴5개가 스크롤을 내려도 지정된 위치에 고정되어 있는걸 볼 수 있다

 

이것이 sticky 포지션이다