HTML5 CSS3 튜토리얼 – 리본 형식의 헤더 만들기.

레노버 영문 사이트를 보시면 NEWS AND ALERTS 부분이 있습니다.

여기 보시면 입체감 있는 빨간 리본이 있을겁니다.

오늘은 이런 리본 헤더 부분을 이미지 없이 순수 HTML/CSS로 만들어 보겠습니다.

먼저 렌더링 결과를 보시겠습니다.

레노버 디자인보다 못하지만 목표대로 나왔습니다.

이제 어떻게 만드는지 마크업부터 보시겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DJ Defense</title>
</head>
<body>
  <div class=”aside”>
    <h1>Welcome Menu</h1>
    <div class=”ribbon”>DJ Defense</div>
    <ul>
      <li><a href=”#”>Menu 1</a></li>
      <li><a href=”#”>Menu 2</a></li>
      <li><a href=”#”>Menu 3</a></li>
      <li><a href=”#”>Menu 4</a></li>
      <li><a href=”#”>Menu 5</a></li>
    </ul>
    <div class=”ribbon”>By Composite</div>
    <ul>
      <li><a href=”#”>Menu 6</a></li>
      <li><a href=”#”>Menu 7</a></li>
      <li><a href=”#”>Menu 8</a></li>
      <li><a href=”#”>Menu 9</a></li>
      <li><a href=”#”>Menu 0</a></li>
    </ul>
  </div>
</body>
</html>

배경이 어두워서 일부러 밝은색을 사용했습니다. 글쓸때 너무 힘듭니다..ㅋㅋ

여기서 주목하실 부분은 바로 빨간 부분입니다. div 태그가 딸랑 하나 있습니다.

그 외에는 아무것도 없습니다. 그럼 어떻게 합니까?

바로 CSS 되겠습니다.

CSS2 표준에 재정이되어 있는 가상 컨텐츠 영역인 :before 와 :after 가 있습니다.

이 두녀석이 있으면 가상까지 합해 총 3개의 요소로 갖고 놀 수 있습니다.

여기서 :before 는 그림자를, :after 는 리본 입체 역할을 담당했습니다.

먼저 소스를 보여드리겠습니다.

.aside{background-color:#ccc;margin-left:2em;font:bold 1.5em verdana;width:480px;float:right;}
.ribbon{
  background:darkred;color:white;
  position:relative;z-index:0;margin-left:-1em;margin-top:1em;
  padding-left:1em;
  text-transform:uppercase;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ribbon:after{
  display:block;z-index:-2;
  border-top:0;
  border-bottom:.75em solid transparent;
  border-left:1em solid transparent;
  border-right:1em solid darkred;

  content:”;position:absolute;margin-left:-2em;
}
.ribbon:before{
  display:block;content:’ ’;position:absolute;z-index:-1;
  width:100%;
  -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, .75);
  -moz-box-shadow:    0px 5px 5px rgba(50, 50, 50, .75);
  box-shadow:         0px 5px 5px rgba(50, 50, 50, .75);

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left:-1em;
}

먼저 리본 헤더의 기본 스타일은 겹치는 부분을 제외한 기본적인 스타일을 입히시면 됩니다.

이때 중요한 거는 리본이 앞으로 나와서 겹쳐야 하기 때문에 왼쪽 여백을 오히려 바깥으로 나가게끔 하는 것이 포인트!

그런 다음에 안쪽 여백을 통해 다시 돌려주면은 원래대로 돌아간 것처럼 실행할 수 있습니다.

중요한 거는 상대 위치로 지정하고 z-index를 지정해야 합니다. 그래야 하위 가상 요소의 표시 순서를 잡을 수 있습니다.

그리고 리본 겹치는 부분입니다. 리본 겹치는 부분은 after 로 줬습니다.

왼쪽 위에서 아래로 대각선으로 쭈욱 이어지는 삼각형 만들기의 비법은 바로 테두리 에 있습니다.

테두리로 삼각형 만드는 비법에 자세한 설명은 링크를 참조하시면 되겠습니다. firejune 님이 가장 잘 설명해 주셨더군요.

http://firejune.com/1533

리본 삼각형을 잡도록 위쪽 테두리를 없애고, 옆테두리에 100%를 부여할 경우 아래 테두리를 75% 정도로 크기를 부여했습니다.

그리고 왼쪽 및 아래쪽 테두리를 투명 표시 해서 오른쪽 테두리를 표시하게 하면 리본에 나오는 삼각형 만들기는 끝입니다.

그리고 절대 위치를 지정해서 표시 순서를 잡습니다. 위치는 지정하실 필요 없고 여백 조정을 통하여 상대 위치를 지정해 주면 됩니다.

여기서는 부모 여백의 2배 값으로 설정했습니다. 즉, 부모의 밖으로 빼낸 마진의 절대값+안쪽 여백값이 되겠습니다.

중요한 것은, content 속성을 부여해야 합니다. 또한 비어 있어야 합니다. 그래야 테두리가 표시되기 때문입니다.

마지막으로 그림자 부분입니다. 그림자는 CSS3 box-shadow 속성을 사용했습니다.

그리고 절대 위치로 잡은 뒤 여백은 부모와 똑같이 겹치도록 한 다음 표시 순서를 뒤로 잡습니다.

표시 순서는 부모>before>after 순으로 잡도록 설정해 주시면 되겠습니다.

이제 중요한 것은 content 속성을 부여해야 하는데, 빈 문자를 줘야 합니다. 스페이스바 공백은 안먹힙니다.

그래서 한글 ㄱ->한자->1번 문자를 통하여 공백을 표시했습니다. &nbsp;도 안먹히니 조금 슬프지만 이렇게라도 했습니다.

안그러면 그림자 표시가 안됩니다.

이렇게 하시면 완성입니다. 어때요. 참 쉽죠?

적용 예제 링크를 보여드리며 이번 강좌를 쿨하게 마치도록 하겠습니다.

<

p style=”text-align: left; clear: none; float: none;”>http://jsbin.com/usawah/2

composite / 2012년 12월 5일 / 미분류
태그:, , , ,

답글 남기기

Your email address will not be published / Required fields are marked *