[HTML] 기초

◉ HTML

웹 페이지의 뼈대를 구성하는 마크업 언어 (프로그래밍 언어X)
웹 페이지의 틀을 만듬

○ HTML은 tag들의 집합

tag : 부등호(< >)로 묶인 HTML의 기본 구성요소

html5의 기본 구조

구조를 살펴보면 상위 태그 안에 하위 태그의 묶음으로 구성된 트리 구조로 이루어져 있다.

 

태그는 여는 태그로 시작해서 닫는 태그로 끝낸다.
하지만 예외인 태그들도 존재한다.

예를 들어 <img>태그같이 내부에 내용이 없는 태그의 경우 닫는 태그 없이 <img/>로 표현한다.

여기서 / 도 생략이 가능하다.

이러한 태그를 Self-closing tag라 한다.

---

자주 사용하는 태그 중 <input>태그를 알아보자

<input>태그는 self-closing tag로 닫는 태그 없이 사용
웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성
다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

 

<input>요소 중 radio타입을 연습해보자.

  <input type="radio" value="옵션A">옵션A
  <input type="radio" value="옵션B">옵션B
  <input type="radio" value="옵션C">옵션C
  <input type="radio" value="옵션D">옵션D

라디오 유형의 옵션4개가 만들어졌다.

여기서 옵션을 선택해보자.

라디오 타입은 유형 중 하나만 선택되도록 정해져있는데 중복 선택이 가능해졌다.

왜 그럴까?

같은 그룹으로 묶여있지 않기 때문에 각각의 옵션이 독립적인 객체이므로 중복 선택이 가능한것이다.

 

그렇다면 같은 그룹으로 묶어주어야 원래 의도한 대로 한 가지 옵션만이 선택될 수 있다.

  <input type="radio" value="옵션A" name="option">옵션A
  <input type="radio" value="옵션B" name="option">옵션B
  <input type="radio" value="옵션C" name="option">옵션C
  <input type="radio" value="옵션D" name="option">옵션D

name속성을 같은 값을 넣어주면 같은 값을 가진 옵션이 한 그룹으로 묶인다.

 

---

● 시멘틱 요소

시멘틱이란?

'의미가 있는', '의미론적인'

► 의미를 가진 요소

 

시멘틱 요소를 왜 사용해야 할까?

1. 검색 엔진이 시멘틱 요소를 중요한 키워드로 고려하기 때문에 검색 결과시 상위 노출이 결정될 수 있음
2. 여러 개발자와 협업시 의미있는 코드 블록을 찾는게 더 편리함 + 요소 안에 채워질 데이터 유형을 예측하기 쉬움

• 종류

<article> : 독립적이고 자체 포함된 콘텐츠를 지정

<aside> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소. 특별한 일이 아니라면 사이드바나 광고창 등 중요하지 않은 부분에 사용

<footer> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치. 사이트의 라이센스, 주소, 연락처 등을 넣을 때 사용

<header> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치. 보통 사이트의 제목이 들어감. 선택적으로 상단바나 검색창 등이 안에 들어감

<nav> : 내비게이션의 약자로 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됨. 보통은 목록 형태로 사용

<main> : 문서의 주된 콘텐츠 표시

 

 

○HTML로 웹 앱의 구조 잡기

웹을 개발할 때는 프로토 타이핑을 거쳐야한다.

❊프로토 타이핑이란?

개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식

 

구조 잡아보기

1. 큰 틀에서 영역 나누기
2. 각 영역을 태그로 표현하기

영역을 태그로 표현한 후 CSS를 적용할 때 사용하기 위해 id와 class를 목적에 맞게 붙여준다.

여기서 id와 class는 목적에 따라 다르게 사용된다.

• id : 고유한 이름을 붙일때
• class : 반복되는 영역을 유형별로 분류할 때