[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차

Notice

Recent Posts

Recent Comments

Link

250x250

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bin's Blog

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - React 소개 및 웹 표준과 HTML5 본문

학습일지

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - React 소개 및 웹 표준과 HTML5

hotIce 2023. 6. 12. 22:47

728x90

📚 기초상식

1️⃣ 인터넷 vs 웹

인터넷	웹
인터넷은 전 세계를 연결하는 국제 정보 통신망으로, 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유할 수 있는 공간	웹은 인터넷 공간에서 제공하는 서비스

👉 인터넷 안에는 Web, FTP(장지와 장치 간의 파일을 전송하는 데 사용되는 표준 프로토콜), E-mail 등이 있다.

👉 팀 버너스 리가 최초 웹 개발자이다. 1991년 HTML1로 시작한 버전은 2014년 HTML5의 버전까지 나온 상태이다.

2️⃣ 웹의 변천사

👉 웹 1.0은 단순히 정보의 제공과 불특정 다수에게 정보를 전달하는 데 초점 👉 웹 2.0은 사용자들 사이의 상호작용과 참여, 공유, 협업을 강조 👉 웹 3.0은 인공 지능(AI), 빅데이터, 시멘틱 웹 등의 기술과 개념을 활용(맞춤형 정보를 제공하는 초개인화된 인터넷 환경)

3️⃣ 컴퓨터가 서로 데이터를 주고 받는 방법

👉 클라이언트가 요청을 하면 서버가 응답하는 형태

👉 여기서 HTTP가 등장하는데 HTTP(Hyper Text Transfer Protocol)는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 (데이터 통신의 기초)

👉 최종적으로 1.HTTP 요청을 하고 2. HTTP응답을 한다.

4️⃣ IP 주소

👉 인터넷에 연결되어 있는 모든 장치들(컴퓨터, 서버장비, 스마트폰 등)을 식별할 수 있도록 각각의 장비에 부여되는 고유 주소

5️⃣ DNS(Domain Name System)

👉 숫자로 구성된 복잡한 IP를 사용자가 쉽게 기억하고 입력할 수 있는 도메인 네임으로 변환하는 시스템

👉 ex. https://www.naver.com/ => 125.209.222.141

👉 또 다른 예시, 핸드폰에 저장된 연락처에는 전화번호가 누구인지 식별하기 위한 고유의 이름이 있고 같이 매핑되어서 이름만 검색해도 전화번호를 알아낼 수 있다.

💻 HTML

🤔 HTML이란?

👉 Hyper Text Markup Language의 약자이고, 웹 페이지를 만드는 데 사용되는 마크업 언어이다. 쉽게 말해, 웹 문서 뼈대이고 웹 요소를 보여주는 정해진 약속을 말한다.

👉 HTML을 사용하여 텍스트, 이미지, 비디오 등과 같은 콘텐츠를 구성하고 구조화 할 수 있으며, 이를 통해 웹 페이지를 디자인하고 브라우저에 표시할 수 있다.

👉 HTML은 웹 개발의 기초 중 하나이며, 주로 CSS, JavaScript와 함께 사용된다.

1️⃣ HTML5의 기본 요소

요소	의미	예시
태그(tag)	"<"와 ">"로 둘러싸인 문자열 시작태그 "<>"와 종료태그 "</>"로 구성	<title>HTML</title>
내용(content)	태그로 둘러싸인 문자열	<title>HTML</title>
엘리먼트(element)	태그와 내용을 포함한 전체 문자열 HTML 문서의 기본 구성 단위	<title>HTML</title>
속성(attribute)	엘리먼트의 상세한 표현 설정 사항을 지시 시작 태그 안에 사용	<title color="black">HTML</title>
속성값(value)	속성값(''또는 ""로 감싸야 한다)	<title color="black">HTML</title>

2️⃣ HTML5의 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

항목	정의
<!DOCTYPE html>	웹문서의 유형 지정 본 문서가 HTML5라는 것을 명시
<html>	Html 파일임을 정의하고, 웹문서의 시작과 끝에 위치
<head>	메타 데이터의 집합으로 웹문서에 직접적으로 보이지는 않지만 웹의 정보를 담당 Title, meta, link, style, script 태그로 구성
<meta>	홈페이지의 설명, 대표 이미지, 대표 키워드 등을 입력하는 태그 홈페이지 주소를 어딘가에 공유할 때 나오는 설명 글과 이미지에 해당
<title>	홈페이지 제목
<body>	홈페이지에서 실제로 보여지는 공간 본문의 내용을 담는 공간

3️⃣ HTML5 - <head>

<head>
  <title>HEAD TAg</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='icon' href='favicon.ico' type='image/x-icon'>
  <link rel='stylesheet' href='style.css'>
  <script src='script.js'></script>
</head>

항목	정의
<title>	웹 페이지의 제목을 정의
<meta>	다양한 종류의 메타데이터를 지정, 주로 문자 인코딩, 뷰포트 설정, 키워드 등을 포함
<link>	외부 스타일시트(css파일)이나 웹 사이트의 아이콘을 문서와 연결
<script>	자바스크립트 코드를 문서에 포함하거나 외부 자바스크립트 파일을 연결한다.

4️⃣ HTML5 - 시맨틱 태그

👉 사람들이 이해하고 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그

👉 시맨틱 태그 등장 전에 <div> 태그로 일일히 위치와 범위를 정하고 각 태그들에 class 이름으로 구분을 지었다.

항목	정의
header	페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성
nav	페이지의 내비게이션 영역 (사이트 내 외부로 이동), 메뉴, 목차, 색인 등등
main	메인 컨텐츠 영역, 문서 내에서 반드시 한 번만 사용 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없다.
section	본문의 여러 내용을 포함하는 부분을 의미
article	본문의 주 내용이 들어가는 부분을 의미
aside	간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미
footer	하단 바닥글을 의미한다. 주로 들어가는 정보는 회사정보, 저작권, 연락처 등등이 있다.

👉 태그들의 규칙을 잘 지킨다면 웹 접근성을 높이고 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)들도 원활한 소통이 가능하도록 도울 수 있다. 또한 추후에 업데이트 및 수정할 떄 코드 수정이 쉬워진다.

👉 HTML 태그들을 올바르게 사용해야 하는 이유는 웹 표준을 준수하기 위해서입니다.

🤔 HTML 태그를 사용하면 좋은점?

👉 웹 페이지의 구조와 의미를 명확하게 한다.

👉 가독성이 향상된다.

👉 가독성이 높은 코드는 유지보수가 용이하며, 코드 수정이나 업데이트 작업시에도 문제가 발생할 확률이 적어진다.

👉 크로스 브라우징 이슈(각 브라우저에서 웹 페이지가 다르게 보이는 문제)를 최소화 할 수 있다.

👉 쉽게 말해, CSS를 입히지 않은 상태에서도 내용이 잙 읽혀야 한다.

5️⃣ HTML5 - 기본 태그(가장 많이 쓰이는)

태그명	의미
<a>	Anchor: 웹 페이지나 외부 사이트 연결 target : _blank = 새로운 창에서 연다. target: _self = 현재 창에서 연다.
<div>	자체적으로 너비를 차지하는 독릭접인 구역을 만든다 주로 다른 요소들을 묶거나 레이아웃을 구성하는 데 사용된다.
<p>	단락을 나타낸다. 보통 텍스트를 그룹화하고 문단을 형성하기 위해 사용된다.
<span>	텍스트의 일부분을 감싸기 위한 태그 주로 특정 텍스트만 스타일링하기 위해 사용
<small>	보통 저작권 정보, 법적 고지, 부가적인 설명 등의 작은 텍스트를 나타내기 위해 사용

👉 ID는 단일 요소의 식별에 사용되고, CLASS는 여러 요소의 그룹화 및 스타일링에 사용된다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

728x90

'학습일지' 카테고리의 다른 글

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 10일차 - JS (0)	2023.06.17
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - CSS 활용 (0)	2023.06.15
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 5일차 - 서비스기획(3) (0)	2023.06.09
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - 과제 (0)	2023.06.08
[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 3일차 - 서비스기획(2) (0)	2023.06.08

'학습일지' Related Articles

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Bin's Blog

Bin's Blog

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - React 소개 및 웹 표준과 HTML5 본문

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 7일차 - React 소개 및 웹 표준과 HTML5

📚 기초상식

💻 HTML

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

'학습일지' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역