웹 개발 이해하기
언어로 구분 할 수 있는 웹 개발의 세 요소
HTML
뼈대, 구조(Structure)
CSS
스타일(Presentation)
JavaScript
상호작용(Interraction)
HTML
HyperText Markup Language의 약자로 웹 페이지의 틀을 만드는 마크업 언어.
- HTML은 tag
<>의 집합이며 tag는 HTML의 기본 구성 요소.
- 부모 노드와 자식 노드로 구성되는 트리 구조를 띈다.
- .html 확장자를 사용
자주 사용하는 HTML 요소
div
- block 요소로 한 줄을 차지한다.
span
- inline 요소로 컨텐츠의 크기만큼 공간을 차지한다.
img
- 이미지를 삽입 할 때 쓰이며 속성에 주소 값
src이 들어간다.
a
- 링크를 삽입 할 때 쓰이며 속성에 주소 값
href이 들어간다.
target속성을 이용 해 링크로 이동 할 브라우저 창을 설정 할 수 있다.
ul, ol > li
- 트리 구조로 작성되는 리스트
ul은 기호,ol은 번호를 매기며 내부에 자식 요소로li가 들어간다.
button
- 버튼을 만든다.
input, textarea
- 사용자가 입력 할 수 있는 입력 폼
input은type속성을 이용해text,password,checkbox,radio,email,date,time,color,file,number등 다양한 형태의 입력 방식을 만들 수 있다.
- textarea는 input과 다르게 줄바꿈이 가능한 입력 폼이다.
시맨틱 요소
시맨틱은 ‘의미가 있는, 의미론적인’ 이라는 뜻이며 의미를 가진 요소를 사용하는 방식을 뜻한다. HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어 짐.
시맨틱 요소를 사용해야 하는 이유
- 검색 엔진이 페이지를 원활하게 파싱하게 하기 위해 → 페이지 내에 시맨틱 요소를 중요한 키워드로 고려하기 때문에 이에 따라 검색 결과의 상위 노출을 결정지을 수 있음
- 여러 개발자가 함께 작업 할 때 편리함
→ 단순한
div요소를 탐색하는 것 보다 의미 있는 코드 블록을 찾는 것이 훨씬 더 편리하며 요소 안에 채워질 데이터 유형을 예측하기 용이함
주로 쓰이는 시맨틱 요소
<article>: 독립적이고 자체 포함된 콘텐츠를 지정. 해당 요소만을 떼어놓고 봤을 때 컨텐츠로서 이용이 가능해야 함. (ex. 뉴스 기사 등)
<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
<footer>: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치, 사이트의 라이선스나 주소, 연락처 등을 넣을 때 사용한다.
<header>: 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치, 사이트의 제목이 보통 들어간다. 선택적으로 상단바나 검색창 등이 포함 될 수 있음.
<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에<ul>을 넣어 목록 형태로 사용한다.
<main>: 문서의 주된 콘텐츠를 표시한다.
id 와 class
HTML 태그에 이름을 붙일 때 사용한다.
id: 페이지에 고유(unique)한 이름을 붙일 때 사용한다. Selector는tag#name
class: 반복되는 영역을 유형별로 분류할 때 사용한다. Selector는tag.name
Uploaded by N2T