엘리먼트 스타일

리충녕·2023년 7월 18일

📖 엘리먼트 스타일 지정

display

엘리먼트의 정렬 방법

종류	의미
block	가로 영역을 모두 차지하며 한줄에 여러 엘리먼트가 나열될 수 없다. width, height 속성 지정이 가능하다.
inline	주로 텍스트를 처리하는 엘리먼트의 기본값으로 사용된다. width, height 속성 지정이 불가능하다.
inline-block	한 줄에 여러개의 엘리먼트를 표시할 수 있다. 줄바꿈이 불가능하며 width, height 속성 지정이 가능하다.
none	화면에 해당 엘리먼트가 표시되지 않는다.

block, inline-block 속성 이해를 위한 국기 표현 예제

#ireland_G{
      background: green;
      display: inline-block;
      width: 3rem;
      height: 7rem;
    }
    #ireland_W{
      background: white;
      display: inline-block;
      width: 3rem;
      height: 7rem;
    }
    #ireland_Y{
      background: yellow;
      display: inline-block;
      width: 3rem;
      height: 7rem;
    }

    #Netherlands_R{
      background: red;
      display: block;
      width: 10rem;
      height: 3rem;
    }
    #Netherlands_W{
      background: white;
      display: block;
      width: 10rem;
      height: 3rem;
    }
    #Netherlands_B{
      background: blue;
      display: block;
      width: 10rem;
      height: 3rem;
    }

<h3>Ireland</h3>			//inline-block
  <div id="ireland_G"></div>
  <div id="ireland_W"></div>
  <div id="ireland_Y"></div>

  <h3>Netherlands</h3>		//block
  <div id="Netherlands_R"></div>
  <div id="Netherlands_W"></div>
  <div id="Netherlands_B"></div>