CSS [4] – display(인라인, 블록 레벨), float, column, position(relative, absolute, fixed, sticky) 속성 알아보기

keepitupcoding

display 속성(블록, 인라인 요소)

span {
  display: inline-block;
  background-color: #333;
  color: whitesmoke;
  padding: 4rem;
}
  • block 레벨은 100% width, inline 레벨은 content의 width 만큼만 차지
  • inline element에는 height, margin-top, bottom 적용 불가
    • display 속성을 inline-block으로 변경시에 적용 가능
      • block 처럼 줄바꿈이 되지는 않지만, inline에 적용되지 않던 것들을 적용할 수 있음
  • <ul> inline, <li> block
  • display: none;으로 보이지 않게 할 수 있음

float 속성

  • float 속성은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정
flow-root 사용
    <section>
        <div class="block left">Float</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ducimus minima magnam provident cum
            libero,
            quo cumque molestiae obcaecati modi?</p>
    </section>
    <p>Officia reiciendis pariatur velit dolor consectetur laborum. Obcaecati a similique ducimus, eos quod cum ea eum
        qui sequi, odit unde?</p>
    <p>Ipsum explicabo nemo quidem natus corporis asperiores fugit similique repellendus rerum quasi, rem repudiandae
        maiores iste voluptatum odit, officia dicta.</p>
    <div class="block right">Float</div>
    <p>Aliquid adipisci, iusto itaque amet cumque placeat, assumenda laudantium recusandae nulla aperiam, dignissimos
        laboriosam? Obcaecati cum aut in quaerat doloremque!</p>
    <p>Repellendus reprehenderit nam inventore praesentium quas saepe neque aliquam deserunt, aliquid ad, quaerat in
        repellat, ducimus alias quasi hic mollitia?</p>
body {
  font-size: 1.5rem;
  font-family: "Roboto", sans-serif;
}

.block {
  width: 30vw;
  height: 30vw;
  background-color: black;
  color: #fff;
  padding: 1rem;
}

.left {
  float: left;
  margin-right: 1rem;
}

.right {
  float: right;
  margin-left: 1rem;
}

section {
  background-color: bisque;
  border: 1px solid #333;
  padding: 1rem;
  /* legacy
  overflow: auto;  */
  display: flow-root;
}
flow-root 사용 전
  • display: flow-root; 사용시 해당 컨테이너 내부의 모든 요소가 컨테이너 범위를 벗어나지 않도록 함

columns 속성

<body>
    <section class="columns">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse saepe sequi in adipisci nisi atque laudantium
            praesentium, hic excepturi dicta quae, perferendis nostrum aliquam ipsam assumenda! Laborum repudiandae
            neque est!</p>
        <p>Minima excepturi sequi cupiditate repellendus veritatis alias, id sunt fuga assumenda, soluta molestiae est!
            Reprehenderit corporis, sit quidem quos atque adipisci magni temporibus repudiandae est obcaecati provident
            ea, dolore eius.</p>
        <!-- <h2>next topic</h2> -->
        <p class="quote">&#147;Where's my rug, man?&#148; <span class="nowrap">&#8212;The dude</span></p>
        <p>A blanditiis facere quibusdam soluta deleniti ratione modi reprehenderit maiores quis voluptatem numquam
            molestiae, ullam officiis molestias culpa perspiciatis iusto labore odio veritatis suscipit accusantium
            quidem voluptates, itaque sequi. Repellat.</p>
        <p>Quo quis consectetur, reiciendis voluptate facilis tenetur id veritatis, rem, dignissimos voluptates
            necessitatibus ullam minima at explicabo velit. Culpa fuga suscipit alias dolores rem magni aut nobis
            distinctio nihil sint?</p>
    </section>
    <p>Molestiae in quis ipsa nemo et unde minus possimus commodi exercitationem ex, maiores, quo reiciendis cum
        doloribus tempore quam provident quibusdam a error porro! Voluptatem itaque nihil atque fugiat corporis?</p>
</body>
.columns {
  column-count: 4;
  column-width: 250px;
  columns: 4 250px;
  column-rule: 3px solid #333;
  column-gap: 3rem;
}

.columns p {
  margin-top: 0;
}

.columns h2 {
  margin-top: 0;
  background-color: #333;
  color: #fff;
  padding: 1rem;
  break-inside: avoid;
}

.columns .quote {
  /* `.quote` 만 선택자로 쓸 경우 구체성 점수에 의해 `.column p`의 `margin-top`이 상속됨 */
  margin-top: 2rem;
  font-size: 3rem;
  text-align: center;
  color: #333;
  column-span: all;
}

.nowrap {
  white-space: nowrap;
}
  • column-count 속성에 상관없이 브라우저 크기에 따라 column-width 자동으로 계산되어서 컬럼 숫자가 설정됨(count는 최대 숫자가 됨)
  • break-inside 콘텐츠가 컬럼에 의해 콘텐츠가 스플릿되는 것을 막을 수 있음
  • break-before: column 지정시 column break를 강제함
  • column-span: all 지정시 컨테이너가 컬럼 전체에 걸쳐있도록 할 수 있음
  • white-space: nowrap 지정시 콘텐츠가 line break 하지 않도록 할 수 있음

position 속성

    <div class="outer-container">
        <div class="inner-container">
            <div class="box absolute">
                <p>Absolute</p>
            </div>
            <div class="box relative">
                <p>Relative</p>
            </div>
            <div class="box fixed">
                <p>Fixed</p>
            </div>
            <div class="box sticky">
                <p>Sticky</p>
            </div>
        </div>
    </div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  min-height: 200vh;
}

.outer-container {
  border: 3px dashed #000;
  width: 75vw;
  height: 85vh;
  margin: 40px auto;
  position: relative;
}

.inner-container {
  border: 2px solid #00f;
  width: 40vw;
  height: 50vh;
  margin: 200px auto;
  /* position: relative; */
}

.box {
  width: 150px;
  height: 150px;
  color: #fff;
  padding: 1rem;
}

.absolute {
  background-color: #00f;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.relative {
  background-color: red;
  position: relative;
  top: 300px;
  left: 100px;
}

.fixed {
  background-color: green;
  position: fixed;
  top: 100px;
}

.sticky {
  background-color: #000;
  position: sticky;
  top: 0;
}
  • static은 position 속성의 기본 값, HTML에 작성된 순서 그대로 화면에 보임
  • absolute 포지션은 가장 가까운 relative parent가(static 속성이 아닌 요소) 기준이 됨 세팅 된 것이 없으면 가장 상위 태그(e.g. body 태그) 기본값
    • z-index 속성으로 다른 컨테이너보다 위에 위치하도록 할 수 있음
    • 만약 screen reader 같은 accesibility 이슈로 페이지에 존재하지만 화면에 보이지는 않았으면 좋겠다면 포지션을 absolute로 지정 후 left: -10000px 이런식으로 지정하기도
  • relative 포지션은 parent container가 기준이 됨
  • fixed 포지션은 브라우저가 스크롤 되어도 해당 위치에 고정
  • sticky 포지션은 relative + fixed 하이브리드
    • 스크롤할 때는 threshold 만큼 relative 처럼 동작하고 그 다음에는 fixed처럼 작동

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *