본문 바로가기
IT/HTML

HTML&CSS-위치 변경하기

by EEYEA 2020. 11. 25.
728x90

 

HTML5, CSS3을 이용해 요소들의 위치를 지정(변경)해보겠습니다.

앞전 <a>태그에 대한 글에 위치 지정하는 부분이 나오긴 했지만 제대로 설명하지 않고

넘어갔는데 이번에 제대로 알아보겠습니다.

 

 

위치를 지정하기 위해서는 먼저 CSS의 position 값을 줘야 합니다.

그 전에 position 속성의 종류(키워드)에 대해 설명하겠습니다.

 ① relative  상대값 / 위치 설정 가능하고 자리를 차지함
 ② absolute  절대값 / 절대 위치 설정 가능
 ③ fixed  고정값 / 화면 기준으로 위치 설정 가능
 ④ sticky  스크롤을 내리면 위치 설정
 ⑤ static  기본값 / top, left, bottom, right 지정 안됨
 ⑥ inherit  -
 ⑦ initial  -
 ⑧ revert  -
 ⑨ unset  위치를 설정하지 않음

 

 

#1 static

기본값으로 따로 표시하지 않아도 됩니다.

가로, 세로 100px인 빨강색 사각형을 <div>태그를 활용해 만들어주겠습니다.

 

표시 방법

<!DOCTYPE html>

<html lang="ko">

<head>

<title>position속성</title>

<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">

<meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css"> -->> CSS 가로, 세로, 위치 지정

        body{

height: 5000px;

}

div{

width: 100px;

height: 100px;

}

#static1{

position: static;

top:100px;  --> 적용X

left: 100px;  --> 적용X

background-color: red;

}

        </style>

</head>

<body>

<div id="static1">static</div>

</body>

</html>

<div>태그에 id를 주어 css에서 불러와 position과 가로, 세로, 배경색까지 넣어주었습니다.

static1에 top과 left 값을 줬지만 적용이 안된 것을 알 수 있습니다.

이번에는 static요소를 더 불러오겠습니다.

 

표시 방법

<!DOCTYPE html>

<html lang="ko">

<head>

<title>position속성</title>

<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">

<meta charset="utf-8">

                <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">

        body{

height: 5000px;

}

div{

width: 100px;

height: 100px;

}

#static1{

position: static;

top:100px;

left: 100px;

background-color: red;

}

#static2{

background-color: red;

}

        </style>

</head>

<body>

<div id="static1">static</div>

                <div id="static2">static</div>

</body>

</html>

static2에는 top, left, bottom, right 값을 아무것도 주지 않았는데

static1과 위치가 똑같은 것을 보면 static은 위치 지정이 안되는 것을 알 수 있습니다.

 

 

#2 relative

이번엔 위치 값을 지정할 수 있는 relative를 사용하겠습니다.

static상자 2개 사이에 주황색 relative 상자를 넣어보겠습니다.

 

 

여기서 relative 상자의 위치 값을 지정합니다.

(top: 200px, left: 300px)

relative는 상대값으로 위치 지정이 가능하고, 자리를 차지합니다.

 

표시 방법

<!DOCTYPE html>

<html lang="ko">

<head>

<title>position속성</title>

<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">

<meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">

        body{

    height: 5000px;

}

div{

    width: 100px;

    height: 100px;

}

#static1{

    position: static;

    top:100px;

    left: 100px;

    background-color: red;

}

#relative{

    position: relative;

    background-color: orange;

    top: 200px;

    left: 200px;

}

#static2{

    background-color: red;

}

        </style>

</head>

<body>

<div id="static1">static</div>

        <div id="relative">relative</div>

        <div id="static2">static</div>

</body>

</html>

 

 

#3 absolute

relative 상자의 원래 위치 아래 노란색 absolute 상자를 만들겠습니다.

 

absolute상자가 static2 상자에 겹치는 것을 알 수 있습니다.

이번엔 위치를 지정합니다.

(top: 300px, left: 300px)

 

absolute는 절대값으로 부모 혹은 상위 relative속성을 가지고 있는 요소에 귀속됩니다.

 

표시 방법

<!DOCTYPE html>

<html lang="ko">

<head>

<title>position속성</title>

<link rel="stylesheet" type="text/css" href="/mc2/css/common.css">

<meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">

        body{

    height: 5000px;

}

div{

    width: 100px;

    height: 100px;

}

#static1{

    position: static;

    top:100px;

    left: 100px;

    background-color: red;

}

#relative{

    position: relative;

    background-color: orange;

    top: 200px;

    left: 200px;

}

#absolute{

    position: absolute;

    background-color: yellow;

    top: 300px;

    left: 300px;

}

#static2{

    background-color: red;

}

        </style>

</head>

<body>

<div id="static1">static</div>

        <div id="relative">relative</div>

        <div id="absolute">absolute</div>

        <div id="static2">static</div>

</body>

</html>

 

 

#4 fixed

absolute 다음에 초록색 fixed 상자를 만들어보겠습니다.

 

 

top: 400px, left: 400px로 위치 지정해줍니다.

여기서 fixed는 화면 기준 고정값이기 때문에 스크롤을 내리면 다른점이 보입니다.

 

스크롤을 내리면 다른 요소들은 스크롤에 따라 안보이게 되는데

fixed 상자만 화면에 고정되어 스크롤 상관없이 위치가 고정되어 있습니다.

 

 

#5 sticky

이번엔 파랑색 sticky 상자를 만들어보겠습니다.

sticky상자는 absolute(노랑), fixed(초록) 상자와 다르게 static2 상자를 밀어내고 자리를 차지합니다.

 

위치를 지정합니다.

(top: 0px, left: 500px)

 

sticky도 스크롤을 내리면 다른 점이 보입니다.

 

top: 0px 이기 때문에 스크롤을 내리면서 sticky상자가 보이는 화면에서 top: 0px에 도달하면 그 자리에서 떨어지지 않습니다.

sticky 효과를 주려면 top 값이 0이더라도 반드시 top: 0px로 표시해줘야 적용됩니다.

'IT > HTML' 카테고리의 다른 글

HTML5 - 테이블 태그  (0) 2020.11.26
HTML5 - 리스트(목록) 태그  (0) 2020.11.26
HTML-<a>태그  (0) 2020.11.25
HTML-글자 태그  (0) 2020.11.25
HTML 태그  (0) 2020.09.29

댓글

오뚜기 맛있는 오뚜기밥, 200g, 24개
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.