inline
inline은display속성이다. inline 요소는 전후 줄바뀜 없이 다른 요소와 같이 한줄로 나란히 배치된다.
🔥 특징
- 대표적인 inline 태그들은
aspanemimginputbuttenbrlabel등 있다. display: inline;으로 지정하면 inline적용이 된다.- 화면에 표시되는 영역만큼 표시되기 떄문에 나머지 공간에 다른 요소가 올 수 없다.
- inline안에서 inline이 포함되지만 block은 포함되지 않는다. 예를들어서 div 안에는 span이 자식으로 들어올수 있지만 span안에 div를 넣지않는다.
- inline 요소는 기본적으로 html에서 글자로 취급한다.
예)
<style>
a{
display: inline;
background-color: plum;
}
</style>
</head>
<body>
<a>inline1</a>
<a>inline1</a>
<a>inline1</a>
<span
</body>결과 ▼
inline-block
inline-block은 inline 요소처럼 전 후 줄바꿈 없이 한줄에 다른요소들까지 나란히 배치된다.
하지만 inline과 다르게 inline-block은 width와 height 그리고 margin, padding 의 속성들이 가능해진다는 차이점이 있다.
🔥 특징
- 대표적인 inline-block 태그들은
buttoninputselect등 있다. display: inline-block;로 지정해줘야한다.- inline-block을 이용하면 여러개의 요소들을 한줄에 원하는 너비마늠 배치할 수 있다.
-block속성과 inline속성 모두 가지고 있는 형태이다.
예)
<style>
a{
display: inline-block;
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
background-color: plum;
}
</style>
</head>
<body>
<a>inline1</a>
<a>inline1</a>
<a>inline1</a>
<span
</body>결과 ▼
block
대부분 html element 는 block이다.
한줄에 나열되지 않고 그 자체로 한줄이 되는 요소이다.
🔥 특징
- 대표적인
block태그들은
headerfooterplitabledivh1div등 block 요소이다. - 블록 속성을 가진 태그들은 기본적으로 너비 100%(width:100%)이다. 왜냐하면 블록요소가 그자체로 한줄이 되는 요소이기 때문이다.
- 여러블록들이 있으면 하나의 블록요소들이 가로폭이 100%로 완전히 차지하기 때문에 다음 요소가 당연히 다음줄로 넘김이 된다.
- inline 과 다르게 margin, padding, width, height 속성을 정의하면 모두 적용된다.
- 사용자가 원하는 모양새를 쉽게 제어가능하기에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 많이 사용한다.
- 특정 태그가 블록인지 인라인인지 구분하려면 css로 배경색을 입혀보면 바로 알수 있다.
예)
<style>
div{
margin: 20px;
padding: 10px;
background-color: plum;
}
</style>
</head>
<body>
<div>block</div>
<div>block</div>
<div>block</div>
</body>▼ 결과
