CSS에서 마진과 패딩은 태그 만큼이나 많이 사용하는 스타일시트 속성입니다. 이들의 주된 역할은 태그와 같은 블럭요소를 이용한 레이아웃에서 블럭의 경계선에 해당하는 border(테두리)와 컨텐트의 간격을 설정하거나 인근의 블럭요소와 의 간격을 설정해서 보기 좋은 레이아웃을 만드는데 있습니다. 블럭요소의 내부에 있는 컨텐트와 border와의 간격을 패딩이라고 하고 블럭요소간의 간격을 마진이라고 합니다. 우선 이들의 세부적인 내용을 알아보기 전에 이전 글에서 작업한 것을 보면 배경색도 이상하고 블럭요소간에 구분하기 위해서 설정한 테두리 색깔도 보기 좋지 않으므로 다 제거하고 CSS3에서 새롭게 나온 속성인 그림자(Shadow)효과와 박스의 모서리를 둥글게 할 수 있는 효과인 border-radius에 대해 ..
HTML로 코딩하면서 가장 흔하고 많이 쓰이는 것이 태그입니다. 영어로 Division을 의미하는데 이것은 이전 글 에서 알아봤듯이 대표적인 블럭요소중에 하나입니다. 블럭요소란 웹페이지에서 좌우공간을 다 차지하여 이 요소 외에 다른 요소가 옆에 오면 아래로 내려버리는 성질이 있습니다. 그래서 CSS로 스타일을 적용하지 않은 웹페이지를 보면 글자의 나열과 이미지만 나오고 위에서 아래로 HTML 코드 순서대로 나타납니다. 우리나라에서 가장 많이 쓰이는 인터넷 익스플로러에서 네이버 포털사이트의 초기화면을 스타일을 적용안하고 본 화면입니다. HTML의 블럭요소는 이런 성질 때문에 보기좋게 레이아웃하기 위해서 초기 디자이너들은 태그를 사용하여 레이아웃을 했습니다. 테이블형태의 레이아웃은 스타일시트와 관계가 없기 ..
HTML페이지에 스타일시트를 적용하는 방법은 크게 3가지로 사용합니다. 특수하게 적용하는 방법도 있지만 기초부분에서는 제외합니다. 3가지중 가장 많이 쓰이는 방법이 웹표준에 의한 스타일시트 적용법인 외부 스타일시트(External Style Sheet) 입니다. 그리고 인라인(In-line Style Sheet)방식과 임베디드(Embedded Style Sheet )방식이 있습니다. 우선 3가지 방식에 대해서 알아보기 전에 미니 웹사이트를 만들어봅니다. 왜냐하면 외부 스타일시트 방식의 효율성을 증명하기 위해서죠. 이전 글에서는 W3C School의 실험용 페이지를 이용해서 몇가지 코드만 입력해도 가능했는데 이번에는 실제로 웹페이지를 하나하나 코드를 입력해서 만들어보고 사용되는 태그에 대해서도 설명을 드립..
CSS의 문법 구조는 프로그래밍 언어라고 할 수 없을 정도로 아주 단순합니다. 우선 제일 먼저 나오는 것이 선택자입니다. 선택자에 대해서는 이전 글 에서 잠깐 타입 선택자(Type Selector)에 대해서 알아봤는데 타입선택자와 함께 가장 많이 쓰이는 것이 아이디 선택자와 클래스 선택자입니다. 선택자 다음에 나오는 것이 중괄호의 시작입니다. 그 다음이 속성, 콜론, 값, 단위, 세미콜론, 중괄호끝으로 모든 구문이 완료됩니다. 하나의 속성과 값이 끝나고 다른 속성과 값을 추가하려면 세미콜론 다음에 다시 시작하면 됩니다. 모든 속성과 값은 중괄호 안에 들어가야합니다. 아주 간단하죠. 그러면 위 사진에서 중요한 것이 선택자와 속성, 값이 있는데 속성과 값은 아주 다양하기 때문에 별도의 내용없이 나오는대로 설..
웹페이지는 HTML(Hyper Text Markup Language)이라는 언어와 CSS(Cascading Style Sheet)라는 두가지 웹프로그래밍 언어로 주로 만들어집니다. HTML은 컨텐트(Content)를 담당하고 CSS는 프리젠테이션(Presentation)을 담당합니다. 뭔가 발표할때 프리젠테이션을 하게 되는데 적당히 글씨만 쳐서 올리면 보는 사람이 즐겁게 보지 않기 때문에 색상도 넣고 배경색도 넣고, 테두리도 만들게 됩니다. 이러한 작업을 웹페이지에서는 CSS가 담당합니다. 웹페이지에서는 태그를 사용하여 컨텐트의 특성을 정합니다. 제목은 ~태그를 사용하고 문장은 태그를 사용하죠. 아주 많이 쓰는 태그입니다. html에서는 이러한 태그를 요소(Element)라고 합니다. 요소에는 블럭요소와..
웹디자인에서 사용되는 레이아웃 언어인 CSS가 만들어진 것은 1996년이었지만 아직도 웹표준을 적용하지 않고 웹페이지가 만들어지고 있는 것은 그동안 CSS가 모든 웹브라우저에서 일관된 표현이 되지 않았기 때문입니다. 그당시 웹브라우저로 많이 사용된 것이 인터넷 익스플로러였고 윈도우 OS에 끼워팔았기 때문에 웹브라우저 점유율이 세계적으로 95%나 됐었습니다. 현재의 OS 점유율을 보면 윈도우버전이 아직도 80%를 차지하고 반강제적으로 인터넷 익스플로러를 사용하게 되는데 특히 XP의 사용자가 38.5%로 많은 수를 차지합니다. 왜 XP가 문제인가 하면 이 OS에 끼워져있던 인터넷 익스플로러가 버전 6인데 CSS적용이 잘 안되고 말썽 많은 웹브라우저이기 때문입니다. 그나마 버전업이 돼서 다른 버전을 사용할 수..
웹디자인시 반드시 사용하게 되는 스타일시트 작업에서 알아두면 편리한 팁을 소개합니다. 1. CSS 폰트 스타일 정의 단축형(Shorthand) 폰트에 대하여 정의할때 여러가지 속성과 값을 별도로 정의하게 됩니다. font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif; 위와 같이 여러개의 속성과 값을 정의할 수도 있지만 다음과 같이 한줄로 단축형을 사용할 수 있습니다. font: bold italic small-caps 1em/1.5em verdana,sans-serif 즉 다음과 같은 Syntax로 적용을 해야합니다. fo..
스마트폰을 사면 사용법을 알아야 사용하기 편리하듯이 워드프레스를 시작하기전에 각종 설정에 대해 자세히 알아두고 설정을 해두는 것이 사용자에게 아주 편리합니다. 환경설정에는 일반설정, 쓰기, 읽기, 토론, 미디어, 프라이버시, 고유주소 설정이 있습니다. 반드시 필요한 사항에 대해서만 설명드립니다. 1. 일반설정 관리자화면에서 하단의 설정메뉴에서 일반을 클릭하면 우측에 화면이 나옵니다. 사이트제목은 처음 워드프레스를 설치할때 입력했더라도 수정할 수 있습니다. 태그라인도 사이트의 특징적인 원하는 문구로 변경하세요. 로컬호스트에서 워드프레스 주소는 변경은 할 수 없습니다. 마찬가지로 웹호스팅에 가입하고 설치한 경우 호스팅회사의 가이드대로 설치하면 내 블로그 접속시 wordpress라는 워드프레스가 설치된 디렉토..
워드프레스는 두 종류의 컨텐트가 있습니다. 하나는 포스트이고 다른 하나는 페이지입니다. 블로그에서 포스트는 글을 올리는 행위를 의미하기도 하고 하나의 글 자체를 의미하기도 합니다. 포스트에 대해서는 잘 알고 있지만 한국형 블로그에서는 페이지라는 개념이 거의 없지만 익스프레스 엔진에서 페이지의 개념이 있습니다. 익스프레스 엔진은 텍스타일이라는 블로그 모듈이 있기 때문에 블로그 프로그램이라기 보다는 드루팔처럼 일반적인 웹사이트 제작 프로그램이라고 하는 것이 좋겠습니다. 워드프레스에서 페이지는 메뉴와 연관됩니다. 메뉴를 클릭하면 블로그 포스트가 나오는 것이 아니라 블로그 소개글인 About 페이지가 나오게 됩니다. 워드프레스에서 페이지란 하나의 독립된 레이아웃이라고 보는 것이 좋습니다. 이 페이지에는 블로그 ..
이전 글에서 워드프레스를 미국의 워드프레스 사이트에 가입하여 한국어로 설치하는 방법 과 내컴퓨터에 WAMP 서버를 이용하여 서버환경을 만들어 설치하는 방법 을 알아보았습니다. 이번 글에서는 무료 웹호스팅에 워드프레스를 설치하는 방법을 알아봅니다. 무료 호스팅 서비스는 대부분 100메가의 용량을 부여하기 때문에 지속적으로 블로그를 사용하기에는 용량이 많이 부족합니다. 무료로 사용하다가 필요에 따라서 용량와 트래픽을 늘리면 됩니다. 이러한 웹호스팅 서비스 사이트는 아주 많지만 제가 이용한 무료호스팅 사이트는 파란, 닷홈, 나야나, 우비 등이 있습니다. 파란닷컴에 가입을 하고 무료호스팅을 신청하면 하루내에 설정이 완료돼서 통보됩니다. 파란닷컴의 비즈프리 호스팅은 무료형의 경우 6개월마다 갱신해야하는데 기간이 ..
이름이 잘 알려지지 않은 컨텐트 관리시스템(Content Management System, CMS)인 킴스큐 레드블럭입니다. 블로그 뿐만아니라 웹사이트 제작도 가능합니다. WAMP 서버에 설치하고 둘러보니 우선 디자인이 좋은 것 같습니다. 홈페이지에 접속하고 회원가입하면 소셜네트워크 관리가 가능한데 블로그 서비스까지 가능한지는 모르겠네요. 킴스큐는 마이크로소프트와 파트너십을 갖고 있고 공개(Open Source) 소프트웨어 개발자대회에서도 대상을 받는 등 기술력이 있는 회사이고 드루팔, 줌라, 워드프레스를 경쟁상대로 세계적인 시장에 진출할 예정이라고 하니 지켜볼만한 회사로 생각됩니다. 우선 설치를 해보고 어떤지 살펴보는 것이 좋을 것 같습니다. 이곳 을 클릭하면 위 이미지가 나오는 사이트로 이동합니다. ..
텍스트큐브는 제로보드처럼 오랜 한국형 블로그 프로그램중에 하나입니다. 전신인 태터툴스로 시작해서 블로그 서비스인 텍스트큐브닷컴(textcube.com)은 구글과 공동운영하다가 구글에 통합되었고 티스토리는 다음과 공동운영하다가 다음으로 이전되었습니다. 티스토리 홈페이지의 하단에 보면 태터툴즈라는 이름이 아직 남아있습니다. 블로그 프로그램은 니들웍스(Needlworks)에서 계속 개발하고 있고 텍스트큐브닷오그(textcube.org)에서 다운 받을 수 있습니다. 이곳 을 클릭하면 텍스트큐브를 다운 받을 수 있는 텍스트큐브닷오그로 이동합니다. 티스토리를 시작하면서 원래의 프로그램은 어떤지 알아보려고 WAMP 서버에 설치를 하려고 했지만 MySQL 5.5버전과 충돌이 일어나서 설치에 실패를 했는데 텍스트큐브를 ..
이 글에서 WAMP를 사용했는데 설치시 문제점이 있으니 아래 링크에서 오토셋을 설치하고 XE를 설치하세요. http://martian36.tistory.com/1256 익스프레스 엔진(XE)는 대표적인 한국형 블로그 프로그램중에 하나입니다. 전신인 제로보드를 네이버 NHN에서 인수하면서 익스프레스 엔진으로 바뀌었습니다. 요즘은 외국 블로그 프로그램과 경쟁하면서 해외에 진출하기 위해 설치시에 외국어를 선택할 수 있도록 버전업되었습니다. 이 프로그램도 다양한 모듈을 설치해서 단순한 블로그가 아닌 기업형 웹사이트를 제작할 수 있습니다. 이전 글 에서 이러한 블로그 프로그램을 내 컴퓨터에 설치하여 웹호스팅에 업로드하기전에 디자인 제작을 하기 위해 시험가동하는 방법에 대해서 알아보았습니다. 워드프레스를 WAMP ..
WAMP 서버가 초보자분들이 사용 시 에러도 나고 어려운 점이 있으니 오토셋을 사용하세요. 아래의 링크에 사용법이 있습니다. http://martian36.tistory.com/1256 워드프레스는 해외에서 사용자가 가장 많은 컨텐트 메니지먼트 시스템(Content Management System, CMS)으로 사용하기 쉽고 플러그인을 설치하면 블로그뿐만 아니라 인터넷 쇼핑몰까지 만들 수 있는 프로그램입니다. 대부분의 블로그 프로그램이 웹프로그래밍 언어인 php로 만들어졌듯이 워드프레스도 php언어로 만들어졌습니다. 이전 글 에서 드루팔을 이용해서 웹디자인 개발을 하기 위해서 Acquia Drupal을 설치하여 웹서버환경을 만들었듯이 워드프레스도 웹서버환경을 만들면 호스팅 서버에 업로드하지 않고도 내 컴..
블로그를 하면서 구글의 애드센스를 광고로 달았는데 다른 블로그에는 린다닷컴의 광고가 나오는데 내 블로그에는 3개월이 지나서야 나오기 시작했습니다. 린다닷컴의 광고는 보고만 있어도 기분이 좋았죠. 왜냐하면 웹디자인을 공부하면서 가장 많이 본 튜토리얼이기 때문입니다. 특히 포토샵 강좌는 거의 전부 이곳을 통해서 지식을 얻었습니다. 움직이기를 싫어해서 혼자 배우는 것을 즐겨하는데 온라인 강좌는 최적의 환경이더군요. 이번 글에서는 미국 최대의 온라인 강좌 사이트인 린다닷컴을 소개합니다 . 린다닷컴의 강좌는 주로 컴퓨터와 관련된 강좌가 많습니다. 강좌의 코스는 현재 1200여개가 되고 매주 3~4개의 풀코스 강좌가 만들어집니다. 린다닷컴의 운영방식의 특징은 대부분의 강사가 집에서 비디오 레코딩을 해서 강좌를 만들..
드루팔의 강력한 모듈은 아주 다양한 사이트를 만들기에 적합합니다. 드루팔은 블로그 프로그램이지만 블로그를 떠나서 일반 웹사이트, 기업용 웹사이트를 만들어도 손색이 없습니다. 물론 방문자가 아주 많은 포털사이트는 대부분 php가 아닌 asp언어를 사용합니다. 데이터베이스도 커야하기 때문이지요. 드루팔의 명성을 알 수 있는 가장 흔한 예로 백악관 홈페이지가 드루팔로 만들어졌다고 합니다. 그만큼 신뢰성이 있고 대단한 프로그램이기 때문입니다. 이번 글에서는 사용언어를 바꾸는 방법을 알아봅니다. 사용언어란 드루팔 프로그램을 사용하면서 나오게 되는 안내문이라든가 경고문 등, 드루팔을 사용하면서 보이는 글자의 언어를 말합니다. 드루팔은 원래 영어로 만들어져 있지만 세계 각국의 드루팔 사용자들이 자원해서 번역팀을 만들..