HTML
- 문서의 틀을 만드는 마크업 언어
- tag 들의 집합
- tag : 부등호(<></>)로 묶인 HTML의 기본 구성 요소, 닫는 순서 철저하게 지키기
- self-closing tag : </> : 태그 내부에 내용이 없다면 사용 가능(<img src="이미지 경로:">)
- 트리구조(부모와 자식 노드로 구성)
자주 사용되는 TAG와 특징
- div vs span
- 공통점 : 영역을 설정할 때 사용한다
- 차이점 : div 태그는 한 줄을 모두 차지하지만, span은 컨텐츠의 크기만큼만 공간을 차지한다.
- img
- src 속성을 이용하여 이미지를 삽입한다.
- <img src="이미지 경로">
- a
- href 속성을 이용하여 링크를 삽입한다
- target 속성을 이용하여 기존 창으로 링크 이동할지 새창으로 링크 이동할지 선택 가능하다(target="_black" 추가 시 새 창으로 링크 이동한다.
- < a href="주소" target="_blank"></a>
- ul>li 와 ol>li
- ul : unordered list 로 순서가 없는 리스트를 정의할 때 사용합니다.
- ol : oredered list로 순서가 있는 리스트를 정의할 때 사용합니다
- input
- 사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용
- text,radio,checkbox 등의 입력 폼을 사용할 수 있다.
<div><input type="text" placeholder="type here" /></div>
<div><input type="radio" />radio</div>
<div><input type="checkbox" />checkbox</div>
- textarea
- 여러 줄의 문자열을 입력할 때 사용합니다.
- <textarea>textarea</textarea>
- button
- 클릭 가능한 버튼이 필요할 때 사용합니다.
- <button>Button</button>
- form
- 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 한다.
- 페이지 전환이 되는 액션이 발생할 수 있으므로 주의가 필요하다.
- 주로 form,input,button을 같이 사용한다.
시맨틱 태그
- HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다. 시맨틱이란 ‘의미가 있는, 의미론적인'이라고 해석할 수 있습니다.
- div와 span 같이 의미가 없는 태그 대신 form,table,article 같은 의미가 있는 태그를 사용합니다.
시맨틱 태그 사용의 장점
- 검색엔진 최적화(SEO)
- 검색엔진이 웹페이지를 방문할 때 시맨틱 태그를 중요한 키워드로 고려하기 때문에 상위에 노출될 수 있다.
- 코드 가독성 향상 및 유지보수 용이
- 모든 태그들을 div로 제작하는 것보다 시맨틱 태그를 활용하면 코드를 파악하기 쉽다.
시맨틱 태그의 종류
- article : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
- aside : 사이드바나 광고창 등에 사용됩니다.
- footer : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
- header : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다.
- nav : 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다.
- main : 문서의 주된 콘텐츠를 표시합니다.
class 와 id
- class
- 반복되는 영역을 유형별로 분류할 때 사용합니다.
- id
