HTML, CSS

CSS 레이아웃 관련 속성

gamzaggang7 2025. 4. 15. 13:34
728x90

웹 문서 레이아웃

display

: 배치 방법 결정

  • block: 인라인 레벨 요소를 블록 레벨 요소로 처리
  • inline : 블록 레벨 요소를 인라인 레벨 요소로 처리
  • inline-block : 인라인 레벨 요소로 표시하되 블록 레벨 요소의 속성을 추가. 마진과 패딩 지정 가능
  • none: 화면에 표시하지 않음
  <p>국어</p>
  <p>수학</p>
  <p>영어</p>

block(기본) / inline / inline-block, width 100px 추가

float

: 요소를 문서의 흐름에서 제외한 채 부모 또는 루트 요소를 기준으로 위치를 변경

  • none: 기본값
  • left: 문서의 왼쪽에 배치
  • right: 문서의 오른쪽에 배치

clear

float 속성을 사용하면 그다음에 넣는 다른 요소에도 같은 속성이 전달된다. clear 속성을 사용하여 float 속성을 해제할 수 있다.

  • left: float: left를 해제
  • right: float: right를 해제
  • both: float: left와 float: right를 해제
  <style>
    .container {
      height: 400px;
      border: 1px solid #000;
    }
    #first {
      float: right;
    }
    #second {
      float: right;
    }
  </style>
</head>
<body>
  <div class="container">
    <img id="first" src="./img/profile.jfif" alt="">
    <img id="second" src="./img/profile.jfif" alt="">
    <p>css 공부중</p>
  </div>
</body>

p { clear: right; } 적용 ->

728x90

웹 요소 위치 지정

left, right, top, bottom

: 요소 위치 지정. 기준 위치와 요소 사이에 얼마나 떨어져 있는지 지정

position

: 문서 상에 요소 배치 방법 지정

  • static: 기본값. 문서의 흐름
  • relative: 문서의 흐름에 따라 배치된 자리 기준
  • absolute: position이 지정된 상위 요소 기준(없으면 화면 기준). 문서의 흐름에서 제외됨
  • fixed: 브라우저 창 기준으로 고정
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: cadetblue;
    }
    .rel {
      background-color: aqua;
      position: relative;
      top: 50px;
      left: 20px;
    }
  </style>
</head>
<body>
  <div class="abs">1</div>
  <div class="rel">2</div>
  <div class="scroll">3</div>
  <div class="fix">4</div>
</body>

    .abs {
      position: absolute;
      right: 50px;
    }

    .scroll {
      height: 2000px;
    }
    .fix {
      position: fixed;
      top: 200px;
      left: 50%;
    }

z-index

: 요소의 쌓임 순서 정의. 위치 지정 요소에 적용할 수 있는 속성

위치 지정 요소: position 속성이 정의되어 있는 요소
  <style>
    div {
      width: 100px;
      height: 100px;
      position: relative;
    }
    .div1 {
      background-color: red;
      z-index: 4;
    }
    .div2 {
      background-color: orange;
      bottom: 50px;
      z-index: 3;
    }
    .div3 {
      background-color: blue;
      bottom: 100px;
      z-index: 2;
    }
    .div4 {
      background-color: green;
      bottom: 150px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</body>

overflow

: 콘텐츠가 영역에서 넘칠 때 처리 방식 지정

  • visible: 기본값. 영역을 벗어난 콘텐츠를 그대로 보여줌
  • hidden: 영역에서 벗어난 부분이 보이지 않게 함
  • scroll: 스크롤 생성
  • auto: 웹 브라우저의 설정 값을 따름

hidden / scroll / auto

 

728x90