2-1-1. 절대 경로
2-1-2. 상대 경로
2-4. FTP(File Transfer Protocol)
2-5-1. 책갈피
2-5-2. 테이블(table) 태그
2-5-3. 폼(form) 태그
2-5-4. 입력(input) 태그
2-5-5. 라벨(label) 태그
2-1. 경로
2-1-1. 절대 경로
물리적 경로. 전체적인 경로를 의미.(상위,하위의 경로의 구분이 없음.)
* URL주소를 사용하는 경우
웹사이트의 이미지를 우클릭하여 '이미지 주소 복사' 버튼 클릭.
예) <img src='ht1tps://s.ps1tatic.net/dthumb.phinf/?src=%22https%3A%2F%2Fsports-phinf.pstatic.net%2Fadmin%2Fcrop%2F1679616604248.jpg%22&type=nf464_260'>
* 드라이브의 경로를 사용하는 경우
Windows 탐색기에서 드라이브의 경로를 복사.
예) C:\yjcho\HTML\day1\sea1.png
해당 경로는 나만의 경로이기 때문이기에 사진을 불러오지 못해 사진이 깨지는 경우가 발생할 수 있음.
실무에서 웹사이트 개발 시, 드라이브 절대경로는 사용하지 않는 것을 추천함.
2-1-2. 상대 경로
절대 경로와 달리, 현재의 위치를 기준으로 한 경로를 의미.
* 이미지가 HTML 문서와 같은 디렉토리에 있는 경우
<img src='파일명'> <img src='./파일명'> |
* 이미지가 하위 디렉토리에 있는 경우
<img src='디렉토리명/파일명'> <img src='./디렉토리명/파일명'> |
* 이미지가 상위 디렉토리에 있는 경우
<img src='../파일명'> <img src='./../파일명'> |
live server가 위치한 폴더를 기준으로 VS Code를 재시작해야 함.
→ VS code를 종료 후 'day1'폴더가 아닌 상위 폴더인 'HTML'폴더로 드래그해서 재시작해야 정상적으로 사진이 보이게 됨.
* 이미지가 상위 디렉토리의 하위 디렉토리에 있는 경우
(상위 디렉토리는 동일하지만, 다른 디렉토리에 있는 경우.)
<img src='../하위디렉토리명/파일명'> <img src='./../하위디렉토리명/파일명'> |
2-2. 하이퍼링크
문자나 이미지를 클릭하여 다른 페이지 또는 사이트로 연결할 수 있게 해주는 링크.
인라인태그이다.
<a href='이동할 사이트 또는 문서의 경로'> 링크에 사용할 문자 또는 이미지 </a> |
예)
<a href='http://koreaisacademy.co.kr/'> 코리아 IT 아카데미 </a> |
2-5. 태그(tag)
2-5-1. 책갈피
같은 페이지 내에서 하이퍼링크를 클릭했을 때, 특정 위치로 이동해줌.
스크롤이 긴 페이지인 경우 사용이 유용함.
<a>태그의 name 속성, id 속성을 이용.
<a href='# 도착지에 쓰일 name'> 링크에 사용될 문자 또는 이미지 </a> ... ... ... <a name='도착지 name'> 문자 또는 이미지 </a> |
예)
<p> <a href='#book'> 목적지로 이동합니다. </a> </p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit laborum minus possimus quibusdam ullam porro veniam exercitationem numquam molestiae tempore eos ipsum modi deleniti quo nostrum rem facere, illum iusto?</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit laborum minus possimus quibusdam ullam porro veniam exercitationem numquam molestiae tempore eos ipsum modi deleniti quo nostrum rem facere, illum iusto?</p> ....... <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit laborum minus possimus quibusdam ullam porro veniam exercitationem numquam molestiae tempore eos ipsum modi deleniti quo nostrum rem facere, illum iusto?</p> <p> <a name='book'> 도착지 </a> </p> |
2-5-2. 테이블(table) 태그
여러 종류의 데이터를 정리하여 보여주는 표를 작성.
<table> ~ </table>의 형식.
<tr>로 행을 생성. <td>로 셀을 생성.
예) table 안에 1개의 행 + n개의 셀을 생성하는 경우.
<table> <tr> <td>1</td><td>2</td><td>3</td> ... <td> n </td> </tr> </table> |
예)
<h2>테이블만들기1</h2> <table> <tr> <td>첫번째 셀</td> </tr> </table> <hr> <table> <tr> <td>첫번째 셀</td> <td>두번재 셀</td> </tr> </table> |
style로 테두리설정을 해 준 경우의 모습.
테이블의 기본형태는 투명이므로,
코드를 입력해서 style 서식편집을 해주지 않으면 테이블의 형태가 보이지 않음.
예) 전체 너비 600px, 셀 테두리 1px, 검은색 선 1px의 table 생성.
<style> table {width: 600px; border: 1px solid black;} td {border: 1px solid black;} </style> ... <body> <h2>테이블만들기1</h2> <table> <tr> <td>첫번째 셀</td> </tr> </table> <hr> <table> <tr> <td>첫번째 셀</td> <td>두번재 셀</td> </tr> </table> |
<th> 속성
셀의 제목, 가운데 정렬, 굵은 글씨.
예) th 태그의 셀에 테두리 + 1px의 진하늘색 선 지정.
th {border: 1px solid deepskyblue;} |
<colspan> 속성
셀을 가로로 병합.
< td colspan = '병합할 열의 개수' >< /td > |
<lowspan> 속성
셀을 세로로 병합.
<td lowspan='병합할 행의 개수'></td> |
<colgroup> 속성
colgroup 태그 뒤의 컬럼에 적용할 스타일을 해당 태그에서 미리 설정.
(각각의 col마다 따로 스타일을 설정하고 싶은 경우)
예)
<head> <style> table{ width: 600px; border: 1px solid black; } td{ border: 1px solid black; } th{ border: 1px solid black; } </style> </head> <body> <table> <colgroup> <col style="width:100px; background-color: aliceblue;"> 1열 : 너비 100px, 배경색 연푸른색 <col style="width:200px; background-color: antiquewhite;"> 2열 : 너비 200px, 배경색 베이지색 <col style="width:300px; background-color: aquamarine;"> 3열 : 너비 300px, 배경색 아쿠아마린색 </colgroup> <tr> <th>이름</th> <th>연락처</th> <th>주소</th> </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> </table> </body> |
캡션(caption)
표에 제목을 붙일 때 사용.
기본 위치는 표의 상단 중앙.
<table> 바로 아래에 적용.
예)
<table> <caption> <p><b>KDT 수강생 리스트</b></p> </caption> </table> |
아이프레임(i frame)
웹사이트 안에 또 다른 웹사이트를 삽입하는 방법.
네이버와 같은 메이저사이트는 아이프레임으로 삽입할수 없도록 막아둠
→ 모든 사이트가 가능한 것은 아님.
<iframe src = '삽입할 페이지의 주소 또는 문서위치' style = '크기를 설정할 css코드' > </iframe> |
예)
<body> <p> <iframe src="http://www.koreaitacademy.com", style="width:50%; height:800px;"> </iframe> </p> </body> |
target 속성
'아이프레임 + 하이퍼링크'의 응용 속성.
예)
<body> <h2>아이프레임</h2> <p><a href="1. 하이퍼링크.html">하이퍼링크 연습페이지</p> <p><iframe src="https://itgn.cafe24.com/", style="width:100%; height:800px; border: 3px dashed azure;"> </iframe> </p> </body> |
* 현재 페이지에서 링크 오픈
<a href= "(링크)"> ... </a>
* 새 탭에서 링크 오픈
<a href= "(링크)" target="blank"> ... </a>
* 아이프레임을 이용하여 페이지 안에서 링크 오픈
<a href= "(링크)" target="if"> ... </a>
예)
<body> <h2>아이프레임</h2> <p> <a href="1. 하이퍼링크.html">하이퍼링크 연습페이지(현재 페이지)</a> <a href="1. 하이퍼링크.html" target="blank">하이퍼링크 연습페이지(새 탭)</a> <a href="1. 하이퍼링크.html" target="if">하이퍼링크 연습페이지(아이프레임)</a> </p> <p><iframe src="https://itgn.cafe24.com/", style="width:100%; height:800px; border: 3px dashed azure;" name="if"></iframe> </p> </body> |
2-5-3. 폼(form) 태그
웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그
사용자가 입력한 데이터를 서버로 보낼 때 form 안의 요소들을 사용.
< form action = '서버에게 전달할 파일의 위치' method = '전송방법' > form 태그 안에 form 요소를 통해 데이터를 서버로 전달 </form> |
예) post의 전송방식을 이용하여 '#'의 위치로 파일을 전달.
<body> <form action="#" method="post"> ... ... </form> </body> |
get: URL에 데이터를 포함하여 전송하는 method 방식. URL 중 '물음표(?)' 이후의 내용들이 data이며, 이 내용들이 존재하면 get 방식. post: body에 데이터를 포함하여 전송하는 method 방식. URL 중 '물음표(?)' 이후의 내용들이 data이며, 이 내용들이 존재하지 않으면 post 방식. |
2-5-4. 입력(input) 태그
<form> 태그 안에 입력.
웹페이지에서 사용자로부터 입력을 받는 다양한 형식의 폼 요소를 생성하는데 사용됨.
<form></form> 태그의 안에 입력함.
< input type = ' 태그의 유형 ' ... > |
text:
문자를 입력받는 글상자.
예)
<p> 아이디: <input type='text'></p> |
password:
비밀번호를 입력받은 글상자.
예)
<p> 비밀번호: <input type='password'></p> |
radio:
여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있는 버튼. 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함.
예)
<p>성별: 남자<input type="radio" name="gender"> 여자<input type="radio" name="gender"> </p> |
name:
요소의 이름을 설정. 서버에서 값을 전달받을 때 key로 사용.
예)
<p>아이디: <input type='text' name="userid"></p> <p>비밀번호: <input type='password' name="userpw"></p> |
id:
요소의 유일한 이름을 설정. HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용.
(HTML문서 내에서 다른 요소와 같은 id를 가질 수 없음.)
예)
<p> 아이디: <input type='text' name="userid" id="userid"></p> <p> 비밀번호: <input type='password' name="userpw" id="userpw"></p> |
maxlength:
값의 최대 길이를 설정.
예)
<p> 아이디: <input type='text' name="userid" id="userid" maxlength="20"></p> <p> 비밀번호: <input type='password' name="userpw" id="userpw" maxlength="20"></p> |
placeholder:
입력 전 특정 데이터를 입력하도록 안내하는 값을 설정. (안내목적으로 배경에 흐릿하게 입력이 되어있는 값)
예)
<p> 아이디: <input type='text' name="userid" id="userid" maxlength="20" placeholder="아이디를 입력하세요"></p> <p> 비밀번호: <input type='password' name="userpw" id="userpw" maxlength="20" placeholder="비밀번호를 입력하세요"></p> |
value:
서버로 전달할 입력양식의 값을 설정. (미리 폼에 입력이 되어있는 값.)
예)
<p> 아이디: <input type='text' name="userid" id="userid" maxlength="20" value="apple"></p> <p> 비밀번호: <input type='password' name="userpw" id="userpw" maxlength="20" value="apple"></p> |
checked:
radio 또는 checkbox 중에서 미리 선택해두는 값을 설정. (radio, checkbox에서 기본선택값으로 사용.)
예)
<p> 성별: 남자 <input type="radio" name="gender" checked> 여자<input type="radio" name="gender"> </p> |
2-5-5. 라벨(label) 태그
폼 양식에 이름을 붙이는 요소. 다른 요소를 연결하면 해당 영역이 넓어짐
주로 radio, checkbox의 클릭 영역을 박스에서 라벨명까지 확대하는 목적으로 많이 사용됨.
< label for = ' 요소의 id ' > 텍스트 또는 이미지 </label> |
예)
<p>성별: <label for='male'> 남자 </label> <input type="radio" id="male" name="gender" checked> <label for='female'> 여자</label> <input type="radio" id="female" name="gender"> </p> |
