✔️ CSS 포지션(position)의 종류(static, relative, fixed, absolute,stickey)예 따른 기능 구분 > CSS
CSS

✔️ CSS 포지션(position)의 종류(static, relative, fixed, absolute,stickey)예 따른 기능 구분

조회 443회 댓글 0건

시작 하기전에 기본적은 CSS에서의 block과 inline에 대해서 알아둘 필요가 있습니다.

div는 기본적으로 설정을 하지 않으면 block 입니다. 설정을 하지 않으면 기본적으로 한라인을 다 차지 한다는 의미 입니다.

span은 기본적으로 inline 특성을 가지고 있습니다. 컨텐츠의 크기 만큼만 차지를 합니다.

물론 위 요소에 대한 특성을 변경이 가능 합니다. 아래 포지션에 대해 테스트 하기 전에 이런 특성을 알고 있는것이 중요 합니다.

보통 확인을 할때는 style의 값을 "border: 1px solid black" 이런 형태로 박스를 쳐서 확인 합니다.


▶ 포지션의 특성은 아래 4가지가 있다.

static, relative, fixed, absolute,stickey

그리고 각각 위치정보를 top, bottom, left, right 값을 가지고 있는데 위 특성에 따라서 다른 값을 가지게 된다.

top     : 위(상단)에서 얼마나 떨어 트릴것인가?

bottom  : 바닥에서 얼마나 떨어 트릴 것인가?

left    : 왼쪽에서 얼마나 떨어 트릴 것인가?

right   : 오른쪽에서 얼마나 떨어 트릴 것인가?


f08f4a3d7c3248096854e2720bc04fa9_1671329662_1245.png
 


1) static

디폴트 설정 값으로 위에서 부터 아래로 순서대로 배열을 해준다. 그리고 각 위치 정보값을 무시 하는 속성 값이다.

> 기준이 없고 배치가 불가능 하다.


2) relative

상대적인 포지션을 가지게 해준다. 위치를 변경할 수 있다. 상대적인 위치를 가질 수 있어 top, bottom, left, right 값 설정이 가능하다.

top 이른 left든 값을 주면 다른것 위에 올라가든 아래로 올라가든 겹치는 기능을 가지고 있다. 즉, 다른것과 충돌?이 생길경우 밀리거나 하지 않는다는 것이다. 중첩 되는 특성을 가진다.

> 요소 자신을 기준으로 배치가 된다.


3) fixed

화면에 보이는 위치가 기준이 된다. 한번 결정 되면 스크롤이 되도 처음 그자리 그대로 있다. 절대적인 위치 설정이 된다는 의미다.

> 뷰포트 기준으로 배치가 된다.


4) absolute

부모의 요소와 관련하여 상대적인 위치가 결정 된다. 부모가 없다면 <body>가 기준이 되어 설정 된다. 상대적인 위치에 고정 된다.

우리가  흔히 메인에서 보는 슬라이드 배너에서 화살표에 해당하는것을 만들 수 있다. 이것은 relative 과 헷갈릴 수 있는데요. 2개 이상을 설정해 보면 쉽게 구분이 갑니다.

> 부모(상위)를 기준으로 배치가 된다.


5) stickey

스크롤 영역을 기준으로 배치가 된다.  스크롤 이동 하면 지정한 위치에 도달 했을때 fixed 처럼 작동을 하게 됩니다.


마지막으로 직접 테스트 할때 어디 부터 시작 되는지 구분이 잘 안가는 경우는 박스를 구분하게 하고 시작 위치를 0으로 주면 확인하기 수월합니다.

-----------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="euc-kr">
  <title>css postion test</title>
</head>
<body>


<!-- sticky
스크롤 한번 내리면 0px로 착 붙는것을 볼 수 있다.
top, bottom, left, right 하나는 반드시 지정을 해줘야 한다.

이것의 특징은 설정한 위치에 닫으면 fixed 처럼 된다.
-->
<div id="test0" style="border: solid 1px red; width: 500px; height: 400px; text-align: end; position: relative; overflow: auto;">
  <div style="background-color: tomato;">첫번째</div>
  <div style="border: solid 1px gray; width: 300px; height: 100px; position: sticky; left: 10px; top: 11px;">최종1-0</div>
  <div style="background-color: tomato; height: 200px;">두번째</div>
  <div style="background-color: brown; height: 200px;">세번째</div>

  첫번째 요소
</div>
<p></p>

<!--   포지션을 absolute 설정 -->
<!--
  부모의 특성에 따라 같이 이동됨을 알 수 있다.
  공간을 차지 않는다. 그래서 아래 "최종2"가 위치가 변경 된다.

  위치에 대한것을 확인 하는 방법은 박스의 색을 다르게 한 다음. 0px를 주면 된다. 그러면 어디서 부터 시작하는지 쉽게 알 수 있게 된다.

  상위로 올라가다가 static 속성이 아닌 첫번째 것을 기준으로 위치가 잡힌다.

  일반적으로 이 absolute 속성을 사용 할때는 부모의 속성을 relative 으로 설정 하는 경우가 많습니다.
-->
<!-- <div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
  <div id="test00" style="border: solid 1px gray; width: 200px; height: 200px; position: absolute; left: 0px; top: 55px;">최종1-0</div>
  <div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; top: 10px; left: 33px;">
    <div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: absolute; left: 10px; top: 55px;">최종1-1</div>
    <div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; position: absolute; left: 12px; top: 56px; text-align: right;">최종2</div>
  </div>
  최상위 박스 absolute
</div> -->


<!-- 포지션을 relative 설정 -->
<!-- 부모의 특성에 따라 같이 이동됨을 알 수 있다. -->
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
  <div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; left: 33px;">
    <div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: relative; left: 33px; top: 55px;">최종1</div>
    <div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; text-align: right;">최종2</div>
  </div>
  최상위 박스 relative
</div>

<!--
포지션을 fixed 설정
<div id="test00" style="border: solid 1px gray; width: 111px; height: 20px;">width 크기</div>


  브라우저의 어디서 부터 시작하는지 알기 위한것이다. 부모의 설정과 무관하다는 것을 알 수 있다.
  스크롤을 움직여 보면 그 자리 그대로 있다는 것을 알 수 있다.

<div id="test01" style="border: solid 1px blue; width: 200px; height: 200px; position: fixed; left: 0px; top: 111px;">최종1-1</div>

<div id="test01" style="border: solid 1px brown; width: 200px; height: 200px; position: fixed; left: 111px; top: 88px;">최종1-2</div>
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
  <div id="test1" style="border: solid 1px green; width: 400px; height: 400px; position: relative; left: 10px; top: 10px;">
    <div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; position: fixed; left: 111px; top: 55px;">최종1-3</div>
    <div id="test22" style="border: solid 1px palevioletred; width: 200px; height: 200px; text-align: right;">최종2</div>
  </div>
  최상위 박스
</div> -->

<p></p>

<!-- 포지션 특성을 설정하지 않은 상태   -->
<div id="test0" style="border: solid 1px red; width: 500px; height: 500px; text-align: end;">
  <div id="test1" style="border: solid 1px green; width: 400px; height: 400px;">
    <div id="test21" style="border: solid 1px gray; width: 200px; height: 200px; top: 22px;">최종1</div>
    <div id="test22" style="border: solid 1px gray; width: 200px; height: 200px; text-align: right;">최종2</div>
  </div>
  최상위 박스
</div>

</body>
</html>

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 12건 1 페이지
  • profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bo…
  • profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyVa…
  • profile_image 글자색을 지정하는 방법에 대한 것입니다. font-color 같은것을 사용해도 되겠지만 가능하면 프레임워크 사용할때는 프레임워크에서 지웒는것이 있는지 찾아본 다음 있으면 그것을 사용하는것이 좋기 때문입니다.텍스트 컬러에 대한 표준적인 형태로 잘 정리된 표 입니다.
  • profile_image 일반적으로 제목이 길면 2줄로 나오게 됩니다. 너무 긴 경우 더 나올수도 있겠지요.그런 경우 백엔드에서 잘라서 보여주기도 하곤 합니다.이런 경우 css 처리 방법에선 hidden을 주면 됩니다.부트스트랩에선 overflow-hidden 클래스만 추가해주면 기본적인 길이에서 넘치게 되면 보이지 않게 처리를 합니다.높이게 대한것과 길이에 대한 부분은 필요하면 style 속성을 추가해서 해주면 됩니다.a 태그도 필요하면 style 줘서 높이와 길이 …
  • profile_image 부트스트랩 배지(badge) 패딩 주기 입니다.기본은 너무 바짝 붙어서 패딩을 주었으면 하는데 위 이미지 참고 하면 됩니다.마진과 패딩 가끔 사용하다 보니 얼마나 헷갈리는지... 패딩은 겨울옷 패딩을 생각하면 되고 마진은 밖에서 남겨 먹는거라~
  • profile_image 다음에 찾을때 필요할듯 하여 올림.!!반응형을 처리 하는 방식에 대한 이름(명칭) 입니다. 화면의 크기와 더불어 요즘은 해상도가 커지면서 글자 크기에대 한 부분도 같이 신경써야 합니다. squish, scroll, collapse rows, collapse columns 방식의 반응형 모델 입니다.
  • profile_image 버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.처음의 버튼은 '글 삭제하기'였습니다.그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.' 그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다.  - 버튼의 명칭을 변경합니다.  - onclick 특성을 줘서 클릭하면 주소를 이동합니다…