은하수 골목

앞에 작성했었던 포스팅에서 제이쿼리 모바일(jQuery mobile)의 기본 UI에 대해서 포스팅했던적이 있었습니다.

이번엔 그때 그 코드들을 좀 더 세분화 설명을 해볼까 합니다.

하이브리드 앱을 하게 되면, 기본적으로 제이쿼리를 필연적으로 사용하게 됩니다.

따라서, 기본적으로 제이쿼리가 링크 걸려 있어야 합니다.

이클립스에서 폰갭을 실행했을 때 기본으로 올라오는 코드들입니다.

언듯 보면, 빨간 상자만 지우고 그냥 사용해도 무관해 보이지만,

그대로 사용했다가는 제이쿼리도 먹지 않고,

제이쿼리 모바일에서 기본적으로 제공하는 UI도 사용할 수 없습니다.

사용하려면 어떻게 해야 할까요?

멀리 가지 않아도 바로 사용할 수있는 방법 중 하나는 

생성된 파일에 보면 우리가 코딩 하는 'index'파일이 들어있는 

'assets'폴더안에 보면 기본적으로 딸려있는 파일이 있습니다.

버전은 낮지만, 제이쿼리 모바일에서 제공하는 파일들 맞습니다.

<link>와 <script>를 시켜주는 건 'min'이라고 적혀있는 파일들을 시켜줄 예정입니다.

('min'이라고 적혀있는 건 압축해 배포용으로 작성됬다는 의미라고 합니다.)

각각 열어보시면, 여러가지 소스들이 쭉 나열되어 있는 걸 보실 수있습니다.

'jquery-1.7.2.min'파일에는 순수(?) 제이쿼리가 작성되어 있습니다.

제이쿼리 모바일 자체가 기본적으로 제이쿼리에서 시작이 되다보니 제이쿼리 자체코드도 연결이 되어있어야 합니다.

'jquery.mobile-1.1.0.min.css' 파일은 여러 클래스 스타일이 적혀있는데, 

여기서는 다양한 테마와 아이콘등을 표시하는 스타일 시트입니다.

마지막 남은 'jquery.mobile-1.1.0.min.js'는 본격적인 제이쿼리 모바일의 실제 자바 스크립트입니다.

이 파일에서 모든 동작이 일어난다고 해도 과언은 아니지요!

즉 이 파일이 없다면, 

제이쿼리가 하나도 실행이 안되는 거죠!

이 파일들을 기본적으로 위에 상자처럼 경로를 정확히 입력해 링크를 걸어주시면,

사용이 가능합니다.

여기서 주의할 점이 있다면 <link>와 <script>순으로 작성해야 한다는 건데요.

순서가 바뀌게 되면, 오작동을 하게됩니다.

주의해 주세요:D

요런 방법으로 기존에 있는 파일에 링크를 걸어 사용하는 것도 가능하지만,

제이쿼리 모바일 사이트에서 제공하는 링크를 걸어주는 방법도 있습니다.

제이쿼리 모바일 바로가기

제이쿼리 모바일 페이지에 가서 Download창으로 갑니다.

보시면, 버전별로 파일들이 쭉있습니다.

빨간상자안에는 요것들이 링크가 걸려있습니다.

요걸 그대로 긁어가서 사용해도 동일하게 사용할 수 있습니다.

저는 상위 버전을 사용하기 위한 목적도 있지만, 편리하기도 해서 요방법을 주로 씁니다.ㅎㅎ

요 사이트를 잘 사용하게 된다면, 여러가지로 효과도 볼 수있습니다.

제이쿼리 모바일은 업그레이드 될 때 마다 기능이 추가되는 것 뿐 아니라,

기존에 있던 기능이 빠지기도 합니다.

원하는 기능이 각각 버전이 다르다면, 절망이겠죠?

상위 버전을 쓰다가 전 버전에서만 지원되던 모션이면 절망이죠..

그럴땐 위에 필요한 버전의 필요한 파일들을 그때 그때 받아서 링크를 걸어 사용하는 것도 가능합니다.

하지만, 링크를 걸땐 충분히 주의해서 사용해주세요!

HTML에서 목록을 만드는 것을 알려드리려 합니다.

HTML에서 목록은 정말 많은 곳에서 사용되고 있습니다.

이번에 사용해볼 새로운 태그입니다.

목록이 목록이지 무슨 종류가 이리 많은지 어리둥절 하실겁니다.

그러니 우선 사용해 보겠습니다.

<ul>안에 <li>를 넣어 하나의 목록을 만들어주고,

<ol>안에도 <li>를 넣어 목록을 만들어 줍니다.

아무 효과를 주지 않았는데,

<ul>태그의 목록은 알아서 앞쪽에 동그란 점이 붙었습니다.

그리고, <ol>태그의 목록에서는 숫자가 붙었습니다.

이제 순차적이랑 비순차적의 차이가 조금은 보이지 않으신가요?

요걸 좀더 활용해 보겠습니다.

<ul>에는 스타일 시트로 모양을 네모로 바꾸어주고,

<ol>은 샐수 있는 다른 방법으로 'abc...'순으로 정리를 하지만,

순서는 3번째 부터 시작하라고 설정해 주었습니다.

보시면, <ul>은 사각형으로,

<ol>은 'abc...'로 세지만, 

3번째인 c부터 세는 것을 보실수 있으실 겁니다.

이번에는 다른 효과를 줘볼까요?

이번엔 <ul>에 모양을 지우고,

<ol>은 로마자로 거꾸로 세라고 명령을 주었습니다.

보시면, <ul>에 모양이 없어지고,

<ol>은 숫자를 로마자로, 반대로 된게 보이실겁니다.

이 처럼 <ol>은 순서를 세는 테그 로서,

순서를 셀수있는 방법이라면 대부분 가능합니다.

종류는 'A', 'a', 'I', 'i' 등

만국 공통으로 사용하는 순차라면, 거의 가능합니다.

예로 들면 abc순은 가능한데, ㄱㄴㄷ순은 안되는 거죠.

<ul>은  정말 자주 쓰는 부분이여서 한가지를 더 보여드리도록 하겠습니다.

아까, <ul>의 특수문자를 없애을때도 뭔가 익숙하다는 생각이 들지 않으셨나요?

조금더 익숙해 보이시라고 스타일에서 "float:left;" 로 <li>를 가로 정렬했습니다.

그리고, 약간의 여백도 줘 보았습니다.

이제 정말 익숙해보이지 않으신가요?

이해를 돕기위해 잠깐 네O버 메뉴단과, 

유O브메뉴단을 가지고 와봤습니다.

바로 목차 정리 뿐만 아니라,

메뉴단도 만들 수 있다는 겁니다.

보통 이런 메뉴단을 만들기 위해서 

여러 방법을 사용할 수 있지만, 

주로 <ul>을 사용하는 경우가 가장 많습니다.

나중에 좀더 CSS효과를 주고,

앞에서 했었던 <a>태그를 주면 훌륭한 메뉴단이 되는 것이죠.:D

조금만 활용해도 다양하고 창의적이게 사용할 수있이서,

참 재미있는거 같습니다.:D

포토샵 초간단 아이콘 만들기

엄청나게 간단한 방법으로 위에 아이콘을 만드는 방법을 알려드릴까 합니다.

이 이방법은 굳이 아이콘이 아니여도 여러 방면에서 사용하 실 수 있을 듯합니다.

포토샵에서 1024*1024사이즈의 새로운 창을 만들어 주세요.

색상은 RGB에 해상도는 72px 입니다.

배경색은 나중에 자유자제로 바꿀 수도 있으니

지금 굳이 중요하게 설정하지 않아도 좋습니다.

빈창에 새로운 레이어를 만들고,

도형창에서 모서리가 둥근 사각형을 선택해 주세요.

그리고, 그리는 모드는 반드시 'shape'모드로 해주시고,

바탕화면을 클릭해 주세요.

바탕화면을 꽉체운 사각형을 만들어 줄겁니다.

크기는 1024*1024에 둥글기는 120을 줬습니다.

조금더 둥글기를 바라시는 분들은 좀더 값을 많이 주면 조금더 둥글게 잡힙니다.

사각형은 꽉 채웠지만, 모서리를 맞추시는게 힘드시죠?

그럴 때 사용해도 좋은 방법입니다.

Ctrl+t를 눌러 주세요.

그리고 상단에 보면 위와 같은 이미지 단이 보일겁니다.

흰색점을 저처럼 바꾸어 주시고, 

x 축과 y축이 자동으로 이미지 모서리에 가서 붙을 겁니다.

현재 여기까지의 레이아웃입니다.

모서리도 맞추웠으니, 이제 아이콘 배경화면을 만들어 볼까 합니다.

배경은 그라이데이션으로 줘 봅시다.

아래에 반달을 선택하면 목록이 듭니다.

위에 그라디언트(Gradient)를 클릭합니다.

그라디언트 창에서 네모 친곳을 더블클릭 하면 이런창이 뜹니다.

이제 색을 마음껏 변형시켜 보겠습니다.

저는 검정 부분을 더블클릭해서 Color Libraries에서 색상을 찾아서 해주었습니다.

색상 비율을 맞추기에는 저 아이콘을 사용해주면,

훨 씬 편하게 색상을 찾는게 가능합니다.

동일한 방법으로 위와같이 그라데이션을 수정해 주었습니다.

하고 보시면, 이렇게 풀로 다 채워져 있으실겁니다.

모처럼 모양을 줬는데, 어쩔까 고민하지 마세요~

방법을 알려 드리겠습니다.

먼저 그라데이션이 되어 있는 레이아웃을 선택합니다.

오른쪽 버튼을 눌러 보시면, Rasterize Layer가 있습니다.

이걸 선택해 주시면, 아래속성의 형태가 나타납니다.

바로 이렇게!

레이아웃에선 이렇게 변화가 된게 보이시나요?

여기까지 됬다면, 이제 창을 확장시켜 봅시다.

이미지 캔버스 툴도 있지만, 저는 간편하게 크롭툴로 확장시켜 보겠습니다.

빨간상자 안에있는 툴을 선택해 확장해 주고자 하는 방향으로 

당겨주면 확장이 됩니다.

오늘 알려드리려 했던 꿀팁입니다.

한번 사용해 보도록 하겠습니다.

우선 전 편의상 레이아웃을 두개를 합쳐주었습니다.

배경아이콘이 들어 있는 레이아웃을 선택하고,

Ctrl+J를 눌러 복사를 해줍니다.

요렇게 복사가 되실거예요!

위에서 늘린 부분에 복사한 것들을

각자 필요 사이즈에 따라서 사이즈를 조정해주세요~

네모 친 부분을 더블클릭해주세요.

그러시면, 새로운 창이 열리면서 둥근 사각형 원형만 해서 새로운 창이 뜹니다.

그런다음 도형툴 안에서

이것 처럼 생긴 툴을 선택해 주세요.

선택하시고, 상단 바에 보시면, 

사이즈랑 이것저것 조정하는 곳 옆에 이미지가 걸려있는 콤보박스가 보이실 겁니다.

어떠한 이미지를 열것인가를 선택하는 곳인데,

아마 처음에는 종류가 얼마 없으실 겁니다.

옵션에서 All을 선택해 주시면 위 이미지 처럼 모든 기본 툴을 불러 오게 됩니다.

위에서 선택한 이미지를 원하시는 크기 만큼 조정해서 넣어주시고,

저장을 해주시면 됩니다.

저장을 하고 처음에 있었던 레이어로 돌아가면,

아까전에 복사해서 작게 줄여 두었던 아이콘 까지 작업형태로

사이즈 별로 정렬 되어있는 걸 보실수 있으실겁니다.

이 방법을 잘 알아 두면 나중에 어플리케이션을 만들때나

다른 작업을 할때도 쓸일이 있다고 생각합니다.

마크야 일러스터에서 직접 그려도 가능하고,

무료로 제공하는 이미지를 가지고도 가능합니다.

요런 아이콘에 관심있으신 분들에겐,

꽤 도움이 되는 꿀팁이라고 생각합니다.

굳이 아이콘이 아니여도, 다양한 곳에서 유용하게 사용하신다면

좋을 거 같습니다.:D

저번에 했던건 이클립스에서 연동이 되었다면,

이번엔 이클립스를 거치지 않는 방법으로 폰갭(Phonegap)의 사용방법에 대해서 포스팅을 해볼까합니다.

이클립스에서 실행하는 폰갭은 실행하는 속도가 오래걸려서, 

'아파치'를 사용하고있었습니다.

아파치도 좋지만, 이건 올리는 족족 확인할 수있어서 정말 좋은거 같습니다. 

우선은 Node.js를 받아 주어야 합니다.

Node.js 바로가기

Node.js는 플랫폼 역할을 해줍니다.

첫페이지에 올라와있는 일걸 받아 주어도 좋지만,

만약에 64비트(bit)가 아니신 분들은 Downloads로 가주세요:D

들어가 보시면, LTS에 먼저 체크가 되어 있는데,

Stable에 체크를 해주시고, 자신의 피시와 맞는 사양을 선택해서 다운 받아 주시면 됩니다.

저는 윈도우를 사용하고 있으니, Windows Installer의 64비트가 됩니다.

다운로드 과정은 간단합니다.

특별히 바꾸거나 하는 부분은 없습니다.

다운이 완료되었다면 'cmd'를 실행 시켜주세요.

그리고, 'npm -version'을 입력하면, 버전이 저런식으로 버전이 뜹니다.

정말 빠른속도로 슉슉슉 올라가서 캡쳐는 뜨지 못했지만,

'npm -install -g phonegap'을 입력해 주세요.

입력해 하게되면, 엄청나게 빠른속도로 스크롤 바가 올라갑니다.

스크롤이 다올라 갔다면, 

이번엔 'npm install -g cordova'를 입력해 주세요.

아까와 같이 또 스크롤바가 엄청나게 파바박 올라갑니다.

완료가 되었다면, 한번 연결을 해볼까요?

먼저 'cd \'로 C드라이브로 연결을 해주고, 

'md projects'로 'projects'라는 저장 폴더를 생성합니다.

(저장할 파일을 만들어 주는 것입니다. 굳이 projects가 아니여도 상관없습니다.:D)

그리고, 'cd projects'로 방금 생성한 'projects'폴더로 들어갑니다.

현재 경로는 C드라이브에 'projects'폴더에 있습니다.

'phonegap create hello_world'로 'hello_world'라는 폰갭 프로젝트를 생성해 줍니다.

위 처럼 뜬다면, 올바르게 생성이 됬습니니다.

혹여나 저렇게 뜨지 않고, 오류 메시지가 뜬다면, 

설치과정 중 오류가 있었던 겁니다.

'cordova'를 입력해서 아무정보도 뜨지 않는다면, 

npm을 다시 설치해 보시는걸 권장드립니다.

만약 뜬다면, 'npm -install -g phonegap'와 'npm -install -g cordova'를 다시한번 입력해 재설치 해주세요.

정상적으로 오신분들이라면 'cd hello_world'라 작성해 주시면 위처럼 뜹니다.

여기까지 됬다면,

바로 핸드폰 어플로 연결해 바로 보실 수 있습니다.

어플을 받기전에 'listening on'부분의 숫자를 기억해주세요.

자신의 컴퓨터와 연결되는 서버 주소입니니다.

이제 제대로 되는지 확인해 보기위해 핸드폰에 어플을 설치해 봅시다.

구글 마트에서 'PhoneGap Developer'를 검색해 보시면 위와 같은 어플이 있을겁니다.

설치를 눌러 설치해 주세요.

설치되었습니다.

아이콘이 귀엽네요:D 

실행하기 이전에 해당 컴퓨터와 연결되어 있는 피씨와 

동일한 아이피가 필요합니다.

와이파이를 연결하고 실행 시켜주세요:D

실행해 보시면 이렇게 뜨는데 저기에 아까 위에서 기억해 놓으신 숫자를 적어주시면 연결됩니다.

핸드폰에 연결하긴 했지만,

이게 어떻게 되는건지 잘 모르시겠죠?

간단히 소스를 수정해 보겠습니다.

혹시 이클립스에서 내용을 작성하던 경로 기억하시나요?

경로가 비슷하답니다.:D

저장된 파일에서 'www'파일을 찾아 주어야 하니까요!

우선 우리가 만들어 주었던 

프로젝트는 C드라이브에 projects폴더에 'hello_world'라는 프로젝트를 만들어주었습니다.

찾아 들어가 봅니다.

가보게 되면, 우리가 찾던 'www'폴더가 바로 보이실겁니다.

그곳에 index.html이 바로 우리가 찾던 프로그램입니다.:D

총 경로 → "C:\저장폴더\프로젝트명\www"

메모장이나, 노트패드로 연결해서 열어보시면 익숙한 소스들이 보시게 될겁니다.

저는 일단 보여드리는 것이니, 

바디부분에 <h1>태그의 내용을 작성해 보겠습니다.

저장하는 순간, 핸드폰에 문장이 변경되는 걸 확인해 보실 수 있을겁니다.

완전 샤사삭!

신기합니다!

이제 새로운 것도 받았겠다,

좀더 새롭게 어플을 만들 수있을거 같습니다.

학원에 다니면서, 정말 신기하고, 재미있는 프로그램을 많이 만나고 있네요:D

이제 바로바로 핸드폰으로 확인까지 할 수있으니,

앞으로 배울 내용들이 더욱더 기대가 됩니다.

학원에서 저번주에 자바발표가 끝나고 이제 다시 하이브리드 앱제작을 배우고 있습니다.

오랜만에 다시 앱을 배우려니 반갑기도 하고, 

그새 까먹은 부분도 있어서 당황스럽기도 합니다.8ㅅ8

하이브리드 앱을 만들면서 기초라고 해도,

너무 디자인이 없으면 심심하지 않겠습니까?

따로 디자인을 하지않아도 기본적인 이쁜 아이콘을 사용할 수있습니다.

바로 'jQuery mobile(JQM)'에서 기본으로 제공하는 UI에 대해서 이야기 해볼까 합니다.

그걸 조합해서 만들게 되면 참 쉽고 활용적이게 만들 수 있습니다.

기존에 있던 것들을 조합해서 만들기만 하면 되니까요.:D

jQuer ymobile 바로가기

여기에 접속하게 되면, Download에 들어가 주세요.

들어가게 되면, 버전별로 다운을 받을 수도 있고, 

소스를 따올 수도 있습니다.

아래에 'Copy-and-Paste~'

영역을 복사해서 <head>부분에 붙여 주면 됩니다.

그리고 사용하면 기본적으로 제공하는 것을 사용할 수있습니다.

버전에 따라서 사용할 수 있는 스타일이나, 효과가 다릅니다.

그건 나중에 사용하시면서 버전을 추가를 해주시면 됩니다.

1.4.5버전이 아니라 밑으로 내려보면 전버전들을 볼 수있습니다.

1.3.2버전의 기본 제공 UI입니다.

1.4.5버전은 순서랑 종류가 조금 다르긴 한데, 일단 기본은 이렇게 있습니다.

여기서 골라 사용할 수도 있고, 

원하는 대로 색상을 변경해서 다운받아 사용하는 방법도 있습니다.

기본툴만 있어도, 연습은 하기엔 참 편리하죠.

사용하는 방법은 <body>부분에서 <div>영역을 설정해 사용합니다.

<div>로 영역을 잡아서 'data-theme'으로 위의 테마를 각각 설정해 줄 수도 있습니다.

활용하기 나름이죠.:D

UI의 영역이 전체적으로 기본설정이 되어있다보니,

data-role의 영역이 UI 효과에 영향을 줍니다.

data-role에 대해서는 다시한번 포스팅을 하도록 하겠습니다.:D

<strong>과 <b> , <em>과 <i>는

<p>태그 안에서 사용하는 폰트 효과 입니다.

<b>태그와 <i>태그와 겹치는 면이 없지 않아 있어 보입니다만,

주로 강조하고 싶은 문구에 사용하는 폰트입니다.

일단은 한번 찍어 보지요~

간단히 폰트로 찍어 보았습니다.

<Strong>과 <b>태그

<em>과 <i> 태그 입니다.

큰 차이는 없어 보이지만, 주로 사용하는 용도가 다르다고 합니다.

<strong>과 <em>의 경우에는 의미적인 강조를 나타내고, 

<b>과 <i>는 단순히 문자열을 굵게 표시하거나 효과를 주는 것이라고 합니다.

하지만 표먼적으로는 거의 차이가 없어보입니다.

과연 어디에서 차이가 있는 걸까요?

바로 스크린 리더에서 또렷한 차이를 볼 수 있다고 합니다.

스크린 리더란 시각장애인을 비롯한 준맹이나 저시력자들도 

인터넷을 활용하기 좀더 용의하게 해주는 시스템이라고 합니다.

웹표준에서도 권장하기도 하구요:D 

여러 대중들을 위해 프로그래밍을 하다보면, 

스크린 리더를 위해 추가적으로 주는 효과가 간간히 있습니다.

나중을 생각한다면 꾸준히 쓰면서 익히는 것도 좋은 방법이라 생각합니다.

눈으로 보는 차이는 없지만,

<strong>이나 <em>태그를 사용하게 되면,

그 와중에서도 톤이나, 볼륨이 달라서 훨씬 강조하는 느낌으로 읽히게 된다고 합니다.

보통은 중요하지 않더라도 시각적 효과등을 위해 

기울기를 주거나 굵은 글씨로 표현하는 경우가 많이 있습니다.

그 와중에 가장 중요한 핵심을 이렇게 표현한다면,

스크린 리더를 사용하는 분들도 가장 중요한 요점이 무엇인지 훨씬 쉽게 파악 할 수있을 겁니다.:D

형광펜 효과에 주기에 앞서서 인라인 요소와 블록 요소에 대해 이야기해 볼까 합니다.

HTML에는 인라인 요소와 블록 요소가 있습니다.

둘다 텍스트뿐 아니라, 인라인 요소 혹은 블록 요소의 속성을 띈 태그도 있습니다.

인라인 요소와 블록 요소의 각각의 특징입니다.

인라인 요소의 가장 큰 특징은 줄바꿈이 일어나지 않는다는 것입니다.

줄바꿈이 되지 않다보니 블록 요소안에도 들어갈 수있습니다.

하지만, 반대는 불가능합니다.

<a>,<b>,<i>,<img src=""> 등이 있습니다.

블록 요소는 항상 줄바꿈이 일어납니다.

<h1>~<h7>태그와 <p>태그 등이 있습니다. 

인라인 요소와 블록 요소도 확인해 보고 현광펜 효과도 알아봅시다. 

실제로 색이 들어간 모습을 보면 어떤게 인라인 요소이고 어떤게 블록 요소인지 비교적 알기 쉽게 볼 수 있으실 듯 합니다.

새롭게 추가되는 태그는 강제 줄바꿈 태그인<br>태그와

지정 부분에 현광펜 효과를 주는 <mark> 태그입니다.

이번에 예제를 만들어 보았습니다.

<body>부분 부터 보면, <h2>로 굵은 글씨로 주고,

인라인 요소와 블록 요소를 비교해 보기 위해 <p>태그를 준 문장과 주지 않은 문단을 만들어 주었습니다.

사이에 <br>태그도 사용해 보았는데요,

<br>태그의 경우에는 보통 코드를 작성하는 패드 안에서 줄바꿈을 해도 실제로 페이지에선 전혀 효과가 없습니다.

하지만, <br>태그를 사용하게 되면, 원하는 위치에서 줄바꿈을 할 수있습니다.

그리고, <head>에 공간을 만들어 놓고 사용하지 않고 있던 <style>시트를 써보아요.

해당 태그를 각각 지목해서 형광펜 효과의 색상을 변경해 보겠습니다.

텍스트의 바탕화면 색상이니 'background-color'입니다.:D

<mark>같은 경우 따로 스타일 시트를 주지 않는다면 기본 색상으로 밑줄이 쳐지지만, 

저는 따로 색상을 각각 주었습니다.

실행 시켜 보시면 이렇게 색상이 변하신게 보이실 겁니다.

블록 요소 같은 경우엔 해당 영역을 지나쳐 색이 한줄 전체에 효과를 주었습니다.

하지만, 인라인 요소의 경우엔 해당 영역을 제외하곤 더이상 효과는 없습니다.

거기에 <br>태그로 줄바꿈을 해준것을 제외하곤 

인라인 요소끼리는 줄이 바뀌는 것 없이 한줄로 나란히 붙는 것도 볼 수있습니다.

인라인 인라인 요소와 블록 요소를 잘 알고 있다면, 나중에 홈페이지를 만들 때, 더 효과적으로 사용 할 수있습니다.:D

이번엔 HTML에서 많이 사용하는 태그 중 주석과 이미지 삽입 그리고 링크를 걸어주는 태그입니다.

링크를 걸고싶은 부분의 앞뒤에 <a href = "링크"> 내용 </a>이렇게 넣어주면, 내용 부분에 링크가 걸리게 됩니다.

이미지는 <img src ="이미지 경로">를 적어 주면 삽입이 됩니다.

주석은 <!-- 내용 --> 으로 적어주면, 내용은 주석처리가 되어 화면에 표시 되지 않습니다.

간단한 예제를 통해 보자면,

우선 이미지를 삽입했고, 저는 HTML의 저장 경로와 이미지 파일의 위치가 동일하여 따로 경로 설정을 해주지 않았습니다.

이미지 파일은 위 와같은 '은하수골목'과 확장자는 '.png'입니다.

이미지는 너무 커서 제가 임의로 작게 만들어 주었습니다.

나중에 Style시트에서도 줄이는 것이 가능하지만, 일부는 효과는 바로 적용이 가능합니다.

바로 옆에 초록색으로 주석처리된 것도 있습니다.

원하시는 영역을 설정합니다.

그리고, 마지막 <a>태그는 텍스트에 효과를 줄 예정이니, <p>태그 안에 줘 봅니다.

원하시면 다른 장소에서 주는 것도 가능합니다.:D

결과 값입니다.

이미지는 제가 임의로 준 가로 사이즈가 기준이되어 자동으로 사이즈가 줄어 들어 있습니다.

그리고, 아까 주석 처리한 부분은 화면에 표시되지 않습니다.:D

마지막으로 <a>태그를 준 텍스트엔 밑줄이 그어져 있고, 색이 기본텍스트 컬러와는 조금 색상이 달라 보입니다.

나중에 style 시트도 활용을 하게 되면, 밑줄도 없앨 수 있고, 색상도 변경가능합니다.

클릭을 해보면, 지정해 놓은 사이트로 이동하게 됩니다.

학원에서 계속 새로운 걸 배우고 있다보니, HTML이 벌써 예전에 배웠던거 같습니다.

새로이 복습하고 있는 느낌으로 하나씩 하나씩 배웠던걸 둘러보니 새록새록 기억도 나고,

기본 태그인데도 잊어 버린 태그도 속속들이 있네요.ㅠㅠ

잊어버리고 다시 배우고 하다보면, 

잊어버리지 않는 순간이 오겠지요?:D

HTML기초로 자주쓰는 기본 태그에 대해 작성해 볼까 합니다.

홈페이지안에 레이아웃도 중요하지만, 글씨도 빼놓지 않고, 많이 쓰이는 요소 중 하나인데요,

그 중 많이 쓰이는 문장 태그 중 일부입니다.:D

이번에 쓰게될 태그는 제목에 쓰기 좋은 <h1>~<h6> 태그 입니다.

제목에 쓰기 좋게 큼직하고, 진하게가 적용되어 있습니다.

그리고, 문장안에서 원하는 글씨에 진하기와, 기울기를 쓸 수 있는 태그입니다.

위와 같은 예제를 작성해 보았습니다.

결과 값입니다. 

<h1>부터 <h6>까지 진하기를 비롯해 줄간격도 어느정도 띄워져 있는게 보이실 겁니다.

거기다가 숫자가 커질 수록 폰트 크기가 작아집니다. 

필요할때, 원하는 데로 골라서 사용가능합니다.

골라 쓸수도 있고, 제목 하기 적합하게 나와 있지 않나요?

실제로 홈페이지를 제작하게 될때, 꽤 사용빈도가 높게 사용됩니다.

마지막 줄의 <p>태그를 적용한 문단에는 각각 <b>와 <i>로 진하기와 기울기가 각각 적용이 되어 있는게 보이시나요?

원하는 단어나, 문장의 앞뒤에 <b>혹은 <i>를 주면 해당 영역에 이와같은 효과를 줄 수 있습니다.

글을 작성할때 깨알같은 도움을 줍니다.:D

잘 사용하면 굳이 많은 효과를 줄 필요가 없어, 참 편리 합니다.

HTML은 홈페이지 제작, 반응형 웹 제작을 할 수있습니다.

Javascript와 JQuery를 이용하지 않아도 꽤 멋있는 홈페이지를 만드는 것이 가능합니다.

HTML은 홈페이지 제작에 비유하자면 뼈대와 같고, CSS는 살점 Javascript와 JQuery는 옷과 장식 정도로 볼 수있을까요?

HTML의 작성은 많은 분들께서 드림 위버나 기타 다른 프로그램을 생각하시겠지만, 

드림 위버와 같은 프로그램은 굳이 사용하지 않아도 될 불필요한 코드들도 같이 작성되는 경우가 많습니다.

그렇다고 메모장으로 작성하기엔 너무 힘들지요.

그래서 무료 이용이 가능한, 노트 패드를 사용합니다.

npp.6.7.9.2.Installer.exe

노트패드 설치는 간단합니다.:D

새 화면에서 확장자를 HTML로 저장을 한번하고 하시면, 더욱 편리합니다.

HTML은 기본적으로 태그로 이루어져 있습니다.

태그는 꺽쇠 괄호안에 명령어가 들어가있는 형태를 말합니다.

태그에서는 기본적으로 여는 태그<>와 닫는태그</>가 있습니다.

반드시 닫는 태그가 존재하는 것은 아니지만, 있는 것은 정황히 작성해 주어야 합니다.

HTML의 기본 구성입니다.

위에서 설명해 드린대로 여는태그 와 닫는 태그가 있고, 닫는 태그가 따로 없는 태그도 있습니다. 

<html>은 문서의 시작과 끝을 알려줍니다.

그리고 앞에 명시된 <!doctype ...>은 지금 사용하고 있는 이 문서는 HTML5 언어로 작석된 문서는 뜻입니다.

만약 이게 명시가 안되있는 상태에서 되면, 가끔 재대로 실행되지 않는 경우도 간간히 있습니다.

문서의 구성에는 크게 'head'와 'body'가 있습니다.

head안에는 웹 문서에서 사용하는 언어/문서 제목/ 키워드/제작자 등 여러가지 문서와 관련된 정보들을 나열 합니다.

안쪽에 보면 밑줄친 부분과 style보입니다.

먼저 밑줄친 <meta charset = "utf-8">은 인코딩 작성방법을 'utf-8'로 하겠다는 의미인데, 

utf-8이 언어를 많이 호환하고 었어서, 실행시 대부분의 언어가 깨지지 않는다고 합니다.

거의 항상 기본적으로 하는 편이여서 기본적으로 저장해 두고 쓰면 편리 합니다. 

기초를 배울적엔 style시트(CSS)를 같은 페이지에 작성해 주는 경우가 많아 

기본적으로 위와 같이 저장해 두고 쓰게 되면 많이 유용합니다.

body는 웹 브라우져에 표시될 화면 내용들을 작성합니다.

간단하게 한가지 예제를 보여 드릴까합니다.

위 형식에서 없었던 <head>에 <title>을 주었습니다.

그리고, <body>에는 <p>태그로 문서를 작성해 주었습니다.

스타일 시트는 따로 주지 않았지만, 문장이 찍힙니다.

결과 값입니다.

<title>은 위쪽 바에 이름을 생성해줍니다.

그리고, <p>태그로 페이지에 문장이 찍혔습니다.

추가 사용된 태그입니다.:D

위에서 설명드리는걸 잊었는데, 보통 HTML5는 기존 익스플러에서 지원이 되지 않는 태그가 꽤 있어서,

확인 할 때에는 크롬으로 확인하는 쪽이 훨씬 용이 합니다.:D