베짱이와 노는 개미

웹개발 프로젝트(CSS/HTML)-#5 position속성 본문

웹개발(CSS,HTML)프로젝트 (feat.모각코)

웹개발 프로젝트(CSS/HTML)-#5 position속성

jsistop16 2021. 8. 13. 16:37

오늘은 본격적으로 position속성에 대해서 알아보겠다.

 

position속성이란 무엇인가?

 

웹사이트를 꾸미는 요소들(태그)의 위치를 결정할때, 다시말해서 화면 레이아웃을 만들때 사용되는 속성

 

이다. 예를들어 유튜브에서 영상을 보다가 댓글을 읽기위해서 스크롤을 내린다고 할때

 

화면 맨위에있는 검색창은 그대로 위에 고정되어있다. 이런것이 바로 포지션속성으로 설정해준것이다.

 

 

포지션속성에는 5가지가 있다. (static, relative, absolute, fixed, sticky) 하나씩 알아보자

 

(#알고 넘어가야할것!! 포지션은 태그가 아니라 태그에 들어가는 속성이라는것!!)

 

1. static

static값은 모든 태그의 기본 포지션 속성이다.

다시말해서 position값을 따로 설정해주지 않았을때의 디폴트값이다.

 

2. relative

상대적인 위치를 지정할수 있다. 이때 상대적 위치의 기준점은 static일때의 원래 위치이다.

 

3. absolute

상대적인 위치를 지정할수 있다. 이때 상대적 위치의 기준점은 relative 포지션속성을 가진 상위 요소(태그)이다.

 

4. fixed

화면(디스플레이)을 기준으로 상대적인 위치를 설정(ex이 글 맨위에서 예시를 들었던 유튜브 검색창)

 

위치는 top,bottom,left,right로 설정한다.

 

유튜브 검색창의 경우 포지션속성을 fixed로 하고 top,left,right값을 모두 0으로 하면 좌 우 위 에 딱 달라붙는 모양일것

이고

 

높이 height값만 적당히 설정해주면 될것이다.

 

5.sticky

sticky속성역시 많이 봤을것이다.

 

대표적인 예시가 음...잘 떠오르지 않는다 15분고민했는데

 

직접 코드를 짜보고 크롬으로 확인해보면 바로 알것이다.

 

지금까지 소개한 5가지 속성을 모두 한번에 보겟다.

<!DOCTYPE html>
<head>
    <title>
        본격시작
    </title>
</head>
<body>
    <div 
        style="margin-top: 100px; width: 300px; 
        height: 300px; background-color: antiquewhite;">
        static
    </div>
    <div 
        style="width: 300px; 
        height: 300px; background-color: black; 
        position: relative; top: 100px; left: 100px; color: white; font-size: 25px;">
        relative
        <div style="position: absolute;background-color: cadetblue; 
            top: 100px;left: 100px; 
            width: 100px; height: 100px;">
            absolute
        </div>
    </div>
    <div style=" height: 100px; background-color: blue; 
        position: fixed; top: 0; left: 0; right: 0; 
        color: white; font-size: 25px;">
        fixed
    </div>
    <div style="height: 100px; background-color: red; 
    position: sticky; top: 10px; 
    color: white; font-size: 25px;">
        sticky
    </div>
 </body>

위 코드를 보면 위에서 부터 차례대로 static relative absolute fixed sticky 속성을 적용한 div태그를 만든것이다.

 

이렇게 나온다

 

여기서 맨밑 빨간 박스 sticky는 스크롤 내려보면 그 성격을 알수있다.

 

sticky속성은 초반 위치에서 스크롤을 내리거나 올려서 지정해놓은 위치에 도달하면 fixed 속성처럼 고정되는 속성이다.

 

위 코드를 스크롤하려면 코드 밑쪽에 <br>태그를 여러개 입력해서 안보이는 부분을 늘려서 확인해보기 바란다.(억지로 스크롤을 만들라는 뜻)

'웹개발(CSS,HTML)프로젝트 (feat.모각코)' 카테고리의 다른 글

웹개발 프로젝트(CSS/HTML)-#7 미니홈피 프로젝트 (2.flex속성으로 홈페이지 레이아웃 구성)  (0) 2021.08.15
웹개발 프로젝트(CSS/HTML)-#6 미니홈피 프로젝트(1. 기본레이아웃 구성)  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#4 <div> <span>태그  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#3 웹폰트  (0) 2021.08.11
웹개발 프로젝트(CSS/HTML)-#2 CSS적용해보기  (0) 2021.08.11
'웹개발(CSS,HTML)프로젝트 (feat.모각코)' Related Articles more