HTML 기초

웹 개발 이해하기

HTML: 웹 페이지의 구조를 담당하는 마크업 언어

CSS: 디자인 요소를 시각화하는 스타일시트 언어

JS: 단순한 웹 페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어

웹 개발 = 하나의 건물을 세운다

HTML

HTML ?

• 태그의 집합
• 트리구조로 이루어져 있음
• 태그에는 src, style등의 속성을 담을 수 있음

자주 사용하는 HTML 요소

• div: 한 줄을 차지(블록)
• span: 컨텐츠의 크기만큼 공간을 차지(인라인)
• Img: src 속성을 이용해 이미지 경로 지정. 닫는 태그 필요없음
• a: href 속성을 이용해 링크 삽입. target 속성에 “_blank” 지정 시 새 탭으로 열림
• ul: 순서 없는 리스트 만들때 사용
• ol: 순서 있는 리스트 만들때 사용
• li: ul, ol 태그 하위에 사용함으로써 리스트 생성
• input: 입력 폼. type에 따라 입력 폼의 형태가 달라짐
  • text: 일반적인 텍스트 입력
  • password: 비밀번호 입력. *처리 됨
  • checkbox: 그룹 내 여러 개 선택 가능한 체크박스
  • radio: 그룹 내에서 하나만 선택 가능한 라디오버튼
    • name 속성으로 그룹 설정
• placeholder 속성으로 입력 폼 내 작성해야 하는 내용에 대한 힌트를 제공할 수 있음
• textarea: 줄 바꿈 가능한 입력 폼
• button: 버튼
• br: 줄 바꿈. 닫는 태그 필요 없음
• select: option 태그와 함께 사용. 드롭다운 생성

시맨틱 요소

시맨틱 요소란?

• 의미를 가진 요소

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

1. 검색 엔진이 시맨틱 요소를 더 좋아함. 즉 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위 노출이 결정될 수 있음
2. 여러 개발자가 함께 작업할 때
   요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 훨씬 편리하기 때문. + 요소 안에 채워질 데이터 유형도 예측하기 쉬움

시맨틱 요소의 대표적인 종류

<article> : 독립적이고 자체 포함된 콘텐츠를 지정합니다.
  
<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소로,
  특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.
  
<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 
  사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.
  
<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치하며, 
  사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.
  
<nav> : 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 
  보통은 안에 <ul>을 넣어 목록 형태로 사용합니다.
  
<main> : 문서의 주된 콘텐츠를 표시합니다.
  
<form> : 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 합니다. 
  ex) 로그인 시 <form> 요소를 사용하여 <input>, <button> 등의 자식 요소를 감싸는 경우에 자주 사용됨

id와 class

1. id : 고유한 이름을 붙일 때
   • 선택자(selector): #
2. class : 반복되는 영역을 유형별로 분류할 때
   • 선택자(selector): .