3. HTML과 FTP 사용법 정리(닷홈 호스팅을 활용한 실습 가이드)

1. 웹 개발 관련 유용 정보

하이퍼 링크

- 다른 페이지 또는 사이트로 연결되는 링크(문자 또는 이미지)
    <a href= '문서의 경로'>링크에 사용할 문자 또는 이미지</a>


호스팅 서비스

서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해주는 서비스

FTP(File Transfer Protocol)

• 클라이언트와 서버간의 파일 전송 프로토콜
• 주로 대량의 파일을 전송할 때 사용
• 기본포트: 21

 

닷홈 무료 호스팅 확인사항

• 첫 페이지는 항상 index.html(소문자)로 업로드 해야 함
• html 디렉토리에 저장해햐 함

 

ftp-simple

설정
f1키 -> ftp-simple: config - FTP connecntion 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

 

테이블 태그

• 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 작성
• table>로 시작하고  </table>종료
• <tr></tr>로 행을 생성, <td></td>로 셀(열)을 생성
• <th><th>은 셀의 제목을 생성

<table>
    <tr>
        <td>셀1</td><td>셀2</td>
    </tr>

</table>

 

colspan 속성: 셀을 가로로 합침
    <td colspan='합칠 열의 개수>
rowspan 속성: 셀을 세로로 합침
    <td rowspan='합칠 행의 개수>

 

colgroup 태그

colgroup 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함
caption 태그에서

• 표에 제목을 붙일 때 사용
• 기본 위치는 표의 상단 중앙

 

iframe태그

inline frame의 약자로 웹사이트 안에 또 다른 웹사이트를 삽입

<iframe spc='문서위치' style='크기를 설정할 css 코드'></iframe>

 

폼 태그

• 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음
• 사용자가 입력한 데이터를 서버로 보낼 때 사용

<form method='전송방법' action='데이터를 받을 서버페이지'>
    ....
</form>

 

전송방법

• get; url에 데이터를 포함하여 전달하는 방법
• post: 데이터를 body에 포함하여 전달하는 방법