자~ 새로운 프로젝트가 생성되었습니다!
[1]번 포스팅까지 진행하셨다면, 작성하신 새로운 프로젝트의 이름이 'Project Explorer' 창에
트리구조의 폴더로 보이게 됩니다.
아래 그림과 같이 저는 프로젝트의 이름을 'opentutorials' 로 정했습니다.
(해당 Project 하위로 html 파일들이 보이는 것은 미리 작성해둔 파일이 보이는 것이며,
처음 Project를 생성했을 때에는 html파일이 없는 것이 정상입니다.)
위 그림처럼,
작성된 파일이 이미 있을 경우에는 해당 html 파일을 마우스로 우클릭한 후 팝업메뉴에서
'Open With -> HTML Editor' 를 실행해주면 됩니다.
그리고, 새로운 파일을 만들 경우에는 아래 그림처럼 새로운 파일을 생성해주면 됩니다.
좌측의 Project Explorer 탭에서 생성된 Project 폴더를 마우스 우클릭하면,
새로운 파일을 생성할 수 있는 메뉴를 선택할 수 있습니다.
팝업 메뉴에서 'New -> File' 을 실행하면, 아래와 같은 창이 열리고, 새로운 파일의 이름을 입력할 수 있습니다.
사용하고 싶은 이름을 입력해준 후 '.html' 을 꼭 붙여줘야 합니다. (html 파일을 작성해야하므로)
그리고, Finish 버튼을 클릭하면, 새로운 html file 이 생성됩니다.
아래의 예제는 css1.html 이라는 미리 작성된 파일을 html editor 로 열어본 것입니다.
(위 제일 첫 그림에서 설명했던, 'Open With -> HTML Editor' 메뉴를 실행하면 됩니다.)
잘 알고 계신분들도 많겠지만,
HTML 파일의 기본 구조는
-------------------- 파일명.html 의 구조 --------------------
<html>
<body>
'여러가지 본문 내용'
</body>
</html>
이런 식으로 이루어져 있습니다.
'<' 꺽쇠로 묶인 내용들을 태그(Tag) 라고하며, html 태그 안으로 구성요소들이 배치되어 있고 body 태그 안에 본문의 내용들이 배치되는 구조입니다.
위의 예제 코드를 따라서 작성한 후 브라우저에서 확인을 해보려면,
아래 그림과 같이 실행해보면 됩니다.
실행 결과 화면은 아래와 같습니다.
빨간 테두리로 표시한 부분과 같이,
현재 '문자의 인코딩 방식 차이' 로 인해 한글의 깨짐 현상이 확인됩니다.
이 부분에 대해서는 다음 포스팅에서 말씀드리기로 하고,
먼저 위 예제 코드에 대해 간략히 설명하겠습니다.
어렵지 않기 때문에 쉽게 눈치채실 수 있는데,
<h1> ~ <h3> 태그들의 경우 Head Line 즉, 제목과 관련된 태그 이며, 그래서 글씨가 크게 출력됩니다.
(h1이 가장 크며, 다음으로 2와 3의 순서로 크기가 정해집니다.)
다음에 있는 <ol> 과 <ul> 태그는 리스트 형태의 속성을 결정하는 태그입니다.
'ol'의 o는 ordered(순서로 정렬된) 의 약자이며, 'ul'의 u는 unordered(순서로 정렬되지않은) 의 약자입니다.
즉, 'ordered list' 와 'unordered list' 입니다.
그래서, ordered list 는 글자앞에 1, 2, 3 과 같은 순서가 부여되며, unordered list 는 앞에 항목을 나타내는 점만 표시가 됩니다.
그리고, 각각 <ol> 과 <ul> 태그들의 내부에 <li> 태그들이 있는데, 이 <li> 태그를 이용하여 리스트 형태로 줄맞춤하여 출력시켜줄 수 있습니다.
다음 포스팅에서 한글 깨짐 해결 및 다른 태그들에 대해 알아보겠습니다.
'웹 프로그래밍(Web, JavaScript)' 카테고리의 다른 글
| [6] JavaScript 무작정 따라하기3 - Variables, object 그리고 Functions (0) | 2015.03.06 |
|---|---|
| [5] JavaScript 무작정 따라하기2 - Using JavaScript on a Web Page (0) | 2015.02.25 |
| [4] JavaScript 무작정 따라하기01 - 영문교재 참고 (0) | 2015.02.25 |
| [3] 태그 배워보기 - 다양한 태그의 활용 (0) | 2015.02.04 |
| [1] 웹 프로그래밍을 시작해봅시다!! - 환경 갖추기(Aptana 설치) (0) | 2015.02.03 |
