Block vs Inline

Block 

자동 줄바꿈이 되어 한줄을 다 차지하게 된다  전체 영역구조 차지 크기 지정반영된다

 

ex) <div> <address> <article> <aside> <audio> <blockquote> <form> <dd> <dl> <fieldset> <figcaption> <figure> <footer> <canvas> <h1> <h2> <h3> <h4> <h5> <h6> <video> <hgroup> <hr> <noscript> <ol> <output> <p> <pre> <section> <table> <ul> <hgroup>

 

<div style = "background-color : red;">
서식을 입력합니다
</div>

 

서식을 입력합니다

 

* display값을 inline으로 바꿔주면 한줄을 다 차지하지 않고 그 콘텐츠만차지한다.

<div style= "background-color :red; display : inline;">
서식을 입력합니다
</div>

서식을 입력합니다

 

 

 

Inline

자동 줄바꿈이 되지 않아 요소의 컨텐츠의 크기만큼 공간을 차지하고 있다

weight height 적용불가

margin paddin top bottom 적용불가

text-aline: center 가운데 정렬 불가

 

 

ex) <span> <a> <abbr> <acronym> <tt> <bdo> <big> <br/> <button> <i> <code> <dfn> <em> <cite> <img> <input> <kbd> <label> <map> <object> <q> <samp> <small> <script> <select> <span> <strong> <sub> <sup> <textarea> <b> <var>

<span style= "background-color :red;">
서식을 입력합니다
</span>

서식을 입력합니다

 

* display값을 block으로 바꿔주면 새로운 줄에서 시작하고 한줄을 다 차지한다.

<span style= "background-color :red; display : block;">
서식을 입력합니다
</span>

서식을 입력합니다

 

 

 

lnline-block

 block과 inline 특징을 가지고 있다inline과는 달리 크기 지정이 반영된다

한줄에 여러 태그사용가능

text-align : center 는 inline-block해준 위의 부모에게 해줘야 적용되어진다

 

글씨는 Inline이여서 패딩의 오른쪽과 왼쪽은  적용되지만 위아래는 적용되지 않는다 이럴때는 display :  inline-block으로 바뀌면 위아래 적용가능 inline성질을 가지면서 block설정으로 해준다 패딩top bottom사용가능

 

iframe을 이용한 페이지 삽입

iframe(inline frame)

해당 웹 페이지 안에 또 다른 하나의 웹 페이지를 삽입이 가능하다

<iframe src = "삽입원하는 페이지주소"></iframe>

 

<iframe src="https://lightofsun.tistory.com/" frameborder="0"></iframe>