다른 워드프레스 블로그
그동안 많은 UI개발자들의 꿈(?) 이었던 rounded border 이다.
기존에는 box를 라운드처리 하기 위해서는 이미지를 잘라서 각 코너에 입히는 방식으로 적용할 수 있었다.
하지만 border-radius를 사용하면 사각형만 표현할 수 있었던 box의 border에 라운드 처리를 할 수 있다.
border-radius: 12px;사용법은 간단하다. 위의 12px;이라 적힌 부분에 원하는 값을 입력해 주면 된다.
CSS3에서 새롭게 보여지는 속성인 box-sizing 이다.
기존의 box 크기가 padding과 border를 합한 값 이었지만, box-sizing을 적용하면 오직 width값과 height값만 적용이 된다.
예를 들어, width:100px; height:100px; 인 box가 있다고 하자.
여기에 padding:10px; 에 border:5px solid red;가 있으면 기존에는 이 박스의 실제 랜더링된 크기는 width:70px; height:70px;로 보여질 것이다. 하지만 box-sizing을 적용하면 width:100px; height:100px; 로 보여진다.
적용 방법은 간단하다.
적용시킬 element 에 아래의 스타일만 추가해주면 된다.
box-sizing:border-box;오직 CSS3 만으로 이루어진 Accordion 메뉴 이다.
자세한 설명은 CSS에 주석으로 처리 했으니 별로 어려울 만한건 없다.
주목해야 할 것은 transition 과 :target, 그리고 .large:target 이다.
예제보기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title>Accordion</title>
<style type="text/css">
.accordion {width:500px; margin:2em auto; padding:1em; font:12px 돋움; background:#eee;}
.accordion h2 {margin-top:0;}
.accordion .section {padding:0 1em; border-bottom:1px solid #ccc; background:#fff;}
.accordion h3 {margin:0;}
.accordion h3 a {display:block; padding:1em 0; font-weight:normal; color:#666; text-decoration:none;}
.accordion h3 a:hover {text-decoration:underline;}
.accordion h3 + div {height:0; overflow:hidden; -webkit-transition:height 0.3s ease-in;} /* 기본 컨텐츠 값 */
.accordion :target h3 a {font-weight:bold; text-decoration:none;} /* #값 으로 이동했을 때(선택했을 때) a 의 값 */
.accordion :target h3 + div {height:100px;} /* #값으로 이동했을 때(선택했을 때) div(컨텐츠) 값 */
.accordion .section.large:target h3 + div {overflow:auto;} /* 컨텐츠가 넘칠 경우 scroll 적용 */
</style>
</head>
<body>
<div class="accordion">
<h1>Accordion</h1>
<h2>원리</h2>
<p>링크값을 페이지내 이동시키는 값으로 입력(ex>#one), 그러면 해당 target이 된 id값의 하위 속성에 열렸을 때 style을 줘서 accordion 처럼 응용시킨 것. :target이 이동되었을 때(열렸을 때)의 속성을 나타낸다. 여기에 transition값을 입력하여 자연스럽게 연출</p>
<div id="one" class="section">
<h3>
<a href="#one">Heading 1</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="two" class="section">
<h3>
<a href="#two">Heading 2</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="three" class="section">
<h3>
<a href="#three">Heading 3</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
</div>
</div>
<div id="four" class="section large">
<h3>
<a href="#four">Heading 4</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="five" class="section">
<h3>
<a href="#five">Heading 5</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div id="six" class="section">
<h3>
<a href="#six">Heading 6</a>
</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</body>
</html>