본문 바로가기
Langauge/HTML, CSS

[HTML, CSS] position 속성

예욤 2022. 8. 10. 08:02

1. static position

: 원래 있어야하는 위치 즉, 웹브라우저 상에 작성된 순서대로 요소들이 표시된다. 

   따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다.

 

div.me {
    /* position: static; */  /* position을 생략하면 기본이 static으로 적용된다. */
    top: 200px;  /* 세로위치값 */
    left: 200px; /* 가로위치값 */
    background-color: yellow;
}
 --------------------------------------------------------------------------------------------------   
<div id="container">
		
    <div id="parent">      <!-- 부모인 div#container의 width: 80%; + width: 50%;을 또 적용한다. -->
        parent(부모)<br/>
        parent(부모)<br/>
        parent(부모)<br/>
        <div class="me">   <!-- 부모부모인 div#container의 width: 80%; + 직속부모인 div#parent의 width: 50%;을 따라간다. -->
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
        </div>
    </div>

    <div class="me">      <!-- 부모인 div#container의 width: 80%;을 따라간다. -->
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
    </div>

</div>


  엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

  - 정적위치(static positioning)
     position: static

     position: static 은 position 값을 아예 안 준것과 동일하다.
     position: static 으로 했을때에는 위치값을 줘봐야 엘리먼트의 위치는 변하지 않는다.

     자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경된다.
     css 로 position 속성의 값을 지정하지 않으면 기본값은 position: static 으로 적용된다.
     left, top, right, bottom 과 같은 offset(top, right, bottom, left)은 무시가 된다.
    
     position: static 인 경우 class가 me인 엘리먼트가 parent 엘리먼트 안에 포함되어 있을 경우, 
     me의 크기를 따로 지정하지 않으면 me의 크기는 parent 크기를 따라간다. 

     즉,  크기(width)를 따로 지정하지 않으면 부모 엘리먼트(요소)의 크기(width)를 따라간다.

2. absolute position

: 원래있던 자신의 위치가 아닌 웹브라우저 상의 맨상단 좌측부터 기준으로 한 상대위치 값을 지정한다.                                 지정한 top, left, bottom, right 속성값으로 위치값이 변한다.

    만약, 크기(width)를 따로 지정하지 않으면 width의 크기는 내용물의 크기 만큼 잡힌다.

             크기(width)를 주면 부모의 크기를 따라가는 것이 아니라 웹브라우저 크기의 설정한 값 만큼 잡힌다.

             예) width: 80%; 이면, 웹브라우저 크기의 80% 만큼 잡힘

 

div.me {
    position: absolute;  /* 원래있던 자신의 위치가 아닌 웹브라우저 상의 맨상단 좌측부터 기준으로 한 상대위치 값을 지정한다. */
    top: 200px;   /* 세로위치값 */
    left: 200px;  /* 가로위치값 */
    background-color: yellow;
 /*	width: 80%; */ /* position: absolute; 이므로  width 를 주면 부모의 크기를 따라가는 것이 아니라 웹브라우저 크기의 80% 만큼 잡힌다. */
 /* position: absolute; 이고 width를 정해주지 않으면 width는 내용물의 크기 만큼 잡힌다. */
}
----------------------------------------------------------------------------------------------------------
<div id="container">
		
    <div id="parent">
        parent(부모)<br/>
        parent(부모)<br/>
        parent(부모)<br/>
        <div class="me">
          첫번째 me(나)는 position: absolute;으로 했으므로 웹브라우저의 맨상단 좌측에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 width의 크기는 내용물의 크기 만큼 잡힌다.<br/>  
          첫번째 me(나)는 position: absolute;으로 했으므로 웹브라우저의 맨상단 좌측에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 width의 크기는 내용물의 크기 만큼 잡힌다.<br/> 
          첫번째 me(나)는 position: absolute;으로 했으므로 웹브라우저의 맨상단 좌측에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 width의 크기는 내용물의 크기 만큼 잡힌다.<br/> 
        </div>
    </div>
    
    <div class="me">
      두번째 me(나)는 position: absolute;으로 했으므로 웹브라우저의 맨상단 좌측에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 width의 크기는 내용물의 크기 만큼 잡힌다.<br/> 
      두번째 me(나)는 position: absolute;으로 했으므로 웹브라우저의 맨상단 좌측에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 width의 크기는 내용물의 크기 만큼 잡힌다.<br/>
    </div>

</div>

   엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

  - 절대위치(absolute positioning)
     position: absolute

    문서를 기준(웹브라우저 주소창 아래의 top 0px, left 0px 을 기준)으로 위치가 정해지기 때문에 부모 엘리먼트의 위치

    와는 무관하다.
        
     position: absolute 로 했을 때 me의 offset(top, right, bottom, left)은 문서를 기준으로 주어진 offset 값이 적용되어지고,
     parent와의 관계는 완전히 사라지기 때문에 class가 me인 엘리먼트가 parent 엘리먼트 안에 포함되어 있을 경우라도
     me의 크기(width)는 parent 크기(width)에 전혀 영향을 받지 않는다.

 

3. relative position

:  원래있던 자신의 위치를 기준으로 한 상대위치 값을 지정한다. 자주사용한다!! 

   원래 위치에서 지정한 top, left, bottom, right 속성값으로 위치값이 변한다.                                                                     

   크기(width)를 따로 지정하지 않으면 width는 이동하기전의 크기(width)를 그대로 유지한다.

 

div.me {
    position: relative; /* 원래있던 자신의 위치를 기준으로 한 상대위치 값을 지정한다. 자주사용한다.!! */
    top: 200px;   /* 세로위치값 */
    left: 200px;  /* 가로위치값 */
    background-color: yellow;
   /* position: relative; 이고 width를 정해주지 않으면 width는 이동하기전의 크기를 그대로 유지한다. */
}
---------------------------------------------------------------------------------------------------------------
<div id="container">
		
    <div id="parent">
        parent(부모)<br/>
        parent(부모)<br/>
        parent(부모)<br/>
        <div class="me">
          첫번째 me(나)는 position: relative;으로 했으므로 원래 위치에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 원래있던 자신의 크기(width)를 그대로 유지한다.<br/>  
          첫번째 me(나)는 position: relative;으로 했으므로 원래 위치에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 원래있던 자신의 크기(width)를 그대로 유지한다.<br/> 
          첫번째 me(나)는 position: relative;으로 했으므로 원래 위치에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 원래있던 자신의 크기(width)를 그대로 유지한다.<br/> 
        </div>
    </div>

    <div class="me">
      두번째 me(나)는 position: relative;으로 했으므로 원래 위치에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 원래있던 자신의 크기(width)를 그대로 유지한다.<br/> 
      두번째 me(나)는 position: relative;으로 했으므로 원래 위치에서 부터 출발하여 top: 200px; left: 200px; 으로 위치값으로 변하며 크기(width)를 따로 지정하지 않았으므로 원래있던 자신의 크기(width)를 그대로 유지한다.<br/>
    </div>

</div>

 

  엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

  - 상대위치(relative positioning)
     position: relative

    자신의 위치를 기준으로 한 상대위치 값을 지정한다.
    원래있던 자신의 위치를 기준으로 offset 값만큼 이동하는 것이다. 크기(width)는 원래있던 자신의 크기(width)를 그대로      유지한다. 
    position: relative 인 경우, me의 속성으로 top과 left를 주었을 때 me의 좌측상단 꼭지점의 위치는 me의 원래 위치에서        200px 아래, 원래 위치의 왼쪽에서 부터 200px 에서 시작한다.  

 

 

4. fixed position

:  위치값을 설정하더라도 엘리먼트의 위치값은 변하지 않으며, 웹브라우저 상 스크롤을 내려도 고정되어 나타난다.

   크기(width)를 따로 지정하지 않으면, 부모 엘리먼트(요소)의 크기(width)를 따라간다.

 

div.me {
    position: fixed; 
    top: 100px;    /* 세로위치값 */
    left: 100px;   /* 가로위치값 */
    background-color: yellow;
    width: 80%;
    /* position: fixed; 이므로 width 를 주면 부모의 크기를 따라가는 것이 아니라 웹브라우저 크기의 80% 만큼 잡힌다. */ 
}

div.you {
    position: fixed; 
    top: 300px;   /* 세로위치값 */
    left: 200px;  /* 가로위치값 */
    background-color: cyan;
    /* position: fixed; 이므로 width 를 설정하지 않으면 width 의 크기는 내용물의 크기 만큼 잡힌다. */ 
}
-------------------------------------------------------------------------------------------------------------------------------
<div id="container">

   <div id="parent">
        parent(부모)<br/>
        parent(부모)<br/>
        parent(부모)<br/>
        <div class="me">
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
          첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
        </div>
   </div>

   <div class="you">
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
   </div>

</div>


   엘리먼트에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

  - 고정위치(fixed positioning)
     position: fixed

    문서를 기준(웹브라우저 주소창 아래의 top 0px, left 0px 을 기준)으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와      는 무관하다.
     parent와의 관계는 완전히 사라지기 때문에 엘리먼트의 크기는 부모 엘리먼트의 크기에 영향을 받지 않는다.
     width 를 정해주지 않으면 width는 내용물의 크기만큼 잡힌다.
    중요한 것은 스크롤의 영향을 받지 않는다는 것이다.
    me는 절대위치와 동일한 성격을 갖지만, 화면을 스크롤해도 고정된 위치에 위치함 

 

5. fixed position 및 table cell

:  위치값을 설정하더라도 엘리먼트의 위치값은 변하지 않으며, 웹브라우저 상 스크롤을 내려도 고정되어 나타난다.

   크기(width)를 따로 지정하지 않으면, 부모 엘리먼트(요소)의 크기(width)를 따라간다.

 

div.myfixed {
    position: fixed;  /* 스크롤을 내려도 고정되어 나타난다. */
    top: 600px;
    left: 1320px;
}
/*
   vertical-align(세로기준의 정렬) 속성 적용 가능 한 곳 :  (아래의 경우만 된다고 한다.)
   1. table내
   2. inline 엘리먼트 : text, img, input (여러 inline엘리먼트 안에서 세로로 가운데 정렬이 되는 것/ div안에서의 가운데 정렬을 의미하지 않음)
*/
/*
   >>>> !!! div 에 세로 정렬을 시키려면 !!! <<<<
   외곽 div 의 display 를 table 로 하고, 내부 div 의 display 를 table-cell 로 지정해주면 된다.
*/

dev.div_table {
    display: table;
}

div#div_table_cell {
    /* border: solid 1px gray; */

    display: table-cell;
    width: 80px;
    height: 80px;
    background-color: navy;
    text-align: center;    /* 가로기준의 정렬 */
    vertical-align:middle; /* 세로기준의 정렬 */

    border-radius: 50%;    /* 테두리 깍음 */
}

div#div_table_cell > a {
    text-decoration: none; /* 글자 밑줄 없앤다. */
}

div#div_table_cell > a:link, 
div#div_table_cell > a:visited,
div#div_table_cell > a:active {
    color: white;
/* a:link    : 방문 전 링크 상태이다.
   a:visited : 방문 후 링크 상태이다.
   a:hover   : 마우스 오버 했을 때 링크 상태이다.
   a:active  : 클릭 했을 때 링크 상태이다.
*/	
}
---------------------------------------------------------------------------------------------------------------------------
<div id="container">

   <div id="parent">
      parent(부모)<br/>
      parent(부모)<br/>
      parent(부모)<br/>
      <div class="me">
        첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
        첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
        첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
      </div>
   </div>

   <div class="you">
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
      두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
   </div>

   <div class="myfixed div_table">  <!-- class= 는 여러개 지정가능하다. -->
      <div id="div_table_cell">
          <a href="#">맨위로</a> <!-- href=" " 안에 id값을 넣어줘야하는데, href="#"는 자기자신 파일을 의미한다.(즉, 새로고침과 같은 것) -->
      </div>
   </div>

</div>
  • position: fixed : 스크롤을 내려도 고정되어 나타난다.
  • display: table : 요소를 table태그 속성으로 바꿔준다.
  • display: table-cell :  요소를 tr, td 속성으로 바꿔준다. table표 안에 있는 것처럼 바꿔서 쉽게 정렬하게 해준다.                                              text-align:center(가로기준), vertical-align:middle(세로기준) 정렬과 자주 사용한다.

※ vertical-align(세로기준의 정렬) 속성 적용 가능 한 곳 :  

       1. table내
       2. inline 엘리먼트 : text, img, input                                                                                                                                            (단, 여러 inline엘리먼트 안에서 세로로 가운데 정렬이 되는 것/ div안에서의 가운데 정렬을 의미하지 않음)
 
       >>>> !!! div 에 세로 정렬을 시키려면 !!! <<<<
       외곽 div 의 display 를 table 로 하고, 내부 div 의 display 를 table-cell 로 지정해주면 된다.
       

 

※ 참고 ※  

 

div#div_table_cell > a:link, 
div#div_table_cell > a:visited,
div#div_table_cell > a:active {
    color: white;
/* a:link    : 방문 전 링크 상태이다.
   a:visited : 방문 후 링크 상태이다.
   a:hover   : 마우스 오버 했을 때 링크 상태이다.
   a:active  : 클릭 했을 때 링크 상태이다.
*/	
}
  • a:link      :  a 태그에 방문 전 링크 상태
  • a:visited : a 태그에 방문 후 링크 상태
  • a:hover   :  마우스포인터를 올렸을 때 링크 상태 (마우스 오버 했을 때 )
  • a:active   :  클릭 했을 때 링크 상태

 

div#div_table_cell > a {
    text-decoration: none; /* 글자 밑줄 없앤다. */
}
  •  text-decoration: none  :  글자 밑줄 없앰.

 

6. fixed position 및 table cell

div.you {
    background-color: cyan;
}
/*
    >>>> !!! div 에 세로 정렬을 시키려면 !!! <<<<
    div 에 display 를 flex 로 하고, flex item 에서 margin: auto; 로 지정해주면 된다. 
*/

div#div_flex {
   /* border: solid 1px gray; */ 

   display: flex;	
   position: fixed;
   top: 600px;
   left: 1320px;

   width: 80px;
   height: 80px;
   background-color: navy;  
/* text-align: center;  */    /* 가로기준의 정렬은 필요없다. */
/* vertical-align: middle; */ /* 세로기준의 정렬은 필요없다. */ 

   border-radius: 50%;	
}

div#div_flex > a {
    text-decoration: none; /* 글자 밑줄 없앤다. */
    margin: auto;
}

div#div_flex > a:link, 
div#div_flex > a:visited,
div#div_flex > a:active {
    color: white;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------
<div id="container">

   <div id="parent">
       parent(부모)<br/>
       parent(부모)<br/>
       parent(부모)<br/>
       <div class="me">
         첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
         첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
         첫번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>  
       </div>
   </div>

   <div class="you">
     두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
     두번째 me(나)는 position: static;으로 했으므로 top: 200px; left: 200px; 으로 위치값을 줘봐야 엘리먼트의 위치값은 변하지 않으며 크기(width)를 따로 지정하지 않았으므로 부모 엘리먼트(요소)의 크기(width)를 따라간다.<br/>
   </div>

   <div id="div_flex">
       <a href="#">맨위로</a> <!-- href=" " 안에 id값을 넣어줘야하는데, href="#"는 자기자신 파일을 의미한다.(즉, 새로고침과 같은 것) -->
   </div>

</div>

 

div 에 세로 정렬을 시키려면,
div 에 display 를 flex 로 하고, flex item 에서 margin: auto; 로 지정해주면 된다. 

즉, 아래와 같다.-------------------------------------------------------------------------------------------------------------------

 

div#div_flex {
   /* border: solid 1px gray; */ 

   display: flex;	
   position: fixed;
   top: 600px;
   left: 1320px;

   width: 80px;
   height: 80px;
   background-color: navy;  
/* text-align: center;  */    /* 가로기준의 정렬은 필요없다. */
/* vertical-align: middle; */ /* 세로기준의 정렬은 필요없다. */ 

   border-radius: 50%;	
}

div#div_flex > a {
    text-decoration: none; /* 글자 밑줄 없앤다. */
    margin: auto;
}

겉을 감싸는 <div> 태그에서  display:flex 를 지정했으며,

그 안의 <a> 태그 즉, flex item 에서 margin: auto 로 지정했다. -----------------------------------------------------------

'Langauge > HTML, CSS' 카테고리의 다른 글

[HTML, CSS] 이미지(img) 속성  (0) 2022.08.09
[HTML, CSS] 테이블(table) 생성 - colspan, rowspan/ vertical-align , text-align/ :first-child, :last-child, :nth-child(숫자), ~, +  (0) 2022.08.09
[HTML, CSS] a 태그(링크태그), form 태그  (0) 2022.08.09
[HTML, CSS] semantic태그/ CSS 기본속성  (0) 2022.08.08
[CSS] display속성- id, class /margin, padding 태그  (0) 2022.08.07

'Langauge/HTML, CSS' Related Articles

티스토리툴바