[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 웹표준과 HTML5

m_ngyeong·2023년 6월 12일
IT개발캠프Reacthtmlwww개발자부트캠프리액트리액트캠프부트캠프스나이퍼팩토리웅진씽크빅유데미인사이드아웃프로젝트캠프프로젝트캠프후기
0

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

목록 보기
5/28
post-thumbnail

📍 웹 표준의 개념

Internet

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

Web

Web이란 World Wide Web의 줄임말로 WWW라고 부르기도 한다. 많은 정보가 서로 얽혀있는 정보의 그물망이다. 인터넷 공간에서 제공하는 서비스라고 생각하면 된다.

Web의 역사

"인터넷"이라고 하면 떠올리는 각종 웹사이트 등의 시초는 1990년대 팀 버저스 리가 개발한 World Wide Web이다.
팀 버너스 리는 웹서버와 웹브라우저를 개발하고, 이 둘이 통신할때 사용하는 프로토콜인 HTTP라는 통신 규약을 정의하고, 웹 브라우저에 정보를 표현할 수 있게 하는 프로그래밍 언어, HTML을 발명했다. 이러한 기술들을 Public Domain 으로 공개하면서 인터넷, 월드 와이드 웹은 폭발적으로 발전하게 된다.

Web의 변천사

  • Web 0.1
    • 1900s-2000
    • 단순히 정보의 제공과 불특정 다수에게 정보를 전달하는 데 초점
    • 단방향, 정적, 플러그인
    • Microsoft ActiveX, Adobe Flash...
  • Web 0.2
    • 2000-2020s
    • 사용자들 사이의 상호작용과 참여, 공유, 협업을 강조
    • 사용자 생성 콘텐츠
    • Chrome, Instagram, Netflix, TikTok...
  • Web 0.3
    • 2020s-
    • AI, BigData, Semantic Web 등의 기술과 개념을 활용
    • 인공지능과 블로체인을 기반으로 '개인 맞춤형 정보'를 제공하는 '초개인화'된 인터넷 환경
    • 지능적, 의미론적 웹

Web의 구조

HTTP(Hyper Text Transfer Protocol)

HTTP(Hyper Text Transfer Protocol)란 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜이다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답한다.
다른 말로, HTML문서와 같은 리소스들을 가져 올 수 있도록 해주는 프로토콜이다.

IP address(Internet Protocol address)

IP Address란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. 쉽게 말해, 인터넷에 연결되어 있는 모든 장치들(컴퓨터, 서버장비, 모바일기기 등)을 식별할 수 있도록 각각의 장비에 부여되는 고유 주소이다.

DNS(Domain Name System)

DNS(Domain Name System)란 사람이 읽을 수 있는 도메인 이름(예: www.amazon.com)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환하는 시스템이다.

% nslookup amazon.com

Web 개발

  • Client : 사용자가 웹 사이트에 접근할 떄 사용하는 기기, 웹 브라우저
  • Server : 인터넷에 연결된 컴퓨터, 웹 요소와 여러 정보가 저장됨

HTML, CSS, JS 작동 순서

  • HTML : 웹 문서의 뼈대를 만듦
  • CSS : 웹 문서를 꾸밈
  • JavaScript : 사용자 동작에 반응해서 동적 효과

HTML

HTML(Hyper Text Markup Language)은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어이다.

  • Hyper Text → Link
    사용자에게 내용의 비순차적 검색이 가능하도록 제공되는 텍스트를 마크업 해주는 언어로 링크 기반으로 서비스가 이루어진다.
  • Markup → Tag

Tag

기본구조

TagDefinition
<!DOCTYPE html>웹 문서의 유형 지정, 본 문서가 HTML5라는 것을 명시
<html>~</html>웹 문서의 시작과 끝을 나타냄
<head>~</head>메타 데이터의 집합으로 직접적으로 보이지는 않지만 웹의 정보를 담당
Title, meta, link, style, script 태그로 구성
<meta>웹 페이지의 설명, 대표 이미지, 대표 키워드 등을 입력하는 태그
다양한 종류의 메타데이터(문자 인코딩, 뷰포트 설정, 키워드)를 지정
홈페이지 주소를 어딘가에 공유할 때 나오는 설명 글과 이미지에 해당
<title>~</title>웹 페이지의 제목
<body>~</body>웹 페이지에서 실제로 보여지는 공간

Semantic Tag

'semantic'은 '의미론적인'이라는 뜻을 가진 형용사로 Semantic Tag란 의미가 있는 태그를 말한다. 즉, 사람들이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그이다.

  • <header> : 머리글, 제목
  • <nav> : 네비게이션, 목차, 리스트
  • <aside> : 좌측과 우측 사이드 위치 공간
  • <section> : 주제, 카테고리 별 섹션, 본문의 여러 내용(article)을 포함하는 부분
  • <article> : 기사, 블로그 등 텍스트 위주의 페이지 구성
  • <footer> : 문서 하단의 바닥글,
  • <main> : 문서의 중심 주제, 주요 내용, 다른 태그 하위 태그로 작성 불가
  • <figure> : 이미지, 다이어그램, 사진 등
  • <figcaption> : <figure> 요소의 설명

Semantic Tag를 사용하는 이유

  • 검색 엔진 최적화(SEO) : 검색 엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 검색 엔진이 태그의 목적에 부합하게 설계되어 있는 구조의 사이트에서 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해줌.
  • 웹 접근성 : 일반적인 브라우저에서는 차이가 없지만 시각장애인을 위한 웹서핑 프로그램이나 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 웹접근성을 향상시켜줌.
  • 유지보수와 가독성 : 많은 div 태그의 사용으로 관리가 어려워지는 문제점에서 벗어나 태그의 이름만 보고도 어떤 영영인지 바로 확인이 가능하며 특성에 맞는 작업을 구분하여 진행하기에 용이.

Default Tag

Block vs Inline

  • display:block 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지함. <div>이나 <p>, <h1> 태그 등이 있다.

  • display:inline 엘리먼트는 전후 줄바꿈 없이 한 줄에 자기 자신의 크기만큼만 차지하고 다른 엘리먼트들과 나란히 배치됨. <span>이나 <a>, <em> 태그 등이 있다.

  • display:inline-block 엘리먼트는 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따르게 되는 것이다. <button>이나 <input>, <select> 태그 등이 있다.

Element

  • <div>~</div> 콘텐츠 분할 요소로서 주로 다른 요소들을 붂거나 레이아웃을 구성하는데 사용. 블록 요소
  • <p>~</p> 하나의 문단을 나타내며, 보통 텍스트를 그룹화하고 문단을 형성하기 위해 사용. 블록 요소
  • <span>~</span> 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 주로 특정 텍스트에만 스타일링을 할 때 사용
  • <small>~</small> 보통 저작권 정보, 법적 고지, 부가적인 설명 등의 작은 텍스트로 나태날 때 사용
TagDefinition
<hr>긴 가로 선
<br>줄 바꿈
<i>~</i>
<em>~</em>		기울임꼴
<b>~</b>
<strong>~</strong>		굵은 글씨체
<del>~</del>취소
<u>~</u>밑줄
  • <a href="#">~</a> 웹 페이지나 외부 사이트 연결
  • <form>~</form> 입력 양식 전체를 감싸는 태그
    • <input>~</input> 사용자로부터 데이터를 입력받을 수 있는 다양한 형태의 입력 필드 생성

<a>

target 속성

  • _blank : 서버로부터 받은 응답을 새로운 윈도우나 탭에서 보여줌.
  • _self : 기본값으로 생략가능. 링크가 위치한 동일한 창/탭에서 보여줌.
  • _parent : 현재 프레임의 부모프레임(상의 프레임)에서 보여줌.
  • _top : 현재 윈도우 전체에서 보여줌.
  • frame name : 명시된 프레임에서 보여줌.

form

List

  • <ul>~</ul> : 순서가 없는 list
  • <ol>~</ol> : 순서가 있는 list. type으로 style 지정 가능. default값=1

Table

참고문서
www, https://velog.io/@solmii/웹서비스의-역사와-발전
http, https://aws.amazon.com/ko/compare/the-difference-between-https-and-http/
DNS. https://aws.amazon.com/ko/route53/what-is-dns/
Semantic Tag, https://devwoodie.tistory.com/6
block&inline, https://www.daleseo.com/css-display-inline-block/
table, https://developer.mozilla.org/ko/docs/Web/HTML/Element/table

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

profile
m_ngyeong
사용자 경험 향상과 지속적인 성장을 추구하는 프론트엔드 개발자 ʚȉɞ
이전 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 서비스기획 3일차

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 2주차 과제 1️⃣

0개의 댓글