Web/html
HTML
dustKim
2024. 4. 4. 22:57
호스팅 서비스
- 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스
- FTP(File Transfer Protocol)
- 클라이언트와 서버간의 파일 전송 프로토콜
- 주로 대량의 파일을 전송할 때 사용
- 기본포트 : 21
- 닷홈 무료 호스팅 확인사항
- 첫 페이지는 항상 index.html(소문자)로 업로드해야 함
- html 디렉토리에 저장해야 함
ftp-simple
- 설정하기
f1키 -> ftp-simple : config - FTP connection setting 선택 후 아래 JSON 파일 수정
[
{
"name": "이름(예: 닷홈)",
"host": "FTP IP 주소",
"port": 21,
"type": "ftp",
"username": "FTP 아이디",
"password": "FTP 비밀번호",
"path": "/",
"autosave": true,
"confirm": false
}
]
- 접속하기
f1키 -> ftp-simple : Remote directory open to workspace
태그와 속성2
- 하이퍼링크 태그
- 다른 페이지 또는 사이트로 연결되는 링크를 만들어주는 태그
더보기
결과
# 코드블럭을 사용하여 주석을 #으로 씀
# HTML 주석은 <!-- --> 이렇게 씀
# 하이퍼링크 태그 사용법
<a href='문서의 경로'>링크에 사용할 문자 또는 이미지</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼링크</title>
</head>
<body>
<h2>하이퍼링크</h2>
<!-- 절대 경로 -->
<a href="https://koreaisacademy.com/">코리아IT아카데미</a>
<a href="https://www.tcpschool.com/"><img src="https://www.tcpschool.com/img/logo.png" alt="TCP스쿨 로고"></a>
<!-- 상대 경로 -->
<a href="./1_mywebsite.html">내 첫 웹페이지</a>
<a href="./sub/subpage.html">서브페이지</a>
</body>
</html>
- 테이블 태그
- 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성하는 태그
- <table>로 시작하고 </table>로 종료
- <tr></tr>로 행을 생성, <td></td>로 셀(열)을 생성
- <th></th>은 셀의 제목을 생성
더보기
결과
# 테이블 태그 사용법
<table>
<tr>
<td>셀1</td><td>셀2</td>
</tr>
</table>
# 테이블 태그 속성
colspan 속성 : 셀을 가로로 합침
<td colspan="합칠 열의 개수">
rowspan 속성 : 셀을 세로로 합침
<td rowspan="합칠 행의 개수">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 1</title>
</head>
<body>
<h2>테이블 1</h2>
<table>
<tr>
<td>첫번째 셀</td>
</tr>
<hr>
<table border="1" width="300">
<tr>
<td>첫번째 셀</td>
</tr>
</table>
<hr>
<table border="1" width="300">
<tr>
<th>첫번째 셀</th><th>두번째 셀</th>
</tr>
<tr>
<td>서번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>다섯번째 셀</td><td>여섯번째 셀</td>
</tr>
</table>
<hr>
<table border="1" width="300">
<tr>
<th colspan="2">첫번째 셀</th>
</tr>
<tr>
<td>서번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>다섯번째 셀</td><td>여섯번째 셀</td>
</tr>
</table>
<hr>
<table border="1" width="300">
<tr>
<th colspan="2">첫번째 셀</th>
</tr>
<tr>
<td rowspan="2">세번째 셀</td><td>네번째 셀</td>
</tr>
<tr>
<td>여섯번째 셀</td>
</tr>
</table>
<hr>
<table border="1" width="300">
<tr>
<th colspan="3">1</th>
</tr>
<tr>
<td rowspan="3">4</td><td>5</td><td rowspan="3">6</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>11</td>
</tr>
</table>
</body>
</html>
- colgroup 태그 & caption 태그
- colgroup : 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 한다
- caption 태그 : 표에 제목을 붙일 때 사용하고, 기본 위치는 표의 상단 중앙
더보기
결과
# colgroup 태그 사용법
<colgroup>
<col 속성="속성값">
<col 속성= "속성값">
<col 속성="속성값">
</colgroup>
# caption 태그 사용법
<caption><p><strong>표의 제목</strong><p></caption>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 3</title>
</head>
<body>
<h2>테이블 3</h2>
<table>
<caption><p><strong>KDT 수강생 리스트</strong><p></caption> # caption 태그 사용
<colgroup> # colgroup 태그 사용
<col style="width: 100px; background-color: pink;">
<col style="width: 200px; background-color: skyblue;">
<col style="width: 300px; background-color: yellowgreen;">
</colgroup>
<tr>
<td>이름</td>
<td>연락처</td>
<td>주소</td>
</tr>
<tr>
<td>김사과</td>
<td>010-1111-1111</td>
<td>서울시 서초구 서초동</td>
</tr>
<tr>
<td>반하나</td>
<td>010-2222-2222</td>
<td>서울시 서초구 양재동</td>
</tr>
<tr>
<td>오렌지</td>
<td>010-3333-3333</td>
<td>서울시 강남구 역삼동</td>
</tr>
<tr>
<td>이메론</td>
<td>010-4444-4444</td>
<td>서울시 동작구 사당동</td>
</tr>
</table>
</body>
</html>\
- 아이프레임 태그
- inline frame의 약자로 웹사이트 안에 또 다른 웹사이트를 삽입
더보기
결과
# iframe 태그 사용법
<iframe src="문서위치" style="크기를 설정할 css코드"></iframe>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이프레임</title>
</head>
<body>
<h2>아이프레임</h2>
<p><a href="./2_책갈피.html">책갈피 예제(현재창)</a></p>
<p><a href="./2_책갈피.html" target="_blank">책갈피 예제(새탭)</a></p>
<p><a href="./2_책갈피.html" target="korea">책갈피 예제(새탭)</a></p>
<p><a href="https://www.koreaisacademy.com" target="korea">코리아IT아카데미</a></p>
<p><iframe src="https://www.koreaisacademy.com" style="width: 500%; height: 500px;" name="korea"></iframe></p>
</body>
</html>
- 폼 태그
- 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음
- 사용자가 입력한 데이터를 서버로 보낼 때 사용
더보기
결과
# 홈 태그 사용법
<form method="전송방법" action="데이터를 받을 서버페이지">
....
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그</title>
</head>
<body>
<h2>폼 태그</h2>
<form action="./regist" method="">
<p>아이디 : <input type="text" maxlength="20" placeholder="아이디를 입력하세요" name="userid" id="userid"></p>
<p>비밀번호 : <input type="password" maxlength="20" placeholder="비밀번호를 입력하세요" name="userpw" id="userpw"></p>
<p>성별 : <label for="male">남자</label><input type="radio" name="gender" value="남자" id="male" checked> <label for="female">여자</label><input type="radio" name="gender" value="여자" id="female"></p>
<p>취미 :
<label for="hobby1">운동</label><input type="checkbox" name="hobby" value="운동" id="hobby1">
<label for="hobby2">게임</label><input type="checkbox" name="hobby" value="게임" id="hobby2">
<label for="hobby3">영화감상</label><input type="checkbox" name="hobby" value="영화감상" id="hobby3">
<label for="hobby4">낚시</label><input type="checkbox" name="hobby" value="낚시" id="hobby4">
<label for="hobby5">음악감상</label><input type="checkbox" name="hobby" value="음악감상" id="hobby5">
</p>
<p>첨부파일 : <input type="file"></p>
<p>직업 :
<select name="job">
<option value="프로그래머">프로그래머</option>
<option value="공무원">공무원</option>
<option value="전문직">전문직</option>
<option value="취준생">취준생</option>
<option value="학생">학생</option>
<option value="주부">주부</option>
</select>
</p>
<p>자기소개</p>
<p><textarea name="content" cols="30" rows="10"></textarea></p>
<p>이메일 : <input type="email"></p>
<p>웹사이트 : <input type="url"></p>
<p>전화번호 : <input type="tel"></p> <!-- 모바일에서 숫자 키패드가 나옴 -->
<p>생년월일 : <input type="date"></p>
<p>좋아하는 숫자 : <input type="number" min="1" max="100" step="1"></p>
<p>프로그래밍 능력 : <input type="range" min="0" max="10" value="3"></p>
<p><input type="button" value="버튼" onclick="alert('안녕하세요!')"> <input type="reset" value="리셋"></p> <!-- 리셋은 처음 페이지를 열었을 때 모습으로 돌려줌 -->
<p><input type="submit" value="전송"></p> <!-- 입력한 값을 action(./regist) 으로 보낸다. -->
<p><button>버튼</button></p> <!-- submit과 같은 역할, type을 넣을 수 있음. 기본값은 submit -->
</form>
</body>
</html>