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

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

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

round3.html

 

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도 늘어나겠죠. 

round3.html