워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

CSS3를 이용하면 블럭요소의 모서리가 둥글게 하거나 그림자를 만들 수도 있습니다. CSS3는 몇년전부터 사용되었지만 모든 웹브라우저에 적용되는 것은 아닙니다. 제가 CSS에 관해서 포스팅하면서 자주 인터넷 익스플로러을 언급하는데 이번에도 어쩔 수 없이 언급할 수 밖에 없습니다. 다른 웹브라우저는 다 지원하지만 그렇지 못한 것이 IE 시리즈이기 때문입니다. 위 기능들은 IE9버전에서만 지원하며 아직도 우리나라의 상황에서는 많은 사람들이 IE8 이전 버전을 사용하고 있을겁니다. 그렇다면 아무리 편하고 좋은 CSS3를 사용해서 웹디자인을 한다해도 별 쓸모가 없게 됩니다. 그래서 사용하는 것이 포토샵으로 모서리가 둥근 이미지를 만들고 그림자도 만들어서 배경이미지로 사용해야하는 것이죠. 배경이미지를 사용하지 않고 CSS3를 이용하여 둥근 모서리와 그림자를 만드는 방법은 이곳 을 참고하세요.

고정폭 이미지를 이용한 둥근 모서리 박스 만들기 




압축파일을 풀면 images폴더에 포토샵 파일이 있고 위처럼 3부분을 잘라낸 파일이 3개 있습니다. 위 3가지 이미지를 사용하여 배경이미지를 만들게 됩니다. 이미지를 만들때 배경색을 어떤 색으로 하느냐에 따라서 포토샵에서도 배경색을 정해야합니다. 여기서는 흰색을 사용합니다.

 
html파일을 텍스트 에디터에 열면 위처럼 나옵니다. 간단한 CSS 실험이므로 CSS를 임베디드형태로 작업합니다. <div>태그가 3개 사용되는데 2는 top이미지가 배경으로 들어가고 3은 bottom이미지가 들어가며, 내용이 아래로 늘어나면 박스도 같이 늘어나야하므로 늘어나는 부분의 이미지는 4는 중간이미지가 y축으로 repeat되는 부분입니다.


우선 top-box에 대해서 배경이미지를 삽입합니다. 위와같이 코딩하면 top.gif이미지가 좌측 상단을 기준으로 배경이미지로 들어갑니다. 현재 top-box div에는 아무런 내용이 없기 때문에 배경이미지도 나오지 않습니다. <div class="top-box">아무거나</div>처럼 뭔가 들어가야 배경이미지가 나옵니다. 그래서 padding-top을 적용하면 그제서야 이미지가 나타납니다. 위처럼 하고 웹브라우저에서 보면 아래와 같이 나옵니다.



이번에는 bottom-box에 같은 방법으로 이미지를 다르게 해서 적용하면 하단에 이미지가 나타납니다.


마지막으로 두개의 div 태그를 감싸는 tile-box에 이미지를 삽입합니다. repeat-y라는 값을 추가하였으므로 tile-box 가 내용이 늘어나면 이 배경이미지는 계속 추가되면서 반복됩니다. 또한 내부에 있는 자식요소의 뒷면에 나오기 때문에 상, 하단에 있는 이미지와 결합하여 마치 하나의 이미지처럼 나오게 됩니다. 그러니까 상, 하단의 이미지 뒤에는 tile.gif라는 이미지가 있고 컨텐트의 내용이 늘어나면서 y축으로 반복되어 나타나게 됩니다.

그런데 컨텐트의 내용은 넓이가 정해지지 않았기 때문에 밖에 벗어나 있습니다. 그래서 width를 이미지의 가로사이즈로 정하면 글내용도 이 범위내로 들어오게 됩니다. 


글내용이 들어있는 div에 좌우로 패딩을 줘야될 상황입니다.


양쪽에 패딩값을 20픽셀주니 글이 안쪽으로 좁혀져나와서 보기 좋아집니다. 위 세가지 값을 한줄로 줄일 수 있죠. 단축형을 쓰면됩니다.

  padding: 0 20px 20px 20px;

위처럼 입력하면 됩니다. <p> 태그 안의 내용을 추가하면 위아래로 늘어나게 됩니다. 


위 방식은 글내용이 위아래로만 늘어나고 좌우로 늘어나지 않는 가로사이즈가 정해진 부분에는 사용할 수 있지만 좌우폭을 늘리거나 할때는 적용할 수가 없습니다. 그래서 다른 방법을 사용해야합니다. 다음 글에서 이어집니다. 

 

loyalty , ,

댓글 (15)

댓글 목록

무적만보기 access_time

안녕하세요^^ martian36님 두두맨님 블로그 타고 왔습니다ㅎㅎ
좋은 정보 많이 있네요 잘보고 갑니다^^

베누시안 access_time

안녕하세요. 반갑습니다. 좋게 봐주셔서 감사합니다. 댓글도 감사드려요~

까움이 access_time

혹시, 드림위버 사용하시는지 여쭈어 보고 싶네요..
웹디자인에 관한 보물창고를 하나 가지고 계신거니, 정말 뿌듯하시겠습니다 ㅎㅎ

베누시안 access_time

안녕하세요. 드림위버는 위지위그로 디자인할 수 있지만 무겁고 번거로와서 잘 안씁니다. 단순한 텍스트 에디터가 좋아서 이것을 주로 사용한답니다.

access_time

비밀댓글입니다

베누시안 access_time

안녕하세요. 웹표준을 지키지 않는 웹브라우저가 인터넷 익스플로러입니다. 웹표준을 제시한 w3c에서 만든 CSS를 잘 적용하지 않는 것이죠. 지금도 CSS3에서 가능한 기능인 모서리를 둥글게 하는 기능을 IE8이하 버전에서 적용이 안되는 관계로 워드프레스 스킨을 티스토리 스킨으로 바꾸는 작업이 길어지고 있답니다. 그래서 CSS기초부분에서 배경이미지를 모서리 둥글게 하는 과정이 필요한 것이죠. 이것은 IE8 이전 버전이 사용되지 않게될 앞으로도 몇년동안 필요한 기능이라서 알아두어야할 내용입니다.

그리고 이츠하크님의 블로그를 요소검사를 했는데 테이블 구조더군요. 이것도 웹표준에서 사용하지 말라는 레이아웃이죠. 어떤 레이아웃이든 웹브라우저마다 차이가 있으니 어쨋든 점검을 하고는 있습니다.

이츠하크 access_time

베누시안님 덕분에 많이 배웁니다. 저는 여태껏 웹표준인줄만 알고 있었지요. 그렇군요.죄송하지만 진단과 함께 처방전까지도 부탁드립니다. 어찌하라고 하시면 제가 고쳐 보겠습니다. 너무 죄송합니다.^^

베누시안 access_time

아무래도 스킨을 설치해보고 점검해봐야겠네요. 테이블 구조가 CSS를 사용하지 않아서 아주 복잡하네요. 설치해서 여러가지 수치를 변경해야겠습니다. 스킨을 이메일로 보내주세요. martian36@naver.com

베누시안 access_time

테이블 레이아웃을 CSS로 변경하는 작업을 해보니 틈이 안생깁니다. 별도로 포스팅할 만한 내용은 아니므로 제가 직접 수정을 해드릴테니 아이디와 비번을 이메일로 보내주세요.

지나가는사람 access_time

타일박스라는 상자안에 탑박스를 탑박스안에 바텀박스를 넣은셈인가요?
바텀박스안의 내용이 많아지면 길이가 길어지니 그걸 감싸고있는 타일박스안의
타일 파일을 와이축으로 계속 생기게해서 해서 보기좋게한거 같은데 제가
이해하고있는게맞나요?^^ㅠㅠ

베누시안 access_time

안녕하세요. 반갑습니다. 타일박스가 탑박스와 바텀박스 뒤에 있으니까 타일박스 안에 탑박스와 바텀박스가 순서대로 있는 것으로 생각하면 됩니다. 글내용이 늘어나면 타일박스의 타일리 y축으로 repeat되는 것이죠.

궁금한1인 access_time

좋은정보라 따라해보고 있는데.
ie6에서는 일렬로 나와버리네요.
왜그러는건지.. 백그라운드도 먹질 않구요..;;
뭐가 잘못된건가요?

베누시안 access_time

안녕하세요. 반갑습니다. ie는 CSS적용을 잘 안한답니다. 웹표준을 잘 안지키죠. 요즘은 잘 하고 있습니다만 ie6은 CSS의 최대의 적입니다. CSS하고는 전혀 친하지 않습니다. 최소한 ie8로 업그레이드하세요. 아니면 다른 브라우저를 사용하세요.

따뜻한친구 access_time

오늘 모서리 디자인을 보기 위해 크롬을 깔고 해보니 더욱 재밌습니다.
다만 설정이 어찌된건지 ie에서는 글자가 또렷하더니 크롬에서는 글자가 흐릿한게 이상하군요.

베누시안 access_time

웹브라우저별로 다 특성이 있어서 보이는 것이 좀 다릅니다. 크롬이 웹디자인을 가장 잘 표현합니다.