000 강의 환경 구축하기

1. WebStorm과 PhpStorm 다운로드하기

WebStorm과 PhpStorm은 JetBrains에서 개발한 IDE프로그램입니다. 본 강의에서는 WebStorm과 PhpStorm을 사용해서 강의를 진행할 예정입니다. WebStorm과 PhpStorm은 유료 프로그램입니다 따라서 무료 프로그램을 사용하고 싶으신 분들은 Atom 등의 다른 무료 IDE 혹은 텍스트 편집기를 사용하셔도 무방합니다.

WebStorm과 PhpStorm는 30일 체험판을 제공하고 있기 때문에 무료로 사용할 분들은 체험판을 다운로드하여 사용하시면 됩니다. WebStorm과 PhpStorm의 다운로드 방법은 다음과 같습니다.

구글에 WebStorm을 검색합니다.

2. WebStorm에서 설치 파일을 다운로드합니다.

3. 설치 파일을 실행하여 설치를 진행합니다.

4. 아래의 창에서 64-bit launcher 을 체크합니다. 나머지의 경우는 모두 Next 버튼을 클릭합니다.

5. 설치가 완료된 뒤 프로그램을 실행합니다. 아래와 같은 창이 나타나면 이메일을 입력하고 Evaluate 버튼을 누릅니다.

PhpStorm 또한 같은 방법으로 설치를 진행합니다.

2. 디렉토리 환경 구성하기

IDE 설치가 완료되었으니 이번에는 기본적인 폴더와 디렉토리를 구성해 보겠습니다.

바탕화면에 insta_clone 이라는 폴더를 만들고 WebStrom에서 폴더를 엽니다.

이러한 프로젝트 창이 나타납니다.

프로젝트가 아래와 같이 되도록 css, js 폴더와 css/style.css, js/main.js, index.html 파일을 추가하여 디렉터리 환경을 구성합니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTP-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>

</head>
<body>

</body>
</html>

3. reset.css 적용하기

다음은 reset.css를 적용해 보겠습니다. HTML에 존재하는 150여 개의 태그들이 기본으로 속성, 크기 여백 등을 가지고 있기 때문에 웹 페이지 제작에 어려움이 생길 수 있습니다. 따라서 이러한 속성들을 초기화 해주는 reset.css가 필요합니다. 구글에 검색하면 reset.css 파일을 쉽게 찾을 수 있습니다.

파일명 : css/reset.css


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
	display: block;
}

body{
	line-height: 1;
}

ol, ul{
	list-style: none;
}

blockquote, q{
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after{
	content: '';
	content: none;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

위 파일을 css 폴더 안에 추가해주고, index.html에 link를 추가해주면 됩니다.

파일명 : index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTP-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>

</head>
<body>

</body>
</html>

4. 기본적인 HTML 구조 살펴보기

기본적인 환경 구축이 마무리되었습니다. 그러면 인스타그램의 기본적인 HTML 구조가 어떻게 되어있는지 살펴봅시다.

상단의 header영역, header 영역 밑에 두 박스를 감싸고 있는 container 영역, container 영역 안에는 left-box와 right-box로 구분이 됩니다.

header 영역을 좀 더 자세히 살펴보도록 하겠습니다.

header 안에는 로고와 검색창, 아이콘이 있고 이들을 감싸주는 inner가 있음을 알 수 있습니다.

이처럼 HTML의 전체적인 구조를 살피고 이후에 세부적인 구조를 살피는 것이 코딩을 할 때 더욱 쉽게 접근할 수 있습니다.

다음에는 header부터 차근차근 웹 페이지를 만들어보도록 하겠습니다.