본문 바로가기

[Html5+CSS3]block과 inline의 차이점, 구별방법

반응형
block과 inline의 차이점

block element

  • width , height , margin , padding (O)
  • 자동 줄 바꿈
  • Block Element 와 Inline Element 를 감쌀 수 있다.
  • 가로(width)폭은 부모 요소의 폭까지 늘어난다.
  • 형제 요소만큼 늘어난다.
  • 화면 높이까지만 높이가 주어진다.
  • <p>,<h1>~<h6>,<ul>,<ol>,<pre>,<dl>,<div>,<blockquote>,<form>,<hr>,<table>,<fieldset>,<address>...

         

         

        inline element

        • width , height , margin , padding (X) - 그래서 display 를 block 또는 inline-block 화 시켜서 임의로 속성값들을 조절할 수 있다.
        • border (O)
        • Block Element 를 감쌀 수 없다.
        • 자기자신(컨텐츠)까지만 폭을 가진다.
        • <br>,<abbr>,<a>,<img>,<q><acronym>,<object>,<label>,<select>,<sup>,<sub>,<span>,<textarea>,<input>...

           

          Block 은 감싸고 , 포함 하는 요소라 말할 수 있고, Inline 은 감싸지고 , 포함 당하는 요소라 말할 수 있다.

           

           

          여기서! 자주 쓰는 <div> 와 <span> 정리!

          - <div>,<span>은 마크업시에 자주 사용하는 컨테이너(container)요소이다.

          * 컨테이너(container)란? 여러가지를 묶어서 그룹화 시키는 것을 말한다.

             <div>,<span>컨테이너 요소이며 의미가 없다.

          <div>은 block element 이며, 제목, 단락, 테이블, 폼 등을 묶어줄 수 있다.

          <span>은 inline element 이며, 인라인 요소들과 텍스트들을 감싸줄 수 있다.

           

             

             

            inline은 절대로 block을 포함할 수 없다

             

            inline과 block을 구분하기 애매하다면?

            • 해당 태그에 백그라운드 스타일을 먹인다. 그러면, 블럭은 백그라운드가 한줄을 차지하고, 인라인은 태그영역만큼만 백그라운드가 먹는다.
            • 해당 태그 다음에 텍스트를 하나 입력해본다. 그러면 블럭은 입력한 텍스트가 한줄 내려와 보이고, 인라인은 해당태그 바로 옆에 입력한 텍스트가 보인다.

                 

                 

                 

                 

                 

                 

                반응형