티스토리 뷰

Frontend/Html&CSS

CSS display, position

AlgoRoot 2022. 1. 3. 14:09
반응형

1. inline, inline-block, block

 

inline (물건): 컨텐츠 자체만 꾸며주는 것. css에 영향받지 않음, 
inline-block (한 줄에 여러개가 진열 될 수 있는 상자) :
한 줄에 다 넣는데 안에 컨텐츠에 상관없이 지정한
css크기에 맞춰서 배열된다. 
block(한 줄 당 하나씩 들어가는 상자) 

<!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;
}

/* inline (물건): 컨텐츠 자체만 꾸며주는 것. css에 영향받지 않음, 
inline-block (한 줄에 여러개가 진열 될 수 있는 상자) :
한 줄에 다 넣는데 안에 컨텐츠에 상관없이 지정한
css크기에 맞춰서 배열된다. 
block(한 줄 당 하나씩 들어가는 상자) */ 

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

span {
  background: blue;
  display: block;
}

 

 

2. position, display


position defualt value: static.
relative : 원래 있던 자리에서 지정한 값만큼 이동
absolute : 내 아이템이 담겨있는 박스 (article)안에서 지정한 값만큼 이동
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> 


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

 

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


/* position defualt value: static.
relative : 원래 있던 자리에서 지정한 값만큼 이동
absolute : 내 아이템이 담겨있는 박스 (article)안에서 지정한 값만큼 이동
fixed : 웹페이지 기준으로 지정한 값만큼 이동
sticky : 스크롤할 때도 그 자리에 붙어있음*/


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


.box {
  background: blue;
  left: 20px;
  top: 20px;
  position: fixed; 
]
반응형

'Frontend > Html&CSS' 카테고리의 다른 글

html, css Responsive header 역시나 오늘도 있었던 issue  (0) 2022.01.04
CSS Flexbox  (0) 2022.01.04
CSS selector  (0) 2022.01.03
Html, CSS Tag, 유효태그 유무 확인 사이트  (0) 2021.12.15