Display
HTML
<!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>
 
CSS
div, span {
    width: 80px;
    height: 80px;
    margin: 20px;
  }
  /*한 줄에 하나씩 나옴*/
  div{
    background: red;
    display: inline-block;
    /*
    inline: 한 줄에 여러개가 진열될 수 있는 상자
    span과 같이 한 줄에 여러개씩 나옴. 
    사용자가 정의한 박스 크기대로 화면에 표시
    */
   
    /*
    display: inline;
    inline: 물건
    span과 같이 아무런 내용이 없으면 화면상에 표시되지 않음.
    사용자가 정의해 놓은 사이즈는 무시하고 컨텐츠 크기에 따라 달라짐.
    */
   
  }
  /*한 줄에 여러개씩 나옴.*/
  span{
    background: blue;
    display: block;
    /*div와 같이 한 줄에 여러씩 나옴*/
  }

 

 
 
Position
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>
  </article>
</body>
</html>
 
CSS
div {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  background: red;
}
.container{
  background: yellow;
  left: 20px;
  top: 20px;
  position: relative;
}
.box{
  background: blue;
  left: 20px;
  top: 20px;
  position: fixed;
}
Position 정리
  •   static: (기본)
  •   relative: 원래 있어야 할 자리에서 상대적으로 20px씩 이동
  •   absolute: 내가 담겨있는 아이템과 가장 가까운 박스(여기에서는 container) 안에서  위치 변경이 일어남
  •   fixed: 상자 안에서 벗어나 윈도우 내에서  위치 정렬
  •   sticky: 스크롤링해도 원래 자리에 그대로 있음
 
 

 

CanIUse:
 
Display
 
Position

 

 

저작자표시 비영리 변경금지 (새창열림)

'웹 프로그래밍 > HTML | CSS' 카테고리의 다른 글

[오류해결] 반응형 웹 적용되지 않는 오류  (0) 2023.03.24
CSS Flex Box  (0) 2022.07.04
CSS 선택자  (0) 2022.07.04
HTML/CSS 참고 블로그 및 사이트  (0) 2021.11.26

티스토리툴바