css기초이론 - CSS포지셔닝 - 엘리먼트 배치하기 (속성 : position, fixed)

HTML, CSS 2021. 1. 15. 00:46
반응형

부모요소 : relative

자식요소 : absolute

 

좌표 속성 (left, right, top, bottom)은 position속성중 fixed, absolute, relative가 선언된 경우만 사용할수 있음

 

semantic-ui.com/

 

Semantic UI

Shipping Choose your shipping options

semantic-ui.com

 

codingworks.cafe24.com/section-works/40/

 

Class - Google Download

Continue at the stop If you switch to a mobile phone while using your laptop, you do not have to search again for the web page you were reading. With Chrome, you can instantly access open tabs, bookmarks, and recent search results from any device. In this

codingworks.cafe24.com

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <title>[css] position : fixed</title>
    <style>
      .arrow_up {
        display: block;
        /* border: 1px solid crimson; */
        /* border-radius: 30px; */
        color: #222222;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 30px;

        /* 좌표가 있어야함 */
        position: fixed;
        right: 20px;
        bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>position: fiexed</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique sunt
        quia animi exercitationem, ab odio corrupti iste ea, officia, quam porro
        dolorem enim! Incidunt esse porro maiores ratione labore autem molestias
        adipisci perspiciatis amet, magni iste eligendi hic beatae modi dolore
        earum similique obcaecati repellat officia ad mollitia ducimus deleniti
        et. Quis magni, alias, incidunt fugit ipsa laboriosam quisquam, nisi
        sequi itaque deleniti cumque tenetur nulla minus earum fugiat! Sint
        voluptatum aperiam odio magnam, laudantium ratione doloremque, sed
        cumque perspiciatis, provident eveniet? Delectus sed dolorem in
        sapiente. Distinctio quaerat, illum animi praesentium nam quibusdam
        dolorum magnam consequuntur quam! Iure mollitia corrupti consectetur
        distinctio quis laudantium, expedita quisquam unde libero maiores
        tenetur voluptatibus. Consectetur numquam, eveniet ab enim perspiciatis
        odit fuga sunt nisi veritatis fugiat reprehenderit totam, ratione
        voluptatum corporis laborum amet iure corrupti cupiditate aliquid ipsa
        quia minima omnis! In, sequi! Mollitia maiores eum nulla blanditiis,
        facilis repudiandae corporis magnam sint fugiat natus laudantium velit
        distinctio, explicabo pariatur eius. Esse aliquam qui debitis nesciunt
        architecto fugit optio natus, iusto voluptatibus odio ea aliquid
        repellat modi temporibus quisquam neque itaque magnam odit asperiores
        similique illo blanditiis minima soluta in? Adipisci quas asperiores
        dolor, nostrum nam sit totam ea tenetur officiis atque neque nulla
        debitis delectus magnam tempora, similique numquam dignissimos quaerat!
        Id totam necessitatibus cupiditate maiores recusandae sint illum in quas
        minus quisquam repellat explicabo distinctio porro, hic labore et nemo
        fugiat natus pariatur exercitationem nam magnam temporibus odio. Commodi
        ad alias nihil provident modi cum laudantium, eum quibusdam numquam
        delectus voluptatum repellendus ipsum sint dolorum veniam molestias at.
        Placeat voluptates rem in maxime vitae quod qui deserunt aperiam
        repudiandae dolorem quibusdam enim voluptatibus corrupti cum ad
        accusamus, commodi, ea non repellat possimus ullam mollitia alias harum.
        Possimus molestiae dolorem, excepturi adipisci consectetur vitae!
        Reprehenderit a voluptatibus soluta nihil officiis atque maiores
        corrupti ab sequi ipsam. Animi nostrum repellendus nesciunt alias qui
        similique tempore quas maiores quae odio quis velit quasi, temporibus
        deserunt, esse rerum beatae, numquam natus eum maxime dolores harum
        recusandae vel consequatur. Eligendi, dicta nisi excepturi illum qui
        amet minima nam assumenda eius, voluptatum ullam dolores adipisci
        consequatur voluptatem neque quibusdam molestiae labore tempore! Dolorem
        exercitationem mollitia sequi, dignissimos alias eos at autem, animi
        perferendis omnis soluta quo officiis expedita officia ab tempore! Sit
        vel quos cupiditate itaque minus tempore cumque ipsam debitis id
        molestias, modi nostrum illo iure. Aperiam, similique soluta corporis,
        nobis nam, debitis quisquam dolores temporibus vel magnam ex natus
        aliquam. Dignissimos est suscipit labore iure accusantium vel unde
        obcaecati dolores ipsam harum distinctio id doloribus repudiandae,
        tenetur ea repellendus praesentium accusamus, at quae quas et ullam
        similique! Architecto nesciunt sequi molestias, earum perspiciatis odit
        ut natus odio molestiae unde illo, ipsa animi error iusto ex explicabo
        quae sed! A, tempore necessitatibus iusto impedit non sit! Amet sunt ab,
        pariatur modi aut voluptas fugiat velit ipsam, nulla, expedita porro
        sint facilis eaque beatae est! Iure ex assumenda explicabo ullam dolorem
        sit eveniet expedita modi fugiat illum asperiores tempora, repellat
        eligendi ipsum optio libero hic laboriosam voluptates iusto. At
        similique autem molestias, sequi dolorum quae soluta dolorem nobis
        tenetur delectus repudiandae? Voluptatibus quis illum minus incidunt sit
        sapiente ut. Exercitationem eaque blanditiis cupiditate. Nobis, ad eos
        magni at nisi, laboriosam aliquam sint assumenda expedita voluptate hic
        fugiat vel, amet accusantium id! Sapiente consequuntur, cumque beatae
        repellendus unde perspiciatis repellat facilis. At, quos esse quo,
        pariatur laudantium iste consequatur excepturi voluptatem reiciendis
        consectetur perspiciatis tempora doloribus maiores sit nostrum eveniet
        ex laboriosam dolorum repudiandae animi error? Tenetur asperiores odit
        atque sapiente hic consequuntur. Harum tenetur ut magnam dolor neque,
        quidem aspernatur molestias illum doloremque sed accusantium non
        quisquam et praesentium rerum nam ducimus inventore fuga, dolorum hic
        cumque cum voluptas omnis quam. Fugiat nam, architecto quam est
        inventore, consequuntur perspiciatis ex animi cumque adipisci quas ad
        perferendis facere ducimus. Officiis possimus laborum blanditiis
        delectus doloribus eaque placeat officia libero! Voluptatem, corporis.
        Sit mollitia consequatur ab. Tempora accusamus sapiente eum vitae
        aperiam hic odit voluptas corrupti ullam inventore! Perspiciatis sed et
        similique voluptas dolore sequi, odit nam, nemo eveniet assumenda
        tempore dolor, expedita repellendus ratione? Tempore voluptate sit
        ullam, debitis qui eius magni laboriosam quod dolor excepturi quas quis
        reprehenderit cumque nam aliquid distinctio deserunt sed. Vel,
        reiciendis ipsa temporibus mollitia velit rerum aliquam repellendus,
        doloribus incidunt consequatur voluptatum magni libero eaque ipsum
        facilis eos voluptatibus quisquam. Eaque ab, repudiandae vero laboriosam
        deleniti molestias quae, facere libero labore eveniet similique iusto
        commodi quod beatae quia, nemo vel! Officia optio eaque porro itaque
        dicta veniam distinctio eveniet laboriosam rerum. Minima aut totam quis
        perspiciatis impedit alias, dolore eligendi officiis quia voluptatibus
        provident, nulla dolorum dignissimos voluptatem reprehenderit commodi,
        porro necessitatibus sit. Quia voluptatem natus corrupti cupiditate
        repellendus placeat consectetur molestiae vel quis incidunt mollitia
        vitae, in porro numquam molestias eligendi tempora eius assumenda
        tenetur voluptate expedita minus ullam officia nemo. Ad est enim
        repudiandae nesciunt a doloremque ipsam distinctio, ex ab vel. Minima
        modi, magni architecto doloribus voluptate impedit similique atque
        facere. Et inventore assumenda dicta incidunt tempore maxime, labore
        odio alias iure vitae ipsam pariatur dolore unde, corporis consectetur
        obcaecati ad impedit libero soluta voluptatem iusto beatae ullam sed!
        Minima illo a ipsa, nostrum quam sequi voluptas facilis, nisi dicta
        consequuntur sint consequatur ullam magnam debitis est libero blanditiis
        harum laudantium, doloribus repudiandae aliquam perferendis? Aperiam
        sint quasi dicta sit voluptas cupiditate fugit id, tempore ea et natus!
        Non tempora, animi mollitia nulla adipisci sunt velit officia soluta
        voluptates id exercitationem laborum pariatur quasi porro vitae ipsa
        dolor obcaecati nam enim deserunt ab molestias molestiae. Tempora,
        eaque, impedit voluptate tempore temporibus quas consectetur ea
        voluptatibus officiis quis reprehenderit! Incidunt possimus dolore,
        aperiam aliquam magnam deserunt magni. Libero nesciunt eaque alias neque
        nulla id illum error dolorem eius temporibus velit quis autem, aperiam
        iste tempora. Ea distinctio repellendus ab, quasi maiores culpa dolor
        hic nulla consequatur veritatis eveniet consequuntur, ex, nostrum
        doloremque mollitia illo optio voluptatibus beatae velit magnam!
        Necessitatibus deserunt, ad quaerat recusandae minus aperiam quisquam
        fugit! Explicabo asperiores animi alias dolorum corporis consequatur
        debitis, dolore accusamus mollitia.
      </p>
    </div>

    <a class="arrow_up" href="">
      <i class="fa fa-arrow-circle-up" aria-hidden="true"></i>
    </a>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css position: absolute</title>
    <style>
      body {
        margin: 0;
      }
      div {
        width: 50px;
        height: 50px;
        background-color: dodgerblue;
        color: #ffffff;
        text-align: center;
        line-height: 50px;
        border: 2px solid red;
      }

      .box1 {
        /* world position */
        position: absolute;
        left: 0;
        top: 0;
      }
      .box2 {
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .box3 {
        position: absolute;
        right: 0;
        top: 0;
      }
      .box4 {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      h1 {
        color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css position: absolute</title>
    <style>
      body {
        margin: 0;
      }
      div {
        width: 50px;
        height: 50px;
        background-color: dodgerblue;
        color: #ffffff;
        text-align: center;
        line-height: 50px;
        border: 2px solid red;
      }

      .box1 {
        /* world position */
        position: absolute;
        left: 0;
        top: 0;
      }
      .box2 {
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .box3 {
        position: absolute;
        right: 0;
        top: 0;
      }
      .box4 {
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .box5 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      h1 {
        color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">4</div>
  </body>
</html>

 

 

참고

www.youtube.com/watch?v=RyFTd9YJSDs&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99&index=23

반응형
: