[HTML5] 무료 웹 호스팅

13일차

목차

1. 사이트

2. FileZilla

3. <img> : 사진 태그

4. 실습

 

---

 

 

1. 사이트

무료홈페이지 | 무료호스팅 | 닷홈 (dothome.co.kr)

무료홈페이지 | 무료호스팅 | 닷홈

 

 

2. FileZilla

 

호스트 : ID.dothome.co.kr

사용자명 : ID

비밀번호 : 패스워드

포트 : 빠른 연결

 

우클릭 후 업로드

업로드 확인

 http://[ID].dothome.co.kr/[파일명]

 

파일명이 index.html이라면 뒤에 파일명을 따로 붙이지 않아도 된다

 - 서버에 들어가면 자동으로 불러들이는 파일명 : index.html

 

 

3. <img> : 사진 태그

단독 태그이기 때문에 한번만 작성해도 됨

1. 이미지 폴더 생성

 

2. 이미지를 해당 폴더에 넣기 (이미지명은 영문으로 작성하기)

 

3. 이미지 넣기

src="폴더명/파일명"  > 사진이 있는 실제 경로 (소스)

alt="  "  > 사진이 나오지 않을 때 어떤 사진인지를 설명하여 다른 사람이 이해할 수 있도록 돕는 것

title="  "  > 마우스를 가져다 댔을 때 도움말이 나오는 것

이미지의 경로를 잘못 적었을 때 alt의 설명이 출력된다

 

4. 이미지의 크기 지정

width="  "  > 가로 길이

height="  "  > 세로 길이

파일의 경로가 틀린 2번째 사진은 alt가 출력 / 크기를 지정한 3번째 사진

 

 

5. 이미지를 주소로 지정하기

CGV에서 영화 듄:2 이미지를 우클릭 하여 이미지 주소 복사하기

경로에 이미지 주소 붙여넣기

 

6. 이미지에 설명 캡션 추가

<figure>

<이미지>

<figcaption>

<이미지 설명>

</figcaption>

</figure>

 

7. 글자를 가로로 출력

list-style을 none으로 설정하면 리스트 앞쪽의 검은 동그라미가 없어짐

 

텍스트 관련 요소

 

 

4. 실습