HTML
🔁 전체 구조 요약
이 그림은 **웹의 흐름(요청 ~ 응답)**을 크게 3단계로 나눈 것 :
- Client (클라이언트)
- WAS (웹 애플리케이션 서버)
- DBMS (데이터베이스)
🧑💻 1. Client (사용자)
- 사용자가 웹 브라우저(크롬, 사파리 등)로
www.naver.com 같은 URL 입력 → 요청(request) 발생! - 이때 사용자는 웹페이지를 보기 위해 요청하는 거고,
서버는 HTML로 된 결과를 돌려줌. - 즉, 사용자는 웹 브라우저에서 HTML을 받아서 보는 주체
⚙️ 2. WAS (Web Application Server)
- 예시로 Java 8 + Spring으로 만들어진 서버
- 이 서버는 요청을 받아서 처리한 다음, 필요한 데이터를 DB에서 가져와서 HTML로 변환해서 클라이언트에 응답함.
- 즉, 여기서 HTML을 만들어서 보내는 주체
📌 WAS는 ‘로직 처리 담당’.
예: 로그인, 게시판, 검색 기능 등 → HTML로 결과 보내줌
🗄️ 3. DBMS (Database)
- 데이터 저장소 (MySQL, Oracle 등)
- 예: 회원정보, 게시글, 점수 등
- WAS가 SQL로 DB에 질의 → 결과 받아서 사용
🔄 전체 흐름 정리
- 사용자가 브라우저에서 www.네이버.com 입력
- → 서버(WAS)에 요청
- → WAS가 필요한 데이터를 DB에 요청(SQL)
- → DB가 결과를 응답
- → WAS가 그걸 HTML로 만들어서
- → 다시 클라이언트에게 응답
- → 사용자는 웹 브라우저로 HTML을 보고 있는 것
💡 요점 정리 (HTML과의 관계)
- HTML은 사용자(Client)가 보는 화면을 만드는 언어
- 실제로는 WAS가 HTML을 생성하고 보내줌
- 사용자는 그냥 브라우저로 보여지는 HTML만 보는 입장
tools : VSCODE로 할것임
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 주석입니다 !!! 다중주석 -->
Hello World!
</body>
</html>
<body>는 **웹페이지의 실제 내용(디자인, 텍스트, 이미지, 버튼 등)**이 들어가는 부분이다.
반면에 <head>는 **브라우저에게 알려주는 메타정보(문서 제목, 문자 인코딩, CSS 링크, 자바스크립트 등)**가 들어감.
간단히 비교하자면:
- <head> : 설정, 정보
- <body> : 화면에 보여지는 내용
<head>
<meta charset="utf-8">
</head>
- meta는 웹 문서에 대한 **메타데이터(데이터에 대한 데이터)**를 담는 태그야. 사용자한테 보이진 않지만, 브라우저나 검색 엔진이 참고하는 정보
- charset="utf-8"은 문자 인코딩을 UTF-8로 설정한다는 의미
❓그럼 UTF-8은 뭐야?
- UTF-8은 전 세계의 거의 모든 문자를 표현할 수 있는 문자 인코딩 방식
- 한글도 포함해서 영어, 일본어, 이모지까지 다 다룰 수 있음.
- 그래서 웹에서 거의 표준처럼 쓰이는 인코딩
📌 왜 써야 돼?
- 만약 이걸 안 쓰면, 브라우저가 인코딩을 잘못 판단해서 한글이 깨질 수 있음.
- 그래서 HTML 문서 작성할 때 거의 항상 이걸 맨 위에 씀!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
이게 html 틀임 시작 틀!!
문법 오류가 나도 크롬은 굉장히 관대함 그래서 결과가 잘 나옴
코드 오류 안 나게 잘 날 것!!
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
▲ html 공부할때 참고용 사이트
📝 텍스트 & 줄바꿈
<h1>제목입니다</h1> <!-- h1~h6: 제목 크기 -->
<p>단락입니다</p> <!-- 단락 -->
<br> <!-- 줄바꿈 -->
<hr> <!-- 수평선 -->
<strong>굵게</strong> / <em>기울임</em>
- 특수문자: <, > 같은 기호는 이렇게 씀
< → <, > → >, → 공백
📸 이미지 & 링크
<img src="images/aaa.jpg" width="250" height="300" alt="설명" title="툴팁">
<a href="https://example.com">이동할 링크</a>
📋 표 (Table)
<table border="1">
<tr>
<td>이름</td><td>나이</td><td>점수</td>
</tr>
<tr>
<td>홍길동</td><td>25</td><td>95</td>
</tr>
</table>
🧾 리스트
<ul>
<li>사과</li>
<li>바나나</li>
</ul>
<ol>
<li>1단계</li>
<li>2단계</li>
</ol>
🧑💻 입력 양식 (Form 요소)
아이디 : <input type="text"><br>
비밀번호 : <input type="password"><br>
취미 :
<input type="checkbox">축구
<input type="checkbox">농구
<input type="checkbox">야구
<input type="checkbox">배구
<br>
성별 :
<input type="radio" name = "gender" checked>남
<input type="radio" name = "gender">여
<br>
사는 지역 :
<select name="" id="">
<option>서울</option>
<option>경기</option>
<option>부산</option>
<option>제주</option>
</select>
<br>
생년월일 :
<input type ="date">
html 실행화면 ▼
'중앙정보기술인재개발원 > HTML&CSS&JS' 카테고리의 다른 글
| [JS] | 비동기, Promise,async,await (0) | 2025.04.23 |
|---|---|
| [JS] | 클로저, Closer (0) | 2025.04.22 |
| [JS] | 변수,연산자,조건문 (1) | 2025.04.21 |
| [HTML] | 기초정리, 태그, layout (0) | 2025.04.21 |
| [CSS] 클래스, 아이디, 우선순위 (0) | 2025.04.16 |