강좌 잘 꾸미는 법 (CSS 사용해보기)

 

강좌 잘 쓰는 법이라곤 하지만, 깔끔하게 정리하는 방법이라는게 더 어울리거 같습니다. ㅋ

제목이 본의아니게 낚시가 된거 같아서 살짝 바꿔보았습니다. ㅋ

 

이번엔 약간 고급 분야로 껑충 뛰어볼까 합니다.

(고급이라고 하지만 HTML CSS를 사용하실 줄 아는 분들은 아실 내용입니다.)

 

이번 강좌에서는 CSS를 사용한 조금 더 멋진 표현을 써보도록 하겠습니다.

 

지난 강좌에서 보면 forum에서 정의된 style 에 대해서 살펴본 적이 있습니다.

 

기억이 안나신다면 아래 링크페이지에 방문해 보세요~

 

강좌 잘 쓰는 법 (Style)

 

1. 그림 이냐구요?

 

위에 보시면 버튼으로 링크를 만들었습니다. 이미지 인거 같지만, 이미지가 아닙니다.

바로 CSS3 를 사용해서 만든 버튼입니다. 올ㅋ~

 

우선, 위의 소스 정보를 가져온 사이트 주소입니다.

 

출처 : http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/

 

위의 CSS3를 사용한 버튼 이미지를 제대로 보시려면, 크롬, 파이어폭스, 사파리... 그리고 ie9 이상 버전을 추천 드립니다.

그 외 다른 브라우저에서는 디자인이 깨질거예요 ㅠ.ㅠ

 

정상적인 모습은 아래와 같이 생겼습니다. 이쁘죠?

 

 button.png

 

2. 적용하는 방법

 

위의 디자인을 가지고 페이지에 직접 적용해보도록 하겠습니다.
글을 쓰는 메뉴에서 오른쪽 위에 [HTML 편집기] 메뉴를 눌러서 내용을 직접 추가해줄 것입니다.

 

 

처음에 글을 쓰게 되면 위와 같이 내용이 없거나 내가 글을 쓰고 있는 항목에 html 태그와 함께 적용되어 있을겁니다.

 

우선 가장 최상단에 아래 코드를 입력해줍니다. (조금 길어요....)

 

아래 내용에 빨간색으로 처리된 부분은 설정시 문제가 되는 항목이 있어서 일부러 이름을 변경했습니다.

button 이라는 이름인 경우 기존의 button 속성과 겹치기 때문에 기본 버튼의 모습이 변경되기 때문입니다.

 

그 다음 가로 길이가 정해져 있기 때문에 내가 원하는 내용을 다 보이기 하기 위해서 가로 사이즈를 변경하였습니다.

 

<style type="text/css">
<!--
.button_css {
  width: 150px;
  height: 24px;
  padding: 5px 16px 3px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #ccc;
  position: relative;
 
  /* Label */
  font-family: Lucida Sans, Helvetica, sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
 
.aqua {
  background-color: rgba(60, 132, 198, 0.8);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;
  -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
  -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}
 
.button_css .glare {
  position: absolute;
  top: 0;
  left: 5px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px 8px 8px 8px;
  height: 1px;
  width: 172px;
  padding: 8px 0;
  background-color: rgba(255, 255, 255, 0.25);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}
-->
</style>

 

위의 코드가 복잡해보여서 어려울거 같으시면 그대로 쓰면 됩니다!!!

 

단, 궁금하신 분들을 위해서 보충 설명을 드리도록 하겠습니다.

 

width, height 는 기본적으로 가로, 세로 크기를 정하는 것입니다.

-webkit- 이랑 -moz- 항목은 모든 브라우저에서 css를 적용할 수 없는 부분이 있어서 특정 속성 앞에 추가적으로 적어주기도 합니다.

 

orz... 머리 아프시죠?! 그냥... 그런게 있구나.. 하고 생각하시면 되요.

 

CSS 속성 설명

-webkit-

 chrome 과 safari 브라우저에서 표현할 때 적어줍니다.

-moz-

 mozila 나 firefox 브라우저에서 표현할 때 적어줍니다.

border-radius

 테두리 모서리를 둥글게 하기 위해 굴곡을 줍니다.

border

 테두리의 색과 모양을 정해줍니다.

text-shadow

 폰트에 그림자를 넣어줍니다.

background-color

 배경색을 정해줍니다.

 

CSS를 경험 해보신 분들이면 아시지만, 모르시는 분이 많으셔서 두통을 호소하시다는 분이 생겨서 바로 적용에 들어가보도록 하겠습니다.

 

 

3. 버튼 만들기

 

위의 스타일을 복사 - 붙여넣기 하셨으면, 이젠 실제 버튼 부분을 넣어볼 예정입니다.

 

아래 코드를 위와 같이 [HTML 편집기]를 통해서 붙여넣기 해줍니다.

 

<div class="button_css aqua">
    <div class="glare"></div>강좌 잘 쓰는 법 (Style)
</div>

 

위의 빨간색 부분을 쓰고 싶은 말을 적어줍니다.

 

그러면...

 

강좌 잘 쓰는 법 (Style)

 

와 같은 버튼이 생성되었습니다.

 

 

4. 아직도.... 모르겠어..

 

아직도 제대로 적용이 안되고 모르겠다고 하시는 분들은 먼저 아래와 같이 테스트 해보세요.

자신의 컴퓨터 아무 위치에 html 파일을 만들어줍니다.

 

메모장을 연 후에 다른 이름으로 저장할 때, aqua.html 이라는 이름으로 저장을 해주시면 됩니다.

그 다음 메모장에서 위의 스타일 코드와 div 코드 둘다 붙여넣기 해줍니다.

완성된 html 파일을 더블 클릭해서 브라우저에서 실행을 해보시면 됩니다.

혹시 안되는시는 분이 계실까봐 첨부 파일에 소스 코드를 넣어드립니다.

 

 

5. 추가적으로.. div 속성에 링크 걸기

 

위의 버튼를 눌렀을 때, 특정 페이지로 가고 싶게 하고 싶다면, 아래와 같이 추가해주세요.

 

<div onclick="window.open('원하는 주소')" .....

 

위의 코드를 적용하면 아래와 같이 되겠지요?!

 

<div class="button_css aqua" onclick="window.open('http://forum.falinux.com/')">
    <div class="glare"></div>강좌 잘 쓰는 법 (Style)
</div>

 

이것 또한 아래 첨부 파일에 같이 넣어드리도록 하겠습니다.

 

 

쉽게 해보려고 했는데.. 옆에 누군가에게 물어보니..

 

어렵다고 합니다.... 엉엉 ㅠ.ㅠ

여러분 파이팅!! (은근슬쩍 떠넘기기....)

 
이 게시물을...