웹과 HTML

👩🏻‍💻 Dev/Front-End

웹과 HTML

yesolz 2024. 8. 20. 21:10

728x90

웹의 이해

인터넷과 웹

인터넷 (Internet): 전 세계 컴퓨터를 하나의 통신망으로 연결한 것. '우리는 모두 연결되어 있다'는 개념을 상징.
웹 (Web): 인터넷에 연결된 컴퓨터를 통해 정보를 공유하는 공간. 월드 와이드 웹 (World Wide Web, WWW)이라고도 불림.

웹의 시작과 특징

1980년대 스위스 유럽 입자 물리 연구소에서 팀 버너스리가 연구원들 간 빠른 정보 교환을 위해 고안.
특징: 정보를 하이퍼텍스트 형식으로 표현하고, 링크를 통해 다양한 정보와 문서를 연결해 제공.

웹 페이지와 웹 사이트

웹 페이지 간 링크를 통해 이동하는 것: 웹 서핑 (Web Surfing) 또는 웹 브라우징 (Web Browsing).

웹 브라우저

웹 페이지나 웹 상의 데이터를 찾고 읽을 때 사용하는 도구.

웹의 구조

클라이언트 (Client): 서비스를 요청하는 컴퓨터.
서버 (Server): 서비스를 제공하는 컴퓨터.
프로토콜 (Protocol): 클라이언트와 서버 간의 통신 규칙.

HTTP

HTTP (HyperText Transfer Protocol): 웹에서 클라이언트와 서버가 데이터를 주고받는 웹 프로토콜.

웹의 구성 요소

HTML (HyperText Markup Language): 구조
CSS (Cascading Style Sheets): 스타일
JavaScript: 동작

IDE

IDE (Integrated Development Environment): 코딩, 디버깅, 테스트 등을 한 곳에서 할 수 있는 소프트웨어.

HTML (Hyper Text Markup Language)

하이퍼텍스트, 즉 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지 구조를 명시하는 언어

태그, <>

웹 페이지의 구성 요소 하나하나로 역할을 하게 된다.

자주 쓰는 HTML 태그

https://www.advancedwebranking.com/seo/html-study

<!DOCTYPE html>: 브라우저에게 이 문서가 HTML5 표준을 따르고 있음을 알려준다.
<html> : 문서의 루트 요소로, 모든 HTML 콘텐츠를 감싼다. <html> 태그 안에 <head>와 <body> 태그가 포함된다.
<head>: 문서에 대한 메타데이터(문서 정보)를 포함한다. 여기에 <title>, <meta>, <link>, <style>, <script> 등이 들어간다. 문서의 제목, 스타일, 스크립트 등이 여기 정의된다.
<meta>: 문서의 메타데이터를 정의한다. 문자 인코딩, 페이지 설명, 키워드, 작성자 정보 등.
<title>: 페이지의 제목을 정의한다. 브라우저 탭에 표시되고, 북마크에도 사용되며 검색 엔진 최적화(SEO)에도 중요한 역할을 한다.
<body>: 웹 페이지의 가시적인 콘텐츠가 포함된다.
<h2>: HTML 문서의 제목이다. <h1>부터 <h6>까지 총 6단꼐다.
<a>: 파이퍼링크를 정의하는 태그이다. href 속성을 사용하여 링크할 URL을 지정한다.
<br>: 줄바꿈(라인 브레이크)를 삽입하는 태그이다. 블록 요소를 나누지 않고, 단순히 텍스트내에서 줄을 바꾸고 싶을 때.
<form>: 사용자 입력을 받기 위한 폼을 정의한다. 이 안에 <input>, <textarea>, <button>, <select> 등의 요소가 포함되어데이터를 입력할 수 있도록 한다. 폼 데이터는 action 속성을 통해 URL로 전송된다.
<input>: 다양한 유형의 사용자 입력 필드를 저의하는 태그이다. type 속성으로 텍스트 필드, 라디오 버튼, 체크박스, 비밀번호 입력 필드 등 여러 유형을 지정할 수 있다.

소소한 vscode HTML 세팅 팁

vscode에서 HTML 초기세팅 빠르게 하기 (Emmet)

html 파일 안에서 !를 입력하거나, html:5를 입력하면, 번거로운 초기 세팅을 빠르게 할 수 있다.

Emmet(에밋): 코드 작성 속도를 크게 높여주는 도구. HTML, CSS와 같은 마크업 언어를 신속하게 작성할 수 있도록 돕는 기능이다. VSCode를 비롯한 여러 코드 편집기에서 Emmet이 기본적으로 지원된다.

하나하나 입력해줄 필요 없이, !나 html:5를 클릭하거나 tab을 누르면 자동으로 아래와 같이 초기 세팅 된다.

여기서 더 수정해주면 된다.

vscode에서 html 파일 바로 브라우저로 열기

open in browser 익스텐션을 설치하고 다운로드 받으면,

번거롭게 파일 탐색기에서 html 파일을 열지 않아도 된다.

html 파일에 우측 마우스 클릭을 해보면, Open in Browser 옵션이 생긴 걸 확인할 수 있다.

단축기를 활용하여 option(alt) + B 을 해도 바로 열린다.

HTML 면접 질문 뽀개기

아래의 글에 HTML 면접 질문들을 공부하며, 심화적인 내용을 더 찾아보고 정리하였다!

https://yesolz.tistory.com/entry/HTML-%EC%8B%AC%ED%99%94-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EB%AA%A8%EC%9D%8C

HTML 심화 | 면접 질문 모음

DOCTYPEDocument Type의 약자.HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해준다.이를 선언해주지 않으면, 호환 모드(quirks mode)로 동작하며, 이 경

yesolz.tistory.com

오늘 느낀 점

쌩 HTML을 다루는 것은 오랜만이었다. 이번 기회에 HTML 관련 면접 질문을 추가적으로 공부하며 기초를 다시 탄탄히 다져야겠다고 느꼈다.

또한, VSCode에서 HTML 초기 세팅을 빠르게 할 수 있는 방법이 있었던 것 같아 검색하던 중, Emmet이 그 역할을 하며, 별도의 설치 없이 코드 편집기에 내장된 기능이라는 것을 알게 되었다.

Emmet 공식 사이트에 들어가 보니, HTML 초기 세팅 외에도 매우 다양한 기능을 제공한다는 점이 흥미로웠다. 프론트엔드가 주로 퍼블리싱에 집중되었던 시절, 빠른 작업이 무엇보다 중요했었다. 그 시절에는 Emmet을 잘 활용하는 것이 하나의 경쟁력이었을 것이라는 생각이 들었다.

728x90

저작자표시 비영리 동일조건