오늘은 HTML에 대해 알아보자!
우선, HTML을 설명하기 앞서 웹 개발이 무엇인지 부터 알아보자!
웹 개발이란 무엇일까?
- 웹 개발은 구조인 HTML, 그 구조를 style할 수 있는 CSS, 그리고 그것들을 서로 상호작용 시켜 구동될 수 있도록 하는 JS가 있다.
이 이미지로 간단히 설명 가능하다.
간단히 강아지 집을 지어보는 것으로 설명해보자!
강아지 집을 지으려면, 어떻게 해야할까?
흠... 일단 설계를 해야겠지...? 그리고 설계를 토대로 예쁘게 디자인을 하고... 그리고 집을 지어야겠지...?
-> 이것은 결과적으로 웹 개발이 이루어지는 단계랑 똑같다.
일단 웹 개발을 위해 구조인 HTML을 완성하고, 완성된 HTML에 CSS를 입혀 스타일을 만들고, 그리고 마지막으로 JS로 구동시키게 만든다.
그럼 이제 HTML을 더 알아보자!
HTML
HyperText Markup Language, 즉 웹페이지의 틀을 만드는 마크업 언어이다. HTML은 <> 부등호로 이루어진 태그들의 집합이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <input type="text" placeholder="ID"> <input type="password" placeholder="PASSWORD"> <button>login</button> <input type="checkbox" id="chk"> <label for="chk">keep login</label> </div>
위에서 보이듯이 TREE STRUCTURE로 이루어져있다!
- html 문서 시작
- html
- head
- title: page title
- body
- h1: Hello World
- div: contents here
- span: here too!
- 이런식으로 작성해 나가면 된다!
앞서 설명했듯이 HTML은 tag들이 없으면 작동하지 않는데, 거의 대부분의 tag들은 시작태그<>, 닫는태그</>로 이루어져있다.
하지만 태그 내부에 내용이 없다면! 닫는태그</>만으로도 사용이 가능하다!(ex. img, br, hr…etc)
ex.이미지를 삽입하는 img 태그!
그럼, 태그들을 알아봤으니 대표적으로 많이 쓰이는 태그들을 알아보자!
div vs span
- div태그는 한 줄을 차지한다.
- span태그는 컨텐츠 크기만큼 공간을 차지한다.
img: 이미지 삽입
- 닫는 태그 없이 속성을 사용한다.
a: 링크삽입
- 하이퍼링크 제공
- href 사용, 임시적으로 놔두고 싶을 땐 # 사용한다.
- 속성: _blank ….
ul, li : 리스트
- ol도 있다(리스트 앞에 숫자 있음; 순서가 필요한 리스트를 사용할 때 사용)
input, textarea : 다양한 입력 폼
- type: radio, type: checkbox….
- 라디오 버튼은 둘 중 하나, 체크박스는 여러개 자유롭게 선택 가능하다
- 라디오 버튼은 둘 중 하나 고르라고 하려면 name을 같게 만들어야 한다
우리가 대표적으로 알아본 div나 다른 태그들은 시멘틱 요소는 아니다. 그렇다면 시멘틱 요소는 무엇일까?
시멘틱 요소
- 의미가 있는, 의미론적인
- 검색 엔진이 시맨틱 요소를 중요한 키워드로 고려한다. 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위노출이 결정될 수 있다.
- 여러 개발자가 함께 작업 할 때 div 요소를 탐색하는 것보다 의미 있는 코드 블록을 찾는 것이 더 편리하다.
- 요소 안에 채워질 데이터 유형도 예측하기 쉽다.
시멘틱 요소를 사용해서 HTML을 작성하는 것이 권장 되는데, 그 이유는 HTML을 작성할 때 웹표준을 고려해야 하는데, 시멘틱 요소들을 사용해서 작성하지 않으면 웹표준에 준하지 않는 사이트를 만드는 것과 똑같은 것이다.
시멘틱 요소를 더 알아보고 싶다면 공식 mdn 문서를 찾아보자!
