[연재 1편] 온라인쇼핑몰에 필요한 HTML 기초 사용법

안녕하세요. 오늘은 HTML이라는 주제로 글을 포스팅하고자 합니다.

 

쇼핑몰이나 인터넷을 이용하다 보면 HTML이라는 단어를 가끔 보실 수 있습니다.

지금 사용하고 있는 티스토리 글쓰기 메뉴에도 기본모드, 마크다운, HTML이라는 메뉴가 있습니다.

 

 

티스토리 글쓰기 HTML모드

 

쿠팡 상품관리 메뉴에 보시면 제품 상세설명(상세페이지)에서도 볼 수 있습니다. 보통은 상세페이지에 많이 사용합니다.

그러니까 알아두면 써먹을때가 있겠죠?

 

쿠팡 상세설명 HTML

 

위 사진에서 HTML작성, HTML일괄등록이라는 메뉴들이 있습니다.

초보분들에게는 무척이나 낯선 단어일수 있습니다. 

 

그럼 이것이 무엇인지 한번 알아 보도록 하겠습니다.

 

HTML은 영어약자의 이름입니다. 하이퍼 텍스트 마크업 랭귀지(Hyper Text Markup Language), 4개의 영단어 앞자를 따서 부르는 용어입니다. 평상시에는 HTML문서, HTML언어라고도 부르기도 합니다.

 

쉽게 이야기해서 인터넷 브라우저를 통해 볼수 있는 문서라고 정의하겠습니다.

컴퓨터 파일은 보통 이름뒤에 파일유형(확장자)이 뒤에 붙습니다. 

 

txt, jpg, gif, hwp, doc. xls, ppt, exe 등

HTML문서의 확장자는 html입니다. 파일 뒤에 확장자가 .html이라고 붙어 있다면 인터넷문서라고 볼 수 있습니다.

 

여러분이 보시는 화면에서 오른쪽 마우스 버튼을 한번 눌러보세요.(인터넷 브라우 크롬)

크롬 오른쪽 마우스버튼 > 페이지 소스 보기

 

마이크로소프트 엣지 브라우에서는 마우스 오른쪽 버튼 [페이지 원본보기]라는 메뉴입니다.

 

마치 암호처럼 알수 없는 영어로 된 문서가 열릴겁니다. 이게 바로 HTML문서입니다. 

쇼핑몰을 운영하기 위해서 모든것을 알 필요는 없지만, 기본적인 것 몇 개만 알아도 실무에서는 유용하게 사용할 수 있습니다. 그래서 앞으로 실무에서 쓰이는 기본적인 것에 초점을 맞추어 몇개만 알려드리고자 합니다.

 

1. 글자 font

2. 사진 img

3. 링크 a href

4. 표 table

 

HTML을 이용해 글자 크기나 색을 바꾼다던가, 사진을 집어 넣는다던가, 링크를 걸어 페이지를 이동 시킨다던가, 표를 만들어 볼수 있습니다. 보통 이것을 태그라 부르긴 합니다. 태그 몇개만 숙지하더라도 초급에서 중급으로 점프할 수 있습니다.

 

그럼 어떻게 HTML을 만드느냐? 이게 궁금하시겠죠? 목표를 향해 가기 위해서는 여러 방법들이 있습니다. 어떤 것을 사용해서 만들수 있는냐 이걸 [툴]이라 부르죠. 좀더 어려운 말로 코딩을 한다고도 할수 있습니다. 

 

컴퓨터에 기본적으로 설치되어 있는 메모장을 실행해 보겠습니다.

 

메모장을 이용해서 HTML만들기

 

메모장을 열어서 "내 이름은 홍길동"이라고 적어 보겠습니다.

 

파일 > 다른이름으로 저장으로

바탕화면에 저장하겠습니다.

 

이때 파일이름에 '.html'로 바꿔서 저장합니다.

 

.html로 확장자를 변경하여 저장

 

바탕화면에 저장된 화면

 

바탕화면에 저장된 파일이 크롬과 연결되어 있습니다. 만약에 변경되지 않았다면, 크롬브라우을 먼저 실행시키고 이 파일을 열면 됩니다.

 

이렇게 하는것이 HTML문서 만드는 가장 기본적인 방법입니다. 위에서 예기한 태그는 하나도 사용을 하지 않았지만

인터넷 브라우저에서 메모장을 통해 만든 파일을 확인 할 수 있습니다.

 

이 파일은 현재 내 컴퓨터 바탕화면에 저장되어 있지만, 이 파일을 인터넷 서버에 올려 놓으면 전세계 어디서 볼 수 있는 인터넷 문서가 되는 것입니다.

 

다음에는 이 글자를 꾸미거나 사진을 넣을수 있는 여러가지 태그를 하나하나씩 배워 보겠습니다.

이 HTML을 통해서 쇼핑몰의 상세페이지를 내 맘대로 꾸밀 수 있습니다.

그럼 다음 시간에 찾아 뵙겠습니다. 궁금한 점이 있으시면 언제든 댓글해 주세요~

 

위대한쇼맨 강쉐프