네이버 메인 페이지는 검색 영역, 로그인 영역, 본문 배너 영역, 사이드 배너 영역, 신문 기사 영역 등 관련 있는 요소들끼리 그룹지어 있음
웹페이지를 만들 때 관련 있는 요소끼리 그룹으로 묶으면 레이아웃을 구성하기 쉬워지고 구조가 깔끔해짐
-> 이를 위해 div 와 span 태그 사용(공간 분할 태그라고 부르기도 함)
div 태그
블록 요소와 인라인 요소를 그룹으로 묶을 때 사용
<body>
<p> 영화 소개 </p>
<p> 영화를 소개하는 페이지입니다. </p>
<p> Tv 프로그램 소개 </p>
<p> TV 프로그램을 소개하는 페이지 </p>
</body>위 코드 처럼 body 태그 안에 영역 구분 없이 표시하려는 텍스트만 작성 시 코드가 복잡해질수록 텍스트를 구분하기 어려움
<div class = "movie">
<p> 영화 소개</p>
<p> 영화를 소개하는 페이지입니다.</p>
</div>
<div class = "tv">
<p> TV 프로그램 소개 </p>
<p> TV 프로그램을 소개하는 페이지입니다. </p>
</div>class 속성은 CSS를 적용하기 위한 식별자로 사용하는 속성
span 태그
span 태그는 인라인 요소를 그룹으로 묶을 때 사용
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>span</title>
</head>
<body>
<p> 영화 소개 </p>
<p> 이번 영화의 하이라이트 장면은 바로 여기입니다.</p>
</body>
</html>위 코드 중 하이라이트 텍스트 부분만 디자인을 다르게 적용하고 싶다면 태그 안에서 공간을 분할 해야 함
<p>영화 소개</p>
<p>이번 영화의 <span> 하이라이트</span> 장면은 바로 여기 입니다</p>목록을 생성할 때 사용하는 태그 ul, ol, dl 태그
ul(unordered list) 태그
순서가 없는 비순서형 목록을 생성할 때 사용
목록 내용은 li 태그로 구성
<ul>
<li> 목록 내용 1 </li>
<li> 목록 내용 2 </li>
...
<li> 목록 내용 N </li>
</ul>ex
<h1> 판매 중인 과일 </h1>
<ul>
<li>바나나</li>
<li>사과</li>
<li>수박</li>
<ul>
ol(ordered list) 태그
순서형 목록 생성 시 사용
<ol>
<li> 목록 내용 1</li>
<li> 목록 내용 2</li>
<li> 목록 내용 N</li>
</ol><h1> 오늘 할일 </h1>
<ol>
<li> 아침 먹기 </li>
<li> 점심 먹기 </li>
<li> 저녁 먹기 </li>
</ol>
dl(description list) 태그
정의형 목록은 용어와 용어 설명을 나열한 형태의 목록
li 태그 대신 dt(description term), dd(description details) 태그로 용어 설명 작성
<dl>
<dt> HTML </dt>
<dd> HTML은 Hyper Text Markup Language 의 약자로 웹 문서의 구조를 설계하기 위한 목적으로 개발된 언어입니다. </dd>
<dt> CSS </dt>
<dd> CSS는 Cascading Style Sheets의 약자로 웹 문서를 꾸미기 위한 목적으로 개발된 언어입니다. </dd>
</dl>
Journey for Backend Developer