h1 개행없애기 / h1 다음 줄로 / h1 개행 없이
h1의 display는 block입니다
block 요소는
'블럭'처럼 박스가 차곡차곡 쌓인다고 생각하면 됩니다
그렇기 때문에 자연스럽게 개행처리가 되죠
<html>
<h1>h1 개행 없는 법</h1>
<h1>h1 display : block</h1>
<h1>block처럼 쌓이는 모양</h1>
h1을 개행처리 하지 않고 한줄에 정리하려면 방법은 간단합니다.
이 block를 inline으로 변경시켜주세요
<css>
h1{
display: inline;
}
inline은 텍스트 길이만큼 박스 너비가 잡힙니다 개행처리도 없구요.
inline-block으로 해도 눈에 보이는 결과는 똑같지만 구조적으로 차이는 분명합니다
display:inline
inline은 텍스트 길이 만큼 너비가 지정되기 때문에
width ,hight를 적용할 수 없습니다.
display:inline-block
inline-block은 inline과 달리 블록이 잡힌게 보이죠?
inline과 block의 특징을 결합한 요소라
inline의 텍스트 길이만큼 너비가 지정되고 개행이 없는 대신, block의 형태로 감싸고 있기 때문에 이 블록의 width,height 적용이 가능합니다.
만약 너비,길이를 조정해야한다면
inline-blcok를 지정해야한다는 것을 주의해주세요
display 요소 자세히 보기 !!!!!!!!!!!!!
'퍼블리싱' 카테고리의 다른 글
| [css] 긴 텍스트 (...) 생략부호 표시하기 / 텍스트 줄이기 (0) | 2022.04.10 |
|---|---|
| [CSS] ul li 가로정렬 / 나란히 (0) | 2022.04.10 |
| [CSS]커서 올리면 메뉴 스르륵 보이기 / 반응형 사이드바, 드롭다운 메뉴 (0) | 2022.03.28 |
| [CSS] 단위 (%, rem, em, vw, vh) (0) | 2022.03.09 |
| [CSS ]한눈에 정리! Position 속성 완벽 가이드 (0) | 2022.03.07 |