압타나 스튜디오 3 (Aptana Studio 3)
HTML 문서 편집 및 상대경로 절대경로 #4
안녕하세요 긴냥입니다.
이번 포스팅은 이전 포스팅에 이어 압타나 스튜디오 3 (Aptana Studio 3)의
HTML 문서 편집 및 상대경로 절대경로 에 관련된 내용에
대해서 알아 보도록 하겠습니다.
먼저 이 전 포스팅에서 만든 파일을 가지고 설명 하겠습니다.
위 사진은 현재 html파일 css파일 js파일이 열려 있으며
html 파일이 선택되어있는 모습입니다.
html 파일이 선택되어 있지 않으신 분들은
마우스로 오른쪽 상단 main.html을 선택합니다.
여기서 추가적으로
압타나 툴은 html파일 생성시 위처럼 기본적인 탬플릿을 지원합니다.
하지만 복잡하니 지울건 지우고 쓰도록 하겠습니다.
위 마우스 커서 드래그 된 부분은 전부 삭제하겠습니다.
(1)
(2)
위 사진은 드래그 된 부분을 삭제하고 난 모습 이며 마우스로
타이틀 태그쪽 부분을 선택하고 alt+ (방향키 †(위쪽)) 을 눌러
두번째 사진과 같이
<meta charset="utf-8"> 태그 아래쪽으로 위치시킵니다.
이상태가 되었다면 마우스 스크롤을 아래로 해서 아래쪽 사진과 같이
<body> </body> 태그 안쪽에 있는 영역을 전부 드래그합니다.
위 사진 처럼 드래그가 되었다면
키보드 Delete키(삭제)를 눌러 지우겠습니다.
삭제가 되었다면 위와 같이 태그가 엄청 짧아지게 되는데
이 상태 에서 설명을 드리겠습니다.
위 사진은 현재 작성중인
html 문서를 확대 시킨 부분입니다.
일단 제일 상단에 있는 <!DOCTYPE html>은 현재 작성하고 있는 문서가
html5 라고 선언을 하는것이며 <!DOCTYPE>는 태그가 이니기 때문에
( </!DCOTYPE> ) 이렇게 닫아 줄필요가 없습니다.
추가로 <!DOCTYPE> 만보고도 이 HTML 문서가
어떠한 버전으로 작성 되었는지 확인이 가능합니다.
정확히 말해 웹브라우저가 내용을 올바로 표시할수 있도록 해주는것이
<!DOCTYPE> 이라고 하며 꼭 문서 작성시 제일 상단에 표시를 해주어야 합니다.
(HTML버전 마다 !DOCTYPE 선언이 다른데 이 부분은 패스)
<html>태그
html 문서 몸과 머리를 감싸는 태그 <html>열고 </html>닫는 태그로
구성이 되며 기본적으로 <html> 머리 와 몸 </html> 전체를 감싼다고
보시면 됩니다.
<head>태그
head(머리)태그는 <head>열고 </head>닫는 태그로 구성됩니다.
웹페이지에 대한 정보를 저장하는 곳이며 헤드태그 안쪽에 lang=" " 라는
속성 과 값을 줄수 있는데 현재 저는 기본 lang="en" 라 되어 있습니다.
이것은 본 문서의 언어는 영어다 라는 뜻
lang="ko"로 바꾸시면 한글 이다 이러긴 하는데 딱히
en을 쓰셔도 크게 상관은 없습니다.
이 다음 헤드태그 사이에
<meta charset="utf-8">부분 입니다.
메타 태그의 속성중 하나인데 웹문서를 작성 하실때 꼭 필요합니다.
그 이유는 전세계 문자와 기호를 원할하게 인코딩하는 방식이 utf-8 이며
<meta charset="utf-8">이 없으면 웹브라우저에 글자가 전부 깨져 버리는
현상이 일어나기에 기본적으로 꼭 알고 넘어가셔야 하는 부분 입니다.
여기서 메타태그 란?
하이퍼 텍스트 생성 언어 HTML 문서의 맨 위쪽에 위치하는
태그로 head 태그 사이 또는 뒤에 있어도 되지만 반드시 body 태그
앞쪽에 위치해야 하는 태그이며 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의
정보를 포함하는 태그라고 생각하시면 될 것 같습니다.
하지만 메타태그의 속성은 너무 많기 때문에
세세한 내용에 대해서 궁금하신 분들은 검색을 해보셔서 찾아 보시는게 좋을듯 싶습니다. ^^
<body>태그
body(몸)태그는 <body>열고 </body>닫는 태그로 구성되며
웹페이지의 모든 내용이 여기에 표시됩니다.
추가적으로 이 부분이 태그로 레이아웃 작성을 화면을 구현 하는곳 입니다.
이제 각 페이지 경로 지정을 하겠습니다.
위 헤드 태그 사이에 마우스 커서를 위치 시킨 후
위와 같이 스타일을 불러올 링크 태그에 속성
rel 속성 값 스타일 시트 지정 후 경로를 지정할 href를 입력 하고
<link rel="stylesheet" href=" ">
자바 스크립트를 불러올 스크립트 태그에
타입의 값 텍스트/자바스크립트 지정 후 경로 지정할 src를 입력합니다.
<script type="text/javascript" src=" "></script>
추가적 으로 위 사진에 초록색 으로 감싸진 <!-- --> 이부분 은 html 주석입니다.
<!-- css 스타일 지정 -->
<!-- js 스크립트 지정 -->
이런식으로 여기 부분은 어느 부분이다 라고 중간 중간 표시를 해주는게 좋겠죠?
지금은 코드가 적어서 사용할 필요는 별로 못느끼지만 나중에 코드가 길어질
경우 주석처리를 해줘야 어디가 어디인지 확인 할 수 가 있기 때문이니까
귀찮더라도 처음부터 주석처리하는 습관을 기릅시다.
현재 위 사진은 css 파일과 js파일을 html 파일로 상대경로로 지정한 부분입니다.
경로 지정에는 절대경로와 상대경로가 있는데 지금은 절대경로는
사용하지 않고 상대경로로 연결하기 때문에 아래쪽 부터는 상대경로에 대해서
간단히 4가지로 분류해 설명하도록 하겠습니다.
상대경로 란?
작업하고 있는 파일의 현재 위치를 기준으로 경로를 지정하는 방법입니다.
(1)
(2)
(3)
(4)
위 내용 처럼 상대경로 지정에는 4가지가 있고
현재 제가 지정한 방법은 4번째로 상대경로 지정에 해당이 됩니다.
지금까지 압타나 스튜디오 3 (Aptana Studio 3) - HTML 문서 편집 및
상대경로 절대경로 #4 에 관련된 내용에 대해서 알아 보았습니다.
이 다음 내용은 차근 차근 준비 하면서 하나씩 글을 올리도록 하겠습니다. ^^
이상 긴냥이었습니다.
'웹 공부 > 1. Aptana Studio 3' 카테고리의 다른 글
| 압타나 스튜디오 3 (Aptana Studio 3) - 파일생성 #3 (0) | 2017.05.03 |
|---|---|
| 압타나 스튜디오 3 (Aptana Studio 3) - 웹 프로젝트 생성 #2 (0) | 2017.05.03 |
| 압타나 스튜디오 3 (Aptana Studio 3) - 설치 하기 #1 (0) | 2017.05.03 |
댓글