프론트엔드
- 프론트엔드(Frontend)는 사용자가 웹 브라우저를 통해 상호작용하는 웹 애플리케이션의 클라이언트 사이드 부분을 의미한다.
- 주로 사용자 경험(UX)과 사용자 인터페이스(UI)를 개발하는 데 초점을 맞추며, 웹사이트의 디자인, 레이아웃, 그리고 동작 방식을 구현한다.
- HTML, CSS, JavaScript로 구현한다.
- HTML : 화면의 내용 및 구조를 나타낸다.
- CSS : 화면의 구도 및 스타일을 지정한다.
- JavaScript : 화면에 동적인 요소를 추가하여 사용자와 상호작용할 수 있도록 한다.
HTML
- 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 마크업 언어이다.
- 하이퍼텍스트(hypertext)
- 문서 내부에 또 다른 문서로 연결되는 참조를 집어 넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술을 의미한다.
- 마크업 언어
- 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어이다.
HTML File 구조
- VScode에서 *.html 파일 생성 후 ! + tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE>
- 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문이다.
- HTML5에서는 구체적으로 명시하지 않는다.
- <head>
- 메타데이터를 통해 문서의 정보를 나타낸다.
- 메타데이터
- 메타데이터(Meta Data)란 데이터에 대한 데이터를 말한다.
- 즉, 어떤 정보를 설명하거나 분류하거나 이해하는 데 도움이 되는 추가적인 정보를 의미한다.
- <head> 태그 안의 내용들은 문서의 정보를 나타낼 뿐, 실제 브라우저 안에서 렌더링 되지는 않는다.
- <body>
- 실제 브라우저 화면에서 보이는 태그들이 위치하게 된다.
요소(Element)
- HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미한다.
<p class = "foo"> This is a paragraph. </p>
- 태그, 속성, 내용으로 구성되어 있다
- <p class = "foo"> : Start tag
- This is a paragraph : Content
- </p> : End tag
- 시작 태그, 종료 태그의 한쌍으로 구성되어 있으며, 종료 태그 혹은 내용이 없는 경우도 있다.
- 시작 태그 - 종료 태그의 쌍이 맞지 않는 경우 프로그래밍 언어와 같이 에러 메세지를 주는 것이 아니라, 원치 않는 형태로 렌더링 된다.
- 요소들은 중첩될 수 있다.
<div>
<span>
</span>
</div>
- 다음 예시는 중첩된 것이 아닌, 잘못 닫힌 태그의 예시이다.
<div>
<span>
</div>
</span>
- 다음과 같은 빈 요소(void elements)인 일부 태그들은 종료 태그가 없다.
<link>, <meta>, <br>, <hr>, <input>, <img>
<span>Happy<br>HTML<br>CSS</span>
속성(Attribute)
- 속성(Attribute)를 사용하여 태그와 관련한 부가적 정보를 설정할 수 있다.
- 여는 태그 안에서 key-value 또는 single key의 형태로 주어지며, 하나의 태그는 여러 개의 속성을 가질 수 있다.
<input type="checkbox" name="checkbox" id="checkbox" checked>
개발자도구
- 개발자 도구(Developer Tools)는 웹 페이지나 웹 애플리케이션을 개발, 테스트, 디버깅할 때 사용하는 브라우저 내장 도구이다.
windows : F12
mac : Command + Option + i
- Inspector
- 좌상단
- 화면이 어떤 html 태그로 인해 렌더링되는지 확인할 수 있다.
- Elemtents
- Styles
- 좌하단
- 태그 별 어떤 스타일이 적용되었는지 확인할 수 있다.
- Computed
- 우하단
- 최종적으로 어떤 스타일이 적용되었는지 확인할 수 있다.
HTML 태그
- 태그는 웹 페이지의 구조를 정의하고, 콘텐츠에 의미를 부여하며, 스타일과 상호작용을 지정하는 데 사용된다.
Block / Inline
- 모든 태그들은 기본적으로 display 속성을 가지고 있으며, 레이아웃과 결정된다.
- Block
- 항상 새로운 줄에서 시작하며, 가능한 한 많은 너비를 차지한다. (기본적으로 부모 요소의 전체 너비를 차지한다).
- display : block 속성의 요소들이 여러개 나열되어 있으면 위아래로 쌓인다.
- 너비, 높이를 지정할 수 있다.
- inline
- 새로운 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지한다.
- 즉, 이전 요소의 끝에서 시작하며, 나란히 배치될 수 있다.
- 텍스트, 이미지와 같은 콘텐츠를 감싸는데 주로 사용된다.
- inline-block
- inline의 속성과 block의 속성을 둘 다 가지고 있으며, 너비, 높이를 지정할 수 있고(block) 같은 줄에 나란히 배치될 수 있다(inline).
Block
- div
- division. 구역을 나누기 위해 사용한다.
- 가장 기본적인 태그.
- h1 ~ h6
- heading. 제목을 표시하기 위해 사용한다.
- Block
- Block
- div
- division. 구역을 나누기 위해 사용한다.
- 가장 기본적인 태그.
- h1 ~ h6
- heading. 제목을 표시하기 위해 사용한다.
- hr
- horizontal rule. 수평선을 생성한다.
- ul, ol
- unordered list, ordered list. 리스트를 나타낼 때 사용한다.
- <li> 태그로 리스트의 항목들을 나타낸다.
Inline
- span
- a
- anchor. 다른 페이지로 이동할 수 있는 하이퍼링크이다.
- 어디로 이동할지에 대한 href 속성이 반드시 필요하다.
- img
- 이미지를 표시하기 위해 사용한다.
- 어떤 이미지를 가져올지에 대한 src 속성이 반드시 필요하다.
- br
시맨틱 태그
- 시맨틱 태그(Semantic Tag)는 HTML 문서의 의미를 명확히 설명하기 위해 사용되는 태그이다.
- 단순히 페이지의 구조를 정의하는 것을 넘어서 페이지 내용의 의미와 구조를 브라우저와 개발자 모두에게 명확하게 전달하는 역할을 한다.
- 검색 엔진 최적화(SEO)를 향상시키는 데 중요한 역할을 한다.
- div, span과 같은 영역 구분만을 위한 태그를 Non-Semantic Tag 라고 한다.
- h1(제목), a(하이퍼링크)와 같은 기능을 가지는 시맨틱 태그도 있지만, div와 같이 기능이 없는 시맨틱 태그들도 있다.
- <header>: 소개나 탐색을 위한 그룹을 나타내며, 일반적으로 제목, 로고, 검색 폼 등의 요소를 포함한다.
- <nav>: 탐색 링크의 집합을 나타니며, 주로 메뉴, 목차, 색인 등을 마크업하는 데 사용된다.
- <main>: 문서의 주요 콘텐츠를 나타내며, 문서 내에 한 번만 사용될 수 있다.
- <section>: 문서의 일반적인 섹션을 나타내며, 주로 관련 콘텐츠의 그룹을 정의하는 데 사용된다.
- <article>: 독립적으로 분배하거나 재사용할 수 있는 구조적으로 독립된 콘텐츠를 나타낸다.
- <aside>: 본문 내용과 간접적으로만 관련된 콘텐츠, 예를 들어 사이드바나 콜아웃 박스 등을 나타낸다.
- <footer>: 저자 정보, 저작권 정보, 관련 문서 링크 등과 같은 푸터 콘텐츠를 나타낸다.
