inline, inline-block, block 에 대해서

inline 속성값을 가진 태그로 a, span 태그 등이 있다.

    <a href="인터넷 링크">인터넷주소링크</a>, <span>요소(엘리먼트)</span>

block 속성값을 가진 태그로 div, p, h1 등이 있다.

    <div>정해진 것 없음</div>

    <p>내용</p>

    <h1>제목</h1>

 

코드의 차이점은 html에서 표시될때 영역할당에 따른 구분이다. 

block은 한 줄을 차지하고, 그 옆에 아무런 속성, 요소등이 올 수가 없지만,

inline 속성은 딱 감싸진 글자들만 표시되기때문이다. 

inline-block 블록 자체의 성질은 block이지만, inline-의 문구가 붙으므로 inline의 성질이 생겨서 block속성을 동시에 가진 것.

 

이해하기 쉽도록 한번 예제를 만들어 보았다.

맨 마지막은 inline-block을 블록성질이 inline으로 바뀐것을 볼 수 있도록 확인하기 위해서 작성하였다.

display 속성으로 해당태그들의 속성을 강제로 지정해주었다.

h1은 block 태그

span는 inline 태그

 

레이아웃을 잡기 위해 inline-block을 사용할 수도 있습니다. 이때 몇 가지 염두에 둘 점이 있습니다.

• inline-block 엘리먼트는 vertical-align 프로퍼티의 영향을 받습니다(아마 이 프로퍼티는 top으로 설정하고 싶을 겁니다).
• 각 칼럼의 너비를 설정할 필요가 있습니다.
• HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생깁니다.

Block, inline 개념 spn태그를 설명하면서(위코드 TIL 1일차) inline을 언급하는데, 그 당시에는 이해하지 못 하였으나, block개념을 이해하면서 inline을 이해하게된다. block은 div와 같이 한줄 전체를 커버하는 것으로 그 옆에는 다른 요소가 붙지 못한다. 그에 해당되는 태그들은 div, header, footer, p, li, table, h1등이 대표적인 block태그이다.   inline 태그는 span이 대표적인 예시로 볼 수 있다. 하지만, block태그라 하여 inline을 사용할 수 있게 도와주는 css 속성으로 display와 float가 있다.. .inline-p { display: inline-block; } .float-left { float: left; } .float-right { float: right; } 이렇게 속성을 부여하면, 인라인 성질로 변경하여 사용이 가능하다. 반대로도 가능한데, inline에서 block으로 바꾸려면 inline-block로 쓰면 block태그로 사용이 가능하게 된다. .block-span { display: block; } 해당 <span>은 <p>와 동일한 성질을 갖게 되었다.

여기까지 본인이 작성하였다.

---

display 속성이 inline인 태그의 성질 width, height, margin 속성들을 가질 수 없다.(이런 속성을 지정하더라도 무시된다.) 줄 간격의 조정은 line-height 속성을 사용한다. inline 속성을 갖는 태그가 연속으로 위치할 때는 두 내용을 구별할 수 있을 정도의 간격이 생긴다.   display 속성이 block인 태그의 성질 width, height, margin 속성을 가진다.   ※ 이런 성질로 인해서 inline 속성값을 갖는 태그 안에 block 속성값을 갖는 태그가 쓰일 수 없다. (반대로 block 속성값을 갖는 태그 안에 inline 속성값을 갖는 태그는 쓰일 수 있다.) display 속성값 none : 해당 요소를 제거 inline : 해당 요소를 inline 으로 바꿈 block : 해당 요소를 block 으로 바꿈 inline-block : inline 속성(한 줄 내에서 다른 요소들과 연결됨)과 block 속성(width, height, margin 등의 속성)을 동시에 가짐   - 출처 - https://thrillfighter.tistory.com/468