HTML 기초
인프런 HTML5 & CSS3 기초 문법 올인원 / 개발자 이도해
상대경로
.: 현재 문서가 소속된 폴더..: 현재 문서가 소속된 폴더의 부모 폴더/: 해당 폴더 아래
인라인 태그
자기 자신의 크기만큼만 자리를 차지하는 태그
블록 태그
항상 전체 너비를 차지하는 태그(줄바꿈이 생김)
태그 중첩 규칙
블록 태그 내부에는 블록 태그, 인라인 태그 모두 중첩 가능
인라인 태그 내부에는 인라인 태그만 중첩 가능
<p>태그는 블록 태그지만 내부에 인라인 태그만 중첩 가능
제목, 문단, 서식 태그
<h1>~<h6>: 웹 브라우저와 검색 엔진도 일반텍스트와 구분지어 제목인 것을 인식함<p>: 내부에 인라인 태그만 중첩 가능<b>, <strong>: 후자는 브라우저와 검색 엔진에서 주요 텍스트임을 인식함<i>, <em>: 후자는 브라우저와 검색 엔진에서 주요 텍스트임을 인식함
링크 태그
<a href="#id"></a>: 내부 링크<a href="#top"></a>: 최상단으로 이동
멀티미디어 태그
<video[audio] controls src=""></video[audio]>: controls 옵션으로 컨트롤러 추가
div, span 태그
div: 블록 태그span: 인라인 태그
class, id 속성
선택자로 사용
class: .class , 여러 태그에 동일한 클래스 적용 가능하며 한 태그에 여러 클래스를 적용할 수 있음id: #id , 문서 전체에 딱 한번만 선언되고 사용, id+class 적용 가능
form, input 태그
의미론적 태그
HTML5 이후 등장, 브라우저나 검색엔진에서 어떤 내용을 담고 있는지 알 수 있음
<header><nav><article><footer>
SEO
웹 접근성 : 다양한 디바이스와 플랫폼을 지원하고 장애여부와 연령에 상관없이 이용
lang : 언어 태그 구문(번역 기능)
웹 표준 : 웹에서 표준으로 사용되는 기술이나 규칙, 구조(Markup), 표현(Style), 동작(Script)
논리적이고 의미에 맞는 마크업
최신 버전의 브라우저에 호환
검색 엔진 최적화 : 검색엔진에서 상위에 노출되게끔, 봇이 수집하는 대상은 HTML문서
웹 접근성, 웹 표준을 준수하여 작성
태그에 제공되는 정보를 정확하고 간결하게 작성
의미론적 태그 활용
Last updated