HTML

HTML, CSS, JavaScript

HTML : Structure, 구조를 담당

CSS: Presentation, 스타일을 담당

JS: Interaction, 상호작용을 담당

 

HTML

HyperText Markup Language의 약자

웹페이지의 틀을 만드는 마크업 언어

 

Tag(태그)

태그 내부에 내용이 없을 경우, 를 와 같이 나타낼 수 있음

 

자주 사용하는 태그

• div : Division, 블록
• span : Span
• img : Image, 이미지
• a : Link
• ul & li : Unordered List & List Item
• input : Input(Text, Radio, Checkbox...)
• textarea : Multi-line Text Input
• button : Button

div와 span의 차이점

div는 한 줄을 차지하지만 span은 컨텐츠 크기만큼 공간을 차지함

input, textarea의 다양한 입력 폼

참고</a >

input에는 속성 또한 다양하다.

 

Semantic element (시맨틱 요소)

용도에 맞게 스타일을 부여해 사용하는 것

자주 사용하는 시맨틱 요소

• article : 독립적이고 자체 포함된 콘텐츠를 지정
• aside : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 주로 사이드바나 광고창 등, 중요하지 않은 부분에 사용
• footer : 주로 페이지나 해당 파트 가장 아랫부분에 위치하며 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용
• header : 주로 페이지나 해당 섹션 가장 윗부분에 위치하며 보통 제목이 들어감. 상단바나 검색창 등이 들어갈 수도 있음
• nav : 내비게이션(navigation)의 약자, 주로 상단바 등 사이트를 안내하는 요소에 사용. 보통
  을 넣어 목록 형태로 사용
• main : 문서의 주된 콘텐츠를 표시