-
HTML 공간 분할카테고리 없음 2023. 11. 30. 09:30
HTML에서 공간을 분할할 때 어떤 방법으로 할 수 있는지 배운 내용을 정리해본다.
한줄 한줄 모든 정보를 관리하는 것 보다, 비슷한 내용이 있는 공간들을 묶어서 각 공간들을 관리하는게 더 효율적일 것이다.
태그
<div> : 블록 형식으로 공간 분할
= > 무조건 한행 이상을 차지한다.
<span> : 인라인 형식으로 공간 분할
= > 태그 안의 글자크기 만큼만 크기를 차지하고, 왼쪽에서 오른쪽으로 줄 형식으로 데이터가 쌓인다.
넣기
대부분의 웹사이트에서 F12를 눌러 HTML 코드를 확인해보면, <div> 태그를 정말 많이 사용하고, <span>도 어느정도 사용한다.
아직까지 위 두 태그만큼 자주 쓰이진 않는 것 같지만, semantic 태그를 사용해 공간을 분할할 수도 있다.
semantic 태그들의 종류
Sementic tags <header> 머리말(페이지 소개,제목) <nav> 하이퍼링크들을 모아둠 <aside> 본문 흐름과 다른 글(검색창,팁 등) <section> 본문의 주 내용 <article> 독립적인 콘텐츠. 본문이 없이 여러개의 <article>태그로 페이지 구성도 가능하다. <footer> 꼬리말(저작권 정보, 연락처등)
<div> 태그 코드와 실제 페이지
본문내용넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
*{border: 1px solid #888};
</style>
</head>
<body>
<div>div 태그 - block형식 1 </div>
<div>div 태그 - block형식 2 </div>
<div>div 태그 - block형식 3 </div>
<div>div 태그 - block형식 4 </div>
<div>div 태그 - block형식 5 </div>
<br>
<div>div 안의 리스트
<ul>
<li>데이터1</li>
<li>데이터2</li>
<li>데이터3</li>
<li>데이터4</li>
</ul>
</div>
<br>
끝!
</body>
</html>
HTML-톰캣 <divide> 실행 화면
<span>태그 코드와 실제 페이지
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
*{border: 1px solid #888};
</style>
</head>
<body>
<span>span 태그 - block형식 1 </span>
<span>span 태그 - block형식 2 </span>
<span>span 태그 - block형식 3 </span>
<span>span 태그 - block형식 4 </span>
<span>span 태그 - block형식 5 </span>
<br>
<span>span 안의 리스트
<ul>
<li>데이터1</li>
<li>데이터2</li>
<li>데이터3</li>
<li>데이터4</li>
</ul>
</span>
<br>
끝!
</body>
</html>
HTML-톰캣 <span>실행 화면
sementic 태그
sementic 태그를 실습시간에 사용해 보았으나, 아직까진 <div>처럼 공간을 분할한다는 것만 알겠다. 기능상 차이점은 아직 크게 와닿지 않는다. CSS를 배울 때 차이가 있는걸까?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type = "text/css">
*{border : 0px solid #888;}
</style>
</head>
<body>
<!-- 제목이나 회사 로고-->
<header>
<h1>HTML 기본</h1>
</header>
<!-- main menu 부분-->
<nav>
<ul>
<!-- 임시 링크 href = "#"
:url#id - url 페이지 중에 id가 id인 곳으로 위치
: # url없으면 같은페이지로 이동한다.
#id id가 없으면 제일 위로 이동시킨다.-->
<li><a href="#"> 메뉴 - 1</a></li>
<li><a href="#"> 메뉴 - 2</a></li>
<li><a href="#"> 메뉴 - 3</a></li>
</ul>
</nav>
<section>
<article>
<h1> Lorem ipsum dolor sit amet</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</article>
<artlce>
<h1>Lorem ipsum dolor sit amet</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</artlce>
</section>
<footer>
<address>서울특별시 강서구 마곡동</address>
</footer>
</body>
</html>
sementic 태그 사용 결과 화면 아직까진 기존의 <div> 태그와의 차이가 눈에 띄지 않는다.
마무리
공간을 분할하고 id나 class속성을 입력하면, 나중에 css로 스타일을 적용하기 편하다고 들었다.
ex) <div class = "임의 이름"> </div>
id는 동일한 id가 존재하면 맨 위의 id만 인식되고, 같은 이름을 사용해 한꺼번에 관리할 것이라면 class속성을 사용하는게 좋다고 한다.
sementic 태그는 기존 공간 분할 태그들과 아직까진 큰 차이가 없어보인다. 원래 개발자가 임의로 지정하던 id와 class들은 기계가 인식하기 힘든데, 이를 보완해서 기계가 더 잘 구분해 낼 수 있도록 의미를 부여한 태그라고 들었다.
나는 기계가 아닌 개발자여서 이러한 차이를 모르는 것일 수도 있고, css를 아직 들어가지 않아서 그런 걸 수도 있겠다.
다음에 CSS를 배울 때 semetic 태그의 차별점이 보이면 한번 더 정리해야겠다.