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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

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

 
1의 이미지는 CSS만든 배경이미지로 웹에서 100%로 보이는 상태입니다. 모서리가 둥글죠. 하지만 이를 확대해서 보면 2의 모서리 부분이 아래 이미지처럼 톱니가 생깁니다. 확대해서 그런 것이고 평상시로 100%로 보면 1처럼 둥글게 보이는 것입니다. 어떤 이미지도 둥근 모서리는 위처럼 톱니가 생깁니다. 픽셀 베이스 이미지는 다 그렇죠. 다만 포토샵으로 만들면 톱니가 생기더라도 앤티앨리어싱 기능으로 톱니현상을 줄이게 됩니다.

 


html 파일을 텍스트 에디터에 열면 위처럼 나옵니다. 클래스 선택자로 같은 이름의 div 태그가 <p>태그를 감싸고 있습니다. 세개의 box가 있는데 1과 2처럼 위 아래의 클래스 선택자의 이름이 같으므로 같은 명령을 받습니다. 이 모두를 감싸는 round라는 이름의 클래스 선택자가 있습니다. CSS는 간단한 내용이므로 임베디드형태로 진행합니다. 


round 클래스에 가로 폭을 설정합니다. 최외곽 박스인 box1에 배경색으로 흰색을 입력하고 border 속성을 설정합니다. border는 단축형으로 사용하지만 여기서는 테두리를 좌우만 설정할 것이므로 단축형을 사용할 수 없습니다. 그래서 세가지 속성을 사용하는데 테두리의 폭은 우선 확대해서 볼 수 있도록 수치를 열배로 입력합니다. 테두리 색상 또한 나중에 body의 배경색으로 변경할 것이지만 우선 변화 과정을 보기 위해서 배경색보다약간 짙은 회색으로 설정합니다. 테두리 스타일은 실선입니다. 높이를 설정해줘야 아무것도 없는 div 태그가 모습을 나타냅니다. 이것도 보통 사이즈의 열배로 입력한 것입니다. html의 <p>태그에 적당한 내용을 입력하고 CSS에서 박스와 같은 배경색을 입력합니다. 패딩과 마진은 0으로 설정해야 <p>태그의 기본 패딩과 마진설정이 제거됩니다. 이렇게 하고 웹에서 보면 아래 이미지처럼 나옵니다.

 
.box1의 내용을 그대로 복사하여 아래에 붙여넣고 이름을 box2로 수정합니다. 테두리 폭을 20픽셀로 수정하면 우측 이미지처럼 나옵니다.


이번에도 box2를 복사하여 아래에 붙여넣고 이름을 box3로 변경하고 테두리 폭을 10픽셀로 줄입니다. 이대로 웹에서보면 계단모양이 45도 각도로 되어 각이 지게됩니다. 그러면 3부분을 2배 늘리고 4부분도 두배 늘리면 두개의 톱니부분이 튀어나오는 효과로 둥글게 되는 효과가 됩니다. 3부분을 늘리려면 5의 테두리 폭을 40픽셀로하고 4부분을 두배 늘리려면 6을 20픽셀로 하면됩니다.


두개의 수치를 변경하였더니 우측 이미지처럼 나옵니다. 그러면 이제 #aaa로 되어있는 색상코드를 body의 색과 같게하고 각 숫자의 단위에서 0을 제거하여 한자리수 로 변경합니다. 


열배로 늘린 10단위숫자에서 0을 제거하니 위처럼 모서리가 둥글게 보이는 배경이미지가 됐습니다. 


<p> 태그에 내용을 추가하고 패딩을 설정합니다. 마진을 설정하면 박스와 분리되므로 설정하면 안됩니다. 이렇게하고 웹에서 보면 아래처럼 상하로 늘어납니다. 좌우폭을 설정하면 좌우로도 늘어납니다. 


이 방법의 단점은 모서리의 둥근 정도를 자유롭게 조정하기가 어렵습니다. 반지름에 해당하는 radius를 늘리자면 여러개의 div 태그가 필요하고 CSS도 늘어나겠죠. 


loyalty ,

댓글 (5)

댓글 목록

윈컴이 access_time

Border-radius를 사용하면 다 되는데, 아직 CSS3를 지원하지 않는 브라우저를 많이 써서 ㅠㅠ

베누시안 access_time

안녕하세요. IE때문에 웹디자이너들이 고생이 많죠.^^

윈컴이 access_time

그래서 요즘엔 ie무시하고 작업할경우가 많죠.

베누시안 access_time

그렇군요. 하지만 ie를 위한 핵을 만드는 것도 웹디자이너의 일이라서 많이 나오고 있더군요.

윈컴이 access_time

맞아요. 그렇더라고요. ㅎ