'HTML5&amp;CSS3' 카테고리의 글 목록

HTML5&CSS3

[HTML5] 공간 분할 태그에 대해 알아봅시다! 2022.05.14
HTML 맛보기(링크 걸어주기!) 2017.10.20

[HTML5] 공간 분할 태그에 대해 알아봅시다!

워누 2022. 5. 14. 12:23

2022. 5. 14. 12:23

안녕하세요 워누입니다😀

여러 일이 있어 잠시 블로그 포스팅을 쉬었습니다만 다시 일상으로 복귀하고 회사에 취직되어

다시 힘내서 복귀해보고자 해요:)

오늘은 HTML5, 그 중에서도 가장 기초적이지만 모든 이들이 많이 쓰는 "공간 분할 태그"에 대하여 포스팅하겠습니다!

HTML에 익숙치 않은 분들은 "공간 분할 태그"란 말도 이해가 안되거니와

'왜 공간을 분할할까?'라는 질문이 생길 수도 있을 것 같아 간단하게 설명하겠습니다.

"공간 분할 태그"는 말 그대로 웹 페이지의 공간을 분할하기 위한 태그입니다.

웹 페이지의 공간을 분할하면 우리가 원하는 레이아웃을 만들어내기 위함인데요,

쉽게 말해 더 예쁘게 꾸미고, Javascript를 활용하여 동적인 이벤트를 만들어낼 수도 있습니다!

"공간 분할 태그"의 종류는 <div>, <span> 이렇게 두 가지가 있으며,

<div> 태그는 block 형식으로 공간을 분할하고, <span> 태그는 inline 형식으로 공간을 분할합니다.

글로만 보면 당연히 이해가 쉽지 않으니 예시 코드와 실행 결과를 함께 보실까요?

<!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

HTML 맛보기(링크 걸어주기!)

워누 2017. 10. 20. 09:55

2017. 10. 20. 09:55

티스토리를 처음 접하게 되었습니다! 잘 부탁드립니다ㅎㅎ

이곳에 포스팅 할 글들은 학교에서 배운 것들을 그대로 가져와 정리하고 서로 공유하고자 함이니 틀린 것이나 더 좋은 방법이 있다면 가르쳐 주시기 바랍니다.

HTML은 학교에서 정규 과정으로 배우는 것이 아니라 고등학생들에게 실생활에서 접할수 있는 코드인 HTML5와 CSS를 가르치고 있는 "생활코딩" 프로그램에서 보조강사를 맡게 되었습니다. 사실 1도 몰랐었죠..ㅎ 그래서 따라가기에만 급급했었으나 조금 지나서 어느 정도 알게 되니 이걸 정리해야 할 필요성을 느꼈습니다. 이 홈페이지에 방문하시는 여러분과 조금 더 친숙하게 다가가 보도록 노력하겠습니다 ㅎㅎ

제가 프로그램을 처음으로 작성한 코드입니다. 일단 같이 보실까요?

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
    a {text-decoration:none;}
    a:hover{ text-decoration:underline; font:bold 1em green; background-color:cyan;}
    #trends{ border:1px solid green; width:100px; }
  </style>
</head>
<body>
  <div id="news">
    <a href="http://www.daum.net" target="_blank"> Daum
    </a>
  </div>
  <div id="trends">
    <a href="http://trailers.apple.com" target="_blank"> Movie
    </a>
  </div>
  <div id= "notice">
    Notice Board
  </div>

</body>
</html>

시작과 끝을 명확하게 하기 위해 html 문서는 기본적으로 구조를 잡아주어야 합니다.

<html> </html>, <head> </head>, <body> </body> 등과 같죠! 이 세개는 반드시 필요한 문장들이기도 합니다. 저처럼 html에 관심있으신 분들은 꼭 알아두시기 바래요! 오늘은 맛보기 만이니까 자세한 설명은 차차 하기로 하고 일단 저걸 메모장에다 입력한 뒤에 저장을 하고 결과를 보실까요?

아차! 일단 저장하는 방법을 알려드리고 결과 보는 법을 알려드려야겠죠?

일단 저장할 때 어떻게 뜨는 지 볼까요?