오픈마켓판매자를 위한 기초 HTML 명령어 베스트5

우리가 보는 인터넷화면은

html로 작성된 결과물이다.

 

html로 작성된 결과물을 확인하기위해

네이버 혹은 임의의 홈페이지를 띄워놓은후,

오른쪽버튼을 눌러서 [소스보기(v)]를

눌러보자

 

[HTML 소스 확인해보자]

 

 

 

[소스 결과물]

 

결과물은 아래와 같다

 

 

결론은, 내가 보는 화면은

그냥 그렇게 쉽게 나온 페이지는

아니라는것이다!

 

 

 

 

■■■■■■■■■■

 

 

 

 

이 수많은 html명령어들을 익히는데는

1. 시간도 오래 걸릴뿐더러,

2. 사업자에게는 불필요한 시간을 잡아먹게 된다.

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

이번 시간은

[기초 HTML 실무 시간]으로

판매를 위한 최소한의 HTML명령어와 규칙 

5개만

익히고 지나가기로 한다

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

*준비물*

 

하나. 옥션 관리자페이지(esmplus.com)에 등록된 상품

[수정]으로 들어가서

상세페이지까지 찾아들어간다

*html선택상태*

 

둘. esm에서 제공하는 호스팅(http://im.esmplus.com)에 접속하여

a.jpg/top.jpg/tail.jpg 파일의 주소값을 메모장에 복사해놓는다

소스) http://gi.esmplus.com/ganamarket/woman2016/theplus/a.jpg

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

 

* 실습시 html모드와 에디터모드를

번갈아가면서 확인한다*

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

1번째 html "명령어 구조"

< >

 

해석) html 시작하고 끝맺겠습니다

 

모든 html파일은 <>로 시작하고 닫는다

 

상단의 html소스 결과물을 다시 보면,

모든 html소스가

"<" 로 시작해서 ">"로 끝나는것을

알수 있다

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

2번째 명령어 "이미지 불러오기"

img src=

 

해석) 이미지 소스가 어디에 있는가

 

img : image src : source = : 이미지 주소값

 

 

 

---1번과 2번을 결합하면---

<img src=이미지주소값>

가 된다

 

(완성)

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/a.jpg">

 

 

hml<->에디터 모드 전환해서 결과물 확인

 

 

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

3번째 명령어 "중앙 정렬하기"

<center>

 

해석) 이하 모든 페이지는 중앙정렬시킨다

 

(완성)

 

<center>

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/a.jpg">

 

 

hml<->에디터 모드 전환해서 결과물 확인

 

 

 

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

 

 

 

 

 

 

4번째 명령어 "이미지 한줄씩 줄바꿈"

 <br>

 

해석) BReak line의 약자로

이미지와 이미지 사이를 한줄씩 줄바꿈처리

 

(완성)

 

<center>

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/top.jpg"><br>

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/a.jpg"><br>

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/tail.jpg"><br>

 

 

 

hml<->에디터 모드 전환해서 결과물 확인

 

 

 

 

 

 

■■■■■■■■■■

 

 

 

 

 

 

 

5번째 명령어 "이미지 사이즈 조절하기"

width=600

해석) 이미지의 가로사이즈를 600으로 조절

 

적용)

<img src="http://gi.esmplus.com/ganamarket/woman2016/theplus/a.jpg width=600">

 

600을 100>300>600으로 조절해서

결과물 확인하기

 

 

hml<->에디터 모드 전환해서 결과물 확인

 

 

 

■■■■■■■■■■

 

 

 

 

결론

 

 

이게 이해가 되야,

상품관리의 첫번째 관문 통과!

 

 

가장 기본적인 상세페이지 구조이다.

그중에서도,

top과 tail의 원리를 알고 있어야

실전 판매시 손발이 고생을 안하게 된다