HTML5&CSS3 기초 4강

페이지 레이아웃 설정 태그

Block 타입: 개행하지 않아도 Block처럼 쌓인다. <p>, <li>태그

Inline 타입: <br/>을 쓰지않으면 계속 쌓인다. <img>태그

<div>태그

Block 타입의 대표적 태그

웹 문서의 레이아웃 설정용도로 많이 쓴다.

<span>태그

Inline 타입의 대표적 태그

웹 문서에서 특정한 의미를 나타내지 않는다.

홍길동<span>안녕</span> 을 써도 웹페이지에서는 동일하여 '홍길동안녕'으로 출력된다.

나중에 span으로 묶은 영역을 css주기 위한 용도로 쓴다.

시멘틱태그

검색엔진이 보다 효율적으로 검색할 수 있게 특정태그를 사용해서 웹문서를 제작하는 것을 시멘틱 웹이라 한다.

검색담당 서버 = 검색엔진

검색엔진은 데이터 수집,검색 등을 하는데 데이터가 너무 많아지기 시작함에 따라 비효율적이 되었다

그래서 홈페이지 header에 검색내용을 추가하여 검색능력을 최적화시킨다.

시멘틱 주요태그

<header> 페이지의 헤드영역 (검색타이틀)

<footer> 페이지의 하단영역 (주소)

<nav> 페이지의 네비게이션 (메뉴)

<section> 페이지의 내용(body)

<article> section과 유사, 어떠한 내용을 출력

<aside> 부가적인 내용

물론 시멘틱태그를 안써도 되지만 검색효율의 장점을 위해 사용한다.