12강 - 블록 레벨 엘리먼트 (Block level Elements)

안녕하세요! "진로상담&진로 강연"하는 남자 "월횽(박진형)”입니다. 오늘은 12강 - 블록 레벨 엘리먼트 (Block level Elements) 에 대해서 알아보는 시간을 만들게 되었는데요. 블록 엘리먼트에 대해 간단하게 개념을 알아보고 예시를 통해 어떤 방법으로 사용하는 것인지 알아보려고 합니다. 그리고 다음 수업에서는 블록 엘리먼트와 다른 인라인 엘리먼트에 대해 알아보려고 하는데요. 우선은 오늘 진행할 수업 블록 레벨 엘리먼트에 대해서 기본적인 이론부터 함께 알아보도록 하겠습니다.

블록 레벨 엘리먼트 (Block level Elements) 란..?

블록 레벨 엘리먼트는 말 그대로 블록처럼 아래서 위로 하나씩 쌓아 올리는 태그라고 생각하시면 이해하기 쉽습니다. 블록 레벨 엘리먼트에는 <div>, <h1> ~ <h6> 등이 있으며, 아래서 위로 또는 위에서 아래로 쌓이는 태그라서 좌, 우측의 모든 공간을 사용하는 태그입니다. 때문에 블록 레벨 엘리먼트 태그는 좌, 우로 두는 컨텐츠가 아닌 세로로 두는 컨텐츠에 사용됩니다.

블록 레벨 엘리먼트 (Block level Elements) 사용 방법

우선은 가장 유명한 블록 엘리먼트 태그 한 가지를 사용해서 예시를 만들어보도록 하겠습니다. 사람마다 다르지만 개인적으로 <div>라는 블록 엘리먼트를 가장 많이 사용하고 있는 저는 예시에서 <div> 태그를 사용해서 예시를 만들어보겠습니다. <div>이외에도 많은 블록 엘리먼트 태그가 존재하고 있습니다.

예시 1)

내용1

내용2

내용3

내용4

위의 예시1 을 보시면 내용1 부터 내용4 까지 순차적으로 작성을 해두었는데요. 이 것은 현재 블록으로 정렬이 되어있지 않은 방법입니다. 때문에 내용1 부터 내용4 까지 모든 내용을 블록처리를 해서 정렬을 해주려고 합니다. 그럴때 <div> 태그를 많이 사용 하는데요. 물론 div 태그 이외에도 많은 블록 레벨 엘리먼트가 존재하지만 오늘 수업은 위에서 말씀드렸던 것처럼 <div> 태그를 사용해서 내용1 부터 내용4 까지 정렬하는 방법이기 때문에 아래 예시2에서 블록 레벨 엘리먼트를 사용해보겠습니다. 그럼 함께 볼까요?

예시 2)

<div>내용1</div>

<div>내용2</div>

<div>내용3</div>

<div>내용4</div>

위와 같이 <div> 태그를 사용해서 블록 처리를 진행했습니다. 위의 코드를 사용해서 실전 블록처리를 한 번 같이 확인해볼까요?

내용1

내용2

내용3

내용4

위의 내용1 에서 내용4 까지는 블록 레벨 엘리먼트 중 하나의 태그인 <div> 태그를 사용하여 정렬을 했는데요. 눈에는 보이지 않지만 마우스 (우)클릭 후 소스를 확인해보시면 <div> 태그가 적용된 것을 확인하실 수 있습니다. <div> 시작하는 태그를 열어주고 내가 블록 처리를 하고 싶은 텍스트 또는 제목 또는 기타 등등을 작성해주고 끝나는 태그 </div>를 작성해주시면 됩니다. 오늘 하루는 이렇게 12강 블록 레벨 엘리먼트에 대해 알아보는 시간이었는데요. 여러분에게 조금이나마 도움이 되었으면 좋겠습니다. 그럼 오늘 하루도 즐거운 하루 보내세요!