1. normal-flow

요소의 레이아웃을 변경하지 않을때 배치하는 방법

  • position, float으로 레이아웃을 변경하지 않으면 요소는 자연스러운 흐름으로 배치됨
    • inline은 가로로 배치되고 block(부모 너비의 100%차지)은 세로로 배치됨

2. display

2-1) inline 요소

  • span 태그가 해당
  • 영역의 크기가 내부 콘텐츠 크기로 정해짐
  • width와 hegith를 가지지 못함
  • margin, padding의 top/bottom을 지정하지 못함
  • 여러 요소가 가로로 배치됨

2-2) block 요소

  • 영역의 크기를 widthd와 height로 지정 가능
  • width를 지정하지 않으면 가로 전체를 차지
  • 여러 요소가 세로로 배치됨

2-3) inline-block 요소

  • inline과 block 요소의 특징을 모두 가짐
  • width, height 지정 가능
  • margin, padding의 top/bottom 지정 가능
  • 여러 요소가 가로 배치

3. 요소를 없애기

3-1) display: none

<style>
    div{
        height: 200px;
        border: solid;
    }
    .box1{
        background-color: darkorange;
    }
    .box2{
        background-color: greenyellow;
        display:none;
    }
    .box3{
        background-color: skyblue;
    }

</style>
<body>
    <div class="box1">Lorem ipsum</div>
    <div class="box2">Lorem ipsum</div>
    <div class="box3">Lorem ipsum</div>
</body>
  • 코드 상에는 보이지만, 화면에서는 확인 할 수 없음
  • 레이아웃 상에서 아예 사라짐(그리지 않음)

3-2) visibility

<style>
    div{
        height: 200px;
        border: solid;
    }
    .box1{
        background-color: darkorange;
    }
    .box2{
        background-color: greenyellow;
        visibility: hidden;
    }
    .box3{
        background-color: skyblue;
    }

</style>
<body>
    <div class="box1">Lorem ipsum</div>
    <div class="box2">Lorem ipsum</div>
    <div class="box3">Lorem ipsum</div>
</body>
  • 기본값은 visible로 화면에 나타냄
  • hidden으로 처리하면 레이아웃 상에 존재(화면에 존재한다는 의미) : 자리는 차지하지만 요소가 눈에 보이지 않음

4. float

요소를 화면에 띄우는 역할

  • 기본값은 none, none인 경우 블록 요소의 우측에 다른 요소가 배치될 수 없음
  • left, right를 값으로 사용할 수 있고, 요소가 왼쪽에 있는 경우 다른 내용을 그 옆으로 배치할 수 있음
    • image 클래스를 가지는 div 태그는 블록 요소이기 때문에 width가 화면 전체를 차지
    • image 클래스에 float을 주면 p 태그가 image 클래스 우측에 배치됨
    • float 속성을 주면 2층이된다고 생각하면 이해하기 쉬움
      • float 속성으로 왼쪽 2층에 이미지가 배치되었기 때문에 여전히 1층은 비어있는 상태
      • 이때 p태그를 작성하면, 비어있는 1층으로 p태그가 배치됨
        <style> 
  .image{
      width: 100px; 
      height: 100px; 
      border: 2px solid pink; 
      float: left; 
      margin: 10px; 
  } 
  .box1{ 
      background-color: darkorange; 
  } 
</style> 
<body> 
  <div class="image"></div> 
  <p>Lorem ipsum dolor sit, ament</p> 
</body>


5. position

  1. static : 기본값으로 normal-flow에 따라 배치(top, right, left, bottom 사용 불가)

  2. relative

    • 요소를 normal-flow로 배치하고, 자기자신을 기준으로 top, right, left, bottom을 사용해서 배치

    • top, right, left, bottom을 사용하지 않으면 원래자리에 배치됨(static일 때의 위치)

    • 자기 자신은 position이 static일때가 기준점

      <style>
 div{
     width: 100px;
     height: 100px;
     border: 4px solid red;
 }
 .box2{
     position: relative;
     top: 50px;
     left: 80px;
 }
</style>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
</body>

  3. absolute

    • abosolute 사용시 float처럼 요소가 붕 뜨게 되고, 2층을 차지해 1층이 비어있어 다른 요소가 채워짐

      • absolute속성 아래의 요소들에 대한 normal flow를 형성

    • top, right, left, bottom 속성 사용 가능

    • 가장 가까운 위치의 조상 요소를 기준으로 배치

    • 조상은 Position이 static이 아닌 요소를 기준점으로 찾기

    • 조상의 속성 중 position이 없는 경우 body를 기준으로 배치)

      <style>
 div{
     width: 100px;
     height: 100px;
     border: 4px solid red;
 }
 .box2{
     position: absolute;
     top: 50px;
     left: 80px;
 }
</style>
<body>
 <div class="box1"></div>
 <div class="box2"></div>
 <div class="box3"></div>
</body>

  4. fixed

    • 뷰포트를 기준으로 top, left, right, bottom을 설정
    • fixed를 하면 스크롤을 내려도 이동하지 않음(고정됨)

  5. sticky

    • normal-flow 흐름으로 배치
    • 스크롤이 되는 조상이 기준점
      • 바로 하위의 자식에게 sticky 설정
      • 자식의 자식에게 sticky를 주면 동작하지 않음
    • 특정 위치의 스크롤을 지나갔을 때 고정됨

6. overflow

요소의 콘텐츠가 너무 커서 요소의 블록 서식에 맞출수 없을 때의 처리방법

  • 2가지 속성 : overflow-x, overflow-y -> 한줄로 쓰는 것도 가능
  • visible(기본값), hidden, scroll, auto
  • overflow를 사용하는 이유
    • 그림 처럼, width와 height로 div를 설정해 준 경우, 콘텐츠가 영역을 넘치면, 다른 요소와 겹치는 상황이 발생할 수 있음
      <style> 
div{ 
width: 200px; 
height: 225px; 
background-color: pink; 
} 
</style> 
<body> 
<div> 
Lorem ipsum dolor sit amet consect 
<br> 
Lorem ipsum dolor sit amet consect 
</div> 
<h1>안녕하세요</h1> 
<h1>안녕하세요</h1> 
<h1>안녕하세요</h1> 
</body>

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid)  (0) 2024.04.10
CSS 요소 변화(transform, transition, 애니메이션)  (0) 2024.04.10
CSS Box Model  (0) 2024.04.08
CSS 상속&속성  (0) 2024.04.07
CSS 기초 & 선택자  (1) 2024.04.07

+ Recent posts

티스토리툴바