CSS 2. display, position

@t189216·2024년 2월 19일

CSS

😎 프론트엔드

목록 보기

6/31

CSS 속성

display

display 는 element를 어떻게 표시할지 그 방법에 관한 속성입니다.

HTML 파일에 CSS를 적용해보겠습니다. 아래는 HTML 파일입니다.

<body>
    <!-- Block-level-->
    <div></div>
    <div></div>
    <div></div>
    
    <!-- Inline-level-->
    <span>1</span>
    <span>2</span>
    <span>3</span>

div 태그와 span태그를 꾸며보겠습니다. 아래는 CSS 파일입니다.

div, span {
  width: 80px;
  height: 80px;
  margin: 20px;
}

div {
  background: red;
}

span {
  background: blue;
}

<span> 는 내부에 내용이 있어야 출력되며, Inline-level 이므로 한 줄에 출력됩니다.

하지만 display를 변경하면 level을 변경할 수 있습니다.

...

div {
  background: red;
  /* 추가 */
  display: inline-block;
}

span {
  background: blue;
  /* 추가 */
  display: block;
}

<div> 내부에 내용이 있으면 inline-block이 아닌 inline을 사용해도 출력이 됩니다.

inline : 물건 (내용물에 따라 크기가 변합니다.)
element를 라인 안에 넣습니다.
- <span> 태그의 display 속성 기본값이 inline

...
<div>내용 1</div>
<div>내용 2</div>
<div>내용 3</div>
...

inline-block : 한 줄에 여러 개 배치가 가능한 상자

block : 한 줄에 하나만 배치가 가능한 상자
블록 단위로 element를 배치합니다.
- <p> 태그, <div> 태그, <h1> ~ <h6> 태그의 display 속성 기본값이 block
none
element를 화면에 숨기기 위해 사용합니다. 자바스크립트 코드를 넣을 때 주로 사용됩니다.
- <script> 태그의 display 속성 기본값이 none
flex
element를 블록 레벨의 flex container로 표시합니다. container이기 때문에 내부에 다른 element들을 표시합니다.

참고 문서 - display (영문)

position

position 은 element를 어떻게 위치시킬 것인지 즉, 포지셔닝을 어떻게 할 것인지를 정의하기 위해 사용됩니다.

HTML 파일에 CSS를 적용해보겠습니다. 아래는 HTML 파일입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <article class="container">
    <div></div>
    <div class="box">I'm Box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

div {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  background: red;
}

.container {
  background: yellow;
  left: 20px;
  top: 20px;
}

.box {
  background: blue;
}

container를 이동하려 했지만 변화가 없습니다. 왜일까요?

static

positoin의 기본값은 static 입니다. static 은 html에 정의된 순서대로 브라우저에 자연스럽게 보여지도록 출력합니다.

relative

positoin을 relative 로 변경하면 원래의 아이템이 있어야 하는 자리에서 상대적으로 옮겨갑니다.

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: relative;
}

absolute

컨테이너 블럭 기준으로 옮겨집니다.

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: absolute;
}

fixed

상자 안에서 완전히 벗어나 윈도우 기준에서 움직입니다.

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: fixed;
}

sticky

원래 있어야 하는 자리에서 스크롤하는대로 움직입니다.

.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: sticky;
}

참고 문서 - position

visibility

element를 화면에 보여주거나 감추기 위해 사용하는 속성입니다.

div {
	visibility: visible | hidden;
}

visible
element를 화면에 보이게 하는 것
hidden
화면에서 안 보이게 감추는 것. element를 안 보이게만 하는 것이고, 화면에서의 영역은 그대로 차지함.

길이

div {
    width: auto | value;
    height: auto | value;
    min-width: auto | value;
    min-height: auto | value;
    max-width: auto | value;
    max-width: auto | value;
}