페이지 2 의 41234

HTML/CSS 기초 – 배경 속성을 이용한 모서리가 둥근 이미지 박스 만들기

CSS3를 이용하면 블럭요소의 모서리가 둥글게 하거나 그림자를 만들 수도 있습니다. CSS3는 몇년전부터 사용되었지만 모든 웹브라우저에 적용되는 것은 아닙니다. 제가 CSS에 관해서 포스팅하면서 자주 인터넷 익스플로러을 언급하는데 이번에도 어쩔 수 없이 언급할 수 밖에 없습니다. 다른 웹브라우저는 다 지원하지만 그렇지 못한 것이 IE 시리즈이기 때문입니다. 위 기능들은 IE9버전에서만 지원하며 아직도 우리나라의 상황에서는 많은 사람들이 IE8 이전 ...

HTML/CSS 기초 – 배경 속성 (Background Property) 사용하기

 그동안의 포스팅은 CSS에서 기본이 되는 레이아웃에 관한 글이었습니다. CSS는 레이아웃에 관한 테크닉이므로 레이아웃에 관한 글을 먼저 포스팅했고 이를 먼저 알게 되면 웹페이지를 전반적으로 볼수 있는 능력이 길러지게 됩니다. 즉 숲을 볼수 있는 것이죠. 이제부터는 레이아웃에서 세부적으로 들어가 나무를 심는 작업을 하게 됩니다.  CSS를 사용하지 않던 시절에는 모든 이미지가 html의 <img>태그를 사용하여 이미지를 웹페이지에 삽입하였지만 중요하지 않은 ...

HTML/CSS 기초 – 유동폭(Liquid Width) 레이아웃 – 3단(Three Column)

어떤 레이아웃이든지 3단의 레이아웃을 만들기는 까다롭습니다. 두개의 사이드바가 어느 한쪽으로 붙어있다면 기존의 2단 레이아웃을 수정해서 사이드바영역 안에 두개의 사이드바를 만들면 간단하게 해결되지만 사이드바가 양쪽으로 나누어지면 약간 복잡해지죠. 우선 하나의 사이드바 안에 두개의 사이드바를 만들어서 어느 한쪽으로만 사이드바가 두개 있는 레이아웃을 만들어보고 두개의 사이드바가 양쪽으로 나누어지는 레이아웃을 만들어봅니다. 1. 두개의 사이드바를 한쪽에 배치 cfile9.uf.1847F03B4F22511D17E5D5.zip     압축파일을 풀고 텍스트에디터에 두개의 파일을 ...

HTML/CSS 기초 – 유동폭(Liquid Width) 레이아웃 – 2단(Two Columns)

유동폭 레이아웃은 컨텐트가 화면 전체를 채우게 되므로 요즘의 와이드 모니터가 많이 사용되고 있는 때에는 가독성이 떨어지므로 잘 사용하지 않습니다. 하지만 일정범위 안에서는 유동폭 레이아웃이 되도록 하고 그 범위를 넘어서면 고정폭 레이아웃이 되도록하는 방법도 사용됩니다. 이번글에서는 그동안의 내용을 되새기는 의미에서 하나씩 집어가면서 유동폭 레이아웃에 대해서 알아봅니다. 1. 유동폭 2단 레이아웃 cfile8.uf.13197E344F22112519CB03.zip   압축파일을 풀면 두개의 파일이 있습니다. 하나는 웹페이지에서 컨텐트를 ...

HTML/CSS 기초 – 고정폭(Fixed Width) 레이아웃

이전 글에서 레이아웃의 종류로 고정폭과 유동폭에 대해서 알아보았습니다. 대부분의 블로그나 웹사이트에서는 고정폭 레이아웃을 사용합니다. 요즘은 모니터화면이 와이드로 나오기 때문에 유동폭 레이아웃을 사용하면 컨텐트가 화면에 꽉 차게 나오므로 글을 읽기가 힘들죠. 특수한 경우, 예를 들면 포털 사이트에서 검색어를 입력하고 엔터키를 치면 들어가는 페이지의 경우는 유동폭 레이아웃을 사용합니다. 컨텐트가 좌우로 꽉차게 나오죠. 하지만 화면을 줄이다보면 일정 범위까지는 ...

HTML/CSS 기초 – 레이아웃의 종류

블로그나 웹사이트를 만들기 위해서는 가장 먼저 생각해야하는 것이 레이아웃입니다. 가입형 블로그를 개설하거나 티스토리 같은 서비스형 블로그를 개설하더라도 가장 먼저 선택을 하는 것이 이미 만들어진 블로그 스킨을 선택하게 되는데 스킨의 레이아웃이 어떤 것인지를 먼저 결정해야합니다. 스킨의 레이아웃의 형태는 1단, 2단, 3단 레이아웃이 있으며 이것은 본문의 열(Column)이 몇개 있느냐에 따른 분류입니다. 본문의 열이 여러개인 경우는 중요한 컨텐트부분이 ...

페이지 2 의 41234