잡지식스토리

[HTML]title태그, 웹페이지에 웹문서 제목 입력하기

반갑습니다. 잡지식스토리의 촉기남입니다.

이번 포스팅에서는 HTML문서의 <title>태그에 대해서 정리해 보도록 하겠습니다.

『 <title>태그는 웹페이지의 제목을 지정해 주는 태그입니다. 』

이 웹페이지의 제목은 다음의 영역에 노출됩니다.

(1) 웹브라우저의 제목표시줄이나 탭표시줄에 웹문서의 제목으로 표시됩니다.

(2) 즐겨찾기 목록에 추가될 때, 표시되는 제목입니다.

(3) 포털사이트에서 검색했을 때, 검색 결과 목록에 보여지는 제목입니다.

그럼 이제 예시를 들어 HTML문서를 작성해 보고, 웹브라우저로 확인을 해 보겠습니다.

< HTML 문서 작성 >

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title 태그 알아보기</title>
</head>
<body>
<p>title태그는 웹페이지의 제목을 나타냅니다.</p>
</body>
</html>

아래 이미지를 보면 각 행에 대한 내용을 쉽게 이해할 수 있습니다.

< 웹브라우저 실행 및 확인 >

웹브라우저로 실행해 보면, title태그의 내용이 웹페이지의 '탭 표시줄'에 표시되는 것을 확인할 수 있습니다.

이것으로 우리는 <title>태그의 기능을 알아보고, 그 개념을 자세하게 정리해 보았습니다.

위 HTML 작성 문서에 나타난 태그들을 모두 정리하는 것이 맞지만, 한번에 정리하기에는 부담스러운 부분이 있어서 하나씩 하나씩..!! 정리하는 것으로 하겠습니다.

아.. 누누이 알려드립니다만, 저는 웹문서의 '웹'자도 모르는 놈입니다.

해당 카테고리의 포스팅은 저혼자 공부해서 정리하는 것이므로, 잘못된 부분이 있으면 댓글로 알려주시기 바랍니다.

지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서 더 유익한 공부거리로 다시 찾아오겠습니다.

저작자표시 동일조건

'웹문서 공부' 카테고리의 다른 글

[HTML]link태그, 각 웹문서끼리 연결하여 관계 나타내기 (0)	2013.09.30
[HTML]base태그, 기준이 되는 URL 절대경로 지정하기 (0)	2013.09.29
[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!! (0)	2013.09.25
HTML의 기본구조, 요소(Element)/태그와 요소내용 (0)	2013.09.23
[웹문서]웹문서 공부 시작합니다. (0)	2013.09.17

Posted by DaumTistory

[포토샵]선택 영역 경계를 부드럽게 처리하기

반갑습니다. 잡지식스토리의 촉끼남입니다.

이번에는 선택한 영역의 경계를 부드럽게 처리하는 방법에 대해서 정리해 보겠습니다.

이미지의 일부 영역을 선택하여 수정 작업을 하다보면 선택 영역의 경계가 부드럽게 처리되지 않아서 엉뚱한 결과물이 나올 때가 있습니다.

이럴 때는 메뉴바의 [Select]-[Feather] 기능을 이용하여 경계선 부분을 부드럽게 처리해주면 됩니다.

다음 캡쳐 이미지를 보면서 자세하게 설명해 보겠습니다.

과정 1 > 영역선택 툴을 선택하고 이미지 수정 영역을 드래그하여 선택합니다.

과정 2 > 메뉴바의 [Select]-[Feather] 경로를 클릭합니다.

'Feather Selction' 설정 창을 나타나면, 수치를 입력하여 부드럽게 처리하는 정도를 설정합니다.

확실한 결과물을 보기 위해서 120 pixels으로 설정했습니다.

설정 값이 높을수록 부드럽게 처리하는 영역이 넓어집니다.

과정 3 > 'Feather' 효과가 어떻게 나타나는지 확인해 보겠습니다.

메뉴바의 [Image]-[Adjustments]-[Desaturate] 경로를 선택합니다.

Desaturate기능은 채도를 없애서 이미지를 흑백으로 바꿔주는 기능을 합니다.

과정 4 > 택된 부분의 색상이 흑백으로 바뀌었는지 확인합니다.

그리고 선택 영역의 경계부분이 부드럽게 흑백으로 수정되었는지 확인합니다.

과정 5 > 이미지가 제대로 수정되었는지 확인하고, 키보드의 [컨트롤 + D키] 를 동시에 눌러서 작업을 완료합니다.

< 요점 정리 >

1. 경계 부분을 부드럽게 처리하는 방법은 메뉴바의 [Select]-[Feather] 기능을 사용한다.

2. 이미지를 흑백으로 수정하는 방법은 메뉴바의 [Image]-[Adjustments]-[Desaturate] 기능을 사용한다.

자.. 지금까지 이미지의 선택 영역 경계를 부드럽게 처리하는 방법에 대해서 알아보았습니다.

처음에는 '저런건 어떻게 하나??' 하고 감탄만 했었는데, 막상 하는 방법을 알고 해보니까, 정말 쉽네요..^^;;

'역시 포토샵이야~'라는 생각을 다시금 하게 만듭니다.

아무튼, 지금까지 잡지식스토리의 촉끼남이였으며, 다음 시간에는 더 유용한 포토샵 공부거리로 컴백하겠습니다.

저작자표시 비영리 동일조건

'포토샵 공부' 카테고리의 다른 글

[포토샵]선택영역 모양변형하기(모양변경/둥글게/테두리) (0)	2013.10.06
[포토샵]선택된 영역을 일정 비율로 줄이기 (0)	2013.10.03
[포토샵]스캔 받은 여러 사진을 자동으로 잘라 정렬하기 (0)	2013.09.24
[포토샵]자르기 툴을 사용하여 이미지 잘라내기 (0)	2013.09.22
[포토샵]이미지 선택 영역을 다른 이미지 창으로 복사하기 (0)	2013.09.19

Posted by DaumTistory

[와콤뱀부CTL-470]드디어 접수했다..!! 써 보니까 좋네..!!

반갑습니다. 잡지식스토리의 촉끼남입니다.

드디어.. 드디어.. 촉끼남이 꿈에도 그리던 와콤 뱀부 태블릿 패드를 드디어 접수했습니다.

요즘 포토샵 공부를 하다 보니, '태블릿 패드로 그림이나 글씨를 쓰면 좋겠다'라는 생각을 하게 되어서 알아봤더니,

와콤이라고 하는 회사에 뱀부라고 하는 태블릿패드가 명성이 좋다는 정보를 얻었습니다.

마음은 깔끔하게 CTH-470으로 하고 싶었지만, 주머니 사정이 안좋은 관계로 CTL-470으로 장만하기로 했습니다.

그것도 주머니 사정이 안좋은 관계로 '네이버 중고**'카페를 통해서 저렴하게 구하기로 했습니다.

그래서 처음에 마음을 먹었을 때, 한번에 구입하지 못하고 계속 알아만 보다가, 중고**에 좋은 매물이 올라온 것을 보고 이제서야 구할 수 있었습니다.

판매자가 취미로 그림 그릴려고 샀다가 바쁜 직장생활에 치여서 못 그리게 되니까 싸게 판다고 했습니다.

상태도 좋았고, 저렴하게 구할수 있어서 나름대로 기다리기를 잘했다라고 생각했습니다.

아무튼 이렇게 해서 어렵사리 이 녀석을 제 손에 넣게 되었습니다.

자.. 그럼 이제 와콤 뱀부 CTL-470 태블릿 패드의 개봉기에 대해서 이야기해 보겠습니다.

음.. 중고로 사기는 했어도 박스채로 넘겨 받았기 때문에, 또, 나름대로 어렵게 구한 제품이기 때문에 개봉기 아닌 개봉기를 적어 보겠다고 마음 먹었습니다.

박스를 열고 제일 먼저 인증샷을 찍었습니다. 보호싸개 안에 있었지만, 사진 한번 찍어보겠다고 벗기고 찍었습니다.

오른쪽은 연결하고 나서 찍은 사진 입니다.

뱀부 태블릿 패드 뒷면 색상이 형광색인데, 책상에 반사되어서 뭔가 있어 보입니다.

하지만 실제로는 아무것도 없다는 거~~ ^^;;

제품 박스에 들어있는 설치CD를 통해서 'BAMBOO DOCK'라는 태블릿 패드 설정 프로그램을 설치했습니다.

설정 프로그램 실행화면입니다. UI가 깔끔하니 좋습니다.

설정을 마치고, 포토샵으로 글씨를 써 보았습니다.

이미지에 나와 있는대로, 마우스로 글씨를 쓰는 것보다는 편하기는 하지만, 모니터를 보고 글씨를 써야 하기 때문에 어색하기도 하고, 이쁘게 써지지도 않습니다.

뭐.. 손에 익숙해 지면 금방 이쁘게 쓸 수 있다고 생각하기 때문에 일단은 만족스러운 것으로 정리하겠습니다.

이제 이 뱀부 녀석으로 포토샵 공부를 더 열심히 해야 하겠습니다.

마우스가 편하기는 하겠지만, 뱀부가 필요한 작업도 있기 때문에 적절히 사용한다면 작업 능률이 오를 것 같습니다.

아무튼, 이렇게 해서 '와콤 뱀부 CTL-470 태블릿 패드'에 대한 개봉기를 간략하게 포스팅 해 보았습니다.

다음 포스팅에서는 태블릿패드 설정 프로그램인 'BAMBOO DOCK'의 설정 방법에 대해서 알아보도록 하겠습니다.

그럼 이정도에서 마치겠습니다. 지금까지 잡지식스토리의 촉끼남이였습니다. 그럼, 휘리릭~~

저작자표시 비영리 동일조건

'진짜 잡지식' 카테고리의 다른 글

[ArtRage]아트레이지 맛보기 (0)	2013.10.08
[와콤 뱀부]와콤 뱀부 BAMBOO DOCK 프로그램 설정 방법 (0)	2013.09.28
[아이폰 천지인 키보드 설정]애플이 적용했으니까 대박..!! (0)	2013.09.25
[저작권표시]CCL과 Copyrightⓒ.All Rights Reserved (0)	2013.09.20
[좋은글]다른 누군가가 너에게 정답을 강요하지만,,, (0)	2013.09.16

Posted by DaumTistory

[HTML]HTML 요소들의 집합, HTML웹문서의 기본구조..!!

반갑습니다. 잡지식스토리의 촉끼남입니다.

전에도 말씀드렸다시피, '웹문서 공부'는 대중없이 그냥 손에 잡히는대로 포스팅 하기로 했습니다.

이번에는 저번 포스팅에서 설명했던 요소들이 모여서 하나의 HTML웹문서를 구성하는 기본 구조에 대해서 정리해 보겠습니다.

여기 저기 알아보니까, HTML문서는 요소들이 합쳐져서 이루어져 있는데, 이 요소들 사이에도 상위요소가 있고 하위요소가 있고 해서,

결과적으로 계층이 있고, 구조가 있다고 합니다.

그래서 그 구조를 '트리구조'라 하고 상속이 어쩌고 저쩌고 하면서 중요하다고 하는데, 솔직한 이야기로 촉끼남한테는 무슨 말인지도 잘 모르겠고, 간단하게 개념 정리를 하는 쪽으로 진행하겠습니다.

일단 기본적으로 EditPlus라는 프로그램을 이용해서 정리를 해 보겠습니다.

이것도 솔직히 어떤 프로그램인지는 잘 모르겠으나, 인터넷에 검색을 하다보니, 이 프로그램으로 수정/편집 작업을 하길래 촉끼남도 써 보는 것으로 했습니다. 일단 행마다 번호가 있어서 쓰기 편하다고 판단됩니다.

프로그램은 '네이버 자료실'에서 30일 쉐어웨어로 등록되어 있으니, 알아서 설치하시면 되겠습니다.

그럼 이제 개념 정리 들어갑니다.

1, 15 -- <html>태그 / HTML 웹문서임을 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.

2, 4 -- <head>태그 / 웹문서의 기본 정보를 정의하는 요소입니다. 시작태그와 종료태그로 나타냅니다.

3 -- <title>태그 / <head>태그의 하위요소입니다. <title>태그 이 외에 다른 하위요소들도 있습니다.

웹문서의 제목을 정의하는 요소로, 실제 웹페이지 제목영역에 요소내용이 표시됩니다.

아래 이미지를 보면 웹페이지 제목이'잡지식스토리'로 표시되는 것을 확인 할 수 있습니다.

5, 14 -- <body>태그 / 웹페이지의 본문을 나타내는 요소입니다. 실제로 웹페이지에 표시되는 부분입니다.

6,7,8,9,10,11,12,13 - <h1>태그. <ul>태그, <li>태그, <p>태그 / <body>태그의 하위요소들입니다.

여러 가지 하위요소가 있으며, 일단 이번 포스팅은 기본구조만 정리하는 단계이므로, 앞으로 하나씩 정리하는 쪽으로 진행하겠습니다.

위와 같이 HTML문서를 작성하고, 웹브러우져로 보기를 하면 일반적으로 보이는 웹페이지가 보입니다.

웹브라우져는 윈도우 운영체제에서 기본 설치되는 '인터넷 익스플로어'를 포함하여 '오페라''사파리''파이어폭스''크롬'등 다양한 브라우져가 있으므로, 적당한 프로그램을 선택하면 되겠습니다.

아무튼, 위와 작이 작성한 HTML문서를 웹브라우져를 통해서 보면 다음과 같이 표시됩니다.

이정도로 해서, HTML웹문서의 기본구조에 대해서 알아보는 '웹문서 공부 정리'를 마치도록 하겠습니다.

앞서 말했다시피, 이번 포스팅은 웹문서의 기본구조를 알아보고 개념만 잡는 단계이기 때문에, 자세한 내용은 차차 정리하는 것으로 하겠습니다.

지금까지 잡지식스토리의 촉끼남이였으며, 다음 포스팅에서는 더욱 유익한 웹문서 공부거리로 돌아도록 하겠습니다.

저작자표시 비영리 동일조건