[Web Front 1] 웹을 구성하는 기본구조 HTML

 

visual studio code에서 프로그램을 설치하기 

 

 

 

인터넷과 웹의 차이 

구분	인터넷 (Internet)	웹 (World Wide Web)
정의	전 세계를 연결하는 네트워크망	인터넷 기반의 정보 공유 서비스
역할	데이터 전달을 위한 하드웨어적 기반	정보를 시각적으로 보여주는 소프트웨어적 수단
구성 요소	케이블, 라우터, 서버, IP 주소	HTML, CSS, HTTP 프로토콜, 브라우저
관점	거대한 인프라(길)	그 위에서 이용하는 서비스(택배)

 

1. 웹의 처리 과정: 데이터의 왕복

웹은 요청과 응답이라는 단순하지만 강력한 규칙으로 돌아간다.

1. Request (요청): 사용자가 브라우저 주소창에 주소를 입력하면, 브라우저가 서버에게 "이 주소의 데이터를 보내라" 명령
2. Response (응답): 서버는 요청받은 데이터를 찾아서, 브라우저가 읽을 수 있는 HTML 문서 형태로 다시 보내줌.
3. Rendering (해석 및 출력): 브라우저는 받은 HTML 코드를 해석해서 우리가 눈으로 볼 수 있는 화면(웹사이트)으로 그려냄.

2. 웹의 핵심 특징

웹은 단순히 글을 읽는 곳을 넘어, 복합적인 데이터 교환 환경을 제공한다.

• HTTP 기반: 데이터를 주고받을 때 서로 약속된 통신 규격인 HTTP(HyperText Transfer Protocol)를 사용한다.
• 멀티미디어 통합: 텍스트뿐만 아니라 그래픽, 오디오, 비디오 등 다양한 매체를 하나의 문서 안에서 통합하여 제공한다.
• 다양한 환경 적응: 사용자의 기기(스마트폰, 태블릿, PC) 환경에 맞춰 화면이 변하는 반응형(Responsive) 설계가 기본이다.

3. 웹의 3요소: HTML이 하는 일

요소	역할	비유
HTML	구조(Structure)	건물의 철근과 뼈대
CSS	디자인(Style)	벽지, 인테리어, 페인트
JS	기능(Behavior)	전기 배선, 자동문, 엘리베이터

 

HTML은 웹의 뼈대

브라우저에게 "이것은 제목(Heading)이다", "이것은 본문(Paragraph)이다", "여기에 이미지를 넣어라"라고 알려주는 지도와 같다.

 

하이퍼링크 관련 태그 (a)

<a> 태그는 클릭하면 연결된 곳으로 이동시키는, 웹의 가장 핵심적인 기능

href	이동할 링크 경로	href="<https://naver.com>"
target	어느 탭에서 열지 지정	_self(기본) / _blank(새 탭)

 

<!-- 다른 페이지로 이동 -->
<a href="./01_글자 관련태그. html"> 글자 관련 태그로 이동 </a>
<!-- 외부 사이트를 새 탭에서 열기 -->
<a href="https://www.naver.com" target="_blank">네이버 (새 탭)</a>

<!-- 이미지를 클릭하면 링크로 이동 (a 안에 img 중첩) -->
<a href="https://www.naver.com">
<img src="./images/sample.jpg" alt="네이버로 이동">
</a>

 

💡 target 속성

• _self : 현재 탭에서 이동 (기본값)
• _blank : 새 탭에서 열기 (외부 사이트로 보낼 때 자주 사용)

하이퍼링크: 페이지 내 이동 (id 활용)

웹 페이지가 길어질 때, 특정 위치로 즉시 이동하는 기능. 핵심은 '식별자(ID)'를 이용한 표식이다.

• 원리:
  1. 목적지에 id="이름" 속성을 붙여 고유한 주소를 만든다.
  2. 이동 버튼에 href="#이름"을 설정하여 그 주소를 가리킨다.
• 중요 규칙: id는 한 페이지 내에서 유일(Unique) 해야 합니다. 주민등록번호처럼 한 명에게만 부여되는 식별자

<!-- 목적지 : id 부여 -->
<h3 id="main">맨 위 영역</h3>
<!-- 링크 : #아이디 로 이동 -->
<a href="#main">맨 위로 이동</a>

 

💡 긴 문서에서 "목차 → 본문", "맨 아래 → 맨 위로 가기" 같은 이동에 활용한다.

href="#아이디"처럼 앞에 #을 붙이는 것이 중요

2. 입력 양식: input / label / button

사용자와 시스템이 대화하는 통로

① 핵심 요소 정리

태그	역할
<input>	데이터를 입력받는 실질적인 칸 (텍스트, 비밀번호, 버튼 등)
<label>	입력칸에 이름을 붙이는 설명문 (UX 편의성 향상)
<button>	사용자가 의도적인 동작을 수행할 때 누르는 제어 장치

아이디 : <input type="text"> <br>
비밀번호 : <input type="password"> <br>

<!-- label로 input을 감싸면 글자를 눌러도 입력칸이 선택됨 -->
<label>
  <input type="radio" name="gender" checked> 남 
 </label>
<label>
       <input type="radio" name="gender"> 여
 </label>

<input type="button" value="회원가입">
<button>취소</button>

② label 사용의 이유

<label>로 <input>을 감싸면,

사용자가 입력칸의 작은 사각형을 정확히 클릭하지 않아도 글자(라벨)만 클릭해도 입력칸이 활성화됨.

 모바일 환경에서 매우 중요한 사용자 경험(UX) 요소 

label로 설명을 연결하면 글자를 클릭해도 해당 입력칸이 선택되어 사용성·접근성이 좋아진다.

③ input vs button

• <input type="button">: 과거부터 사용된 방식. value 속성으로 버튼의 텍스트를 정함.
• <button>: 최신 방식이며, 태그 사이에 텍스트나 아이콘을 자유롭게 넣을 수 있어 디자인적으로 훨씬 유연한다.