일단, 인라인 element과 블록 element가 존재한다.
블록 엘리먼트는 컨텐츠의 너비와 무관하게 전체를 차지하기 때문에, 수평으로 다른 엘리먼트를 같이 사용할 수 없다.
1. display:block;
위와 같이 div 3개를 만들고, display를 block으로 한다면, width가 150px임에도 불구하고 모두 세로로 정렬된다.
블록은 페이지 전체 너비를 혼자 사용한다고 볼 수 있다.
2. display: inline-block;
이 경우, 블록은 유지되지만, 인라인 형태로 보여지게 된다.
즉, 너비를 해당 엘리먼트의 너비만큼만 사용하고 나머지 공간을 다른 엘리먼트들과 나눠쓰게 된다.
따라서, 다음과 같은 모습이 나온다.
3. display: inline;
이렇게하면, 블록 속성이 전부 무효화된다. 즉, 내부 요소 텍스트만큼만 차지하게 된다.
블록에서 width와 height를 선언했지만, 이것들은 모두 무시된다.
따라서, 다음과 같은 모습이 나온다.
그리고, 아래와 같이 divbox 속성에 경고가 표시된다.
내용은 위 설명한 것과 같다.
display를 inline으로 하면서, 블록이 아닌게 되어버렸기 때문이다.
'개발 > HTML' 카테고리의 다른 글
| 자바스크립트로 HTML 코드 작성하는 방법 (476) | 2021.07.21 |
|---|---|
| [HTML] HTML에서 자바스크립트 변수를 사용하는 방법은 무엇인가요? (0) | 2021.07.14 |
| div 태그 빠르게 만드는 방법 (0) | 2019.09.07 |
| [HTML] HTML 기본 구조 분석하기 (0) | 2019.02.18 |
| [HTML] Visual Studio Code 툴에서 Live Server 설치하기 (1) | 2019.02.18 |
