728x90
블록과 인라인
<h1>
제일 큰 제목 h1
</h1>
<h2>
Header2
</h2>
<h3>h3 + tab : 자동완성</h3>
<p>
글씨를 쓸 때 사용하는 태그
</p>
<strong>strong아무글자<br>
행에서 드래그하지않고 ctrl + c, v 사용가능<br>
</strong>
오른쪽 작성된 코드와 왼쪽 내용을 비교해보면
태그 내용은 모두 <br>을 통해 줄바꿈을 해줘야하는데
strong을 제외한 태그들은 <br> 태그를 통한 개행이 없는 것을 확인할 수 있다.
이유는 html을 구성하는 레이아웃 요소는 블럭과 인라인 두 가지로 구분되는데
블럭은 자신의 고유한 할당 영역이 있고 크기와 너비 등이 지정이 가능하다.
고유한 할당 영역이 있기에 수직으로 쌓이게된다.
그러므로 자동으로 개행이 된 태그들은 블록 속성임을 알 수 있다.
인라인은 내부의 내용이 있어야 영역이 생기고 크기와 너비 등이 지정이 안된다.
그리고 수평하게 가로로 계속 내용이 쌓인다.
위 내용은 <strong>만 인라인 태그이기에 가로로 내용이 쌓여 <br>이 필요하고
블럭 요소들은 가로 세로 모두 고유한 할당 영역을 가졌다.
그러므로 태그 작성 시 주의할 점은
블럭 안에 인라인은 포함 가능하지만
인라인 안에 블럭은 포함하지 않는다.
예제
<!-- div, span은 레이아웃을 구성할 때 주로 사용한다. -->
<div>블럭</div>
<div>블럭</div>
<div>블럭</div>
<span>인라인</span>
<span>인라인</span>
<span>인라인</span>
<!-- 블럭요소는 전체영역을 공간으로 가진다.
안에는 블럭, 인라인이 들어갈 수 있다. -->
<hr>
<p>블럭</p>
<h2>블럭</h2>
<ul><li>블럭</li><li>블럭</li></ul>
<div>블럭</div>
<table><tr>블럭</tr></table>
<hr>
<!-- 인라인 요소는 태그 자체의 크기를 가진다.
안에는 인라인 요소만 들어갈 수 있다. -->
<a href="#">inline</a>
<span>인라인</span>
<b>인라인</b>
<i>인라인</i>
<img src="업로드할 이미지(경로)" alt="image" width="50" height="50">
<strong>인라인</strong>
<small>인라인</small>
<input type="name">
<div>
<span>인라인</span>
</div>
인라인 마지막 요소는 div 블럭으로 공간을 할당 후 넣었다.
728x90
'웹 프론트엔드(Web FrontEnd)' 카테고리의 다른 글
[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) (0) | 2022.07.17 |
---|---|
[HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) (0) | 2022.07.17 |
[HTML] 태그란? (사용 방법, 태그 종류, 실습) (0) | 2022.07.17 |
이해하기 쉬운 CSS 설명 (Cascading Style Sheet 기초 지식) (0) | 2022.07.17 |
HTML이란? (웹, 인터넷, URL, DNS 배경 지식) (0) | 2022.07.16 |