페이지 1 의 41234

HTML/CSS 기초 – 폰트 속성 사용하기

웹사이트에서 폰트의 사용은 아주 중요합니다. 폰트의 모양과 크기는 디자인에서 가장 중요한 역할을 하고 검색엔진은 글내용을 기준으로 검색을 해서 캐시에 저장을 해놓기 때문에 어떤 폰트를 사용하든 상관없지만 이것은 컨텐트에 해당하고 디자인을 위한 프리젠테이션을 담당하는 CSS는 모양을 결정하기 위해서 다양한 폰트중에 하나를 선택하고 크기를 결정하기 위해서 CSS의 폰트 속성을 사용합니다.  웹페이지는 픽셀기준이기 때문에 폰트로 표현하는데 한계가 있어서 좋은 ...

HTML/CSS 기초 – 이미지 파일을 사용하지 않고 둥근 모서리 배경 만들기

이전 글들에서는 포토샵으로 만든 하나 이상의 이미지를 이용하여 모서리가 둥근 배경을 만들었지만 항상 포토샵을 사용해서 만들어야하는 단점이 있습니다. CSS3의 border-radius 속성을 사용하면 간단하게 둥근 모서리의 배경을 만들 수 있지만 많은 사람들이 사용하는 인터넷 익스플로러에서는 9버전만 지원한다는 단점이 있습니다. 구글의 애드센스 페이지를 보다가 둥근 모서리의 배경이 있어서 살펴보니 CSS의 border 속성과 여러가지 다른 속성을 이용하여 테두리가 ...

HTML/CSS 기초 – 하나의 이미지를 이용하여 상하좌우로 무한대로 늘어나는 배경이미지 만들기 One image flexible rounded corner Background

그동안 둥근 모서리의 배경이미지 만들기에서는 3개 이상의 이미지가 필요하였는데 하나의 이미지로 상하좌우로 무한대로 늘어나는 배경이미지를 만들기를 시도해 보았는데 가능하게 되서 포스팅으로 올립니다. 이전 글에서 소개한 것들보다 간단합니다. 다만 모서리부분이 투명이 안되기 때문에 포토샵에서 이미지를 만들때 배경색으로 사용할 색상을 미리 정해야합니다.  cfile3.uf.14369A3B4F30F42E2C7427.zip   압축파일을 풀고 html 파일을 텍스트 에디터에 열면 위와같이 나옵니다. 선택자는 클래스를 사용합니다. 여러곳에서 사용할 수 있도록 ...

HTML/CSS 기초 – id 선택자를 class 선택자로 변경하여 배경이미지를 재활용하기

이번 글에서는 기억을 되살릴겸 아이디 선택자와 클래스 선택자에 대해서 되짚어보고 이미 아이디 선택자를 사용한 경우 이를 클래스 선택자로 변경하여 웹페이지에서 한번만 사용할 수 있는 배경이미지를 재활용하는 방법을 알아봅니다. 이전 글 에서 아이디 선택자와 클래스 선택자에 대해서 알아봤는데 마지막 부분에서 선택자를 선정할때 웹페이지에서 단 하나만 있는 것은 아이디 선택자를 사용하고 두곳 이상의 장소에서 사용할때는 클래스 선택자를 ...

HTML/CSS 기초 – 무한대로 늘릴 수 있는 둥근 모서리(Flexible Rounded Corner Box) 배경이미지 만들기

이번 글에서는 실제로 사용하기 위한 배경 이미지 박스를 만들어봅니다. 워드프레스 테마 스킨을 티스토리 스킨으로 변경하는 과정에서  가장 중요한 부분이 테두리가 있는 둥근 모서리 이미지입니다. 마침 이웃 블로거이신 이츠하크님의 요청으로 워드프레스테마를 티스토리 스킨으로 변경하는 작업을 포스팅하려고 했습니다. 변경하고자 하는 워드프레스 테마는 CSS3에서 소개된 border-radius 속성을 사용하고 있죠. 이 테마를 사용하면 아직도 많은 사람이 사용하고 있는 IE8 ...

HTML/CSS 기초 – 상하좌우로 늘어나는 둥근 모서리 박스(Flexsible Rounded Corner Box) 이미지 만들기

이전 글 에서 만든 박스이미지는 상하로만 늘어나는 배경이미지입니다. 상단과 하단의 이미지는 고정되지만 늘어나는 중간영역은 글이 늘어나면서 같이 늘어나는 배경 속성의 repeat-y 값을 이용합니다. 그러면 좌우로 늘어나는 이미지는 repeat-x 값을 사용하면 되지만 포토샵으로 이미지를 새로 만들어야합니다. 이 방법은 상하좌우로 글의 내용에 따라서 늘어나지만 컨텐트 영역이 상하로 아주 길어지는 부분에서는 늘어나는 만큼의 이미지를 포토샵으로 만들어야하므로 포토샵으로 세로 ...

페이지 1 의 41234