어뮤징 라이프

얼마 전, HTML 편집기 NOTEPAD++ 다운 방법 및 사용법에 대해서 포스팅했는데요, 웹사이트를 개발할 때 이런 HTML 편집기를 사용하여 코드를 작성한 후 브라우저에서 확인하고 수정할 부분이 있으면 다시 편집기로 수정하는 작업을 반복하여 웹사이트를 개발할 수 있습니다. 그러나 해당 방법으로 코드를 만들게 되면 아무래도 시간이 많이 소요되고 불편한 부분이 있겠지요?? 그래서 웹사이트를 개발할 때는 브라우저에 포함된 개발자 도구를 이용하여 소스를 수정하고 즉시 브라우저 화면에서 결과를 확인할 수 있어야 합니다. 익스플로우, 파이어폭스, 크롬 등 각 브라우저는 각각의 브라우저 개발자 도구를 갖추고 있습니다. 그중에서 오늘은 크롬 개발자도구 사용법에 대하여 알아보도록 하겠습니다. 크롬 개발자도구 사용법 ..

HTML & WEB 2017. 3. 13. 06:00

처음 HTML을 배우기 시작했을 때 간단하게 메모장으로 만들던 시절이 있었습니다. 그것만으로도 충분하다 생각했지만, notepad++ 프로그램을 알고 나서 신세계를 경험했죠. 메모장과 비교하면 훨씬 다양한 기능을 지원합니다. 그러니 우리는 HTML 문서를 만들 때 전문적인 HTML 편집기를 사용해야 합니다. 물론 무료 프로그램으로!! HTML 편집기 notepad++ 다운받기 검색창에 notepad++ 를 검색하고 무료 다운받기를 클릭합니다. 편집기는 한글을 지원하니 걱정 마시고 다운로드 받아주세요. 다운받은 파일을 실행하시면 설치가 시작됩니다. HTML 편집기 다운받기 참~ 쉽지요?? 실행해보니 아주 잘 되네요. HTML 편집기 notepad++ 기능 아래는 제가 주로 사용하는 기능입니다. 1. 책갈피..

HTML & WEB 2017. 3. 8. 20:05

TABLE 태그 ~ : 사이트 레이아웃을 잡거나 표를 만들 때 사용하는 태그이며, 테이블 태그는 태그, 태그, 태그를 함께 사용합니다. : 행을 추가하는 태그입니다. : 셀을 추가하는 태그입니다. : 행, 열의 머리말을 나타내는 데 사용합니다. 글씨를 가운데 정렬하고 굵게 나타냅니다. : 표의 테두리를 표시하는 태그로 숫자에 커질수록 표의 굵기도 굵어집니다. html table 태그로 표 만들기 html 편집기를 통해서 위와 같이 입력해 보았습니다. 어떻게 보이는지 확인해볼까요?? 위와 같이 잘 나오셨나요??^^ 처음 표를 만들 때는 태그와 태그가 헷갈릴 수 있는데요. 천천히 직접 만들어보시면 금방 쉽게 하실 수 있으리라 생각합니다! 그럼, table 태그로 표만들기 포스팅을 마치겠습니다. 도움이 되셨길..

HTML & WEB 2017. 3. 8. 15:24

HTML을 작성하다 보면 자주 쓰는 기초 태그가 있는데요, 오늘은 HTML 기초 명령어 태그, 태그에 대해서 알아보겠습니다. 태그 제목 : 제목을 표시하는 태그이며, 이 태그를 이용하면 일반 텍스트보다 크고 진하게 표시할 수 있습니다. 크기에 따라 ~ 까지 사용할 수 있는데, h1이 가장 크고 h6이 가장 작게 표시됩니다. 예시로 작성해보도록 하겠습니다. Amusing Life Amusing Life Amusing Life Amusing Life Amusing Life Amusing Life 그럼, 위와 같은 크기의 제목으로 나타납니다. 태그 글 : 웹 문서에서 가장 많이 사용되는 태그 중 하나이며, 텍스트 단락을 만들어 냅니다. 즉 줄 바꿈. 태그라고 부릅니다. 예시로 작성하겠습니다. Amusing L..

HTML & WEB 2017. 3. 7. 09:11

오늘은 모니터, TV, 게임기, 핸드폰에서 많이 사용하는 영상 입출력 단자 VGA, DVI, HDMI의 종류와 모양 그리고 차이점과 변환 젠더에 대해서 알아보록 하겠습니다. 1. VGA VGA 단자는 D-SUB 또는 RGB로 표기합니다. 아날로그 방식의 영상신호를 전송합니다. DVI-A 또는 DVI-I 변환젠더를 이용하여 DVI 포트와 연결을 할 수 있습니다. 디지털 신호만 전송하는 DVI-D 포트와는 연결할 수 없습니다. HDMI는 디지털 신호로 영상을 전송하기 때문에 아날로그 신호인 VGA는 보내는 신호가 달라 젠더로는 연결할 수 없기 때문입니다. HDMI와 연결하기 위해서는 별도의 컨버터가 필요합니다. 즉, VGA 포트는 DVI-A 포트와 DVI-I 포트를 변환젠더를 이용해 연결할 수 있고 DVI-..

HTML & WEB 2017. 2. 23. 12:19

요즘 회사나 집에서 듀얼 모니터 많이 쓰시죠??? 저도 회사에서는 듀얼 모니터를 쓰는데 집에서는 모니터 1대로 사용하고 있었어요. 그런데 2대를 쓰다가 집에 와서 1대로만 쓰려니 너무 불편하더라고요. 그런데 마침!! 지인이 모니터가 1대 남아서 준다고 하더라고요!! 크기도 집에서 쓰는 모니터랑 똑같은 크기여서 얼른 주세요!! 했습니다. 그런데 설치하려고 보니 두 대의 모니터의 연결 케이블은 모두 VGA, 제가 쓰는 컴퓨터 본체의 VGA 단자는 1개, DVI 단자가 1개 이렇게 구성되어 있어서 변환젠더가 필요했습니다. 그래서 처음에는 모니터 분배기(공유기/확장기)를 구매했습니다. 배송받아 사용하려고 보니.. 단자는 맞는데 공유기 자체의 크기가 본체와 맞지 않아 꽂을 수가 없더군요. 그래서 이번에는 변환젠더..

HTML & WEB 2017. 2. 21. 13:11

UI / UX 디자이너, 웹 퍼블러리셔, 쇼핑몰에서 재직 중인 분이라면 ui디자인, ux디자인이라는 말은 익숙하실 텐데요,전문가라고 해도 ui/ux의 차이점을 물어본다면 당황하거나 대충 대답하는 분들, 많이 보셨을 겁니다. 그래서 오늘은 이 두 가지의 차이점에 대하여 알아보도록 하겠습니다. 사실 이 두 분야의 차이점에 대하여는 의견이 분분하기도 합니다. 그러니, 업계 실무자들이 인식하는 안의 범위에서 설명하도록 하겠습니다. UI디자인이란?? UI디자인은 (User Interface)의 약자로 인터페이스 그 자체를 뜻합니다. 말 그대로 `유저 인터페이스` 사용자 위주의 인터페이스를 뜻합니다. 웹 디자인에서 UI의 정의는 사용자가 프로그램을 이용하여 내용을 입력하고 작업을 수행할 때 쉽게 사용할 수 있도록 ..

HTML & WEB 2017. 2. 12. 13:06

HTML5란 무엇인가?! HTML은 인터넷상에서 표현하기 위한 기본 프로그래밍 언어입니다. 이를 기반으로 화면에 글씨와 그림을 보여주는 것이 웹 브라우저라고 합니다. 즉, 우리가 보는 대부분의 인터넷 사이트가 HTML 기반으로 만들어졌다고 생각하시면 됩니다. HTML에는 각 버전이 존재하고 HTML5는 HTML의 최신 버전을 뜻합니다. HTML5의 기본 구조는 HTML과 크게 다른 점은 없습니다. 하지만 기존 HTML에 비해 표현할 수 있는 기능들이 다양해서 더 많은 표현을 하게 해줍니다. HTML5는 액티브X(Active X, 플래시(flash), 실버라이트(Silverlight), 자바FX(JAVA FX)와 같은 플러그인 기반의 각종 프로그램을 별도로 설치할 필요가 없이 영상, 음악 등을 손쉽게 보여..

HTML & WEB 2017. 2. 9. 12:41