이진욱의코딩

<css> 위치(position)에 대해 알아봅시다. 본문

CSS

<css> 위치(position)에 대해 알아봅시다.

Crucifi 2019. 10. 5. 23:29

이번 시간은 css의 기술 중 하나인 위치에 대해 알아보도록 하겠습니다.

 

먼저 position의 상대 위치에 대해 알아보겠습니다.

여러 가지 오브젝트를 생성 후에 위치를 조정하게 될 때 사용하며 position의 옵션 중 relative를 선택하면

기존 오브젝트에 대해 상대적으로 배치되게 만듭니다.

 

우선, 예시를 보면서 설명드리겠습니다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>위치</title>
    <style>
    div{width:100px; height:100px; color:gray; font-size:24px;}
    div:nth-child(1){
      background-color:red;
      top:100px; left:100px;
      position:relative;
      z-index:2;
    }
    div:nth-child(2){
      background-color:blue;
      top:50px; left:50px;
      position:relative;
      z-index:3;
    }
    div:nth-child(3){
      background-color:green;
      top:-100; right:-50px;
      position:relative;
      z-index:5;
    }
    </style>
  </head>
  <body>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </body>
</html>

겹치는부분이생깁니다.

 

 

position:relative를 사용하면 이런 식으로 나타낼 수 있습니다.

만약 상대적으로 오브젝트를 이동하다가 겹치는 부분이 있다면 z-index를 써서 맨 앞부분에 나타낼 부분과 

뒷부분에 위치시킴을 조정할 수 있습니다. z-index값이 높을수록 우선권을 얻습니다.

위치 속성 중 position: relative는 적용하는 요소를 기준으로 움직입니다.

 top, left, bottom, right 위치 속성을 이용해서 움직입니다.

 

다음으로는 절대 위치에 대해서 알아봅시다.

position의 옵션 중에 absolute를 사용하면 됩니다.

absolute는 일단 부모(html)를 기준으로 위치를 갖는 속성으로 , 적용한 요소가 자신이 있던 위치를 가지지 못하게 되므로, 적용요소의 다음 요소가 그 자리로 위치하게 된다. 

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>위치2</title>
    <style>
    div{width:100px; height:100px; color:gray; font-size:24px;}

    div:nth-child(1){
      background-color:red;
      top:108px; left:108px;
      position:absolute;

    }
    div:nth-child(2){
      background-color:blue;
      top:0; left:0;
      position:absolute;

    }
    div:nth-child(3){
      background-color:green;
      bottom:0; right:0;
      position:absolute;
      
    }
    </style>
  </head>
  <body>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </body>
</html>

초록박스는 구석탱이에

 

 

이제 position에서 relative와 absolute를 배웠으니 한번 문제를 내볼게요.

 

Q : id가 son인 태그 거 부모 요소를 이용해서 우측 하단에 위치시켜보세요~

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>위치</title>
  </head>
  <body>
    <div id="papa">
      <div id="son"></div>
    </div>
  </body>
</html>

 

이렇게 만들어보세용

 

 

여기 이 코드를 변경시켜서 한번 해보세요! 해답 코드는 밑에 있습니다.

 

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>위치</title>
    <style>
      body{margin:0 auto;}
      #papa{
        width:500px; height:500px;
        background-color:blue;
        position:relative;
        margin:0 auto;
      }
      #son{
        width:100px; height:100px;
        background-color:yellow;
        position:absolute;
        bottom:0; right:0;
      }
    </style>
  </head>
  <body>
    <div id="papa">
      <div id="son"></div>
    </div>
  </body>
</html>

 

 

position값으로 absolute를 적용 시 부모 요소 중에 position을 가지는 

요소를 기준으로 위치시킵니다.

 

겹침을 표현하는 코드는 position밖에 없습니다.

 

이번에는

 

빨간색 top부분

 

 

이렇게 페이지 어느 부분에 있어도 top이라는 버튼만 클릭하면 맨 위로 이동하게 만드는 것을 만들어보겠습니다.

물론 css로 버튼을 예쁘게 꾸며서..

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>위치</title>
    <style>
    #mainn{width:500px; margin:0 auto;}
    #banner{
            width:100px; height:100px;
            /* 스크롤을 내려도 현위치고정 */
            position:fixed;
            top:100px; left:50px;
    }
    #banner a{
      width:120px; height:120px;
      display:block;
      text-decoration:none;
      text-align:center;
      text-transform:uppercase;
      line-height:100px;
      font-size:24px;
      border: 1px solid blue;
      background-color:yellow;
      border-radius:50%;
    }
    #banner a:hover{color:red;}
    </style>

  </head>
  <body>
    <div id="mainn">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus quasi eligendi impedit assumenda eveniet eum nihil, commodi? Impedit deleniti cum maiores dolorum odit aperiam nesciunt dolores, labore rerum itaque voluptate doloremque harum, ullam earum aliquam repellat, nobis porro dolore illum debitis aspernatur ab. Error, atque debitis itaque nostrum corporis iusto dolorum ab impedit eum. Ea nostrum qui, eum eveniet. Alias nulla a maxime provident labore. Quae sunt veniam, nostrum sed ut dolorem. Amet dignissimos culpa quos deleniti neque veniam molestiae, quia. Qui similique veniam debitis aut quaerat maiores fuga nisi. Labore aspernatur quas porro, consequuntur obcaecati, error vitae nemo dolorem.</p>
    </div>
    <div id="banner">
      <a href="#">맨위로go</a>
    </div>
  </body>
</html>

 

 

 

이쁩니다 헤헤

 

 

코드 설명 들어가겠습니다.

 

body부분에 각각 id를 지정해서 컨트롤하기 쉽게 만든 다음에 style태그를 이용해서 꾸며봤습니다.

  #mainn{width:500px; margin:0 auto;}

본문의 내용을 가운데로 500px로 정렬해줍니다.

 

#banner{
            width:100px; height:100px;
            position:fixed;
            top:100px; left:50px;

position:fixed를 사용해서 스크롤을 내려도 현 위치에 고정하게 만들었습니다.

 

  #banner a{
      width:120px; height:120px;
      display:block;
      text-decoration:none;
      text-align:center;
      text-transform:uppercase;
      line-height:100px;
      font-size:24px;
      border: 1px solid blue;
      background-color:yellow;
      border-radius:50%;
    }

인라인 요소이기 때문에 display:block을 해주고, text-decoration:none;로 밑줄을 없애고요, text-align:center;를 이용해서

배너 속의 글자를 가운데로 지정해줬습니다.   text-transform:uppercase;로 소문자를 대문자로 바꿨습니다.

border-radius:50%;로 곡선의 형태를 만들어줬습니다.    #banner a:hover {color:red;}를 사용해서 마우스를 갖다 놓을 때 색이 변하게 만들었습니다.

 

여기까지 제가 공부한 내용입니다.

 

 

긴 글 읽어주셔서 감사합니다~~~~ 다음 포스팅 때 봬요!!

 

'CSS' 카테고리의 다른 글

<css> float에 대해 알아보도록 합시다.  (1) 2019.10.08
여러가지 폰트속성에 대해서 알아봅시다.  (2) 2019.10.05
css의 여러가지 선택자에 대해 알아봅시다.  (0) 2019.09.24
스타일시트 적용방법에 대해 알아봅시다.  (0) 2019.09.24
미디어 쿼리 써먹기(응용)  (0) 2019.07.15
'CSS' Related Articles more