CSS- Column 컬럼 레이아웃, Position 포지션 속성 값 정리

keepitupcoding

CSS Tutorial – Full Course for Beginners

Lesson 12 – 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 하지 않도록 할 수 있음

Lesson 13 – 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 *