호스팅 서버 준비하기

HTML로 웹 사이트를 만들고 그 내용을 다른 사람들이 볼 수 있도록 하려면 HTML로 만든 웹 문서를 모두 서버 컴퓨터로 옮겨야 한다. 개인은 웹 서버를 마련하기 어렵기 때문에 서버의 일부 공간을 매달 또는 몇 년마다 일정 금액을 내고 사용하는 서비스를 이용한다. 이것을 '서버 호스팅 서비스' 또는 '웹 호스팅 서비스'라고 한다. 개인 웹 사이트 운영자들은 대부분 호스팅 서비스를 이용한다. 


* 웹 호스팅 서버의 종류

호스팅 서비스는 어떤 서버를 이용하느냐에 따라 윈도우 서버 호스팅과 리눅스 서버 호스팅으로 나뉘는데 윈도우 서버에서는 ASP나 ASP.NET 프로그래밍 언어를 사용하고 리눅스 서버에서는 PHP 프로그래밍 언어를 사용하며 좀 더 대중적이고 저렴하다. 이외에 클라우드 서버를 사용한 '클라우드 서버 호스팅'도 최근 많이 사용한다.


닷홈에 무료 호스팅 서비스 신청하기

닷홈의 호스팅 서비스는 1년 간 무료로 사용할 수 있으며 1년이 지나면 연장 신청을 해야 무료로 계속 사용할 수 있다.


1. 닷홈 회원 가입하기

dothome.co.kr을 입력하여 무료 호스팅을 제공하는 닷홈 사이트로 이동한다. 로그인 창 바로 아래에 있는 회원가입을 클릭한다. 필요한 정보를 입력하고 회원 가입한다. 입력한 이메일 주소를 통해 인증까지 마쳐야 호스팅을 신청할 수 있다.


2. 무료 호스팅 신청하기

웹 호스팅 메뉴 중 무료 호스팅을 선택한다.


3. 무료 호스팅에도 여러 가지 서비스가 있는데 그 중 무료 호스팅에서 공간만 설치를 선택하고 신청하기를 클릭한다.


4. 무료 호스팅 신청하기를 클릭한다. FTP 아이디는 다른 것으로 바꿀 수도 있지만 FTP 접속 주소와 아이디, 비밀번호는 반드시 기억해 두어야 한다. '무료계정 사용정책 동의'에 체크한 후 확인 단어를 입력하고 인증 코드 발송을 눌러 다시 한 번 인증 코드를 입력한다. 그리고 신청하기를 누른다.


FTP 프로그램 설치하기

사용자 컴퓨터에서 작성한 웹 문서와 파일을 서버로 옮기는 것을 업로드(upload), 서버에 있는 파일들을 사용자 컴퓨터로 옮기는 것을 다운로드(download)라고 하고 서버와 클라이언트 간에 파일을 주고 받을 수 있게 해주는 파일 전송 프로토콜(File Transfer Protocol)을 약자로 FTP라고 한다.


FTP 프로그램 FileZilla 설치하고 서버에 접속하기

5. FileZilla 설치하기

https://filezilla-project.org/download.php?type=client에 접속한 후 화면 중앙의 녹색 다운로드 버튼 아래에 있는 Show additional download options를 클릭한다.


6. 사용하고 있는 시스템 환경에 맞는 FileZilla를 다운로드한 후 설치한다. 설치가 끝나면 FileZilla 프로그램 창과 알림 창이 나타난다. 확인을 클릭한다.


7. FTP 서버와 연결하기

FileZilla 프로그램을 실행한 후 위의 호스트 칸에는 FTP 접속 주소를 입력 사용자명에는 FTP 아이디를, 비밀번호에는 FTP 비밀번호를 입력한 후 빠른 연결을 클릭한다.


내가 만든 문서 웹 서버에 올리고 확인하기

8. 로컬 사이트 창에서 01 폴더를 찾아 클릭하면 바로 아래에 01 폴더 안의 내용이 표시된다. 웹 서버에서 실제 파일이 업로드될 영역은 서버 공간의 html 폴더이므로 오른쪽 리모트 사이트 창에서 html 폴더를 더블 클릭한다. 왼쪽 로컬 사이트 영역에 있는 first.html 파일과 images 폴더를 동시에 선택한 후 오른쪽 리모트 사이트 영역으로 드래그한다. 웹 문서에는 이미지나 동영상, 스크립트 파일 등 여러 가지 파일들이 함께 사용되는데 이 파일들도 로컬 컴퓨터에 있던 폴더 구조 그대로 함께 웹 서버에 올려놓아야 한다.


9. 웹 브라우저에서 확인하기 - http://miniweb.dothome.co.kr/first.html

주소 표시줄에 'http://아이디.dothome.co.kr/first.html'이라고 입력해 본다. 내 컴퓨터에 저장했던 first.html 문서가 화면에 보일 것이다. 웹 사이트도 이런 방법으로 웹 문서와 사용한 파일들을 웹 서버에 올려 놓으면 된다.


간단한 HTML 문서 만들기

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>내가 처음 만드는 HTML 문서</title>

</head>

<body>

<h1>시간이란..</h1>

<p>내일 죽을 것처럼 오늘을 살고<br>

영원히 살 것처럼 내일을 꿈꾸어라.</p>

<img src="images/first.jpg">

</body>

</html>

웹 브라우저는 웹 문서를 한 줄씩 읽으면서 해석한다. 

웹 문서는 아무리 길더라도 <!doctype>과 <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시한다.


웹 브라우저에서 확인! 

<h1> 태그를 사용한 부분에는 제목이, <p> 태그 부분에는 일반 텍스트 단락이, <img> 태그를 사용한 부분에는 지정한 이미지가 표시된다.


HTML 문서 기본 구조 살펴보기

<!doctype> - 문서 유형을 지정하는 선언문

<!doctype html>


<html> 태그 - 웹 문서 시작을 알리는 태그

<!doctype html>

<html lang="ko">

<head></head>

<body></body>

</html>

<html> 태그에는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 

de - 독일어, en - 영어, fr - 프랑스어, ja - 일본어, ko - 한국어, zh - 중국어

<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 태그와 실제 화면에 보이는 문서 내용을 입력하는 <body> 태그가 포함된다.


<head> 태그 - 브라우저에게 정보를 주는 태그

<head>

<title>문서 제목</title>

<meta charset="utf-8">

<meta name="description" content="여기에 사이트에 대한 짧은 설명을 입력합니다">

</head>

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 <head> 부분에 입력한다. 

문서에서 사용할 외부 파일들도 이곳에서 링크한다.


- <title> 태그 - 문서 제목

<title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측한다.


- <meta> 태그 - 문자 인코딩 및 문서 키워드, 요약 정보

<meta> 태그에서 가장 중요한 부분은 문자 인코딩을 지정하는 것이다. HTML5에서는 모든 언어를 표시할 수 있는 utf-8 방식을 사용한다.

또한 <meta> 태그를 이용해 문서에 대한 간단한 설명을 지정할 수 있는데 이렇게 지정한 짧은 설명은 검색 결과에 사이트 설명으로 표시된다.

* 국내 검색 사이트에서는 각 포털 내의 블로그를 중심으로 검색하기 때문에 <meta> 태그가 제 역할을 못한다. 구글 검색 엔진에서 이해할 수 있는 <meta> 태그에 대한 자세한 설명은 https://support.google.com/webmasters/answer/79812?hl=ko를 참고한다.


이외에도 <head> 태그 안에는 스타일 시트를 사용하기 위한 <style> 태그와 <link> 태그 등이 사용된다.


<body> 태그 - 실제 브라우저에 표시될 내용

<body>

<h1>시간이란...</h1>

<p>내일 죽을 것처럼 오늘을 살고<br>

영원히 살 것처럼 내일을 꿈꾸어라</p>

<img src="images/first.jpg">

</body>

대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들이다.


웹 문서를 작성하는 프로그램을 '웹 편집기(web editor)'라고 하고 웹 문서를 보는 프로그램을 '웹 브라우저(web browser)'라고 한다.


웹 브라우저 종류 : 크롬, 파이어폭스, 인터넷 익스플로러, 엣지, 사파리, 오페라

크롬 설치하고 기본 웹 브라우저로 정하기

1. www.google.com/chrome에서 크롬 브라우저를 설치



2. 주소 표시줄 오른쪽에 있는 Chrome 맞춤 설정 및 제어 버튼을 클릭한 후 설정을 선택하고 Chrome을 기본 브라우저로 설정


비주얼 스튜디오 코드 설치하고 살펴보기

3. www.visualstudio.com에서 Visual Studio Code 부분에서 Windows용 다운로드를 클릭하면 비주얼 스튜디오 코드에 대한 설명이 있는 페이지로 이동하면서 파일이 다운로드


웹 개발에 있어서 원래라면 가장 처음으로 공부해야하는 건 자바랑 오라클이 아닌 HTML, 그리고 CSS이다. 일단 빠르게 훑어봐야 하는 지금으로썬 두 언어를 같이 공부할 수 있는 책으로 정했다. 만약 부족하다면 각각의 언어마다 한 권씩 더 볼 예정이다. 그리고 바로 프로젝트 해보기! 프로젝트를 해봐야 내가 부족한 게 무엇인지를 알 수 있으니까!


일단 책은 HTML&CSS 처음 공부하기 좋은 책으로 'Do it! HTML5 + CSS3 웹 표준의 정석'을 추천받았다. 원래는 'HTML5 & CSS3 웹 표준 디자인 강좌'를 읽으면서 정리했다가.. 포기;; 전혀 초보가 보기에 적합하지 않는 책 같다. 예전에도 이 책을 공부했던 경험도 있고 그래서 이번에는 꾸준히 할 생각이다.


HTML & CSS 책 목록

Do it! HTML5+CSS3 웹 표준의 정석 (2017) / 고경희 / 이지스퍼블리싱 / 20170103

HTML5 + CSS3 + Javascript 웹 프로그래밍(명품) / 황기태 / 생능출판사 / 20170116

Hello Coding HTML5 + CSS3 / 황재호 / 한빛미디어 / 20180302

최신 표준 HTML + CSS 디자인 (6단계로 마스터하는) / EBISUCOM / 위키북스 / 20170817

모두의 HTML5 & CSS3 / 김인권 / 길벗 / 20180830


이외에 

프로 HTML5 프로그래밍 / 피터 러버스, 브라이언 앨버스, 프랭크 살림 / 위키북스 / 20110719

CSS만 다루는 책 한 권까지 생각


위에 책들은 추천하는 책부터 최신에 나온 책들로 읽을지 안읽을지는 이번 책을 끝내고 생각해볼 예정이다


..


새벽에 했던 공부들을 다 지우고 다시 시작하자니 도저히 기분이 나지 않는다 ㅠㅠ

자꾸 공부하다가 졸고.. 그래서 오늘은 오랜만에 가볍게 읽을 만한 '도둑비서들'이라는 책을 읽으면서 오늘을 마무리한다.



학자금 대출 상환에 의한 횡령에서 시작한 일이 점점 커져버리는 현실에선 일어날 수 없는 이야기. 소설의 결말은 좋게 끝났지만 현실은 그렇게 될 수 없단 걸 알면서도 결국 2시간 조금 걸리는 시간 동안 마지막 페이지까지 다 봤다. 소설 얘기는 여기서 끝! 굳이 소설 줄거리를 얘기하기보다 그냥 흘러가는 대로 요즘 들었던 내 생각을 정리하고 싶어서 글 쓰게 되었으니.


아직 출근 전이라 엄마랑 밥 먹을 때는 티비를 보게 되지만, 요즘 그조차도 안 보게 된다. 티비에 나와서 연예인들이 4차 산업혁명을 준비한답시고 별같지도 않는 짓을 하는 그들의 모습과 이제 막 신입으로 개발자로 뛰어든 주변 사람들의 모습과 너무 대조적이어서 도저히 보고 싶은 생각이 들지 않았다. 


그렇게 준비하고 싶다면 컴퓨터 책 한 권이라도 보고 공부를 해봤는지.. 코드 한 줄이라도 작성해봤는지.. 물어보고 싶을 정도.

그들 중에서도 힘겹게 자기 분야에 올라간 사람들도 있다 생각하면 이런 생각을 하면 안되는건가.. 싶다가도 자꾸만 야속한 마음이 든다.


무튼..

상대적 박탈감이랄까..?


아무리 발버둥 쳐봐도 달라질 수 없는 내 연봉을 누구는 쉽사리 하루 지출 비용일거라 생각되니 허망하다.

이 허망함은 개발자들 사이에서도 급이 있다 생각하니 슬프다.

상위 1% 개발자가 벌어들이는 돈과 누구든 얘기하길 첫 회사를 잘못 가는 바람에 쉽사리 경력이라 말할 수 없어 연봉을 올리지 못한채 살아가는 개발자.

물론 그만큼 노력해서 그 자리에 있는 거겠지만.. 다만, 그 자리까지 올라가는 방법을 누군가 알려줬더라면.. 그런 생각이 들었다.


방법이라도 알려준다면..

이 소설 책에서 행해진 부의 재분배 현상을 실제로 볼 수 있지 않을까?


만약 내가 그 위치에 서게 된다면 어떤 선택을 할까? 그래도 이왕 시작한 거 그 위치까지는 올라가야 할텐데..

무언가 얘기하고 싶은 건 많은 데 머릿속이 정리되지 않아 오늘은 그저 횡설수설하면서 끝내본다.


<img>

이미지를 삽입할 때 사용하는 태그이다.

<img src="이미지 경로" alt="대체 텍스트" width="숫자" height="숫자">

  • src : 이미지 파일 경로를 지정한다.
  • alt : 이미지가 제대로 표시되지 않는 상황에서 이미디 대신 표시되는 텍스트를 지정한다.
  • width, height : 이미지 크기를 조정한다. 단위는 px.

웹에서 사용하는 이미지 파일 형식

 GIF (Graphic Interchange Form) 

 색상 수 최대 256가지 - 작은 이미지에 사용, 투명한 배경 

 JPG (Joint Photographic Experts Group) 

 사진 기본 형식 

 PNG (Portable Network Graphics) 

 투명한 배경 + 다양한 색상 

 SVG (Scalable Vector Graphics) 

 벡터 이미지 - 아이콘이나 로고 이미지에 사용 



  1. hoho 2018.04.19 10:19 신고

    한 수 배우고 갑니다^^

표는 행(row)과 열(column)이 만나 이루는 셀(cell)들로 구성된다.

<table border="1">

<tr>

<th></th><th>Column 1</th><th>Column</th><th>Column 3</th>

</tr>

<tr>

<th>Row 1</th><td>Cell 1-1</td><td>Cell 1-2</td><td rowspan="2">Cell 1-3</td>

</tr>

<tr>

<th>Row 2</th><td colspan="2">Cell 2-1</td>

</table>


<table>, <tr>, <td>, <th>

<table> 태그를 이용해 표 전체 윤곽을 잡고 <tr> 태그로 행(row)을 만든 후 <td> 태그로 각 행마다 들어갈 셀(cell)을 만든다.
첫 번째 행과 열을 셀의 제목으로 하는 경우가 많은데 <td> 대신 <th> 태그를 사용하면 글자가 굵게 표시되고 중앙에 배치된다.

<table border="1">

<tr>

<th colspan="숫자">Table Header Cell</th>

<td rowspan="숫자">Table Cell</td>

</tr>

</table>

  • colspan : 셀을 가로로 합친다.
  • rowspan : 셀을 세로로 합친다.

<thead>, <tbody>, <tfoot>

표를 각각 제목(head), 본문(body), 요약(foot)으로 나눌 때 사용하는 태그이다.

<table>

<thead>

<tr></tr>

</thead>

<tbody>

<tr></tr>

</tbody>

<tfoot>

<tr></tr>

</tfoot>

</table>


<ul>

<li>Unordered List</li>

<li>Unordered List</li>

</ul>

<ol>

<li>Ordered List</li>

<li>Ordered List</li>

</ol>


<ul>, <li>

<ul> 태그 안에 <li> 태그를 사용해 각 항목을 표시하면 순서 없는 목록을 만들 수 있다. 각 항목 앞에는 불릿(bullet)이 붙는다.

<ul>

<li>List Item</li>

</ul>


<ol>, <li>

<ol> 태그 안에 <li> 태그를 사용해 각 항목을 표시하면 순서 있는 목록을 만들 수 있다. 각 항목 앞에는 숫자가 붙는다.

<ol>

<li>List Item</li>

</ol>


<h1><a href="https://google.co.kr" target="_blank">Google</a></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>

Soluta, adipisci cupiditate reiciendis voluptatum, sapiente mollitia quam incidunt!<br>

Odio, modi quia dolore non fugit delectus consequuntur officiis, nisi ipsa facilis iusto.</p>


<hn>

일반 텍스트보다 크고 진하게 표시되는 제목 태그이다. 가장 크게 표시되는 <h1>부터 가장 작게 표시되는 <h6>까지 있다.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>


<p>

텍스트를 표시할 때 가장 많이 사용되는 태그이다. 텍스트가 브라우저 너비 안에서 줄바꿈 없이 한 줄로 표시된다.

<p>Paragraph</p>


<br>

줄을 바꾸고 싶다면 그 위치에 <br> 태그를 사용한다.

<br>


<a>

링크를 만드는 태그로 텍스트나 이미지와 함께 사용한다.

<a href="링크 주소" target="_blank"> 텍스트 or 이미지 </a>

  • href : 속성값으로 링크를 이용해 연결할 주소를 입력한다.
  • target : 링크 내용이 표시될 위치를 지정한다. 기본값은 _self로 현재창에서 열리는데 _blank로 지정하면 새 창에서 열린다.


HTML 문서는 정해진 형식에 맞추어 작성해야 한다.


<!doctype html>

<html>

<head>

<title>사이트 제목</title>

<meta charset="utf-8">

</head>

<body>

사이트 내용

</body>

</html>


<!doctype>

문서 유형(document type)을 지정하는 선언문이다. 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다.

<!doctype html>


<html>

웹 문서의 시작과 끝을 나타내는 태그이다. <head>태그와 <body>태그를 포함한다.

<html lang="ko">

<head></head>

<body></body>

</html>

  • lang : 문서에서 사용한 언어를 지정한다.

de 

en 

fr 

ja 

ko 

zh 

독일어 

영어 

프랑스어 

일본어 

한국어 

중국어 


<head>

웹 문서를 해석하기 위해 필요한 정보들을 입력하는 태그이다. 여기에 포함되는 태그들은 웹 브라우저에 표시되지 않는다.

<head>

<title></title>

<meta>

</head>


<body>

브라우저에 표시될 내용이 들어갈 태그이다. 여기에 포함되는 태그들은 웹 브라우저에 나타난다.

<body>

사이트 내용

</body>


<title>

웹 브라우저의 제목 표시줄에 표시되는 태그이다.

<head>

<title>사이트 제목</title>

</head>


<meta>

문자 인코딩 및 문서 키워드 등 웹 문서 요약 정보를 지정하는 태그이다.

<head>

<meta charset="utf-8">


<meta name="description" content="사이트 설명">

<meta name="author" content="사이트 제작자">

<meta name="keywords" content="키워드1, 키워드2, ...">

<meta name="robots" content="키워드1, 키워드2, ...">

</head>

  • charset : 문자 인코딩을 지정한다. 속성값으로는 모든 언어를 표시할 수 있는 "utf-8"
  • name, content : 문서에 대한 간단한 설명을 지정한다. name 값에 따라 content 값을 지정한다.

1
2
3
4
5
6
7
8
<header></header>
<nav></nav>
<section>
    <article></article>
    <article></article>
</section>
<aside></aside>
<footer></footer>
cs

<header>

페이지 맨 위쪽이나 왼쪽에 위치하는 머리말이다.

<header></header>


<nav>

문서를 연결하는 내비게이션 메뉴이다.

<nav></nav>


<section>

콘텐츠 영역을 나눈다.

<section>

<article></article>

<article></article>

</section>


<article>

콘텐츠 내용을 넣는 부분이다.

<section>

<article></article>

</section>


<aside>

본문 이외에 내용을 표시한다.

<aside></aside>


<footer>

제작 정보와 저작권 정보를 표시한다.

<footer></footer>


HTML5 Shiv

IE8 이하 버전까지 고려하려면 html5shiv.js 파일을 사용한다.


HTML5 Shiv


'latest zip package'를 클릭해서 'html5shiv.js' 파일을 다운받는다. 

<head>

<!--[if lt IE 9]>

<script src="html5shiv.js"></script>

<![endif]-->

</head>


+ Recent posts