: 하나의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소
<article>
, <header>
, <nav>
, <section>
, <div>
등: 컨텐츠 자신의 크기만큼 영역을 차지하는 요소.
<text-align>
의 영향을 받음<span>
,<strong>
등
직접 코드를 작성해보면서 확인해보자 !!!
<body>
<p>hello world</p>
<p>hello world</p>
<span>hello world</span>
<span>hello world</span>
</body>
이랬을때 스타일을 줘 보았다,.
<style>
p{
/* display: block; */
width: 300px;
background-color: red;
}
span{
/* display: inline; */
width: 300px;
background-color: blue;
}
</style>
블록요소는 높이와 넓이 값 조절이 잘 된다
But 인라인 요소는 높이와 넓이 값 조절이 안된다.
<display: block >
, <display: inline-block >
을 주면서 스타일링 해야한다. <display: block >
으로 해 줄 수 있지만<style>
p{
display: block;
width: 300px;
height: 300px;
background-color: red;
}
span{
display: inline-block;
width: 150px;
height: 150px;
background-color: blue;
}
</style>
<body>
<p>hello world</p>
<span>hello world</span>
<span>hello world</span>
</body>
(문제1)
저 span 박스들 사이의 중간의 여백을 없애주고 싶다면?
우선 저 공백은 엔터키 때문이다
html 에서
<body>
<p>p</p>
<span>span</span>
<span>span</span>
</body>
이렇게 적어줬기 때문에 엔터의 여백이 생김
<body>
<p>hello world</p>
<span>hello world</span><span>hello world</span>
</body>
이렇게 <span>
을 엔터없이 붙여써도 되지만.. 아니 안됨 사실
이렇게 작성하는건 좋지 않은 방법이니깐 해결해주는 방법 몇가지를 살펴보자.
이미지처럼 span 박스 둘을 딱 붙게 만들어 주기 위해서는
font-size: 0;
( 일부 브라우저에서 안먹는 경우있음)이 4가지 중 첫번재 방법을 코드로 살펴보면
(font-size 로 조절하는 방법)
div 로 묶어주고 .one 이라는 클래스명을 붙여준다.
<div class="one">
<span>hello world</span>
<span>hello world</span>
</div>
span{
font-size: 1rem;
display: inline-block;
width: 150px;
height: 150px;
background-color: blue;
}
.one {
font-size: 0;
}
(문제 2)
여백이 달라지는 문제점이 발생 (os 마다 다름)
폰트의 사이즈에 의해 여백이 달라지는 문제이다.
저 여백을 없애고 싶은걸?
해결위해 div 로 감싸고 line-height 값을 주면 여백 제거가 가능하다구 ~!
근데 이건 좋은 방법이 아니긴 합니다..
<body>
<p>p</p>
<div class="one">
<span>span</span>
<span>span</span>
</div>
<div class="three">
<span class="two">H</span>ello
<span class="two">H</span>ello
</div>
</body>
.one {
font-size: 0;
}
.two {
display: inline;
font-family: 'Rubik Wet Paint', cursive;
}
.three {
line-height: 16px;
}
(출처: 제로코딩베이스캠프)