플래쉬보다 쉽게 구조화되고 다이내믹한 메뉴 만들기

이 강좌는 월간 w.e.b. HOW TO 2011년 05호에 게재되어 있습니다.

지금까지의 큰 두 가지 메뉴 개발방법은 대표적으로 TABLE로 작성한 후 스크립트를 이용하여 이미지 롤오버, 아웃 방식으로 구현을 하였거나 또 다른 방법은 오브젝트(플래시)형식의 메뉴를 구성해서 처리해왔다.

현재도 많은 사이트들이 구조화 되지 않고 단지 디자인에 중점을 두거나 기존개발 방법을 고수하여 사이트 개발이 되고 있으며 운영중인 사이트도 많은 것이 현실이다. 하지만 웹표준 및 시멘틱 웹에 대한 관심이 날로 높아짐에 따라 의미 있게 구조화된 여러 가지 메뉴 개발 방법론이 생겨났으며 그에 따른 표현의 한 방법인 CSS의 활용도 더욱 다양하게 발전했다. 이번 장에선 HTML 마크업과 CSS를 위주로 의미 있게 구조화된 메뉴를 구성해 볼 것이다.

연재순서

  1. CSS 선택자(Selector)의 종류 및 간단한 효과주기
  2. CSS3를 이용해 다양한 타이포그래피(Typography) 만들기
  3. CSS3를 이용한 이미지편집/효과주기(2D/3D)
  4. 플래시보다 쉽게 구조화되고 다이내믹한 메뉴 만들기
  5. 툴을 이용하여 애니메이션을 만들어보자!

본 CSS3 독자들은 DOM(Document Object Model)이란 말을 물론 들어 봤을 것이다. DOM은 웹표준에 빠져서는 안될 개념이며 그 중 가장 큰 특징은 특정 문서의 객체(노드)에 접근하여 제어를 가능하게 한다. 그래서 프로그래밍언어에서 HTML이나 XML문서를 다루는데 사용하는 API라 할 수 있다.그렇다면 우리는 왜 DOM에 맞추어 구조화된 메뉴를 구성해야 할까?

가장 큰 이유는 웹브라우저 및 검색 로봇이 보다 정확하게 해석하고 정보화 할 수 있도록 그에 맞는 형식으로 맞춰주기 위해서이다. 그 결과로 기존의 컨텐츠가 보다 의미 있는 정보로 재가공 될 수도 있으며 접근과 제어가 용이해지는 장점이 있다.

1. 개요

웹사이트 개발 시 필수적으로 또한 선택적으로 여러가지 타입의 메뉴를 구성한다. 그 중에서 흔하게 볼 수 있는 레이아웃 형태에서의 대표적인 메뉴가 상단GNB 영역과 서브페이지의 왼쪽LNB 영역 메뉴다. 일단 메뉴 만들기에 앞서서 메뉴를 만드는 순서를 알아둘 필요가 있다. 사이트 개발 시 컨텐츠 중요성 못지않게 메뉴 네비게이션이 중요하다. 일반적인 메뉴관련 개발 flow는 아래와 같다.

구조화된 메뉴를 위한 2DEPTH 메뉴(GNB/LNB) 만들기 기본 순서

  1. 사이트 기획에 따라 메뉴 구조(1~2Depth) 구성하기
  2. 구조화된 .HTML(구조) 마크업
  3. CSS(표현)로 디자인
  4. 스크립트(동작)처리

좀 더 다이내믹한 메뉴 구성을 위해 생각해 볼 점

  1. CSS3 연재 1회에서 배웠던 CSS3용 선택자를 적극적으로 활용하자.
  2. 메뉴를 위한 애니메이션 효과를  적절하게 추가해보자.
  3. 좀 더 다양한 메뉴를 찾아보고 구조를 파악해 보자.

예제 실습하기에 앞서 본 강좌에서는 스크립트 부분은 되도록이면 제외키로 하고 HTML마크업과 CSS만으로 예제를 꾸며 보았으며 여기에 동적인 동작을 추가하기 위해 JQuery 같은 스크립트 API를 활용한다면 좀 더 다양한 효과를 보여줄 수 있을 것이다.

2. 기본 서브 LNB 메뉴

이번에 배울 LNB 서브메뉴는 CSS3 속성 중 모서리 둥글게 하는 효과(border-radius)와 CSS3용 선택자 중 하나를 골라 학습해 보고 다음 RGBA, Opacity, text-shadow, gradient, box-shadow등 시각적인 효과를 내는 다양한 속성을 적용해 보자. (참고로 예제는 구글 크롬 9.0.X 및 사파리 5.0.4에서 테스트하였다.)

일단 HTML 코드에는 7개의 메뉴를 만들었고 순서 없는 리스트인 <ul>을 사용하여 마크업을 하였다. <li>안에 <a>태그로 메뉴를 감싸고 맨 마지막임을 알리는 last 클래스를 넣었다. 제일 마지막 적용결과에 보면 last 클래스가 적용된 메뉴 border값에 red가 들어가 있어 맨 아래7번째 메뉴 테두리에만 빨간색 border가 적용된 것을 확인 할 수 있을 것이다.

아래 마크업은 기존 css2버전에 보편적으로 사용하던 데로 마크업 한 것인데 CSS3를 배움으로서 더 class와 id값을 태그에 넣어서 제어를 했었던 부분들을 많이 줄일 수 있게 되었다.

일단 기본 코드 입력 후 하나하나 변경해 보자!

STEP1. HTML

<ul class="lnb">
  <li><a href="URI">Menu1</a></li>
  <li><a href="URI">Menu2</a></li>
  <li><a href="URI">Menu3</a></li>
  <li><a href="URI">Menu4</a></li>
  <li><a href="URI">Menu5</a></li>
  <li><a href="URI">Menu6</a></li>
  <li class="last"><a href="URI">Menu7</a></li>
</ul>

<ul>을 제어 할 수 있게 lnb라는 클래스명을 삽입하였다.

CSS에서 lnb 클래스명으로 각 노드에 접근하여 다양한 표현들을 해 볼 것이다..

STEP2. CSS

.lnb {
  width: 200px;  /* 기본 메뉴 width 사이즈 */ margin: 0; padding: 0; 
 }
.lnb li {
  list-style-type: none;  /* 기본 리스트타입에 있는 내용을 보여주지 않게 처리 */
  margin-bottom: 2px; 
 }
.lnb li a { 
  display: block; /* 원래 a태그는 inline이지만 마우스 선택 영역을 잡기 위하여 변경 */ 
  width: 100%; 
  padding: 5px 0; 
  text-indent: 8px; 
  text-decoration: none; 
  color: #666; 
  font: bold 12px "굴림"; 
  background: #ccc; 
  border: 1px solid #aaa; /* 기본적인 border값을 준 후 테두리를 둥글게 처리 */ 
  -moz-border-radius:15px; 
  -webkit-border-radius:15px; 
  -border-radius:15px; 
} 
.lnb li a:hover { 
  background: #666;
  color: #fff; 
}
.lnb li.last a { 
  border: 1px solid red; 
}

메뉴버튼 테두리 border값을 줄 때엔 “border: 1px solid #aaa;” 과 같이 기본적인 border값을 준 후 테두리를 둥글게 처리하는 속성을 적용한다.

CSS는 기본적으로 맨 마지막에 정의된 속성이 적용되기 때문에 브라우저 벤더별 속성은 먼저 적용하고 표준속성을 맨 나중에 기술하여 현재 각 브라우저에서 지원하지 않더라도 최신 브라우저로 업데이트 되어 속성을 지원하면 맨 마지막의 표준속성을 지원할 것이기 때문에 아래와 같이 표기한다.

-moz-border-radius:15px;
-webkit-border-radius:15px;
-border-radius:15px;

그리고 위에서 말했듯이 맨 마지막 메뉴 표시를 위해

.lnb li.last a {
  border: 1px solid red;
}

를 주었다.

STEP3. 적용결과

위와 같이 마우스를 메뉴에 롤오버 했을 때 Menu5처럼 짙은 회색톤의 메뉴가 나타나며 Menu7과 같이 빨간색 테두리를 가진 메뉴도 표시된 것을 볼 수 있다.

이미 말했지만 Menu7을 기존에 선택하던 방법으로 적용한 것이며 아래엔 CSS3 선택자를 이용해 변경해 보았다.

/* 기존 코드는 주석처리를 하고
.lnb li.last a{
  border: 1px solid red;
}
*/

.lnb li:last-child a{ /*li태그의 last-child의 a 태그 border color값을 blue로 변경하였다.*/
  border: 1px solid blue;
}

위와 같이 CSS를 작성한다면 기존 HTML 마크업의 <li> 부분은 클래스부분을 빼고 간결하게 <li>로 변경될 수 있다.

변경결과

위와 같이 이미지를 하나도 사용하지 않으면서 간결한 메뉴를 만드는 것이 아주 쉽게 CSS코드 몇 라인으로 해결되었으며 디자인이 마음에 들지 않거나 탬플릿 형태로 다양하게 변경하고자 원한다면 HTML코드를 수정하지 않고 단지 CSS만을 수정 및 교체작업을 통해 다양한 디자인을 적용시킬 수 있다는 것이 가장 큰 매력이다.

선택자와 시각적인 효과를 나타내는 CSS속성을 좀 더 다양한 조합하여 아이디어와 함께 새롭고 신선한 결과물을 얻는데 그리 힘들지 않을 것이다.

3. 주(GNB)메뉴 만들기

이제 기본적인 서브메뉴를 만들어 보았으니 주 메뉴를 만들어 볼 차례이다. 기존 CSS2에서 많이 다뤘었던 메뉴에 부가적인 속성들을 추가해서 0.5 버전 정도의 메뉴를 만들 것이다.

이해를 돕기 위해 필자는 병원웹사이트를 만든다고 생각하고 메뉴를 구성을 할 것이고 아래와 같이 순서를 먼저 정리해 놓고 작업을 진행하는 형식으로 예제를 만들어 볼 것이다.

GNB 2Depth 메뉴 만들기 순서

  1. 병원사이트사이트 기획에 따라 메뉴 구조(1~2Depth) 적절하게 구성하기
  2. 구조화된 HTML(구조) 마크업
  3. CSS(표현)로 디자인
  4. 롤오버 효과 적용
  5. 완성된 결과 페이지
  6. 더 완성도 높은 메뉴를 위해 고려해야 할 부분 생각해 보기(선택메뉴처리 적용, 모션처리)

위와 같이 6가지 정도로 순서를 정해 보았는데 좀 더 Detail한 순서를 정하여 개발하는 연습을 계속 할 수록 좀 더 크고 어려운 프로젝트도 진행 할 수 있는 안목이 생길 것이다.

이제 구성해 놓은 순서대로 하나하나씩 진행해 결과물을 얻어 보자.

3-1) 구조화된 메뉴 구성하기

1~2 Depth 메뉴의 개수 및  내용정의하기

1Depth메뉴는 병원소개 / 진료안내 / 의학정보 / 예약하기 / 게시판 이렇게 메뉴명을 5개로 정했으며 각각의 메뉴 밑으로 2Depth 메뉴명도 아래와 같이 정했다.

[표3-1]
병원소개 진료안내 의학정보 예약하기 게시판
인사말
연혁
조직도
주요업무
의료진
진료일정
외래진료안내
입/퇴원안내
건강검진
소아청소년과
치과
내과
외과
재활의학과
예약안내
온라인예약
예약확인
FAQ
Q&A
새소식
자료실

Depth별 메뉴명을 정했으니 이제 기본 뼈대가 되는 HTML 마크업을 작성해야 하는데 표3-1을 기준으로 작성해 보도록 하겠다.

먼저 1depth 5개의 메뉴를 <ul></li>에 리스트 형태로 적어준 뒤 2Depth는 하위 <li>에 기술한다.

3-2)  HTML 마크업

<ul id="gnb">
  <li><a href="#">병원소개</a> /* 1Depth메뉴 5개를  표기 */
    <ul>
      <li><a href="#">인사말</a></li>/* 2Depth메뉴를  표기 */
      <li><a href="#">연혁</a></li>
      <li><a href="#">조직도</a></li>
      <li><a href="#">주요업무</a></li>
    </ul>
  </li>
  <li><a href="#">진료안내</a>
    <ul>
      <li><a href="#">의료진</a></li>
      <li><a href="#">진료일정</a></li>
      <li><a href="#">외래진료안내</a></li>
      <li><a href="#">입/퇴원안내</a></li>
      <li><a href="#">건강검진</a></li>
    </ul>
  </li>
  <li><a href="#">의학정보</a>
    <ul>
      <li><a href="#">소아청소년과</a></li>
      <li><a href="#">치과</a></li>
      <li><a href="#">내과</a></li>
      <li><a href="#">외과</a></li>
      <li><a href="#">재활의학과</a></li>
    </ul>
  </li>
  <li><a href="#">예약하기</a>
    <ul>
      <li><a href="#">예약안내</a></li>
      <li><a href="#">온라인예약</a></li>
      <li><a href="#">예약확인</a></li>
    </ul>
  </li>
  <li><a href="#">게시판</a>
    <ul>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Q&A</a></li>
      <li><a href="#">새소식</a></li>
      <li><a href="#">자료실</a></li>
    </ul>
  </li>
</ul>

마크업을 할 때 항상 고려해야 할 부분은 얼마나 구조적이며 의미에 맞게 구현하느냐이다.

HTML 마크업은 메뉴로 할 <ul>부분에 gnb라는 id값을 주어 그것을 통하여 CSS로 제어를 할것이며 그 안에 메뉴리스트는 순서 없는 <ul> 을 사용하고 각 <li>에 1Depth와 2Depth 메뉴를 넣었다.

코드가 길어서 복잡해 보이지만 사실 알고 보면 5번의 반복된 형태로 메뉴 하나의 코드만 알면 쉽게 접근할 수 있다.

3-3)  CSS

각 메뉴 노드에 접근하기 위해 CSS3를 포함한 여러가지 선택자를 사용하였으며 id, class는 모두 표기 후 설명을 아래에 따로 정리하였다.

body {
  font: normal 1em "돋움",Dotum;
  background: #fff;
  color: #666;
}

/* gnb 사이즈 및 배경색상 및 둥근 테두리 */
#gnb {
  width:700px;
  margin: 0;
  padding: 5px 6px;
  background: #000;
  line-height: 100%;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#999), to(#333));
  background:gradient(linear, 80% 20%, 10% 20%, from(#999), to(#333));
}
/* gnb li 1Depth 메뉴 레이아웃 기본 속성 */
#gnb li {
  margin: 0 5px;
  padding: 2px 8px;
  float: left;
  position: relative;
  list-style-type: none;
}
/* gnb 링크 */
#gnb a {
  display: block;
  margin: 0;
  padding:  8px 20px;
  font-size:18px;
  font-weight: bold;
  color: #eee;
  text-decoration: none;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 2px 2px rgba(10,10,10, .5); /* 1Depth 메뉴에 2px 그림자효과 줌 */
}
#gnb a:hover {
  background: #000;
  color: #fff;
}

/* 1Depth 메뉴 hover 시 */
#gnb li:hover > a {
  color: #fff;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#33ffff), to(#3399ff));
  background:gradient(linear, 80% 20%, 10% 20%, from(#33ffff), to(#3399ff));
}
/* 2Depth 메뉴 hover 시 */
#gnb ul li:hover a, #gnb li:hover li a {
  background: none;
  border: 0 none;
  color: #333;
  font-size:14px;
  font-weight: normal;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#gnb ul a:hover {
  background: #0066cc !important;
  color: #fff !important;
  -webkit-border-radius: 15px;
  -moz-border-radius:  15px;
  border-radius: 15px;
}

/* #gnb li:hover된 요소의 자식인 ul요소 선택 마우스 롤오버시 드롭다운 */
#gnb li:hover > ul {
  display: block;
}

/* 2Depth 메뉴 레이아웃 그리기*/
#gnb ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 200px;
  position: absolute;
  top: 36px;
  left: 20px;
  background: #eee;
  border: solid 1px #bbb;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(10,10,10, .2);
  -moz-box-shadow: 0 1px 5px rgba(10,10,10, .2);
  box-shadow: 0 1px 5px rgba(10,10,10, .2);
}
#gnb ul li {
  float: none;
  margin: 0;
  padding: 0;
}

#gnb ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #fff;
}

/* float 해제 */
#gnb:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

CSS코드를 보자면 맨 위에 body에 대한 기본적인 속성을 주었고 #gnb에 메뉴레이아웃 사이즈 및 배경색상 그리고 둥근 테두리 border값, gradient값을 각각 주었다.

-webkit-border-radius: 15px;  /* 웹킷 엔진 벤더별 속성 */
-moz-border-radius: 15px;  /* 모질라 엔진 벤더별 속성 */
border-radius: 15px; /* 표준속성은 제일 나중에 표기 */
background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#999), to(#333));
background:gradient(linear, 80% 20%, 10% 20%, from(#999), to(#333));

gnb메뉴 a태그에 마우스클릭 할 수 있는 유효영역을 만들고 메뉴텍스트에 효과를 넣어주었음.

#gnb a {
  display: block;
  margin: 0;
  padding:  8px 20px; /* 1Depth 메뉴의 마우스 클릭영역 만들기 */
  font-size:18px;
  font-weight: bold;
  color: #eee;
  text-decoration: none;
  /* 메뉴형태를 갖추기 위하여 padding값과 메뉴텍스트에 값을 넣음 */
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-shadow: 0 2px 2px rgba(10,10,10, .5); /* 1Depth 메뉴에 2px 그림자효과 줌 */
}

3-4) 롤오버 효과 적용

/* 1Depth 메뉴 hover 시 초기값 설정 */
#gnb a:hover {
  background: #000;
  color: #fff;
}

/* 1Depth 메뉴 hover 시 자식 노드인 a 선택 (IE7이상에서 지원함) */
#gnb li:hover > a {
  color: #fff;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#33ffff), to(#3399ff));
  background:gradient(linear, 80% 20%, 10% 20%, from(#33ffff), to(#3399ff));
  /* gradient값을 주어 hover시 1Depth의 배경이 바뀜 */
}

/* 2Depth 메뉴 hover 시 */

#gnb ul li:hover a, #gnb li:hover li a {
  background: none;
  border: 0 none;
  /* 상위 1Depth에서 적용되었던 background와 border 값을 초기화시킴 */
  color: #333;
  font-size:14px;
  font-weight: normal;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}

/*상위 1Depth에서 적용되었던 box-shadow 값을 초기화시킴 */
#gnb ul a:hover {
  background: #0066cc !important;
  color: #fff !important;
  -webkit-border-radius: 15px;
  -moz-border-radius:  15px;
  border-radius: 15px;
}

2Depth메뉴가 hover시 실행되는 CSS로서 배경색상을 #0066c로 적용시키고 폰트 색상은 #fff로 맞춘다. 메뉴 테두리는 border-redius로 둥글게 테두리를 만든다. #gnb li:hover된 요소의 자식인 ul요소 선택시 2Depth 메뉴가 display:block 되면서 드롭다운 효과를 낸다.

#gnb li:hover > ul {
  display: block;
}

2 Depth의 메뉴구성 레이아웃 박스를 그리는 CSS로서 초기에 display:none로 설정해놔 페이지를 읽을 때엔 아무런 2Depth 메뉴가 나타나지 않게 된다.

#gnb ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 200px;
  position: absolute;
  top: 36px;
  left: 20px;
  background: #eee;
  border: solid 1px #bbb;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 5px rgba(10,10,10, .2);
  -moz-box-shadow: 0 1px 5px rgba(10,10,10, .2);
  box-shadow: 0 1px 5px rgba(10,10,10, .2);
/* 2Depth 메뉴 레이아웃 box-shadow 효과 */
}
/* 2Depth 메뉴 리스트 초기화 */
#gnb ul li {
  float: none;
  margin: 0;
  padding: 0;
}
/* 2Depth 메뉴 텍스트 효과 적용 */
#gnb ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #fff;
}
/* gnb 이후 생성된 요소에 float 해제 (IE8이상 적용) */
#gnb:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

3-5) 완성된 결과 페이지

3-6) 더 완성도 높은 메뉴를 위해 고려해야 할 부분 생각해 보기(선택메뉴처리 효과, 모션처리)

지금까지 만든 것만으로도 메뉴의 기본기능은 할 수 있다. 하지만 좀 더 완성도 높게 만들려면 사용자측 스크립트나 서버측 스크립트를 추가하여 기존에 메뉴를 선택한 적이 있으면 기억하고 있다가 롤아웃되면 다시 기존에 선택되었던 메뉴를 롤오버 시키는 처리 라던지 아니면 좀 더 부드럽게 슬라이드 되는 액션을 넣고 싶다면 본 연재 초반에 언급한 JQuery같은 JS API를 추가한다면 원하는 기능의 메뉴를 구성할 수 있을 것이다.

보완해야 할 점과 좀 더 생각해 볼 문제

  1. 처음에 Depth별 메뉴구조를 잘 구성해야 한다.
  2. 메뉴의 모션처리 시 과도한 액션으로 인해 접근성이나 사용성이 낮아져서는 안 된다.
  3. 기존 선택되었던 메뉴는 현재페이지에서 선택하여 표시해 줘야 한다.

5. 마치며

지금까지 메뉴구성을 위한 HTML마크업과 CSS의 여러가지 함수들을 다루어 보았다.

본 연재에 기재된 코드를 모아서 간단하게 HTML과 CSS만으로 충분히 훌륭한 2Depth 메뉴를 구성할 수 있으며 본 예제를 기초로 좀 더 살을 붙여 활용한다면 JS없이 CSS만으로도 구현이 가능할 것이고 또한 이미지를 넣지 않고도 충분히 디자인적인 부분에서도 만족할 수 있을 것이라 생각된다.

매 연재 때마다 얘기한 부분이지만 일단 웹킷 계열에서 작성하여 테스트해 볼 것을 권장하며 원하는 결과를 얻을 수 있을 것이다.

다음 연재엔 마지막 5회차이며 CSS3로 할 수 있는 무궁무진한 가능성이 있는 애니메이션 기능에 대하여 간단한 애니메이션을 개발툴을 사용하여 제작하는 방법과 하드코딩하여 제작하는 방법 두 가지 모두 알아볼 것이다.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.
  • Pingback: 툴을 이용하여 애니메이션을 만들어보자! | Clearboth()

  • 잘보고갑니다. :D 너무너무유용해요 ㅎㅎ

  • Anonymous

    감사합니다. 재현님께 도움이 되었다고 하니 기분이 좋네요.

  • 네..감사합니다. 더 좋은글 올릴께요

  • 리소앙

    CSS에 대해 더 많은 매력을 느끼고 가네요.
    그런데 이 글은 불여우(FF)에서만 가능해요.
    IE(Internet Explorer)에서는 어떻게 하는지요?
    여하튼 좋은 글 잘 보고 갑니다.
    앞으로 더 좋은 글 올료주세요.

  • 리소앙님 답변이 늦었네요.포스트 글 올릴 당시에는 벤더 확장속성으로 표기가 되었습니다.
    IE에서 9발표후 CSS3많은 부분이 지원됩니다.http://msdn.microsoft.com/en-us/library/cc351024(v=VS.85).aspx#border에서 IE버전별로 지원되는 속성 확인해보시면 됩니다.^^예제에 주로 사용한 border-radius,border-shadow 등의 속성이 IE9에서 공식지원됩니다.감사합니다.