HTML(HyperText Markup Language)은 JS같은 프로그래밍 언어가 아니라, 웹 페이지의 뼈대를 구성하는 마크업 언어이다. 우리는 HTML로 구성된 뼈대 위에 JavaScript로 기능을 구현하고, CSS로 스타일을 입히게 된다. 구분하자면 아래와 같다.
- HTML : 구조(structure)
웹페이지의 구조를 담당하는 마크업 언어 - CSS : 스타일(Presentation)
디자인 요소를 시각화하는 스타일시트 언어 - JavaScript : 상호작용(Interaction)
웹페이지를 유저와 상호작용하게 만드는 프로그래밍 언어
HTML?
- HyperText Markup Language의 약자
- 웹페이지의 틀을 만드는 마크업 언어
- html이라는 확장자를 사용
- 부등호기호<>로 묶인 태그들의 집합
- 태그는 /기호로 닫는다.
<!DOCTYPE html> <!-- 이 문서가 HTML문서임을 명시 -->
<html> <!-- 시작 태그로, 문서 전체의 틀을 구성 -->
<head> <!-- head 태그는 문서의 메타데이터를 선언 -->
<title>Page title</title>
<!-- 문서의 제목, 브라우저의 탭에 보여짐 -->
</head> <!-- 해당 태그가 끝났음을 의미 -->
<body> <!-- body 태그는 문서의 내용을 담는 곳 -->
<h1></h1> <!-- heading을 의미, 크기에 따라 h1~h6 존재 -->
<div> <!-- content division, 줄바꿈됨 -->
<span></span> <!-- 줄바꿈이 없는 content 컨테이너 -->
</div>
</body>
</html>
자주 사용하는 HTML요소
✴️ <div> vs <span>
두 태그 모두 컨텐츠를 담는 컨테이너지만, 차지하는 공간이 각각 다르다.
- <div></div> : 한 줄을 차지함
- <span></span> : 컨텐츠만큼의 공간을 차지함
✴️ <img>
이미지를 삽입시키는 태그. 닫는 태그가 따로 없다.
<img src="https://bit.ly/3ziqZOG">
웹상의 이미지를 가져와 삽입
<img src="image/nasa-Yj1M5riCKk4-unsplash.jpg">
내 컴퓨터 내 저장된 파일 경로를 가져와 삽입
✴️ <a>
링크 삽입 태그. 특정 텍스트 또는 이미지에 링크를 부여해 다른 웹페이지로 연결해준다.
<a href="http:/naver.com">네이버</a>
네이버라는 글자를 클릭하면 네이버 홈페이지로 이동
<a href="http:/naver.com" target="_blank">네이버</a>
target="_blank" 삽입시 새 창, 새 탭으로 열림✴️ <ol> & <ul>, <li>
- <ol> : ordered list의 약자로, 숫자 또는 알파벳 등 순서가 있는 목록
- <ul> : unordered list의 약자로, 네모, 원 등 순서가 없는 목록
- <li> : list item의 약자로, <ol>과 <ul> 내부의 목록을 나열할 때 사용
<ol>
<li>첫 번째 목록</li>
<li>두 번째 목록</li>
<li>세 번째 목록</li>
</ol>
<ul>
<li>사과</li>
<li>애플망고</li>
<li>딸기</li>
</ul>ol과 ul로 지정할 시, 목록 앞쪽에 자동으로 숫자나 기호가 붙는다. 이 타입 또한 변경해 줄 수 있다.
- <ol type=" "> : 큰따옴표 안에 type을 지정
type : 1(기본값) / a / A / i / I - <ul type=" "> : 큰따옴표 안에 type을 지정
type : disc(기본값) / cricle / square
시작하는 숫자나 순서도 변경해 줄 수 있다.
- <ol start=" "> : 큰따옴표 안에 시작하고 싶은 숫자를 지정
✴️ <textarea>
줄바꿈이 가능한 텍스트 입력폼
✴️ <button>
버튼 요소
<input> type의 다양한 입력 요소
사용자가 글자를 쓰거나, 선택을 하거나, 체크표시를 하는 등의 다양한 입력 상호작용이 가능한 태그. <input type=" ">로 작성하며 큰따옴표 안에 상호작용할 타입을 입력해서 사용할 수 있다. 더 다양한 설명은 mozilla에서 확인 가능
✅ text & password
<input type="text" placeholder="type here">
일반 텍스트를 입력받을 수 있는 type here 글자가 표기된 텍스트 입력 박스
<input type="password">
text와 비슷하지만, 입력하는 텍스트가 보이지 않게 표시
✅ radio
라디오 버튼 형태. name을 통해 그룹으로 묶어준 버튼끼리는 중복 입력이 되지 않는다.
성별을 선택해 주세요. <br>
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
좋아하는 과일을 선택해 주세요. <br>
<input type="radio" name="fruits" value="apple"> 사과
<input type="radio" name="fruits" value="banana"> 바나나
<input type="radio" name="fruits" value="orange"> 오렌지
✅ checkbox
체크박스 형태. 중복 선택이 가능하다.
수강했던 강의를 모두 선택해 주세요. <br>
<input type="checkbox" name="class" value="html"> HTML
<input type="checkbox" name="class" value="css"> CSS
<input type="checkbox" name="class" value="JavaScript"> JavaScript✅ more...
이 외에도 input type으로 button, color, date, email, file 등 다양하다. mozilla에서 한번 확인해 보자.
시멘틱 요소
'semantic'은 '의미가 있는, 의미론적인'의 뜻을 가지고 있다. HTML5부터 여러 시맨틱 요소가 새롭게 생성되었고 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다. <div>나 <span>요소에 CSS 속성을 추가해 화면에 동일하게 보이게 할 수 있는데, 왜 이런 의미적 가치를 중시할까?
- 시맨틱 요소에 담긴 의미에 따라 검색 결과가 상위에 노출된다.
- 협업을 할 때, 단순한 <div>보다 의미가 담긴 코드 블록을 찾는 것이 편리하다.
- 요소 안에 채워질 데이터 유형을 예측하기 쉽다.
✴️ 시맨틱 요소의 종류
- <article>
독립적이고 자체 포함된 콘텐츠 지정 - <aside>
본문의 주요 부분을 표시하고 남은 부분을 설명. 사이드바나 광고창 등 중요하지 않은 부분에 주로 사용 - <footer>
보통 페이지나 해당 파트 가장 아랫부분에 위치. 사이트의 사이선스, 주소, 연락처 등을 넣을 때 사용 - <header>
보통 페이지나 해당 섹션의 가장 윗부분에 위치. 일반적으로 사이트의 제목을, 선택적으로 상단바, 검색바 등을 배치. - <nav>
navigation의 약자. 일반적으로 상단바에 위치. 안에 <ul>을 넣어 목록 형태로 사용. - <main>
문서의 주된 콘텐츠 표시
위의 목록 외에도, 시맨틱 요소의 종류는 굉장히 많다. 모든 걸 지금 알 필요는 없고, 필요할 때 관련된 내용을 검색해서 사용하고 체득하자. 참고할 만 한 사이트로 Mozilla와 w3schools를 기재했다.