- 웹 : 과거에 PC에서만 사용이 가능했지만 스마트폰, 내비게이션, 키오스크 등 다양한 기기에도 사용되고 있다.
- 인터넷 : 패킷(데이터)을 교환하기 위해 서로의 IP를 확인해야한다. 이를 풀링이 진행해준다.
- HTTP : 웹 클라이언트와 서버가 데이터를 주고 받는데 사용하는 프로토콜로 기본 포트는 80, 443번이다.
- HTTP 상태 코드 : 2xx, 3xx, 4xx, 5xx
- Method : POST, GET, PUT, PATCH, DELETE
- 쿠키, 세션 : 클라이언트, 서버에서 요청과 응답을 연결하고 기억한다.
- SSR(Server Side Rendering) : 서버 쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달
- CSR(Client Side Rendering) : 서버에 데이터를 통해 클라이언트에서 html문서를 만듬 ☞ 복잡해서 Vue, React를 사용
실습은 Visual Studio 기준으로 진행한다.
- 구조 태그
<html> : HTML 문서의루트요소임
<meta> : 문서의 메타데이터를 정의함. 문자 인코딩, 뷰 포트, 저자, 키워드 등
<title> : 웹 브라우저의 탭 메뉴에 표시
<body> : 텍스트, 이미지, 미디어 요소
<link> : 외부리소스를 문서에 연결함
<script> : 클라이언트 측 스크립트, JS를 문서에 포함시키거나 참조
- 텍스트 관련 태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 관련 태그</title>
</head>
<body>
<h1>텍스트 태그</h1>
<section>
<article>
<p><i>이탤리체 표시</i></p>
<p><em>강조표시</em></p>
<p><b>볼드체 표시</b></p>
<p><strong>중요한 내용 표시</strong></p>
<p><small>글씨 크기를 작게 표시</small></p>
<p><sub>아래첨자 표시</sub></p>
<p><sup>윗첨자 표시</sup></p>
<p><mark>하이라이트 표시</mark></p>
<p>Python에서 Hello World를 출력하는 코드:</p>
<code>print("Hello World")</code>
<p><ins>아래 밑줄 표시</ins></p>
<p><del>취소선 표시</del></p>
<p><blockquote>인용문을 나타내는 태그</blockquote></p>
</article>
</section>
</body>
</html>
- 공간 분할 태그
span
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.span1 {background-color: yellow;}
.span2 {background-color: lightpink;}
.span3 {background-color: lightgray;}
</style>
</head>
<body>
<p>이 문장에는
<span class="span1">여러</span>
<span class="span2">색상</span>이
<span class="span3">적용</span>됩니다.
</p>
</body>
</html>
div
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {background-color: lightblue;}
.div2 {background-color: lightgreen;}
.div3 {background-color: lightcoral;}
</style>
</head>
<body>
<div class="div1">
<p>첫 번째 구역</p>
</div>
<div class="div2">
<p>두 번째 구역</p>
</div>
<div class="div3">
<p>세 번째 구역</p>
</div>
</body>
</html>
a
하이퍼링크 태그 : <a href="#section">프래그먼트 URL</a>
target의 속성
_blank : 새로운 창
_self : 현재 창
_parent : 부모 창
_top : 전체 영역에 열기
rel의 속성
noopener : 링크된 페이지가 원본페이지와의 관계를 유지하지 못하도록 함
noreferrer : HTTP 참조자 정보를 전송하지 않음
nofollow : 검색엔진이 이 링크를 따라가지 않도록 함
external : 링크가 외부사이트로 연결됨을 나타냄
list
ol 속성 : 1, A, a, I, i
ul 속성 : list-style-type: (disc, circle, square, none)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list 연습</title>
</head>
<body>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
<ol type="i">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
<ul style="list-style-type:square;">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<dl>
<dt>장원영</dt>
<dd>IVE</dd>
<dt>김채원</dt>
<dd>LE SSERAFIM</dd>
</dl>
</body>
</html>
- 테이블과 폼
table
<table> <thead> <tbody> <tfoot>
<tr> : 행
<th> : 머리글 쉘
<td> : 쉘
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial0scale=1.0">
<title>테이블</title>
<style>
table, td, th {
border: 2px dashed lightskyblue;;
}
</style>
</head>
<body>
<table cellpadding="10" cellspacing="5" width="50%" align="center">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>장원영</td>
<td>19</td>
</tr>
<tr>
<td>2</td>
<td>김채원</td>
<td>23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">테이블 바닥글</td>
</tr>
</tfoot>
</table>
</body>
</html>
border - dashed(점선)solid(실선), width, height, cellpadding(쉘 내부 여백), cellspacing(쉘 사이), bgcolor(배경색)
align : center 가운데 정렬
colspan, rowspan으로 병합가능
<th colspan = "2">정보</th>
<td rowspan = "2">1-2</td>
form
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial0scale=1.0">
<title>회원가입 폼</title>
</head>
<body>
<form action="submit-registration" method="post">
<h2> Registration Form</h2>
<label for="name">이름:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required minlength="8"><br><br>
<label>성별:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">기타</label><br><br>
<label for="job">직업:</label>
<select id="job" name="job">
<option value="student">학생</option>
<option value="teacher">선생님</option>
<option value="engineer">엔지니어</option>
<option value="other">기타</option>
</select><br><br>
<label for="hobby">취미:</label>
<input list="hobbies" id="hobby" name="hobby">
<datalist id="hobbies">
<option value="코딩">
<option value="음악">
<option value="등산">
<option value="요리">
<option value="독서">
</datalist><br><br>
<label>뉴스레터 구독:</label>
<input type="checkbox" id="newsletter" name="newsletter" value="subscribe">
<label for="newsletter">구독하기</label><br><br>
<label for="introduction">자기소개:</label>
<textarea for="introduction" name="introduction" rows="5" cols="30"></textarea><br><br>
<input type="submit" value="등록하기">
</form>
</body>
</html>
- 멀티미디어 태그
이미지
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial0scale=1.0">
<title> 이미지 삽입 예제</title>
</head>
<body>
<h1>펭귄 이미지</h1>
<img src="penguin.jpg", alt="귀여운 펭귄", width="500", height="300">
</body>
</html>
- 비디오 및 오디오 삽입
<video> , <audio>
- src : 경로지정
- controls : 재생 컨트롤 바 추가
- autoplay : 페이지가 로딩될 때 자동 재생
- loop : 동영상이 끝나면 반복
- muted 영상 음소거
- width, height
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial0scale=1.0">
<title>비디오 및 오디오</title>
</head>
<body>
<h2>비디오 및 오디오 예제</h2>
<video width="300" height="500" controls autoplay loop muted>
<source src="penguin.mp4" type="video/mp4">
</video><br><br>
<audio controls>
<source src="bgm.mp3" type="audio/mp3">
</audio>
</body>
</html>
- 반응형 웹
meta
- name = "viewport"는 모바일 웹페이지의 크기, 확대 수준 설정
- content = "width=device-width : 화면 너비에 맞게 너비설정, initial-scale=1.0" : 확대,축소 수준 1설정
- name = "keyword" : 웹 페이지 키워드 나열
- name = "description" : 웹 페이지의 내용 짧은 설명 제공
- name = "author" : 문자의 저자 지정
- charset="UTF-8"은 문자 인코딩을 utf-8로 설정
- http-equiv="refresh" content="30" : 30초마다 새로고침
미디어 쿼리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial0scale=1.0">
<title>반응형 웹 디자인</title>
<style>
body {
background-color: lightblue;
}
@media (max-width:600px){
body{
background-color: lightpink;
}
}
</style>
</head>
<body>
<h2>반응형 웹 디자인 예제</h2>
</body>
</html>
- 시맨틱 태그
웹 페이지의 각 부분이 어떤 역할을 하는지 개발자에게 알려주며 div나 span과 달리 태그 자체가 내용을 의미한다.
- <section>
- 주로 제목이 있는 콘텐츠 블록
- <article>
- 블로그 글, 뉴스 기사, 포럼 게시물
- <header>
- 머리글 : 로고, 제목, 네비게이션 메뉴
- <footer>
- 바닥글 : 작성자 정보, 저작권, 관련 링크
- <nav>
- 탐색 링크 집합
- <aside>
- 사이드바, 광고, 링크 목록
- <figure>
- 독립적인 콘텐츠(이미지, 다이어그램, 코드 블록 등)를 정의합니다.
- 일반적으로 <figcaption>(설명)을 포함하여 사용됩니다.
- <figcaption>
- <figure> 요소의 설명을 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>시맨틱 태그 연습문제</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
padding: 0px;
}
nav ul {
list-style: none;
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 20px;
}
</style>
</head>
<body>
<header>
<h1>메인 페이지 제목</h1>
<p>로고나 아이콘</p>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#home">뉴스</a></li>
<li><a href="#home">연락처</a></li>
<li><a href="#home">소개</a></li>
</ul>
</nav>
</header>
<section>
<header>
<h2>기사 제목</h2>
<p>작성자: 홍길동</p>
</header>
<p>기사 내용</p>
<figure>
<img src="penguin.jpg" alt="펭귄 이미지" width="300" height="250">
<figcaption>남극의 아름다운 펭귄</figcaption>
</figure>
<footer>
<p>저작권 2024 홍길동. 모든 권리 보유.</p>
</footer>
</section>
<section>
<header>
<h2>또 다른 기사 제목</h2>
<p>작성자 : 김철수</p>
</header>
<p>기사 내용</p>
<footer>
<p> 저작권 2024 김철수. 모든 권리 보유.</p>
</footer>
</section>
<footer>
<p>연락처 정보: info@example.com</p>
<p>저작권 2024 메인 웹사이트. 모든 권리 보유.</p>
</footer>
</body>
</html>
