html/html_css2014. 1. 21. 14:25


 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;


Posted by 갓리버리