본문 바로가기

Tip & Tech/CSS & HTML7

Firefox를 이용하여 웹사이트를 3D로 보고 분석하기 파이어폭스 웹 브라우저에는 개발자도구를 이용하여 웹사이트를 3D로 보여주는 재미있는 기능이 있다. 3D 기능과 HTML 기능을 함께 이용하면 웹사이트를 분석할 때 아주 요긴하다. 개발자도구 메뉴에서 문서 검사를 선택한다. 브라우저 하단에서 3D 버튼을 선택하면... 웹사이트를 3D로 볼 수 있다. 마우스 휠을 굴리면 확대, 축소할 수 있으며 좌우 상하로 드래그 하면 화면을 뒤집어 볼 수 있다. 자세히 보면 웹사이트를 블록 단위로 쌓아놓았다. 하단의 HTML을 선택하고 웹사이트의 블록을 선택하면 해당 블록의 HTML을 살펴볼 수 있다. 이 기능을 이용하면 웹사이트를 분석할 때 전체 소스 보기 할 필요없이 원하는 부분만 살펴볼 수 있으니 정말 편리하다. 2012. 3. 23.
구글 캘린더를 블로그나 웹페이지에 끼워 넣기 구글 캘린더는 일정이나 할 일을 기록하고, 이를 E-mail이나 SMS로 알려주는 다재다능한 웹 서비스다. 아웃룩이라는 프로그램이 있지만, 구글 캘린더는 웹 기반 서비스이기 때문에 언제 어디서든 확인할 수 있고, 요즘 대세인 스마트폰과 연동이 되기 때문에 나는 구글 캘린더를 사용한다. 구글 캘린더는 하나 이상의 캘린더를 생성할 수 있고 또한 다른 사람들과 다양한 방법으로 공유가 가능하다. 또한, 이렇게 생성한 캘린더는 간단한 설정만으로 블로그나 카페, 웹페이지에 넣어 사용할 수 있다. 먼저 자신의 구글 캘린더에 접속하여 새로운 캘린더를 추가한다. 이렇게 새로운 캘린더를 추가하는 이유는 개인용과 공개용을 구분하기 위해서다. 즉 사적인 일정은 구글 캘린더에 접속하여 사용하고 공개를 해도 될 일정을 따로 만들.. 2011. 6. 24.
홈페이지를 위한 CSS - 홈페이지에 적용하기 HTML 문서에 CSS를 적용하는 방법에는 3가지가 있다. 종류 설명 embedding Tag 사이에 스타일 설정을 삽입하는 방식 link CSS를 외부 파일에 설정하고 HTML 파일에 Include 하는 방식 inline HTML 문서 내 Tga에 직접 스타일을 설정하는 방식 embedding 방식 embedding 방식은 Tag 사이에 CSS 설정을 삽입하는 방식이다. CSS를 적용하기 위해서는 Tag 사이에 Tag를 정의하고 CSS을 설정하면 된다. 이때 주의할 점은 예제 소스 P Tag에 적용됩니다 여기는 적용되는 Tag가 없습니다 테이블에 적용됩니다. 실행결과 link 방식 외부에 존재하는 CSS 파일을 문서내에 Include하여 사용하는 방식이다. 여러 문서에서 동일한 CSS을 사용할 수 있으.. 2011. 4. 10.
홈페이지를 위한 CSS - 기본편 CSS (Cascading style Sheets)란? HTML Tag를 이용하여 홈페이지를 만들기 위해서는 많은 태그들이 사용된다. 태그들을 많이 사용하다보면 복잡해진다. 또한, 통일성 있는 문서를 만들기 위해서 동일한 태그들을 계속적으로 기술하는것도 비효율적이다. 이러한 경우 매번 기술해야하는 태그들을 하나의 스타일로 정한 후 이를 HTML 문서에 적용하므로써 깔끔하게 문서를 작성할 수 있다. CSS는 태그의 속성을 하나의 스타일로 설정하는 용도로 쓰이지만, 그림이나 레이어에 적용하여 웹 페이지를 동적으로 다이나믹하게 구성할 수 있도록 한다. CSS로 가능한 작업 1. HTML 문서 내에 글꼴의 종류, 크기, 여백, 색 등을 지정합니다. 2. 글자의 정렬 방식을 결정하거나 글자에 그림자를 지정하는 등.. 2011. 4. 9.
wysiwyg web editor Ckeditor 설치 및 설정 Ckeditor는 웹브라우저를 이용하여 글 작성할 때 편리하도록 다양한 도구를 제공하는 웹 편집기다. 진행하고 있는 프로젝트에 웹 편집기를 적용하고자 구글을 검색하여 무료 편집기를 알아본 결과 Ckeditor가 별다른 설정 없이도 한글을 기본으로 지원하고 다른 어떤 편집기보다 기능이 막강하여 설치해 보았다. 설치법 ckeditor 사이트에서 다운로드를 받아 적당한 디렉토리에 업로드 한다. 필자의 경우 Ckeditor을 업로드 한 디렉토리 /board/ckeditor Cheditor 편집기를 사용할 페이지 사이에 다음을 추가한다. 필자의 경우 적용한 예 에디터를 사용 할 textarea에 ID나 CLASS attribute 값을 이용해 적용할 수 있는데, 필자의 경우 기존 게시판을 관리자 설정에 따라 에디.. 2011. 4. 5.
마우스오버 버튼 만들기 마우스오버 버튼이란 마우스 커서(cursor)를 올렸을 때 이미지가 변하는 버튼을 말한다. 다른 말로는 롤오버 버튼이라고도 한다. 기본적으로 마우스오버 버튼은 2개의 이미지를 사용한다. 첫번째 이미지는 기본화면일 때 보여지는 이미지이고 두번째 이미지는 마우스를 올렸을 때 보여지는 이미지다. 이렇게 2개의 이미지를 가지고 드림위버의 비헤이비어를 이용하거나 포토샾의 롤오버 기능을 사용하여 마우스오버 버튼을 만드는데 이미지를 만드는 과정보다 마우스오버 기능을 구현하는게 더 어렵다. 그러나 CSS의 background-position속성을 사용하면 하나의 이미지로 마우스오버 버튼을 만들 수가 있다. 하나의 이미지에 기본버튼 부분과 마우스가 오버될 때 보여지게 될 부분을 만든 다음 일반적으로 보여질때는 전체 이미.. 2010. 6. 24.
아이폰 웹어플리케이션 개발시 꼭 알아야 할 것 1. 아이폰용 css 적용하기 @media only screen and (max-device-width: 480px) { /* iPhone only CSS here */ #test-block { background: red; } } 아이폰은 max-device-width가 480px로 정의되어 있습니다. 위 두개의 코드는 이러한 값을 이용하여 아이폰용 css를 추가하는 방법입니다. 범용적인 스타일시트로 모바일 웹어플리케이션을 개발후 아이폰에서는 더 나은 UI를 만들기 위해 위와 같이 아이폰용 CSS를 추가함으로써 아이폰의 사파리브라우저로 접속하는 사용자들에게 다른 UI를 제공해줄수 있습니다. 2. 아이폰용 서버측 코드 실행하기 Short iPhone only title Regular title php의 .. 2010. 4. 17.