안녕하세요 워누입니다😀
여러 일이 있어 잠시 블로그 포스팅을 쉬었습니다만 다시 일상으로 복귀하고 회사에 취직되어
다시 힘내서 복귀해보고자 해요:)
오늘은 HTML5, 그 중에서도 가장 기초적이지만 모든 이들이 많이 쓰는 "공간 분할 태그"에 대하여 포스팅하겠습니다!
HTML에 익숙치 않은 분들은 "공간 분할 태그"란 말도 이해가 안되거니와
'왜 공간을 분할할까?'라는 질문이 생길 수도 있을 것 같아 간단하게 설명하겠습니다.
"공간 분할 태그"는 말 그대로 웹 페이지의 공간을 분할하기 위한 태그입니다.
웹 페이지의 공간을 분할하면 우리가 원하는 레이아웃을 만들어내기 위함인데요,
쉽게 말해 더 예쁘게 꾸미고, Javascript를 활용하여 동적인 이벤트를 만들어낼 수도 있습니다!
"공간 분할 태그"의 종류는 <div>, <span> 이렇게 두 가지가 있으며,
<div> 태그는 block 형식으로 공간을 분할하고, <span> 태그는 inline 형식으로 공간을 분할합니다.
글로만 보면 당연히 이해가 쉽지 않으니 예시 코드와 실행 결과를 함께 보실까요?
<html5 코드>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>div 태그 1</div>
<div>div 태그 2</div>
<div>div 태그 3</div>
<span>span 태그 1</span>
<span>span 태그 2</span>
<span>span 태그 3</span>
</body>
</html>
<실행 결과>
실행 결과를 보니 뭔가 다르다는 것을 알 수 있죠?
우선 <div> 태그는 줄바꿈이 되었고, <span> 태그는 줄바꿈이 없습니다!!!
그래도 태그의 명확한 차이점을 알아보기 위해 실행 결과 화면에서 개발자 도구를 실행해봅시다!
(키보드 F12 또는 Ctrl+Shift+I을 눌러주세요.)
이렇게 개발자 도구가 실행되었으면 맨 처음, "div 태그 1"에 마우스를 올려봅시다.
<div> 태그 구역이 표시된 것을 볼 수 있네요:)
입력한 라인 전체가 파란색으로 지정된걸 볼 수 있습니다❗
이번엔 "span 태그 1"에 마우스를 올려보겠습니다.
<div> 태그와 다르게 <span> 태그는 글자 크기에 맞게끔만 파란색으로 지정된걸 볼 수 있네요😮
정리해보면 <div> 태그는 웹 페이지의 너비만큼 차지하여 공간을 분할하는 태그이고,
<span> 태그는 본인이 입력한 범위만 공간을 분할하는 태그임을 알 수 있었습니다.
위에서 언급한 것처럼 가장 기초적이지만 가장 많이 쓰이는 태그 중 하나에요!
❗❗❗❗ 당장 네이버에서 개발자 도구 실행한 다음 ctrl+f를 누르고
div, span을 각각 입력해보시면 아래와 같이 엄청 많이 나옵니다 ❗❗❗❗
이렇게 자주 사용되는 공간 분할 태그에 대해서 정리해보았습니다!
다음 포스팅에서는 태그에 의미를 부여하는 시멘틱 태그에 대해서 작성해보겠습니다!
오늘은 여기까지:)
읽어주셔서 감사합니다😊
'HTML5&CSS3' 카테고리의 다른 글
| HTML 맛보기(링크 걸어주기!) (0) | 2017.10.20 |
|---|
