CSS3 – border-radius 속성 사용하기

CSS3의 border-radius는 CSS기초부분에서 많이 다루었는데 그만큼 웹페이지에서 많이 사용하는 속성입니다. 인터넷 익스프로러 8버전이하에서는 지원을 하지 않기 때문에 이미지 파일을 이용하여 여러가지 방법으로 둥근 모서리를 만들었죠. IE에서 이것만 지원해도 웹디자인은 쉬워질텐데 말이죠.

1. 웹브라우저별 접두어(Prefix)

 

border-radius 속성은 IE8이하 버전을 제외하고는 거의 모든 웹브라우저에서 지원합니다. 우리나라에서는 IE의 사용자가 아주 많습니다. IE8 이하 버전의 사용자도 아직도 많은 수를 차지합니다. 그렇기 때문에 이미지를 이용하여 둥근 모서리의 박스를 만들어서 사용할 수 밖에 없습니다. 위 표를 보면 파이어폭스 3.6이나 안드로이드 브라우저 2.1에 접두어(Prefix)인 -moz-와 -webkit-이 붙어있는데 이 버전에서 border-radius를 사용하기 위해서는 이 접두어를 붙여야 효과가 나온다는 의미입니다.

border-radius 속성은 아주 많이 사용하기 때문에 대부분의 웹브라우저에서는 접두어 없이 사용이 가능하지만 다른 속성들, 예를 들면 gradient 같은 경우 아래 사진과 같이 웹브라우저의 모든 버전에 접두어를 사용해야 원하는 효과가 나옵니다.

이와같이 접두어를 사용해야하는 것은 이전글 에서 알아보았듯이 이 속성들은 W3C의 웹개발 발표단계에서 Working Draft 단계에 있기 때문입니다. 이는 아직 시험단계로 웹브라우저 제작자들이 각자의 웹브라우저에 적용을 하여 모든 웹브라우저 같은 결과를 나타낼때까지 시험을 거치게 됩니다. 그래서 통일된 효과가 나오면 W3C에서 Candidate Recommendation단계로 승인을 하여 접두어를 뗄 수가 있게 됩니다. 그러면 위 표도 깨끗해질 것입니다. 그때까지는 웹브라우저 제작자들은 CSS3의 각 속성을 적용시키고 실험을 하므로 업그레이드가 빈번하게 일어납니다. 작년같은 경우 파이어폭스가 무려 6단계의 업그레이드를 했습니다. 파이어폭스에서는 4주간의 간격을 두고 업그레이드하기로 했답니다.

2. border-radius 속성 사용하기

border-radius.zip

#header {
background:#fff;
border:1px solid #888;
padding: 20px 20px;
border-radius:15px;
}

첨부파일을 다운받아 압축을 풀고 CSS파일을 텍스트에디터에 열고 #header 에 위처럼 border-radius:15px;를 추가 한 다음 저장하고 웹브라우저에서 확인합니다. 모서리가 둥글게 나타납니다. 속성값인 15픽셀은 반지름을 의미합니다.

모든 블럭요소의 성격을 가진 요소에 border-radius:15px;를 추가해 봅니다. #content, h2, #sidebar, blockquote, #footer에 추가하고 웹브라우저에서 보면 위처럼 나옵니다.

#header {
background:#fff;
border:1px solid #888;
padding: 20px 20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}

앞에서 알아본 것처럼 모든 버전에서 사용이 가능하게 하려면 위처럼 접두어가 붙은 속성과 값을 입력합니다. 접두어가 붙은 것을 상위에 놓고 없는 것은 아래에 배치합니다. 왜냐하면 접두어를 붙여야만 사용이 가능하다가도 나중에 수정을 하여 업그레이드되면 접두어가 없이 사용할 수 있는 것이 표준이므로 표준인 것이 표준이 아닌것보다 우선적용할 수 있기 때문입니다. CSS는 마지막에 선언된 것이 이전에 선언된 것보다 우선 적용하게 됩니다. CSS에서 C는 Cascading의 약자인데 이러한 우선적용원리를 의미합니다.

3. border-radius의 단축형

위에서 border-radius의 속성값으로 하나의 값을 입력했지만 사각형의 모서리는 4개이므로 4개의 값을 입력할 수가 있으며 서로 다른 값을 사용할 수도 있습니다.

#header {
background:#fff;
border:1px solid #888;
padding: 20px 20px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px 20px 30px 40px;
}

위처럼 사용하는 것은 단축형입니다. 4가지의 값을 다르게 하면 모서리의 둥근 정도가 다 다르게 나옵니다. 한곳만 수치를 입력하고 3곳을 0으로 하면 한곳만 둥글게 나오게 됩니다. 위 네가지 값의 순서는 다음과 같고 각 코너의 속성은 다르게 할 수도 있습니다.

border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

좌측상단에서 시작하여 시계방향입니다. 위처럼 한곳의 모서리만 설정할 수도 있습니다. 원하는 부분만 사용할 수 있는 것이죠. Safari 4 와 Safari iOS 3은 단축형을 사용하지 못합니다.

4. border-radius의 다양한 사용법

위처럼 html에는 <div id=”circle”></div>를 추가하고 CSS에는 가로세로 100픽셀을 설정합니다. 배경색상과 테두릴 설정하고 border-radius를 50px/50px입력합니다. 이것은 앞에서 설정한 가로세로 100픽셀의 반이죠. 이처럼 설정하고 웹에서 보면 둥근 원이 나옵니다. 이것을 변형하여 50px/20px로 수정하면 어떤 모양이 나올까요.

세로를 50픽셀로 줄이고 50px/28px로 했더니 위처럼 나옵니다. 앞의 수치는 수평부분의 곡선이고 뒤의 수치는 수직부분의 곡선입니다.

슬래시를 없애고 수치를 입력하면 위처럼 나옵니다. 앞의 수치는 좌상과 우하의 수치가되고 뒤의수치는 우상과 좌하의 수치가 됩니다.

각 모서리에 대해서 별도로 설정하면 위처럼 나옵니다.

이것을 rotate를 사용해서 회전하면 눈모양이 되겠죠.

테두리를 서로 다른 수치를 넣으면 위처럼 나옵니다. 로고를 만들어도 되겠네요.

border-style 속성을 이용하면 여러가지 다양한 이미지가 나오게 됩니다.

Advertisements

CSS – 알아두면 유용한 CSS 팁

 

웹디자인시 반드시 사용하게 되는 스타일시트 작업에서 알아두면 편리한 팁을 소개합니다.

1. CSS 폰트 스타일 정의 단축형(Shorthand)

폰트에 대하여 정의할때 여러가지 속성과 값을 별도로 정의하게 됩니다.

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

위와 같이 여러개의 속성과 값을 정의할 수도 있지만 다음과 같이 한줄로 단축형을 사용할 수 있습니다.

font: bold italic small-caps 1em/1.5em verdana,sans-serif

즉 다음과 같은 Syntax로 적용을 해야합니다.

font: font-style font-variant font-weight font-size/line-height font-family;

여기서 순서는 정해져있으며 두가지 속성인 font-size와 font-family는 항상 있어야합니다. 이 두가지 속성이 없이 앞의 세가지 속성만으로는 적용이 안되며 font-family 속성은 맨 마지막에 와야하고 바로 앞에 font-size 가 있어야 합니다. 앞의 세가지 속성이 없이 사용하면 이때는 이들 생략된 속성에 대해서 기본값(default)이 적용됩니다.

2. 두종류 이상의 클래스(Class) 정의

어떤 요소에 대하여 클래스를 정의할때 대부분 하나의 클래스만 적용해서 사용하지만 하나의 요소에 대하여 두개 이상의 클래스정의가 가능합니다.

<li>…</li>

위 li 요소에 대해서 category라는 클래스와 current라는 클래스가 적용되었고 별도의 속성과 값을 정의하면 됩니다. 두개의 클래스 사이는 빈 스페이스만 있으면 되고 콤마도 필요하지 않습니다. 위 두개의 클래스에 대해서 같은 속성과 값을 정의하게 되는 경우가 있을 수 있는데 이때는 CSS 고유의 특징인 캐스캐이딩(Cascading)에 의해서 나중에 정의된 속성과 값이 적용됩니다.

3. border 속성에도 기본값이라는게 있습니다.

border를 정의할때 보통 border: 1px solid #000 ; 의 형태로 border의 width와 스타일, 색상을 정의하는데 여기서 반드시 필요한 것은 스타일이고 나머지를 생략하면 width는 3에서 4픽셀의 기본값이 적용됩니다. 그리고 색상은 별도로 정의된 폰트의 색상이 적용됩니다.

div {
width:500px;
background:yellow;
margin:6px 0;
color:#f00;
border:solid;
}

예를 들어 위와같이 border 에 대해 solid만 정의하면 border의 폭은 3픽셀, 색상은 #f00의 색상이 적용됩니다.

4. 이미지 대체 텍스트 테크닉(Image Replacement Technic)

웹페이지에 이미지를 올리면 html 속성으로 다음과 같이 alt에 대체 텍스트를 사용합니다.

<h1><img src=”title-image.gif” alt=”Web Design Photoshop” /></h1>

이 대체텍스트라는 것은 검색에 필요하므로 반드시 넣어야하는 것으로 알고 있지만 반드시 그런 것도 아닙니다. 원래는 인터넷 속도가 느리던 시절 이미지가 포함된 웹페이지를 보려면 이미지가 다운로드 될때까지 한참을 기다려야하기 때문에 글자만 보고 싶을때는 이미지가 안보이게 설정하거나 또는 눈이 안보이는 분들을 위해 스크린리더(Screen Reader)를 사용하는 경우 이미지 대신에 나타나도록 하는 기능을 했습니다. 하지만 웹사이트 운용자들이 이 대체텍스트에 많은 키워드를 삽입해서 웹페이지에 검색이 많이 되도록 악용하므로 검색엔진들은 이를 무시합니다. 그러니 이 대체텍스트를 넣는다고 해서 검색에 도움이 되는 것은 아니죠. 다만 이미지가 안나타날 경우에만 대신해서 이 이미지가 뭐라는 의미의, 말 그대로 대체(Alternative) 텍스트로서의 역할을 할 뿐입니다.

그런데 위의 예에서처럼 웹사이트에 타이틀 로고를 사용한 경우 이미지를 넣게 되는데 로고는 아주 중요하므로 대체텍스트만 넣어서는 안되죠. 그래서 사용하는 것이 text-indent라는 속성입니다. 검색엔진은 <h1> 태그를 아주 중요하게 생각하므로 가장 우선순위로 검색대상이 됩니다. 아무리 alt텍스트를 많이 넣어도 무시되니 이 <h1>태그는 반드시 사용해야 검색노출에 도움이 됩니다.

다음과 같은 방법으로 CSS에서 정의하면 됩니다.
<h1>Web Design Photoshop</h1>
h1 {
background: url(title-image.gif) no-repeat;
height: image height
text-indent: -9999px;
}

이렇게 타이틀 제목은 <h1>태그에 의해 검색에 상위를 차지하고 텍스트는 text-indent속성에 의해 9999픽셀만큼 화면의 좌측으로 이동하므로 화면상에 나타나지 않고 배경 이미지인 title-image가 나오게 됩니다. 원하는 이미지를 사용할 수 있는 동시에 검색에도 도움이 되는 방법이 됩니다.

포토샵 – 종이 상자 만들기

무료 액션파일을 이용하여 사진이 붙여진 큐브를 만드는 방법을 알아봅니다. 이곳 을 클릭하여 액션을 다운 받습니다. 링크를 클릭하여 사이트에서 하단에 다운로드 버튼을 클릭하면 받을 수 있습니다. 포토샵 버전과 포토샵 엘리먼트버전이 있습니다. 포토샵버전을 다운 받으세요. 다운받은 후 압축을 풀면 액션파일이 있습니다. 더블클릭하면 포토샵에 설치됩니다.

 

메뉴에서 윈도우-액션을 선택하면 액션패널이 나오고 하단에 설치된 액션셋이 나옵니다. 이름 앞의 작은 세모를 클릭하여 폴더를 열면 3가지 액션이 있습니다. 첫번째 액션인 ReadMe_first를 선택하고 플레이버튼을 클릭하면 첫번째 메시지창이 나옵니다. 사진 상자를 만들기 위해서 우선 사진을 잘라서 저장해야한다는 메시지입니다. Continu 버튼을 클릭하면 두번째 메시지가 나옵니다. 사진을 처음 메시지내용대로 자르지 않으면 액션이 자동으로 리사이즈하기 때문에 왜곡이 일어난다는 내용입니다. 그리고 프린트할때 반드시 포트레이트(세로로 길게)형태로 인쇄하라는 내용입니다.

상자에 붙일 사진을 열고 C키를 누르면 자르기툴이 선택됩니다. 두가지 액션이 있는데 사진을 하나만 사용하여 상자의 5면에 붙이는 액션과 5가지 사진을 붙이는 액션입니다. 여기서는 하나의 사진만 사용해서 사진을 붙입니다. 옵션바에서 747px를 입력합니다. 747을 입력하고 우클릭해서 단위를 선택해도 됩니다. 탭키를 누르고 747px입력하고 다시 탭키를 누르고 300을 입력합니다. 기본단위가 픽셀로 되어있는 경우는 px를 입력하지 않아도 됩니다

1에서 2로 클릭드래그합니다. 툴의 내부를 클릭드래그하여 위치를 조정한 다음 4의 체크마크를 클릭합니다. Ctrl+Shift+S키를 누르면 다른이름으로 저장하기 창이 나옵니다. 적당한 이름을 넣고 저장버튼을 클릭합니다.

1의 1 Image액션을 선택하고 플레이버튼을 클릭하면 A4용지크기의 문서가 만들어지면서 메시지창이 나옵니다. 이전에 저장한 이미지를 열라는 내용입니다. Continue버튼을 클릭하면 브라우저 창이 나옵니다. 저장한 이미지를 선택하고 열기버튼을 클릭하면 액션이 계속 진행됩니다.

액션이 완료되면 1처럼 종이상자를 만들 수 있는 전개도 형태의 이미지가 됩니다. 메시지창이 나오는데 가위로 경계선을 따라서 잘 자르고 가위를 사용하면 위험하니 아이들이 직접하게 하지 마세요. 자른 다음에는 접힐 부분을 자로 대고 끝이 뭉툭한 송곳이나 볼펜을 사용하여 그어주면 잘 접힙니다. 날개부분에 풀칠하여 붙이면 완성입니다.

5장의 사진을 이용하려면 5개의 이미지를 미리 자르기툴로 잘라놓아야합니다. 5 Images 액션을 선택하고 플레이버튼을 클릭하면 이미지를 열라는 메시지창이 나옵니다. 선택하면 이미지가 A4용지에 배치되고 다음 이미지를 선택하라는 메시지가 나옵니다. 브라우저창에서 선택하고… 5장의 이미지가 다 선택되면 액션이 진행되고 완료됩니다. 프린트할때는 항상 세로방향을 선택하고 인쇄하세요.