HTML이란?
Hyper Text Markup Language의 약자로 tag들로 이루어진 웹 페이지의 틀을 구성하는 마크업 언어 이다.
tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
TREE STRUCTURE
- HTML 문서 시작
- html
- head
- title : Page Title
- body
- h1
- div
- span
SELF-CLOSING TAG
태그 내부에 내용이 없다면(<tag></tag>와 같이 표현되는 경우)<tag />와 같이 표기한다.
Semantic tag
시맨틱은 "의미의, 의미론적인"이라는 뜻을 가지고 있다.
HTML4에서는 <div>태그로 모든 구조를 만들지만 HTML5에서는 <header><nav><section>등과 같은 시맨틱 태그를 사용한다.
왜 시맨틱 태그를 사용해야 하는가?
기존에 <div>태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정했기 때문에 검색 엔진이 html파일을 분석할 때 정확하게 컨텐츠를 분석하기 힘들었다. 하지만 HTML5 부터 제공되는 시멘틱 태그는 태그가 의미를 가짐으로서 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확하게 전달할 수 있게 된다.
시맨틱 태그 종류
<article>: 문서나 사이트에서 독립된 컨텐츠 영역을 지정
<aside>: 페이지의 왼쪽 혹은 오른쪽에 위치한 컨텐츠 영역을 의미
<details>: 추가 정보를 기술하는 영역
<dialog>: 대화상자나 창을 지정하여 opne속성을 사용하여 숨기거나 보이도록 할 수 있다.
<figure>: 문서 흐름상 이해를 위해 피룡한 그림, 동여상을 포함할 때 사용
<figcaption>:<figure>요소의 제목을 지정
<footer>: 문서나 Section의 하단 정보 영역
<header>: 문서나 SEction 상단 정보 영역
<main>: 문서의 주 컨텐츠영역을 지정
<mark>: 마크되거나 강조된 텍스트를 의미
<menuitem>: 팝업메뉴의 아이템을 지정
<nav>: 문서의 네비게이션을 의미
<section>: 섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹
CSS & SELECTOR
CSS는 Cascading Style Sheets의 약자로 웹 페이지 구성요소의 스타일을 정의한다.
CSS적용 방법 3가지
- 외부 css파일을 만들어 link태크로 css적용
<head>
<link rel="stylesheet" href="style.css" />
</head>- head태그 안에 style태그를 사용하여 css적용
<head>
<style>
html,
body {
margin: 0;
}
h1 {
color : #000;
}
</style>
</head>- 태그안에 style attributes로 css적용
<h1 style="color:lightgray">Hello World</h1>CSS 선택자
CSS 선택자란 CSS 속성값을 적용하기 위해 어떤 HTML요소를 선택해야 하는지를 브라우저에 알려주는 요소 및 기타 용어의 패턴이다.
예를 들어
h1 {
color: red;
font-size: 30px;
}이렇게 HTML 문서의 모든<h1>태그들은 {}안에 적용한 css 속성 값들이 적용된다.
이 처럼 태그 이름 이 외에 선택자를 주는 방법이 있다.
선택자의 유형
- Type, class 및 id선택자
h1{
color : red;
font-size: 30px;
}
.box {
border: 1px solid #000;
}
#unique{
background: lightgray;
}- 속성 선택자
<!-- 요소에 특정 속성이 있는지에 따라 요소를 선택 -->
a[title] {
text-decoration: none;
}
<!--특정 값을 가진 속성의 존재 여부 기반 -->
a[href="https://index.com"]{
text-decoration: none;
}- Pseudo-classes 및 pseudo-elements
<!-- 요소의 특정 상태를 스타일링하는 pseudo-classes -->
a:hover{
color: red;
}
<!-- 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements -->
p::first-line{
color: blue;
}- 결합자
<!-- 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합 -->
article > p {
font-size: 30px;
}