[CSS 정리 - 2] 기초 정리 - display, position

오늘도 프로그래밍 관련 포스팅입니다!!


영상을 보면서 정리를 하고 있구요!!!
영상은 유튜버 드림코딩 by 엘리 님의 CSS 레이아웃 정리 display, position 완성 글을 기반으로 합니다.

CSS Documents Site!!!

https://developer.mozilla.org/ko/docs/Web/CSS/Reference


display

  • inline-block : block 형태로 한줄로 나열(길이가 넘어 갈시 자동 줄바꿈)
  • block : block형태로 구현되나 한줄에 1개만 표시됨
// html
<body>
  <div></div>
  <div></div>
  <div></div>
  
  <span>1</span>
  <span>2</span>
  <span>3</span>
</body>

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

div {
  background:red;
  display:inline-block;
}

span {
  background:yellow;
  display:block;
}

결과물


position

  • static : 기본값으로 설정되는 표지션으로 그냥 순서대로 표시된다.
  • relative : 원래 있어야 하는 자리에서 상대적인 위치로 표시된다.
  • absolute : 내 부모 element 안에서 절대 값의 위치로 표시된다.
  • fixed : window 기준으로 위치를 잡는다.(부모랑 상관 없음)
  • sticky : 스크롤을 내렸을 때 설정된 자신의 위치 아래로 더이상 내려가지 않음
// 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="box1">Box1</div>
  <div class="box2">Box2</div>
  <div class="box3">Box3</div>
  <div class="box4">Box4</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>
    <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>
</body>
</html>

// css
div, span{
  width:50px;
  height:50px;
  margin-bottom:20px;
  background:red;
}

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

.box1{
  background:green;
  left:10px;
  top:10px;
  position:relative;
}

.box2{
  background:gray;
  left:10px;
  top:10px;
  position:absolute;
}

.box3{
  background:yellowgreen;
  left:10px;
  top:10px;
  position:fixed;
}

.box4{
  background:yellowgreen;
  left:10px;
  top:10px;
  position:sticky;
}

body{
  border:1px solid #000;
}

결과물


display, position 만 잘써도!!! 중간은 갈 듯 합니다!!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

@tipu curate

start success go! go! go! GOMCAM 20210523_0006190897.png

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 41.63%, steem power : 1808034.56, STU KRW : 1200.
@happyberrysboy staking status : 12340 KRWP
@happyberrysboy limit for KRWP voting service : 12.34 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 38.84 KRWP [55513827 - 832dd488abe809ebba2fac8eb5c1a1b8fe5ac8d8]

색칠공부 하시는건가요? ㅎㅎ
즐겁고 안전한 불금 보내세요~