Part 1. HTML 기초 입니다.
현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
학습목표
- 웹 개발에 있어서 HTML, CSS, Javascript의 역할을 각각 설명할 수 있다.
1. 웹 개발 이해하기
HTML란
HTML(Hypertext Markup Language)는 프로그래밍 언어가 아니고 웹페이지가 어떻게 구조화돼 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지를 뜻합니다.
HTML은 요소들(elements)로 구성돼있으며, 요소(element)는 태그(tag)와 내용(content)으로 이뤄져있습니다.
CSS란
CSS(Cascading Style Sheets)은 HTML과 같이 프로그래밍 언어가 아니고 HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있는 스타일 시트 언어입니다.
Javascript란
Javascript는 웹페이지에서 복잡한 기능을 구현할 수 있는 프로그래밍 언어입니다. HTML의 내용들(contents)을 동적으로 바꾸고 애니메이션을 추가하는 등의 기능들을 구현할 수 있는 스크립팅 언어였지만 이제는 Node.js를 활용하여 서버 제작은 물론이고, PC를 위한 앱/프로그램을 만들 수 있는 범용적인 프로그래밍 언어가 되었습니다.
여기서, 스크립팅 언어(scripting language)란 주로 기존에 존재하는 소프트웨어를 제어하는 용도로 쓰이는 컴퓨터 프로그래밍 언어를 가리킵니다. 또한 스크립팅 언어의 대부분은 인터프리터 방식을 사용합니다.
수정이 자주 발생하는 덩치가 큰 소프트웨어에서 컴파일은 시간이 오래 소요되는 작업이므로, 수정이 빈번하게 발생하는 부분에서는 소스코드를 한줄씩 읽어 바로 실행하는 인터프리터 방식이 효율적이기 때문입니다.
2. HTML 기초
학습목표
- HTML이 "구조를 표현하는 언어"라는 의미를 자신의 언어로 표현할 수 있다.
- HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다.
- 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다.
<div>,<span>요소가 무엇이고, 어떤 차이가 있는지 설명할 수 있다.<ul>,<ol>,<li>요소가 무엇인고, 언제 사용해야 하는지 알고 있다.<input>요소에type을 설정하여 다양한 종류의<input>요소를 활용할 수 있다.
- id와 class를 목적에 맞게 사용하여 사람과 컴퓨터가 읽기 쉬운, 의미 있는(sementic)HTML 문서를 작성할 수 있다.
- HTML5 시맨틱 요소를 적재적소에 사용하여 사람과 컴퓨터가 읽기 쉬운 시맨틱한 HTML 문서를 작성할 수 있다.
- 시맨틱 요소가 무엇인지 설명할 수 있다.
- 시맨틱 요소를 사용하는 이유에 대하여 이해한다.
- 검색을 통해 시맨틱 요소를 찾고 적절하게 적용할 수 있다.
2-1. HTML 기본 구조와 문법
- HTML은 트리 구조(Tree Structure)를 가지고 있습니다.
<!DOCTYPE html> // 이 문서가 HTML 문서임을 명시
<html> // html 시작 태그로, 문서 전체의 틀을 구성
<head> // head 태그는 문서의 메타데이터를 선언
<title>Page title</title> //문서의 제목, 브라우저의 탭에 보여짐
</head>
<body> // body 태그는 문서의 내용을 담는 곳
<h1>Hello world</h1> // heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
<div> Contents here // content division을 의미하며, 줄바꿈됨
<span>Here too!</span> // 줄바꿈이 없는 content 컨테이너
<div> // div 태그가 끝났음을 의미
</body> // body 태그가 끝났음을 의미
</html> // html 태그가 끝났을을 의미- HTML 요소(Element) 의 구조
HTML의 요소(Element)는 태그로 감싸인 콘텐츠로 구성돼있습니다.
HTML은 요소들의 집합이라고도 할 수 있으며,
위 문장에서 언급한 태그(Tag)는 원래 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었습니다.마크업 언어는 이러한 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지입니다.
태그 내부에 내용이 없다면 단일 태그<tag/>로도 표현할 수 있습니다. 주로 문서에 무언가를 첨부하기 위해 사용하는 요소이고 빈 요소(Empty elements)라고 합니다.
아래의 코드는 위 요소 이미지 출력 코드입니다.
<img src="(https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png">2-2. 자주 사용하는 HTML Tag
| 태그 | 설명 |
|---|---|
<div> | Divison의 약어. div 태그는 한 줄을 차지합니다. |
<span> | span 태그는 컨텐츠의 크기만큼 공간을 차지합니다. |
<img> | img 태그는 src 속성과 함께 사용합니다. 이미지 삽입에 사용하는 단일 태그입니다. |
<a> | a 태그는 anchor(닻; 배의 위치를 고정)의 약자로, href 속성과 함께 사용합니다. 다른 웹페이지로 연결되는 하이퍼링크를 HTML문서에 표시할 때 사용하는 태그입니다. |
<p> | p 태그는 paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용합니다. |
<ul>, <li> | Unordered list의 약어이며, ul 태그 안에 li 태그를 넣어서 순서 없는 리스트를 생성합니다. |
<ol>, <li> | Ordered list의 약어이며, ol 태그 안에 li 태그를 넣어서 순서 있는 리스트를 생성합니다. |
<input> | type, placeholder, value 등 다양한 속성과 함께 사용하며, 속성값에 따라 다양한 입력폼을 만들 수 있습니다. 단일 태그 입니다. |
<textarea> | input 태그와는 다르게 줄바꿈이 되는 입력폼이며, 단일 태그가 아닙니다. |
<button> | button 태그는 버튼을 만드는 태그입니다. |
-
<form>
<form>요소는 일반적으로 사용자가 입력한 값을 다른 페이지로 전송하는 역할을 합니다. 예를 들어 로그인 시<form>요소를 사용하여<input>요소,<button>요소 등의 자식 요소를 감싸는 경우에 자주 사용됩니다. 목적이 명확하므로, 단순히 영역을 나누기 위해 사용하는<div>요소보다는 더 sementic한 요소 사용이라고 할 수 있습니다. 단,페이지 전환이 되는 액션이 발생할 수 있으므로, 주의가 필요합니다. -
<input>속성 예시
<input type="text" palceholder="type here">
<div>
<input type="radio", name="choice", value="a"> a
<input type="radio", name="choice", value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>위 내용에서 언급한 속성(attribute) 태그를 확장해 동작 방식을 바꾸거나 메타데이터(데이터를 설명해주는 데이터)를 제공합니다. 속성(attribute)는 두 가지로 구성되는데, attribute name(속성의 이름)과 attribute value(속성의 값)으로 구성됩니다.
2-3. 시맨틱 요소
시맨틱(semantic)이란 '의미가 있는, 의미론적인'이라고 해석할 수 있습니다. 예를 들어 <h1> 요소는 최상위제목(top level heading)이라는 의미를 지니고 있습니다. HTML 문서에 <h1>을 사용할 경우, 브라우저가 큰 폰트 사이즈를 적용할 뿐만 아니라, 위 아래로 간격을 두어 제목처럼 보이도록 합니다.
- 시맨틱 요소를 사용하는 이유
- 네이버, 구글이 보유한 검색 엔진이 사용자가 입력한 키워드에 따라 웹페이지들을 방문할때 시맨틱 요소가 해당 키워드를 포함하고 있다면 검색 결과시 시맨틱 요소를 사용한 웹페이지가 상위 노출될 수 있습니다.
- 여러 개발자가 함께 작업할시 유용합니다. 시맨틱 요소를 사용하면 해당 요소에 작성할 데이터 유형을 파악하기 쉽기 때문에 시간 소모를 줄일 수 있습니다.
- 시맨틱 요소의 종류
<article>: 독립적이고 자체 포함된 콘텐츠를 지정합니다.<aside>: 본문의 주요 부분을 표시하고 남은 부분을 설명하는 요소입니다. 특별한 일이 아니라면 사이드바나 광고창 등 중요하지 않은 부분에 사용됩니다.<footer>: 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치하며, 사이트의 라이선스, 주소, 연락처 등을 넣을 때 사용합니다.<header>: 일반적으로 페이지나 해당 파트의 가장 윗부분에 위치하며, 사이트의 제목이 보통 들어갑니다. 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있습니다.<nav>: 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용됩니다. 보통은 안에<ul>을 넣어 목록 형태로 사용합니다.<main>: 문서의 주된 콘텐츠를 표시합니다.<section>: 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용합니다.
2-4. id와 class를 목적에 맞게 사용하기
- id : 고유(unique)한 이름 즉, 단 한 번만 사용되어야 하는 이름을 붙일 때
- class : 반복되는 영역을 유형별로 분류할 때 사용합니다. 따라서, 같은 class를 가지고 있는 요소는 같은 유형으로 분류된 요소라는 것을 유추할 수 있습니다.
