HTML의 기초

HTML

• 웹 페이지를 구성하는 마크업 언어
• tag (부등호로 묶인 HTML의 기본 구성 요소)의 집합
• 트리구조 (부모와 자식으로 구성)

 

자주 사용하는 HTML의 요소

<div>

• 한 줄을 차지한다.

<span>

• 콘텐츠의 크기만큼 차지한다.

<img>

• 이미지 삽입할 때 쓰인다.
• src = '경로'
• alt = '대체 택스트'

<a>

• 링크를 삽입할때 쓰인다.
• href = '경로'
• 새창으로 띄우고 싶다면 target = '_blank' 속성 추가

<ul> & <li>

• 리스트를 작성할 때 쓰인다.
• ul 대신 ol을 사용하면 li에 자동으로 넘버링이 된다.

<input>

• 데이터를 입력할 때 쓰인다.
• type 속성에 여러 값을 넣어 여러 가지 형태의 input태그를 만들 수 있다.(text, radio, password, checkbox)
• placeholder 속성을 사용하여 input안에 어떠한 값을 넣어주어야 하는지 알려줄 수 있다.

<textarea>

• 줄 바꿈이 가능한 input태그이다.

<button>

• 버튼을 생성하는 태그이다.

---

시맨틱 요소

• 의미를 가지고 있는 tag

 

시맨틱 요소를 사용해야 하는 이유

• 검색 엔진이 시맨틱 요소에 있는 내용으로 정보의 중요도를 판별한다. -> 검색결과가 상위에 노출될 수 있다.
• 여러 개발자가 함께 작업할 때 시맨틱 요소를 사용하면 다른 개발자의 코드를 읽고 이해하는데 편리하기 때문이다.

 

시맨틱 요소의 종류

<header>

• 페이지의 가장 윗부분이다.
• 사이트의 제목, 상단바, 검색창이 들어갈 수 있다.

<footer>

• 페이지의 가장 아랫부분이다.
• 라이선스, 주소, 연락처 등이 들어갈 수 있다.

<aside>

• 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소이다.
• 사이드바나 광고가 들어갈 수 있다.

<nav>

• 상단바 등 사이트를 안내하는 요소에 사용한다.

<main>

• 문서의 주된 내용을 표시한다.

<article>

• 독립적이고 자체 포함된 콘텐츠를 지정할 때 사용한다.

---

웹 페이지 구조 잡기

프로토 타이핑

• 개발 초기 모형을 만들어 기능의 요구사항을 파악 후 반영하는 방식을 말한다.

1. 큰 틀에서 영역 나누기 (쓰기 영역과 읽기 영역)
2. 틀 내부에 적절한 태그 사용하기

이름 붙이기

• id : 고유한 이름을 붙일 때 사용한다.
• class : 반복되는 영역을 분류할 때 사용한다.

셀렉터로 표현

• id -> #id이름
• class -> .class이름