ekadia

css적용우선순위.html

첨부파일참조

-id > class > css 속성(div 나 a 태그)

의 순위를 가진다.

-그리고 디테일하게 정해줄수록 우선순위가 높아진다.

ex) #yy .kk

-나중에 선언할수록 적용순위가 높아진다.

강제상속.html

하위상속에 스타일 모두적용하기

<style type="text/css">

ul > * {border:1px solid red}

</style>

강제상속

<style="border:inherit"></style>

인라인_블럭.html

블록레벨엘리먼트(block-level element)

(div, H1~H6, p, form, ul, li, adress, blockquote, fieldset, table, hr)

한줄에 하나의 엘리먼트만 표시되는 종류의 엘리먼트이다.

인라인 엘리먼트(inline element)

(a, img, em, strong)

한줄에 여러개의 엘리먼트가 표시되는 종류의 엘리먼트

display

display:inline

같은라인에 디스플레이되는데 div의 width나 height는 안먹음

display:block

줄바꿔서 나열된다_ div의 디폴트속성

display:inline-block

같은라인에 디스플레이되는데 div의 width나 height를 먹음

유용하게 쓰일것같다.

볼더나 패딩값이 없이 빈요소에 마진만 있을경우 마진끼리 겹치게되면 큰 요소의 마진만 적용되는 현상이다.

형제간 마진겹침

부보자식간마진겹침

자기자신의 마진겹침이 있다.

http://opentutorials.org/course/45/62

가상클래스_첫줄적용.html

하위선택자

>공백을 통해 부자관계를 구분한다.

ex)#navigation li{color:blue;}

선택자 그룹화

>  ","로 구분해서 넣어주면 된다.

ex)h1, #link{ color:red;}

자식선택자(ie6에서 적용안됨)

>부모의 직접적인 자식에게만 적용이 되고 > 로 구분한다.

ex) #navigation > li{border:1px solid red;}

★가상클래스★

같은 선택자이지만 상황에따라 다르게 적용되게 만든다.

ex).note p:first-child { color:red; }
.note2 p:first-line { color:green; }

.note3 p:first-letter { font-size:20px; color:green; font-weight:bold; }

css버튼.zip

스타일에서

background:url('images/bt.gif') no-repeat top right; background-position:right -450px;

등으로 속성을 조절한다

 important.html

어떤 개별속성이든 모두 무시하고

마지막에  !important를 붙여주면 전체 속성에 일괄적으로 공통적용이 됩니다.

ex)

div {background-color : #ffffff !important; }

http://blog.naver.com/dmssla1211?Redirect=Log&logNo=150178903

구조테스트.zip

하위 선택자에게 상속되는 속성---------------------------

font weight

color

align

text-align

table

td

하위 선택자 상속되지 않는 속성----------------------

padding / border 

강제상속-------------------------------

하위상속에 스타일 모두적용하기

<style type="text/css">

ul > * {border:1px solid red}

</style>

강제상속

<style="border:inherit"></style>

익스플로러_호환.html

★조건주석문(conditinal comment)★

if를 이용해 주석문처럼 사용하며 css유효성검사를 통과할수 있음 익스플로러 몇까지 적용될수 있는지는 모름

주의사항: 스타일안에 적용 안됨

ex)

<!--[if IE 7]>
<p>브라우저를 업데이트하여 주십시오.</p>
<![endif]-->

<!--[if IE 7]>

<p>브라우저를 업데이트하여 주십시오.</p>

<![endif]-->

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="css/ie6.css">

<![endif]-->

★html5 태그를 지원하지 않는 IE9 이하 브라우저에서만 아래와 같은 js를 사용합니다.

<!--[if lt IE 9]>
    <script type="text/javas-ript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

https://code.google.com/p/html5shiv/

※ ie6에서 ie7이상의 css 소스를 사용하려면 구글에서 제공하는 js파일을 임폴트할수있다.

<!--[if IE 6]>

<script src="http://ie7-js.googlecode.com/svn/version/2.1"(beta4)/IE9.js"></script>

<![endif]-->

-------------------------------------------------------

※조건주석문을 제외한 아래 핵들은 css유효성검사를 통과하기 힘들다고함(그게뭐지)

*html필터*

선택자앞에 *html을 붙이면 익스플로러 4~6사이에만 스타일이 적용됨

ex) *html p {color:red;}

언더스코어 핵(underscore hack)

언더스코어(_)를 붙여서 html필터같이 해결 익스플로러6에만 적용됨

ex) p {_color:red }

해시핵(hash hack)

위와같이 #을 붙여주면 익스플로러4~7까지만 적용됨

ex) p {#color:red }

IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용이 됩니다.

ex) *:first-child+html p { padding:3px; }

사파리전용핵

body:first-of-type
ex) body:first-of-type #wrap

파이어폭스에서 익스플로어 코딩맞추기

width="300" wid/th="300" //익스플로러에서 넓이 맞추기

기타 고전핵 관련 링크

http://www.miso2ro.com/hometip/22263

---------------------------------------------------------

 3-5-04.html

퍼블리쉬 검증 사이트

영문

http://validator.w3.org/check/

국문

http://validator.kldp.org/

css검사기

http://jigsaw.w3.org/css-validator/

CSS 인덱스

http://msdn.microsoft.com/en-us/library/ms531207.aspx

※유효성 통과인증배너

<p>
    <a href="http://validator.w3.org/check?uri=referer" target="_blank">

<i★mg s★rc="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>

로딩타임보기_페이지로드 지연시간측정 페이지

http://loadtimer.org/

-----------------------------------------------------

css의 종류

외부 스타일시트(external style sheet)

방법1

<link rel="stylesheet" type="text/css" href="주소" />

방법2

<style type="text/css">@i-port url("주소");</style>

내부 스타일시트(internal style sheet)

페이지 상단에서 선언

인라인 스타일시트(inline style sheet)

같은 태그안에서 선언

-----------------------------------------------------

padding:5px; //안쪽공간 띄움

margin:5px; //바깥공간 띄움

#wrapper {margin:0 auto; width:1000px;} //센터정렬

div는 입력하지 않으면 100%로 인식한다.

div에서 height=100% 는 적용되지 않는다.

-----------------------------------------------------

border 표현형식(첨부파일참조)

border-top

border-top-style: none; hidden; dooted; dashed; solid;

double; groove; ridge; inset; outset;

border-top-width:

border-top-color:

border-collapse: separate; collapse; inherit;

폰트(font)

font로 종합명령을 내릴때는 순서를 지켜야하며

size와 family는 필수속성이다.

형식

font: (weight   style   variant )  size  /line-height  font-family ;

font-weight

normal 은 font-weight : 400 과 동일하게 렌더링되며

bold 의 경우는 font-weight : 700 과 같은 굵기

line-height

--------------------------------------     

반행간 (half-leading)

--------------------------------

폰트사이즈

--------------------------------

반행간 (half-leading)

--------------------------------------

font-variant 와 text-transform

font-variant

크기가 작은 대문자로 변형됨

text-transform

text-transform: uppercase; 대문자
text-transform: lowercase; 소문자

text-transform: capitalize; 첫글자 대문자

white-space (공백 문자 처리 / 줄바꿈 처리)

white-space:pre;

분문을 그대로 붙여넣고 <br / >처리가 번거로울경우 유용하게 쓸수 있을것같다.

white-space:nowrap;

텍스트가 줄바꿈이 안되고 스크롤로 연결되거나 div뚫어버리고 싶을때

※nowrap="nowrap" 라는것이 있는데 같은기능이지만 table에서만 적용된다.

background(백그라운드) 속성 한번에 표현하기

형식은 다음과 같습니다.

background:  color  url(주소)  repeat  position  attachment  inherit

                                                        ↑ 포지션 x좌표,y좌표

ex)최 우측 하단에 이미지 심기

background:url(주소) 100% 100% no-repeat;

background:url(주소) no-repeat right top;