모스카토

[css ] block v.s inline 본문

프런트엔드

[css ] block v.s inline

라리라밤 2020. 9. 2. 22:24

css 의 프로퍼티 중 display에는 block이나 inline등의 값을 줄 수 있다.

block

박스모양의 영역을 가지고, 같은 줄에는 아무것도 있을 수 없다.

웹페이지의 대부분은 박스로 이루어진다.

태그 하나는 박스를 이루고, 태그 안에 태그는 박스 안에 박스가 된다.

영역을 나누는 것과 비슷하게 박스를 사용한다.

html 코드

html > body> div > div.box2 순으로 빈 태그들이 있다.

여기에 각 태그마다 배경색이 다르게 색깔을 주면

위 코드의 결과화면

위와 같이 각 박스 안에 박스가 들어있다.

block 의 특징

  • width, height 가 존재
  • margin, padding
  • 줄 하나에서 옆에 다른 요소가 올 수 없다. (가로 폭 전체를 차지한다.)

block에 해당하는 태그

  • div, p, table, section, article, header, footer, main, h1~h6, li, ol, ul, address 등

collapsing margins :

바깥 태그와 안태그의 경계가 같으면 위아래쪽 margin이 하나로 취급되는 현상.

더 큰 margin으로 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      html {
        background-color: rgb(255, 245, 193);
      }
      body {
        background-color: rgb(130, 230, 260);
        margin: 50px;
      }
      div {
        background-color: rgb(25, 29, 255);
        width: 100px;
        height: 100px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

body와 div 각각에 margin을 다르게 주면 두 박스의 경계선이 붙어서 더 큰 margin 50px로 적용된다.

위 코드의 결과화면

inline

inline 의 특징

  • width, height 지정 못함
  • margin 은 좌우에만 지정 가능 /  padding은 적용 가능
  • 줄 하나에서 다른 요소와 같이 존재할 수 있다.
  • line-height 프로퍼티로 margin-top, bottom 을  대신할 수 있다.

inline에 해당하는 태그

  • span, a, img, link, input, select, textarea 등

본문

inline 요소에 해당하는 span 2개를 위와 같이 만들고 각각 하나는 margin과 padding, 다른 하나는 margin과 line-height를 줬다.

css

span은 inline요소이므로 margin을 주면 좌우 양옆에만 margin이 들어갈 것이다. 

padding은 inline 상관없이 들어간다.

위 코드의 결과화면

첫번째 span의 박스가 더 큰 것은 padding때문이고, 

두 span이 세로로 같은 선상에 있는 것은 margin을 같게 줬기 때문이다.

span 2 가 martin-top, margin-bottom 을 가진 것처럼 표현된 것은 line-height때문이다.

 

display 프로퍼티

block이나 inline과 같은 성질을 display라고 한다.

div 2 개

 

 

인위적으로 display에 직접 값을 줘서 block과 inline을 상호변환 가능하다.

예를들어, div 에 css로 display: inlne; 이라고 주면 inline의 특성을 가지게 할 수 있다.

div 2개를 만들고 크기와 색깔을 줬다.

 

 

 

 

block의 성질을 보여준다.

 

 

위 css에서 display:inline; 을 추가하면 width, height가 무시되고, 

margin은 양옆에만 적용된다.

 

 

inline-block

display를 inline-block으로 설정할 수도 있다.

inline-block 의 특징

  • height, width, margin을 가지면서 옆에 다른 요소가 올 수 있음.

단점

  • 요소 사이에 default로 빈공간이 있음
  • 각 block사이 공간이 창 크기에 따라 달라짐.

단점 때문에 잘 사용하지는 않는다.

저작자표시 (새창열림)

'프런트엔드' 카테고리의 다른 글

css 기초  (0) 2020.09.04
[css] flex  (0) 2020.09.03
CSS 시작  (0) 2020.09.01
[html] form 태그  (0) 2020.08.21
[html ] 태그  (0) 2020.08.21
'프런트엔드' Related Articles more
Comments