CSS3 라운드박스 및 박스 속성

CSS/CSS3 2012. 3. 4. 12:58

CSS3 라운드박스 및 박스 속성

CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다

박스 속성, 콘텐츠,마진,패딩,보더

레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다.

캡처한 그림과 같이 보더도 계산된다는것을 잊지말자.

아웃라인(outline)과 보더(border)

위와 같이 보더는 박스계산에 계산된다 하지만 아웃라인은 계산되지않는다 아웃라인은 이런점에서 계산하기에 좋지만 단점은 아웃라인이란 단어그대로 엘리먼트 전체를 감싸기만 하지, border-bottom 처럼 한쪽 면을 지정할 옵션이 없다는 것이 단점이다. 그리고 아웃라인은 보더화 함께 사용할시 보더 효과 다음에 나타난다.

overflow-x, overflow-y

세로 계산은 컨텐츠의 내용을 다보여줄 길이를 반영한다.이때 overflow로 제어할수 있는건 알테고 CSS3부터는 x,y로 별도 지정이 가능해졌다.

예제를 보려면 여기로가보자
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-y&preval=hidden

CSS3 라운드박스 border-radious

이미 CSS3초창기부터 잘알려져 있다. 근래의 대부분의 브라우저가 지원하지만 IE는 9부터 지원한다. 또한 브라우저마다 버전상 지원여부가 있기에 아직 약간의 모질라,웹킷 별도 지정을 필요로 한다고 본다.

아래 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로한다

border-radious 지원 현황. 이브라우저는 별도 지정없이 바로 사용가능하다
<div id="RoundBox">THIS IS THE TEST</div>
위는 html 아래는 css코드
#RoundBox{ 
width:200px;
height:100px;
padding:15px;
background-color:#CCC;

-moz-border-radius: 21px; /*모질라*/
-webkit-border-radius: 21px; /*웹킷*/
/*IE9+,FF4+,chrome,Safari5,+opera*/
border-radius: 21px;
}

결과는 여기서 확인할 수있다 http://sianasiatiger.cafe24.com/study/css3-box.html
마지막으로 박스를 마음껏 만들어볼 수 있는 장소 http://www.cssportal.com/css3-rounded-corner

덧)CSS3 포스팅때 마다 느끼는거지만..IE는 정말 귀찮은존재다. 거의 사라지는 추세지만 IE6를 사용하는사람이이  더러있고...또 CSS3 "그나마" 마음놓고 사용할  IE9부터이다. IE6가 사라진 기간을 생각해보자 끔직하다...


설정

트랙백

댓글

CSS3 배경색 그라디언트 소스를 만들어주는 툴

CSS/CSS3 2012. 3. 3. 16:33

CSS3 배경색 그라디언트 소스를 만들어주는 툴

그라디언트까지 줄수 있게되었는데 하나하나 설명하려 했지만 그보다 툴바가 좋을듯하다

div{ background:-moz-linear-gradient(46% 75% 101deg,
                #18A1AB, #3EC992); 
}
div{background:-webkit-gradient(linear, 50% 71%, 50% 56%,
    from(#312C4A), to(#2F3366), color-stop(.6,#333333));
}

아래는 직접 소스를 구할수 있는 사이트. 모질와 웹킷에따라 선택하면 된다 오페라는 지원안되며 익스플로어는 IE10부터 지원

http://westciv.com/tools/gradientsnustyle/index.html



설정

트랙백

댓글

CSS3 투명도를 가지는 색상값 rgba HSL HSLA

CSS/CSS3 2012. 3. 3. 16:10

CSS3 투명도를 가지는 색상값 rgba HSL HSLA

이전의 생상 키워드는 잘 알것이다.초반에 rgb방식이 있었지만 거의 16진수 코드를 사용하는편

div{ background-color:#000;}
div{ background-color:#00000;}
div{ background-color:rgb(0,0,0);}

 

rgba

rgb는 알다시피 레드, 그린, 블루이고 마지막 a는 알파, 즉 투명도이다.

마지막 투명도는 .3 이면 30%다

div{ background-color:rgba(0,0,0,.3);}

 

HSL HSLA

어렵게 생갈할거없다. 색조,채도, 명도 그리고 마지막은 알파값

div{ background-color: hsl(0,100%,50%);}
div{ background-color: hsla(0,100%,50%,.4);}

 

익스플로어의 경우 최신판인IE9부터 지원된다



설정

트랙백

댓글

CSS 타이포그래피

CSS 2012. 2. 24. 12:38

CSS 타이포그래피

타이포그래피 관련 텍스트 속성들을 알아본다. 간단하게 예제만으로 복습해보자.
일단 타이포그래피라면  알고있어야 할 것들

자간: 글자 하나하나 사이의 간격
어간: 단어사이의 간격
행간: 줄사이의 간격

자간<어간<행간 이건 당연한것

CSS에서 각속성은 다음과 같다


자간: letter-space , 흔히 사용하는 값 설정 (em,px ....)
어간: word-space, 흔히 사용하는 값 설정 (em,px ....)
행간: line-height, 폰트에 비례하는 퍼센트 설정가능

하나하나 설명하기보다 단번에 설명하는게 좋을 듯하다 일단 예로 해를품은달 html을 준비했다.

<h2><span>수목드라마 </span>해를 품은 달</h2>

<p>조선 시대 가상의 젊은 왕(태양) 이훤은 달과 ..... </p>

<p class="character">한가인: 홍문관 대제학 허영재의 딸, 염의 ... </p>

<p class="character">김수현 : 달을 그리는 해....</p>

CSS는 다음과 같다. 설명은 주석으로 해놨다.

/*문서마진설정 폰트사이즈100%*/
body{ font-size:100%; margin: 0 5em;}
/*개별 폰트사이즈 설정*/
h2{font-size:1.5em;
   text-align:center;
   /*제목을 가운데 정렬*/
   }
h2 span{font-size:.5em; 
        vertical-align:super; 
	/*세로정렬 위족에*/
	font-weight:lighter;
	}
/*첫번째 글자를 좀더크게*/		
h2 + p:first-letter{font-size:1.8em;}
/*문서의 자간,어간 행간 조절*/
p{font-size:.9em; 
  letter-spacing:-.03em; 
  word-spacing:.1em;
  line-height:1.8;   
}
/*등장인물 들여쓰기*/
.character{ text-indent:1em;}

각 속성에 대해서는 그림을 참고해보자


최종결과는 여기 http://sianasiatiger.cafe24.com/study/CSS-typo.html


세로정렬 vertical-align은 웹에서 흔히 잘 볼 수 없는데 값과 결과는 여기서 예제를 볼 수 있다.
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

덧1) 첫번째 글자를 크게한 유사 클래스 선택자가 이해 안가면 이 블로그에서 검색해 보길 바란다
덧2) 한가지 빠트렸는데 첫번째 글자가 커지다 보니 첫문단 첫줄과 다음줄의 행간이 커진 것이 보인다. 따라서 이를 해결하기 위해 유사 클래스 선택자 h2 + p:first-letter에서  line-height 의 적절한 조절이 필요하다. 알아서 값을 조절해보자


설정

트랙백

댓글

CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value

CSS/CSS3 2012. 2. 22. 18:15

CSS3 font-size-adjust 
대채폰트의 크기조절 x-height, Aspect Value

일단 참조할 것

타이포그래피(Typography ) 각 폰트별 x-height 크기 도표  http://blog.naver.com/siatiger
w3c css3 font 소개 :http://www.w3.org/TR/css3-fonts/
웹폰트 Aspect Value http://www.barrypearson.co.uk/articles/text/aspect_values.htm

adjust 란 단어는 “조정하다”란 뜻으로 말 그대로 폰트 크기를 조정해주는 역할을 하는 속성이 font-size-adjust 이다. 영어는 대소문자가 구별되는 언어이고 그 때문에 폰트의 종류에 따라 특히 소문자의 크기가 다르게 표현된다.예를 들어 Verdana 의 대문자가 1 이라면 소문자 크기는 0.58(Aspect Value) 의 크기인 것이다.

주의)아이폰에서 텍스트크기를 정하는 -webkit-text-size-adjust와 혼동하지말것!

이러한 이유 때문에 브라우저에서 만약 첫 번째 font 를 사용할 수 없게 될 경우 두 번째로 지정된 폰트를 랜더링하는데 글자 크기가 같은 px 라도 들쭉날쭉하게 보여지는 것이다.


다른 폰트라면 같은 크기라도 글자크기가 다른것은 당연하다
사진은 대문자지만 적용은 x-height이므로 소문자임을 주의

이런 것을 방지하기 위해 font-size-adjust 속성을 사용하게 되면 서로 다른 폰트 종류라도 소문자의 처음 지정된 폰트의 크기로 유지할 수 있고 가독성을 높일 수 있다..  하지만 현재 Firefox 에서만 지원한다

1. Aspect Value 확인해보기
W3C에서 보여주는 값은 다음과 같다. http://www.barrypearson.co.uk/articles/text/aspect_values.htm
글자크기에 따라 치수변동이 조금있다.

Family name Stated aspect value Measured aspect value
These are in the W3C order. These are values quoted by W3C. These use the actual x-height at 100px.
Verdana 0.58 0.55
Comic Sans MS 0.54 0.56
Trebuchet MS 0.53 0.52
Georgia 0.50 0.48
Myriad Web 0.48 0.48
Minion Web 0.47 (This was only ever supplied by MS as part of the IE 4 supplemental font pack add-on, and is not on my PC).
Times New Roman 0.46 0.45
Gill Sans 0.46 (Not on my PC).
Bernhard Modern 0.4 (Not on my PC).
Caflisch Script Web 0.37 (Not on my PC).
Flemish Script 0.28 (Not on my PC).


font-size-adjust가 적용될때  공식은 다음과 같다

c = (a/a’)s (c=조정될 글꼴 크기, a=font-size-adjust 에 지정된 숫자, a’=현재 지정된 글꼴의 소문자 비율)이다. 예를 들어, 14pt Verdana의 font-size-adjust를 1로 지정하면(Verdana의 소문자 높이 비율 기본값은 0.58) 14*1/0.58pt의 크기(약 24pt)로 표시된다.

에제로는 Times New Roman를 선택했다. 0.46 이다.  font-size-adjust에  0.46을 주면 공식에서 나누어 떨어지므로 font-size-adjust를 설정하지않은 것과 똑같이 나와야 한다

<p><span id="num1">Aa</span><span id="num2">Aa</span></p>

body{font-size:400px;}
p{     margin:100px;}/*가운데 보기위한 정렬*/
span{  border:solid 1px green; }/*크기비교위한 테두리*/
#num1{ font-family:Times New Roman ;}
#num2{ font-family:Times New Roman; 
       font-size-adjust:0.46; 
}


http://sianasiatiger.cafe24.com/study/font-size-adjust-01.html

그림과 같이 문자가 크다보니 약간의 차이가 있다 직접 조절해본 결과는  0.447

#num2{ font-family:Times New Roman; 
       font-size-adjust:0.447; 
}

http://sianasiatiger.cafe24.com/study/font-size-adjust-02.html
이건 조절한결과


2. 다른 폰트의 같은 크기의  x-height 조절
폰트는 Verdana 와 Times New Roman을 선택했다
위에서 확인 해봤듯이 400px에서 값은 0.447이였다.

그러면 Verdana에 0.447을 정해주면 된다.

body{font-size:400px;}
#num1{ font-family:Times New Roman; }
#num2{ font-family:Verdana; 
       font-size-adjust:0.447; 
}


최종결과 폰트특성상 아주 약간 차이날뿐 같게 된것을 볼 수 있다.
http://sianasiatiger.cafe24.com/study/font-size-adjust-03.html


앞서 말했지만 역시 문제는 아직 파이어폭스만 지원한다는 점


설정

트랙백

댓글

  • yyy 2014.10.20 14:18 ADDR 수정/삭제 답글

    감사합니다. 퍼갑니다.

CSS 폰트 (font) 정하기

CSS 2012. 2. 22. 14:39

CSS 폰트 (font) 정하기

먼저 한번에 지정할수 있는 font 말고 font-size등 간단정리하고 전체를 정의하는 font를 알아보자

폰트 크기 설정

폰트크기는 여기서 참조하자 바로테스트확인할수 있다.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small

예제는 다음과 같다

h1{ font-size: 100%;}
h2{ font-size: larger;}
h3{ font-size: small;}
h4{ font-size: 1.9em;}
p{  font-size: 9pt;}

다음은 폰트크기를 요약 한것

상댓값
%   : 부모 엘리먼트와 비교한다
em : 현재 폰트 크기에 비교(1.9는 190%)
px  : 모니터 해상도에 비교
larger, smaller : 현재잣보다 한단계 올리거나내린다 예로 현재값이 medium로 되어있다면 large로 된다

절대댓값 : pt,pc,mm, cm, in (72pt = 1inch ,1pc =12pt)

html페이지를 참조하는 키워드 이는 html에서 <font size=x>으로 정의될수 있다 x값과 키워드비교는다음표를참고하자 w3c 참조

http://www.w3.org/TR/CSS2/fonts.html#font-styling

HTML Keyword Example Sizes
Not Applicable xx-small 9px
size=1, size=-2 x-small 10px
size=2, size=-1, small small 13px
size=3 medium 16px
size=4, size=+1, big large 19px
size=5, size=+2 x-large 24px
size=6, size=+3 xx-large 32px
size=7, size=+4 Not Applicable 48px

폰트 크기를 설정하기전 집고 넘어갈 것이 있다. 일단 100%로 하던 1em으로 하던간에 크기는 브라우저의 디폴트 값에 근거한다는 점을 유의해야 한다.이말은 무엇이냐하면 우리가 웹표준을 다룰때 가장 짜증나는 IE6를 비롯하여 브라우저별로 크기가 다르게 나온다는 말이다.

이에 대한해결은 Owen Briggs가 내놓은것으로 가능한 body에 상대크기를 잡아놓고 내부에 절대폰트 상대폰트크기를 사용하는 것이다. 예제처럼하면 브라우저뿐만아니라 매체에 따라서도 적절한크기가 적용된다.

/* body에 %사이즈 결정 */
body { font-size: 76%; }

/* 개별 재설정*/
p { font-size: 1em; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }

폰트 스타일 설정

이랙릭이나 빗김체나 비슷하다. 정확한 차이는 이탤릭체는 말그래로 폰트의 이탤릭버전으로 하게한다. 빗김체는 글을 기울일 뿐이다. 딸서 이탤릭체가 없는경우는 빗김체를 사용하겠지만 거의 그런 경우도 없고, 또 브라우저들이 이 둘을 잘 구분하지 않는다.

h1{ font-style: italic;}
h2{ font-style: normal;}
p{  font-style: oblique; }

폰트 굵기 설정

h1{ font-weight: bold;}
h2{ font-weight: nomal;}
h3{ font-weight: lighter;}
h4{ font-weight: bolder;}
p{  font-weight: 450; }

예제에서 숫자는 900이 최고다 100~900으로 설정가능하다.

스몰 캡(small-cap) 설정

h1{ font-variant:small-caps; }

스몰캡은 모든문자가 대문자가 되고 첫번째 글자가 다른문자에 비해 조금커진다. 제목이나 부제목 강조에 사용하면 효과적이다.

한번에 설정

귀찮을때 한번에 하기. 순서는 다음과같다

font-style, font-variant, font-weight, font-size/line-height, font-family
여기서 폰트사이즈뒤에 슬러쉬하고 나오는 것은 행간격이다. 문자기준의 %라고 생각하면된다 (.9=90%)

p{ font:italic bold small-caps .7em/.9 Georgia, "Times New Roman", Times, serif  ; }

시스템 폰트..

p{ font: caption;}

caption | icon | menu | message-box | small-caption | status-bar

위의것이 시스템 폰트라고 지정된 것들이있다.
순서대로 버튼,아이콘,메뉴,태화상자,컨트롤라벨,위도우 상단표시줄에 적절하게 사용으로 지정되어 있지만..잘 사용되는걸 못봤다. 그냥 이런게 있다고만 알아두자.

CSS3 폰트에 자세한건 여기 http://www.w3.org/TR/css3-fonts/


설정

트랙백

댓글

CSS 폰트 : 웹안전 폰트와 다운

CSS 2012. 2. 21. 14:56

CSS 폰트 : 웹안전 폰트와 다운

웹안전폰트

폰트는 사용자가 컴퓨터에 있어야 사용가능하다. 옛날에는 단지화려하게 꾸미기위해서 별 폰트들을 남발했지만 요즘은 사라진지오래다. 일단 웹안전 폰트부터 살펴보자.

Generic Family Family Name Example
Windows Font Name Mac Font Name
Sans-serif Normal fonts without serifs Arial Arial Safe Fonts, 안전서체, 安全書体, 安全字体
Arial Black Arial Black Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Sans Unicode Lucida Grande Safe Fonts, 안전서체, 安全書体, 安全字体
Tahoma Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Trebuchet MS Helvetica Safe Fonts, 안전서체, 安全書体, 安全字体
Verdana Verdana Safe Fonts, 안전서체, 安全書体, 安全字体
MS Sans Serif Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Serif Normal fonts with serifs Georgia Georgia Safe Fonts, 안전서체, 安全書体, 安全字体
Palatino Linotype Book Antiqua Safe Fonts, 안전서체, 安全書体, 安全字体
Times New Roman Times Safe Fonts, 안전서체, 安全書体, 安全字体
MS Serif New York Safe Fonts, 안전서체, 安全書体, 安全字体
Monospace Fixed-width fonts Courier New Courier New Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Console Monaco Safe Fonts, 안전서체, 安全書体, 安全字体
Cursive Fonts that emulate handwriting Comic Sans MS Comic Sans MS Safe Fonts, 안전서체, 安全書体, 安全字体
Fantasy Decorative fonts, for titles, etc. Impact Impact Safe Fonts, 안전서체, 安全書体, 安全字体

위폰트는 기본적으로 탑재되어있는것들이다.

그리고 Windows 버전별로 어떤 서체가 모든 국가별 버전에 기본 탑재되어 있는지 좀더 확인하려면 Microsoft의 Typography 웹 사이트에 있는 Fonts and products 페이지를 참고하면 된다.


다운로드가능한 폰트

그래도 원하는 폰트를 꼭 사용하고 싶게하면 어떻게 해야 할까? 
css에서 @font-face 로 설정할 수 있다.(SIFR방법도 있지만....이 방법은 폰트자체를 건드린다는 개념과 다르니 따로 포스팅하겠다.)

일단 웹에서 다운로드가능한 폰트의 확장자는TTF,OTF,EOT,SVG,WOFF이다. (자신에게 어떤폰트가 있는지 알아보려면  C:\Windows\Fonts 에서 확인해보자.) 사용방법은 아래와 같다.

자신이 원하는 폰트파일을가지고 이 사이트로 가자 @font-face Generator


1. add fonts를 클릭하고 원하는폰트파일을 불러온다.
2. 옵션중선택하고 agreement에 체크 그러면 오른쪽 아래에 다운로드박스가 나오는데 클릭하면 다운받을 수 있다.
3. 이때 샘플로 예제 웹문서까지 첨부되니 참고

위에 이걸 잘알면 사용해도 관계없고 이번엔 사용하는 CSS코드를 살펴보자.

@font-face {
	font-family: 'sketch'; /*폰트이름을 지정*/
	src: url('font/hnaksec-webfont.eot');
	src: local('☺'), url('font/hnaksec-webfont.woff') format('woff'), 
	url('font/hnaksec-webfont.ttf') format('truetype'), 
	url('font/hnaksec-webfont.svg#CRegular') format('svg');
}

body{font-family: 'sketch';}

주의 할 점은 로컬폰트를 사용할 수 있게 src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥(mac)에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체한다.

참고로 svg폰트의 #CRegular부분은 svg폰트로 변환시에 지정되는 id이다. 이에대한 정보는 svg폰트를 메모장으로 열고 id를 검색해보면 알수 있다.

이정도 알면 사용하는데 문제는 없다. 

위의 예제는 여기서 확인가능하다 http://sianasiatiger.cafe24.com/study/load-font.html

또 더 자세히 깊게 파고 들고 싶다면 여기를 참조 http://circlash.tistory.com/578




설정

트랙백

댓글

CSS (CSS3) 속성선택자 (attribute selector)

CSS/CSS3 2011. 12. 30. 13:02

CSS (CSS3) 속성선택자 (attribute selector)

CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다.


<p><a title="tistory" href="#">티스토리</a></p> 
<p><a title="naver" href="#">네이버</a></p> 
<p><a title="potal daum site" href="#">다음</a></p> 
<p><a title="nate-mobile" href="#">네이트</a></p> 
<p><a title="dreamwiz" href="#">드림위즈</a></p> 
<p><a title="yahoo" href="#">야후</a></p> 
<p><a title="TheBestgoogleWeb" href="#">구글</a></p>

이번엔 CSS를 보자 정의 한것

[attr] : 속성값을 가지는경우
[attr=" "] : 속성값이 정확히 일치
[attr~=" "] : 속성값이공백으로 구분한 경우
[attr|=" "] 속성값이 하이픈으로 구분한 경우
아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우
[attr$=" "]주어진값으로 끝나는경우
[attr*=" "] 속성값이 일부일치한다면 적용

아래는 적용한 예제다


/*title 속성을 가지고 있는 엘리먼트에 모두적용*/
a[title]{border: 1px solid #999; font-size:3em;}
/*title 속성값 naver와 정확히 일치하는 경우*/
a[title="naver"] {color:#0F0;}
/*title 속성값인 daum을 공백으로 구분한 경우*/
a[title~="daum"] {background-color: #09F;}
/*title 속성값인 nate를 하이픈으로 구분한 경우*/
a[title|="nate"] { color:#F00;}
/*title 속성값인 dre로 시작한경우 */
a[title^="dre"] {background-color:#FF0;}
/*title 속성값인 hoo로 끝나는경우*/
a[title$="hoo"] {background-color:#60F;}
/*title 속성값인 google로 일부일치하는경우*/
a[title*="google"] {background-color:#666;}

완성된 예제를 확인하려면 아래주소로

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

*주의 : 속성값의 대소문자는 인식은다르다.google과 Google은 다르단 말


설정

트랙백

댓글

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

CSS/CSS3 2011. 12. 29. 18:41

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

:first-letter :first-line

텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자


<p>The moment Alice appeared, she was appeal......</p> 
<p>The executioner's argument was, that you couldn't cut..</p> 
<p>The executioner's argument was, that you couldn't...</p> 

위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다.


 p {     /*기본설정*/
		font-size: 16px;
		line-height: 24px;
		color: #666; }

  /*첫문단의 첫번째글자 T를 꾸민다*/
	p:first-of-type:first-letter {
		color: red;
		font-size: 3em;
		float: left;
		margin-right: 5px; }	

 /*첫문단의 첫번째줄*/
	p:first-of-type:first-line {
		font-size: 1.25em;
		font-weight: bold;
		color: #000; 
}

:before :after

위의 내용은 이상한나라의 앨리스이다. 이번엔 :before :after 로 엘리먼트앞뒤를 꾸며보자. 이들은 이름과 같이 엘리먼트 앞뒤를 말하는데 그 공백을 의미한다


<h3>이상한 나라의 앨리스</h3>

css에서는 별도의 이미지를 사용했다.


h3:before {
	  	content: url(images/bullet-02.png);
	}
h3:after {
	       content: url(images/bullet-01.png);
	}	

직접확인해본바로는 여기선 우리가 흔히 쓰는 background로는 먹히지않았다. display: block; 과 크기지정을 해도마찬가지 아마공백처리되기에 그런듯하다. 대신 content를 사용한다 content에 대해서 차후에 설명

예제를 확인하려면 여기http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_03.html


설정

트랙백

댓글

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

CSS/CSS3 2011. 12. 29. 15:23

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

:empty

공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다.

<div></div>

div크기만 정해줬고 배경색을 지정했다.


div{width:100px; height:100px;} 
div:empty{ background:#000;}

:root

문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다.

:only-child

유일자식으로 자식이 하나밖에 없을때 유용하다.


<ul> 
  <li>첫번째 자식이고</li> 
  <li>두번째 자식이므로 적용안됨</li> 
  </ul> 
  <ul> 
  <li>자식하나뿐임</li> 
</ul>

아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다.


li:only-child {color: #F00;}

:only-of-type

단하나뿐인 엘리먼트일때 시용한다

:lang

특정언어가 문서에 있을때 사용한다. 명확히라기위해서 html엘리먼트내에 어트리뷰트를 설정해야한다. 아래는 ISO지정 국가코드

http://www.w3schools.com/tags/ref_language_codes.asp

<p>이 책은 프랑스의 어느 유명한 작가가 쓴글입니다</p> 
<p lang="fr">Ce livre est un artiste célèbre en France est sseungeul</p>
p:lang(fr){ color:#F00;}

위와 같을경우 아래 프랑스어가 빨간색으로 된다

:not()

스타일을 적용하되 괄호안의 지정자는 적용되지 않게한다. 아래의 예를보자


<p>여긴 적용됩니다</p> 
<p>여긴 적용됩니다</p> 
<p class="words">여긴 적용 안됩니다</p> 
<p class="words">여기도 적용 안됩니다</p> 

p:not(.words){ font-size:24px; color:#336;}

위에 두개는 적용되고 괄호안에 클래스인 words는 적용안된다

예제를 보려면 아래를 보자

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



설정

트랙백

댓글