1. 웹의 기본 이해하기
1.1. 웹이란 무엇인가?
- 단순히 사이트만 보여주는 것이 아닌 하나의 플랫폼
- 디지털 트랜스폼 환경, 다양한 기기 웹 사용
-> 웹표준 필요=HTML, CSS , Javascript
1.2. 네트워크란 무엇인가?
- 여러 컴퓨터를 연결해 놓은 체계
- 랜을 통하여 여러 컴퓨터들을 연결 (복잡)
- 중간 역할을 해주는 라우터를 사용하여 네트워크 연결
- 여러 라우터를 연결하여 네트웨크 연결
1.3. 서버와 클라이언트의 관계
서버<-----> 인터넷 ------>클라이언트(pc, 스마트폰, 노트북)
- 웹 작동방식= 인터넷을 통하여 클라이언트 서버 정보 주고 방식
- 어느 위치에 상관 없이 모든 정보 열람
- 백엔드: 사용자 눈에 보이지 않지만, 클라이언트 요청 받은데로 정보를 보내주거나 작업처리 (DB저장 ->클라이언트 송출)
- 프론트엔드: 사용자 눈에 보이는 영역 처리
1.4. IP주소와 DNS
- IP주소: 인터넷에 연결되어 있는 컴퓨터를 구별하는 주소 (4~8숫자)
- 도메인: 숫자 대신 영문 주소 사용
서버가 자동으로 IP주소 변환 / 사용자가 기억하기 좋은 주소(gogole.com)
- DNS서버: 도메인을 IP주소로 변환해주는 역할
1.5. 프로포폴
- 클라이언트, 서버 어떻게 자료를 받을지 약속해 놓은 것
- HTTP
- HTTPS / 암호화 데이터 전송
1.6. 웹접근성
- 웹접근성=정보접근성
2. HTML 기술 배우기
2.1 HTML 문서 기본구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025년 1월 20일 복습</title>
</head>
- HTML 시작 기본 구조 언어 영어 로 한국어 변경/ lang="ko" / meat charset ="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
->반응형 웹
-<title><title>
2.2 텍스트 입력
<h1> 제목/ 글자 크기 표현 h1~6</h1>
<p>텍스트 단락</p>
<p><strong>중요한 내용 강조</strong></p>
<p><b>스타일 굵게</b></p>
<p><em>이탤릭 강조</em></p>
<p><i>이탤릭체</i></p>
<p><cite>저작물 제목</cite></p>
<p><blockquote>인용문 약간 들여써짐</blockquote></p>
-기본 글자 표현->
<!-- 줄바꾸기 -->
<br>
<!-- 목록만들기 순서 o / 순서 x -->
<ui>
<li>순서없이 나열</li>
<li> unorder list</li>
</ui>
<ol>
<li>1 2 3 순서대로 나열</li>
<li>order list</li>
</ol>
-목록 만들기 표현->
2.3 표만들기
<!-- 표만들기 -->
<table>
<caption>표제목</caption>
<colgroup>
<col style="background-color: #ccc;">
<col span="2" style="width:100px">
</colgroup>
<thead>
<tr>
<th>행을 만듦</th>
<th>행1</th>
<th>행2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">셀을 만듦</td>
<td>셀1</td>
<td>셀2</td>
</tr>
<tr>
<td>셀3</td>
<td>셀4</td>
</tr>
<tr>
<td>셀을 만듦</td>
<td>셀5</td>
<td>셀6</td>
</tr>
</tbody>
</table>
->
- colgroup은 caption 태그 뒤에 작성 / 표 열로 묶어서 스타일 줄 수 있음
- rowspan / colspan 통하여 행 열 묶기
*추가 css 부분 참고만 / 줄 문자 크기 만들기 / 이후 자세히 다룰 예정
해당 코드는 </head> 앞 작성 필요
<style>
table,th,td{
border: 1px solid;
border-collapse: collapse;
}
th,td{padding:10px 20px}
</style>
</head>
->
2.4 이미지 삽입하기
<figure>
<img src="다운로드.jpg"
alt="속성 작성"
width="30%">
<figcaption>그림에 대한 설명글 추가가</figcaption>
</figure>
<div>
<p><a href="image.html">하이퍼링크 삽입</a></p>
</div>
<div>
<p><a href="image.html" target="_blank">새 탭에서 문서열기</a></p>
</div>
<div>
<p><a href="image.html"><img src="image/다운로드.jpg"></a></p>
</div>
2.5 시맨틱 태그(나중에에에에)
2.6 폼 만들기
2.6.1 기본 틀 <label> 태그 안에 <input> 넣기
<form>
<fieldset>
<lable>아이디:<input type="text" id="user-name" size="10"></lable>
<lable>비밀번호:<input type="password" id="user-pw" size="10"></lable>
<input type="submit" value="로그인">
</fieldset>
</form>
2.6.2 폼요소와 <label> 태그 따로 작성
<fieldset>
<legend>폼 제목 작성</legend>
<p><b>폼에 대한 정보 입력</b></p>
<ul>
<li>
<lable for="user-id">이름</lable>
<input type="text" id="user-id">
</li>
<li>
<lable for="addr">배송주소</lable>
<input type="text" id="addr">
</li>
<li>
<label for="mail">메일주소</label>
<input style="email" id="mail">
</li>
<li>
<label for="phone">핸드폰</label>
<input type="tel" id="phone">
</li>
</ul>
</fieldset>
- legend / 폼 제목 작성
- label for / input id지정 필수
2.6.3체크박스와 라디오
</fieldset>
<fieldset>
<legend>폼 제목 작성</legend>
<p><b>체크박스를 통하여 원하는 선택지 선택 가능</b></p>
<ul>
<li>
<label><input type="checkbox" name="prod" value="s_3">선택지1</label>
<input type="number" min="0" max="5">개 (최대5개)
</li>
<li>
<label><input type="checkbox" name="prod" value="s_5">선택지2</label>
<input type="range" min="0" max="100" step="1" value="20">
</li>
<li>
<label><input type="checkbox" name="prod" value="f_5">선택지3</label>
<input type="range" min="0" max="100" step="1" value="20">
</li>
</ul>
<p><b>라디오를 통하여 선택유무 확인 가능</b></p>
<ul>
<li>
<label><input type="radio" name="gift" value="yes">선택함</label>
</li>
<li>
<label><input type="radio" name="gift" value="no">선택안함</label>
</li>
</ul>
-range, number 타입과 맥시멈 미니엄 확인
2.6.4 input 태그의 타입 속성 확인
<hr>
<input type="submit" value="반품하기">
<input type="submit" value="취소하기">
<hr>
<input type="date">
<input type="month">
<input type="week">
