css의 레이아웃(display 속성)을 알아보자.

  • html

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

    • block과 inline

        div,span{
    width: 80px;
    height: 80px;
    margin : 20px;
  }
  div {
    background: red;
    display: inline;
  }/* 한줄에 여러개를 넣을 수 있으며
  위 width,height와 상관없이 컨텐츠 크기에 딱 맞게
  설정된다.*/
  span {
    background: Blue;
    display: block;
  } /*블락은 한줄에 한개씩 width,height설정에 맞게 
  표현된다*/

      • Output.ver1

    • inline-block

      div,span{
  width: 80px;
  height: 80px;
  margin : 20px;
}
span {
  background: Blue;
  display: block;
} /*블락은 한줄에 한개씩 width,height설정에 맞게 
표현된다*/
div {
  background: red;
  display: inline-block;
} /* 인라인-블락은 한줄에 여러개를 넣을 수 있으며
위width에 반영되어 설정된다.*/

      • Output.ver2

Frontend

CSS

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...