[CSS] 레이아웃(display, position)

웹사이트를 만들 때 가장 중요한 것은??

잘 정의한 박스들을 원하는 위치에 원하는 사이즈로 잘 배치 할 수 있는 게 가장 중요합니다. 그러기 위해서는 display와 position에 대해서 아는 것이 중요합니다.

display

block : 박스인 데 한 줄에 하나만 표시된다.
inline : 한 줄의 공간에 따라 여러 개 표시되고, 컨텐츠의 사이즈에 따라 다르게 표시된다.
inlline-block : 한 줄에 여러개 넣을 수 있고, 상자로 변환 되어서 컨텐츠의 사이즈에는 상관없이 박스의 width, height에 맞춰 표시된다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <!-- Block-level -->
    <div></div>
    <div></div>
    <div></div>
    
    <!-- Inline-level -->
    <span>1</span>
    <span>2</span>
    <span>3</span>
</body>
</html>

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


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

span{
  background: blue;
  display: block;
}

position

static : html에 정의된 순서대로 자연스럽게 보여지는 속성
relative : 부모 사이즈로부터 정해진 값 만큼 이동하여 보여지는 속성
(원래 있어야 하는 자리에서 상대적으로 이동하여 보여지는 속성)
absolute : 내 item과 가장 가까이에 있는 box로 부터 상대적으로 이동하여 보여지는 속성
fixed : 상자 안에서 완전히 벗어나서 윈도우 안으로 부터 상대적으로 이동하여 보여지는 속성
sticky : 원래 있어야 하는 자리에 있으면서 스크롤링 되어도 이동하지 않고 원래 있던 자리에 그대로 붙어있는 속성

<!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>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </article>
</body>
</html>

div {
  width: 80px;
  height: 80px;
  margin: 20px;
  background: red;
}

/* static : html에 정의된 순서대로 자연스럽게 보여지는 속성 */
/* relative : 부모 사이즈로부터 정해진 값 만큼 이동하여 보여지는 속성
              (원래 있어야 하는 자리에서 상대적으로 이동하여 보여지는 속성) */
/* absolute : 내 item과 가장 가까이에 있는 box로 부터 상대적으로 이동하여 보여지는 속성 */
/* fixed : 상자 안에서 완전히 벗어나서 윈도우 안으로 부터 상대적으로 이동하여 보여지는 속성 */
/* sticky : 원래 있어야 하는 자리에 있으면서 스크롤링 되어도 이동하지 않고 원래 있던 자리에 그대로 붙어있는 속성  */
.container {
  background: yellow;
  left: 20px;
  top: 20px;
  position: relative; 
  
}

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

코드 작성한 곳

https://jsbin.com/yahodebege/edit?html,css,output

JS Bin

Sample of the bin:

jsbin.com

출처

https://www.youtube.com/watch?v=jWh3IbgMUPI

추천 사이트 (브라우저마다 찾는 속성이 지원이 되는 지 알려주는 사이트)

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

저작자표시

'프레임워크 > CSS' 카테고리의 다른 글

[생활코딩] CSS 시작하기 (0)	2022.01.17
[CSS] Flex Box (0)	2022.01.09
[CSS] 기본 셀렉터 (0)	2022.01.09
미디어 쿼리 사용법 (2) (0)	2022.01.05
미디어 쿼리 사용법 (1) (0)	2022.01.05