CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1

CSS/CSS3 2011. 12. 29. 14:02

선택자(selectors) - 유사클래스(pseudo-class) Part1

너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조

CSS 링크 스타일 기초

순서는 LoVe:HAte 를 상기 하자

CSS :tager 동적 유사 클래스

:traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html

:focus 유사클래스

엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자


<form> 
<input type="text" class="focus" value="이름"> 
<input type="button" class="active" value="Search"> 
</form>

위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다.

CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover focus activated로 해야한다


	input {
		border: 3px solid #999;
		background-color: #ccc;
		color: #999;
		padding: 0 5px;
		font-size: 2em; }
	input:hover {
		border-color: #c99;
		color: #666; }
	input:focus {
		border-color: #f00;
		background-color: #fff;
		color: #000);
		outline: none; }
	input:active {
		color:  #f00;
		border-color:  #f00;
		background-color: #000;}

자식관련 유사클래스

CSS3에서는 id라던가 class지정없이 지정하기쉬워졌다 특히나 리스트 같은 엘리먼트에서는 더욱편하다.첫번째 자식을 선택한다거나 N번째 자식 같은 선택이 가능하다. 아래가 그대표적인것들

  • :first-child 첫번째 자식을 말한다
  • :last-child 마지막자식
  • :nth-child(number) 위에서 괄호안에 숫자순서에 등장하는 자식
  • :first-of-type 첫번쩨 엘리먼트
  • :last-of-type 마지막엘리먼트
  • :nth-of-type(number)
  • :nth-last-of-type(number)

아래 예제를 보자.


<ol> 
<li>첫번째 자식, 첫번째 타입</li> 
<li>두번째 자식</li> 
<li>세번째 타입</li> 
<li>밑에서 두번째 타입</li> 
<li>마지막자식, 마지막 타입 </li> 
</ol>

리스트에서 턱스트는 엘리먼트 위치를 말해주고 있다.이에대해 CSS를 정의 해보자


li:first-child { font-size: 1.1em; }
/*첫번쩨 자식의 폰트크기 */
li:first-of-type { color: red; }
/*첫번쩨 엘리먼트*/
li:nth-child(2){ color :#0F0;}
/*두번째 자식의 폰트컬라*/
li:nth-of-type(3) { font-size: 1.5em }
/*세번째 엘리먼트의 폰트크기*/
li:nth-last-of-type(2)  { font-size: 2em; }
/*뒤에서 두번째 엘리먼트의 폰트크기*/
li:last-of-type { color: red; }
/* 마지막 엘리먼트의 폰트색깔*/
li:last-child { font-size: 2.5em; }
/*마지막 자식의 폰트크기조절*/

위와 같이 별도 클래스나 아이디 지정없이 지정해줄수 있으니 편해졌다.적용된예제는 아래

http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_01.html



설정

트랙백

댓글

  • 이코스타 2013.05.10 08:52 ADDR 수정/삭제 답글

    focus 스펠 틀린거 고치셔도 될듯해요~
    잘 보고 갑니다!! ^^

CSS 선택자(selectors) - 조합 선택자

CSS 2011. 12. 28. 21:26



CSS 선택자(selectors) - 조합 선택자

최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅

일단 예제 html을 올린다


 <h1>CSS선택자</h1>  
 <div> 
  <h2>맛있는반찬</h2> 
  <p>맛있게 먹어봅시다</p> 
  <p>으히히</p> 
 <ul>
  <li><em>매운</em>꽃게탕</li> 
  <li>라면<em>밥</em></li> 
  <li><em>카레</em>라이스</li> 
 </ul> 
  <p>그런데 달랑<strong>3개</strong>뿐</p> 
  <div><p>지금은 저녁인데ㅠㅠ</p></div> 
</div>


자손 선택자 A B

아주 잘 알고있는것 부모의 자손엘리먼트를 지정


div ul li{ color:#009;}

위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가  색깔이변한다

공통 선택자 A * B

구애 받지않고 모든것. * 는 모든것을 의미한다.  A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다.


div * em{ color:#F00;}

캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째로 적용된다

직계자식 선택자 A > B

B는 A의 직계자식이여야한다. 자손 선택자와 달리 명확함을 돋보이게한다 자손의 경우 div  p strong 으로 지정하거나 손자로 바로 div strong으로 적용가능하지만 직계자손은 div > p > strong  처럼 바로 부모 자식순서로  정확하게 있어야가능하다.


div > p > strong{color:#F00;}

좀더확실하게 보기위해 사용한다.


인접형제 선택자 A + B

A다음 오는 B엘리먼트라 생각하면된다


h2 + p{ font-size:13px;}

일반형제 선택자 A ~ B

A이후에 나오는 B엘리먼트들을 가르키는데 그 B엘리먼트가 같은 트리안에 포함될 때 까지 적용된다.

h2 ~ p{ color:#903;} 


자손 선택자를 빼고는 익스플로어6 에서 적용안된다.또한 일반형제 선택자는 익스플로어7이하로적용 안된다.
앞으로 설명할 여러선택자들 그리고 더욱이 CSS3로 넘어가면 지원이 미흡한데 그의 해결 방안은  http://code.google.com/p/ie7-js/ 의 스크립트를 이용 방안이 있는데 따로 설명예정.

마지막으로 위의 예제를 적용한것은 아래참조

http://sianasiatiger.cafe24.com/study/CSS_seletor.html


설정

트랙백

댓글

CSS 정리,관리 사이트 ProCSSor

CSS 2011. 10. 10. 15:25

주소는 http://procssor.com/process



CSS를 정리해주는 사이트 다른거보다 설렉터 정리와 설렉터 스타일 나열방식을 정리해주는게 맘에든다

css

설정

트랙백

댓글

  • 치즈 2011.10.28 03:39 ADDR 수정/삭제 답글

    블로그 디자인이 바뀌었네요. 항상 RSS만 보고 있어서 몰랐습니다. 좋은 정보 감사합니다.
    맨위의 주소에 링크가 걸려있으면 더 좋을 것 같습니다.

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

CSS 2011. 3. 27. 11:34

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨)

어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다.

http://www.positioniseverything.net/articles/sidepages/pie-calc.php



위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다.


브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다.

좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점이다.
아래가 마련된 소스이다






설정

트랙백

댓글

웹 CSS 폰트 테스트 미리보기 사이트 typeteste

CSS 2011. 3. 17. 13:30

http://www.typetester.org/


CSS를 다루면서 여러폰트를 사용하고 크기 색깔 마진 패딩들을 다루게 되는데 미리한번 볼수 있는 좋은 사이트가 있다. 좋은점은 위에는 우리가 흔히 사용하는 기본적인 폰트 그리고 아래는 자신이 가지고 있는 폰트가 있다.


모두테스트 가능 설정함에 따라 아래에 뜬다.



아쉬운 점이라면 한글로 못본다는점?


설정

트랙백

댓글

  • Favicon of http://maxmini.egloos.com maxmin 2011.03.22 14:02 ADDR 수정/삭제 답글

    웹 표준에 관한 좋은 글 잘 보고 있습니다. 눈팅만 하다 글 남겨 봅니다.

CSS 에디터들

프로그램 2011. 3. 17. 13:15

출처 http://all-iran.info/lse/infonote/webmaster/855.html


최고의 CSS 에디터(Editor)는 무엇일까? 여러 사람들이 추천해 준 것은 아래의 것이다.

  • jEdit : 확인해보니 CSS 제작용으론 적합치 않다. 프로그래머용.
  • Topstyle : 공짜가 아니다.
  • Aptana : 상당히 큰 프로그램이지만 공짜다. 너무 크고 무거워서 별로다.
  • Simple CSS : 심플하고 좋은 듯 하다

근데뭐 포토샵깔고 어도비꺼 돌리다보면...드림위버 자연스레 설치하게되니..쩝

그외

http://blueprintcss.org/
http://csswizardry.com/typogridphy/
http://www.yaml.de/
http://developer.yahoo.com/yui/



 


설정

트랙백

댓글

  • Favicon of http://catntuna.tistory.com 고양이와참치 2012.08.06 23:52 ADDR 수정/삭제 답글

    최고의 css에디터는 macrabbit의 cssedit이라고 생각합니다..

CSS3 스크롤에 움직이는 입체 이미지

CSS/CSS3 2010. 7. 13. 22:22

오직 css3만을 사용한다. 스크롤에 따라서 움직임

본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/

필요로 사용된 이미지는 두개로 하나는  병이고 하나는 라벨

아 그리고 테스트결과 IE6 빼고 다적용됩니다.

코드는 무지무지 길다.

개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html



<div id="coke">
<div id="y">
<p id="x1"></p>
<p id="x2"></p>
<p id="x3"></p> 
...
...
......
<p id="x54"></p>
<p id="x55"></p>
<a href="http://www.romancortes.com/" target="_top">
      <img src="images/CSS3map/coke-can.png" alt="Pure CSS Coke Can by Román Cortés"></a></div>
  </div>

html에서 아이디는 번호순대로 나오니 가운데 생략


body
{ margin: 0;padding: 0;overflow: hidden; }
#coke
{ width: 510px; height: 400px; overflow: auto; }
img{ border: 0; margin-left: -172px; }
a{ display: block; padding-top: 19px; width: 194px; }
a:hover img {background: url(images/CSS3map/coke-title.png) no-repeat 15px 100px;}

div div
{ background-image: url(images/CSS3map/coke-scroll.png) no-repeat  0 0;
   padding-left: 300px;width: 660px;
}
p{ margin: 0; padding: 0; float: left; height: 336px;
   background-image: url(images/CSS3map/coke-label.jpg);
   background-attachment: fixed;
   background-repeat: repeat-x;
   width: 1px;
}

#x1 {background-position: 5px 46px;}
#x2 {background-position: 0px 46px;}
#x3 {background-position: -3px 46px;}
#x4 {background-position: -6px 46px;}
#x5 {background-position: -8px 46px;}
#x6 {background-position: -10px 46px;}
#x7 {background-position: -12px 46px;}
#x8 {background-position: -14px 46px;}
#x9 {background-position: -15px 46px;}
#x10 {background-position: -16px 46px;}
#x11 {background-position: -17px 46px;}
#x12 {background-position: -18px 46px;}
#x13 {background-position: -19px 46px;}
#x14 {background-position: -20px 46px;}
#x15 {background-position: -21px 46px;}
#x16 {background-position: -22px 46px; width: 2px;}
#x17 {background-position: -23px 46px;}
#x18 {background-position: -24px 46px; width: 2px;}
#x19 {background-position: -25px 46px; width: 2px;}
#x20 {background-position: -26px 46px; width: 2px;}
#x21 {background-position: -27px 46px; width: 2px;}
#x22 {background-position: -28px 46px; width: 3px;}
#x23 {background-position: -29px 46px; width: 3px;}
#x24 {background-position: -30px 46px; width: 4px;}
#x25 {background-position: -31px 46px; width: 5px;}
#x26 {background-position: -32px 46px; width: 7px;}
#x27 {background-position: -33px 46px; width: 12px;}
#x28 {background-position: -34px 46px; width: 55px;}
#x29 {background-position: -35px 46px; width: 11px;}
#x30 {background-position: -36px 46px; width: 6px;}
#x31 {background-position: -37px 46px; width: 5px;}
#x32 {background-position: -38px 46px; width: 4px;}
#x33 {background-position: -39px 46px; width: 3px;}
#x34 {background-position: -40px 46px; width: 2px;}
#x35 {background-position: -41px 46px; width: 3px;}
#x36 {background-position: -42px 46px; width: 2px;}
#x37 {background-position: -43px 46px; width: 2px;}
#x38 {background-position: -44px 46px;}
#x39 {background-position: -45px 46px; width: 2px;}
#x40 {background-position: -46px 46px;}
#x41 {background-position: -47px 46px;}
#x42 {background-position: -48px 46px;}
#x43 {background-position: -49px 46px;}
#x44 {background-position: -50px 46px;}
#x45 {background-position: -51px 46px;}
#x46 {background-position: -52px 46px;}
#x47 {background-position: -53px 46px;}
#x48 {background-position: -54px 46px;}
#x49 {background-position: -56px 46px;}
#x50 {background-position: -58px 46px;}
#x51 {background-position: -60px 46px;}
#x52 {background-position: -62px 46px;}
#x53 {background-position: -65px 46px;}
#x54 {background-position: -68px 46px;}
#x55 {background-position: -74px 46px;}

CSS는 그냥 올림 픽셀의 차이가 있기에 다 올렸다.그리고 이 CSS는 초기화 시킨 것에서 위치 지정한 것이니 유의하길


설정

트랙백

댓글

  • 2010.09.10 10:57 ADDR 수정/삭제 답글

    좋은정보 감사합니다.

웹표준 테이블 코딩 보완

웹표준 2010. 7. 13. 18:29

웹표준 테이블 코딩

본주소는 여기 좀더보완한다 웹표준 테이블

행과 열

행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조

코딩의 개념 다시확인


thead엘리먼트는 표의 머릿부분을  tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다.

tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다.
특별한 의미가 없다면 굳이 사용할 필요는 없다.

tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한예</caption>
<thead>
 <tr>
  <th scope="col">이름</th>
  <th scope="col">성별</th>
  <th scope="col">직업</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td>
  <td>남자와여자</td>
  <td>웹관련</td>
 </tr>
</tfoot>
<tbody>
 <tr>
  <td>뭐시기</td>
  <td>남</td>
  <td>프로그래머</td>
 </tr>
 <tr>
  <td>저시기</td>
  <td>여</td>
  <td>디자이너</td>
 </tr>
</tbody>
</table>


잘 모르는 것들 다시확인


colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예



<caption>웹표준 테이블 코딩</caption>
<colgroup span="1"/> <colgroup span="2"/> ...

caption 다음에 쓰는것이 올바르다.
colgroup대한 올바른 사용은 그림을 참조하여 아래를 상기하자

1. 단순한 colgroup으로 끝맺으면 표 에서 세로한줄을 의미한다.
2. 속성 span은 몇개의 세로줄을 지칭 하는가 이다.
span="2" 라고 되어있으면 연 이은 세로 두줄을 지칭한다
3. 자식엘리먼트로 col이 있다. col역시 span속성 엘리먼트가 있으며 수에따라 세로줄을 지칭한다.


<colgroup>
 <col />
 <col span="2" />
</colgroup>

colgroup, col엘리먼트의 span ,CSS width

span 처럼 위에서 말한데로 세로줄을 지칭한다. 이때 span값이 2일지라도 CSS나 속성의 width값등은 하나의 줄마다적용된다. colgroup, col엘리먼트의 다른 속성으로는 넓이도 있는데 다음예를보자.


<col width="70" span="2" />

또는 css로보자면


col{width:70px;}


span값이 2라고 해서 두 줄을 합해서 가로값이 70이 아니고 각각의 줄의 값을 말한다.

IE6와 CSS문제

그림과 같이 배경색을 지정할때 문제는 IE6에 있다. 속성 선택자가 가능하면  단번에 다음과 같이 한줄을 월하는색으로 해줄수있다.


colgroup[span="1"]{ background:#fc9;}
colgroup[span="2"]{ background:#6c6;}
col{background:#f6f;}
col[span="2"]{background:#969;}

하지만 IE6는 지원하지않는다. 방법은 아래와같이 colgroup안에 col을 다 만들고 아이디 지정후
그에맞게 CSS로 지정해주는 방법뿐이다.


<col id="first" />
<col id="sec" />
<col id="thi" />
<col id="forth" />
<col id="fifi" />
<col id="six" />

마지막으로 아래는 처음의 그림과 같은 결과를 보여준다


..... 
<caption>웹표준 테이블 코딩</caption>
<colgroup span="1" />
<colgroup span="2"/>
<colgroup>
 <col />
 <col span="2" />
</colgroup>
<thead>....

예제의 결과참조 http://sianasiatiger.cafe24.com/study/1_html_table.html


실용적인 표만들기

일단 완성된 그림부터보자


결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/1_html_table_02.html


직업을 나타낼 간단한 표를 만들어 보자. 먼저 테이블 콘텐츠 코딩. 많은 내용의 중간은 생략했다.


<table cellspacing="0" summary="간단한 테스트">
<caption>간단한 직업표</caption>
<thead>
 <tr>
  <th>이름</th><th>성별</th>
  <th>직업</th><th>나이</th>
  <th>혈액형</th><th>기타</th>
 </tr>
</thead>
<tfoot>
 <tr>
  <td>두사람</td><td>남자와여자.......</td>
 </tr>
</tfoot>

<tbody>
 <tr class="odd">
  <td>뭐시기..........</td>
 </tr>
 <tr>
  <td>저시기...........</td>
 </tr>
  <tr class="odd">
  <td>또한명...........</td>
 </tr>
</tbody>
</table>


tr엘리먼트에 클래스를 추가한것은 그림처럼 열에따라 배경색을 입히기위해서이다. CSS3가지원된다면 아래처럼 하면  되지만 지원하지않는 브라우저가 많기에 클래스로 해준다.


.odd{ background:#edf5ff;; }
tr:nth-child(odd){background:#edf5ff;}

colgroup을 코딩한 것 처럼 두세로줄을 가로 70 그 다음한줄은 100 다음두중 70 나머지는 자동으로 해주었다.


<colgroup>
<col width="70" span="2" />
<col width="100" />
<col width="70"  span="2" />
<col />
</colgroup>

마지막으로 CSS확인 tfead색 텍스트정렬 이정도는 기본.


body{text-align:left;}
table{padding:0; width:500px; border-collapse:collapse;
border-spacing : 0; border:1px solid #666666;}
thead{ border:2px solid #F99;}
tfoot td{ background:#FFF;} table th{ background:#FC9;} td{border-right: 1px solid #ccc;} col{border-right: 1px solid #ccc;} .odd{ background:#EDF5FF; } tr:nth-child(odd){background:#edf5ff;}



설정

트랙백

댓글

  • 도야 2010.07.20 11:24 ADDR 수정/삭제 답글

    제목은 웹표준 코딩인데.. 내용은 그렇지 않아 보이는군요
    colspan과 rowspan은 웹 표준이 아닙니다.
    익스에서만 지원하는 속성일 뿐입니다.
    웹표준을 공부하시는분들이 이글보고 잘못 이해하실수 있으리라 생각됩니다.
    내용 수정좀 해주세요..
    아님 제목을 그냥 테이블코딩법??

    • Favicon of https://siana.tistory.com 샷타이거 2010.07.20 12:57 신고 수정/삭제

      잘못 보신 듯 한데....

      colspan과 rowspan이 익스에서만 지원하다니요?-_-?

      다른 브라우저에서도 잘 작동합니다.

      이 속성이 없으면 셀병합을 어떻게 하지요?ㅎㅎ

      HTML5에서도 여전히 지원합니다.

      아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.

  • 야옹이 2010.10.20 17:50 ADDR 수정/삭제 답글

    ㅋㅋ 아마도 테이블의 용도를 레이아웃용으로 여전히 착각하시는듯 하네요, 테이블은 웹에서 일목요연한 정리된 정보를 나타낼 때 나타내는 표입니다.☜ 전 아주그냥 여기에 동감~!!!

  • 2012.03.27 14:30 ADDR 수정/삭제 답글

    tr:bth-child(odd){background:#edf5ff;}

    이부분요.. bth --> nth 아닌가요? 제가 잘못알고있나....용 ;

    • Favicon of https://siana.tistory.com 샷타이거 2012.03.28 11:51 신고 수정/삭제

      오 제가 잘못입력했군요 tr:nth-child 맞습니다.
      감사합니다^^

  • Favicon of http://dsgn.kr 허말랭이 2013.03.20 11:51 신고 ADDR 수정/삭제 답글

    잘보고 갑니당 :-) 도움이 되었어요!

jQuery 페이지 스크롤링(scrolling) 플러그인

jQuery/jQuery플러그인 2010. 7. 6. 20:27

jQuery 페이지 스크롤링(scrolling) 플러그인

클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다.

미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html

HTML 코드

네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자


<div id="nav-dock"> 
 <ul>
	<li><a href="#" id="prev">↑ Prev</a></li>
	<li><a href="#" id="next">↓ Next</a></li>
	<li><a class="scrolltoanchor" href="#comments">Comments</a></li>
	<li><a class="scrolltoanchor" href="#reply">Reply</a></li>
    <li><a href="#top" class="scrolltoanchor">맨위로</a></li>
    </ul>
</div>

콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다.


<div class="post"><h2>포스팅 1</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 2</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 3</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 4</h2><p>내용물,그림등</p></div>
<div class="post"><h2>포스팅 5</h2><p>내용물,그림등</p></div>

네비게이션

네비게이션은 페이지이동해도 유지하도록 고정으로 해준다.


#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}

Javascript

jquery와 사용된스크립트

이 플러그인은 http://sianasiatiger.cafe24.com/js/jquery.scrollTo-min.js

삽입된 스크립트를 보자


$(function() {
    function scroll(direction) {
        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.post');
            collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));
       });
       for(i = 0; i < positions.length; i++) {
         if (direction == 'next' && positions[i] > here) 
		     { scroll = collection.get(i); break; }
         if (direction == 'prev' && i > 0 && positions[i] >= here) 
		     { scroll = collection.get(i-1); break; }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function() {
        return scroll($(this).attr('id'));
    });
    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 750
        });
        return false;
    });
});

post는 콘텐츠내용의 클래스이다

#next,#prev는 아이디로, scrolltoanchor는 클릭시 href에서 지정해준주소로 가게 지정한것을 보여준다.


마지막으로 꾸미기. CSS는 알아서 꾸미자 예제는 CSS3를 사용해서 둥근모서리를 보여준다.


body {
	background: #ededed;
	width: 800px;
	margin: 40px auto 100px;
}
ul,li{list-style : none; }
a {
	color: #66F;
	text-decoration: none;
	outline: none;
}
.post {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#comments {
	height: 1000px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#reply {
	height: 600px;
	margin: 20px 0;
	padding: 5px 20px;
	background: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock {
	position: fixed;
	right: 15px;
	top: 35%;
}
#nav-dock a {
	display: block;
	padding: 3px 10px;
	margin: 3px 0;
	background: #666;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
#nav-dock a:hover {
	background: #000;
}
#nav-dock #next {
	margin-bottom: 10px;
}


설정

트랙백

댓글

  • Favicon of http://euntory.tistory.com/ 은토 2013.06.17 10:43 ADDR 수정/삭제 답글

    유용한 정보 감사합니다. 잘보고갑니다.^^

간단한 CSS3 기초 알파 배경,텍스그림자, 둥근모서리

CSS/CSS3 2010. 6. 29. 20:05

CSS3 알파 배경,텍스그림자, 둥근모서리

css3기초 몇가지를 살펴본다.당연한 이야기지만 익스플로어에는 적용안된다.

모든예제결과는 여기서 볼 수 있다.

배경 RGBA 알파값

배경에는 3가지값을 가진다. red green blue 그리고 css3에서 알파값을 더 가진다. 즉 투명도를 표현한다.

아래는 투명도를 25%를 준것이다.


.bg{background: rgba(255, 204, 204, 0.25 ); }


마지막값이 0이면 완전투명 1은 100%을 의미한다. 0.25, 0.5 0.75에 따른 결과는 그림과 같다.

또한 이것은 배경만 아니라 폰트(font), 보더(border)속성에도 적용된다.


텍스트 그림자

포토샵의 스타일 효과라고 생각하면 된다. 첫번째는 x축으로 그림자위치 두번째는y축으로 그림자위치 세번째는 흐려짐(blur) 네번째는 색깔(이 색깔역시 RGBA로 가능)이다.


div{ text-shadow:4px 4px 2px #000; font-size:40px;}

흐려짐(blur)에 대해서는 그림을 참조하자 5px 15px값을 준것이다. 비교해볼것

제미있는 건 이 그림자를 여러번 사용할 수 잇다는것이다. 다음과 같은예


#shadow_02{
        text-shadow: 0 10px 0 #fff,
        0 -10px 0 #039, 0 -20px 0 #fcc;
              }

라운드 박스

잘알려져있지만 한버더보는것 border-radius 이것으로 정하지만 아직 모든브라우저에 적용시키기위해선 앞에 다른것을 붙여줘야한다.파이어폭스의 경우--moz-border-radius웹킷기반의 브라우저는 -webkit-border-radius를 사용한다. 아래그림은 그예


#box{
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
#box #example2 {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 25px;
	-webkit-border-bottom-right-radius: 45px;

	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomleft: 25px;
	-moz-border-radius-bottomright: 45px;
}



설정

트랙백

댓글