CSS [cascading style sheets]

• ** CSS는 동일한 속성값을 여러개 지정시 마지막에 지정한 속성이 적용된다. ex) color:red; color:yellow; 시 yellow가 적용됨. 
• style = color:속성, red:값 , 세미콜론(;) 꼭 필수! 

인라인 스타일

• 요소에 직접 css스타일을 선언하여 구조와 표현의 분리가 안됨

<p style="color:red;"></p>

외부 스타일(이거를 쓰라!) 

• xhtml문서에 link요소를 이용하여 적용한 방식
• 로딩속도가 빠름

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

내부 스타일

• xhtml문서의 head에 직접 선언하는 방식
• 로딩속도 늘질 수 있음

<style type="text/css">

<!--

//-->

</style>

외부 스타일

• link방식과 동일하게 연결, 구버전 브라우저에서는 읽지 못하므로 권장하지X

<style type="text/css">

<!--

@import url(style/base.css);

//-->

</style>

1. before,after

• 앞과 뒤에 content속성을 사용하여 지정, ie6브라우저 지원 안됨(8브라우저 이상에서만...!)

p:before{content:"css시작";}

p:after{content:"css끝";}

2. first-child/first-line/first-letter

• first-child가상 클래스는 첫번째 자식요소에만 스타일이 적용할 수 있다. IE6지원X
• first-line은 요소의 첫번째 줄에 있는 콘테츠만을 선택하여 스타일을 적용할 수 있다. 브라우저를 줄여도 첫번째줄만 적용된다. ...IE6지원X
• first-letter은 요소의 첫번째 글자만 선택하여 스타일을 적용할 수 있다. IE6X

p:first-child{color:#000;}

p:first-line{background-color:yellow; color:red;}

p:first-letter{background-color:red;}

3. class,id

• class는 문서내에서 여러번 사용할 수 있는 선택자로 요소명과 클래스명 구분은 점(.)을 사용-[요소명 생략가능]
• id는 문서내에서 한번만 사용할 수 있으며 요소명과 아이디명 구분할때는 파운드(#)을 사용-[요소명 생략가능]

.lnb{color:red;}

#main{color:red;}

4. 링크 a

• A:link링크걸린상태 / A:visited방문했던 사이트 / A:hover마우스올려놓았을때  / A:active클릭한상태  / A:focus
• 특정도 값이 같으므소 순서대로 작업

a:link{}

a:visited{}a:hover{}

a:active{}

a:focus{}

5. 하위선택자

• 특정 선택자 안에 포함된 하위요소를 지정

div p{color:red;} // 뛰어쓰기하기! 

6. 인접선택자

• 계층구조로 접근했을 때 처음 등장하는 요소는 형 뒤에 오는 요소를 동생이고 형요소 다음에 오는 동생요소에게만 스타일 적용

H1+H2{color:blue;}

7. *****선택자 그룹화

• 다수의 요소에 동일한 선언을 지정하고자 할 경우 적용

H1,h2,p,.lnb{padding:0;}

8. 자식선택자

• 부모요소 아래에 포함된 자식요소에만 스타일 적용

.parent > p{color:red;}

9. 전체선택자

• 문서의 모든 요소에 지정 
• 근래에는 잘사용하지 않는 방법으로 근래에는 선택자 그룹화 한다.

*{padding:0;}

10. 속성선택자(대형프로젝트시)

• input[type="text"]{background-color:green;}
• input[type="password"]{background-color:yellow;}

11. 개별성규칙

• 단계적으로 속성이 적용

<h3></h3>

<h3 class="cascade">단계적적용</h3>

<h3 class="specifi">단계적적용</h3>

h3{color:red;}

.cascade{color:blue;}

.specifi{color:green;}

12. 주석 /*내용*/

13. 폰트단위 font-size

• px단위 : body기본크기를 무시하고 직접 지정한 단위로 표현
• em단위 : body기본크기를 기준으로 상속되어 표현
• 절대단위 : pt,pc,cm,mm..(인쇄)
• 상대단위 : px,em...(웹용)

p{font-size:12px;} / p{font-size:1em;}

14. 글꼴 font-family

• 복수로 지정하고 콤마로 구분한다 . 
• 처음에 오는 폰트가 대표폰트, 뒤에오는 폰트가 대체폰트

p{font-family:"맑은고딕","malgun gothic",sans-serif;}//영문한글 둘다 써야한다.

15. 색상 color

• 색상명 keyword red blue
• 16진수코드 hexa #00ff00 
• 10진수 decimal rgb(255,0,0)
• 백분율 percent rgb(50%,30%,100%)

p{color:red;} 

p{color:#ff00ff;}

p{color:rgb(255,0,0);}

p{color:rgb(0%,0%,100%);}

16. 들여쓰기 text-indent

• 첫줄 들여쓰기 표현이며 해당 크기만큼 들여쓰기 되어짐
• 음수 : 내어쓰기 효과, 양수: 들여쓰기효과

p{Text-indent:20px;}  /  p{Text-indent:-20px;}

17. 글꼴 굵기 font-weigh

• 글꼴을 굵게, 보통굵기 표현 
• bold(700), normal(400)

p{font-weight:bold;}

18. 자간 letter-spacing

• 문자간격조절 음수사용하면 글자가 겹쳐질 수도 있음
• 보통 1px or -1px; 

p{letter-spacing:20px;}

19. 단어간격 word-spacing

• 단어와 단어사이 간격조절

p{word-spacing:20px;}

20. 줄간격(행간) line-height

• 줄과 줄사이의 간격- 행간조절

p{line-height:20px}

21. 글꼴 스타일 font-style

• normal,italic(기울임)

address{font-style:normal;}

22. 텍스트라인 text-decoration

• 텍스트 꾸미기 
• none/underline/overline/line-througth/blink_(IE확인안됨)

A:link{text-decoration:underline;}

23. 가로정렬 text-align

• 문단 가로 정렬 
• left/center/right/justify

p{text-align:center;}

24. 세로정렬 vertical-align

• 문단 세로 정렬 
• top/middle/bottom/super(윗첨자)/sub(아랫첨자)

p{vertical-align:top;}

25. 영문자표현

• font-variant:small-caps; 소문자 > 대문자 , 크기는 소문자 크기로
• font-transform:none; 영문 대소문자를 있는 그대로 출력
• font-transform:uppercase;  소문자 > 대문자
• font-transform:lowercase;  대문자 > 소문자
• text-transform:capitalize;  첫글자 대문자로 변환 

26. 상속 

• 부모요소에 적용한 스타일이 자식요소에 연결되어 적용되는 것을 상속이라고 한다.
• 단, border,margin,padding,float,position 등 위치와 여백에 관련된 것은 상속되지 않는다.

27. 테두리 border

• border-top : 박스 위로 선을 지정
• border-right : 박스 오른쪽으로 선을 지정
• border-bottom: 박스 아래쪽 선을 지정
• border- left : 박스 왼쪽 선을 
• border : 상하좌우 선지정
• solid/dotted/dashhed/double/groove/ridge/insert/outset/hidden

border:1px solid red; 

28. 크기 width/height

• 가로 세로 값

width:500px; height:500px;

29. 여백 padding

• 박스의 안쪽의 여백

padding-top

padding-right

padding-bottom

padding-left

padding:30px 10px;(상하 좌우)

padding:10px 5px 30px 10px;(상,우,하,좌)

padding:20px 50px 30px;(상,좌우,하)

30. 여백 margin

• 박스 밖의 여백
• margin이 두가지 중복 되었을 경우 하나만 표현된다. 큰값만 표현됨 더블마진

margin-top

margin-right

margin-bottom

margin-left

margin:30px 10px;(상하 좌우)

margin:10px 5px 30px 10px;(상,우,하,좌)

margin:20px 50px 30px;(상,좌우,하)

31. 목록 li, list-style-type

• 목록마커변경 
• none(없음)
• disc(검은색동그라미)
• circle(속빈동그라미)
• square(꽉찬사각형)
• upper-alpha(대문자영문)
• lower-alpha(소문자영문)
• upper-roman(대문자로마자)
• lower-roman(소문자로마자)

li{list-style:none;} / li{list-style-type:disc;}

li{list-style-image:url(images/market.gif);} (이미지목록마커)

li{list-position:inside;}(왼쪽안쪽) / li{list-position:outside;}(오른쪽바깥쪽)

32. 배경색상 background-color

• 배경색상 지정
• padding속성을 지정하면 배경 색상 안쪽으로 연백이 생김

body{background-color:red;}

33. 배경 관련

• body{background-image:url(images/bg.gif);} //배경이미지 지정은 기본이 반복해서 전체에 출력, 배경색상과 이미지를 지정하면 색상이 보이지 않음. 이미지가 우선순위
• body{background-repeat:no-repeat;} //배경이미지 반복은 기본이 repeat이고 가로-repeat-x,  세로-repeat-y, 반복안함-no-repeat;
• body{background-position:5px 6px;} //배경이미지 위치변경은 position이고 x,y방향순으로 지정 left,center,right,top,bottom,50%,0%,px단위 모두 사용가능
• body{background:url() no-repeat 20% bottom;} //백그라운드 작업 단축

34. 공백문자처리 white-space 

• Nowrap 줄바꿈안하고 텍스트 스크롤바 생성되면서 출력, 대신스크롤 바가 생성
• pre 하나이상의 연속적인 공백을 그대로 출력

.nowrap{white-space:nowrap;} / .pre{white-space:pre;}

35. 박스의 표시&요소변경 display

• display를 사용하여 표현하지 않음
• 블록요소를 인라인요소로 인라인요소를 블록요로소 표현
• display 속성은 화면에서 영역까지 없어지도록 처리한다
• 비슷한 visibility:hidden(크로스브라우징안됨) 는 영역은 남아있음.
• display:none; / display:hidden; / display:block; / display:inline; 

36. 컨텐츠의 배치 float(부유)

• float를 이용하면 콘텐츠를 이동시킬 수 있다.
• 일반적으로 볼록박스의 흐름을 벗어나 배치 되기 때문에 다른 박스의 배치에 영향을 줌
• float 해제 : clear:both; (class지정해서) 
• float:left; / float:right; / float:none;(float를 하지 않는 것)

38. 박스의 표시 visibility

• 요소의 박스를 감추고자 할때, 화면에 감춰진 박스의 영역은 확보 된다.

visibility:hidden;

39. 박스의 시각효과 overflow

• IE6브라우저 지원X
• scoll(박스에 스크롤바생성)
• auto(박스에 자동스크롤바생성:크기에맞게생김)
• visible(박스크기무시하고모두보여줌:ie6에서는 박스의 크기까지 커진다)
• hidden(박스크기만큼보이고 나머지는 숨김)

40. 박스의 배치 position

• 다수의사용시 유지보수가 힘들다.
• position:relative; //상대위치 박스가 배치될 경우 다른 블록요소에 영향을 주지 않고 배치(자신중심) top,right,bottom,left
• position:absolute; //절대위치 박스가 배치될 경우 문서의 일반적 흐름을 벗어나 배치 다른 블록 요소의 배치에 영향을 주고 배치(자신을 포함하고 있는 컨텐츠(position:relative)가 기준이된다.) top,right,bottom,left

41. 박스의 순서 z-index

• 박스의 겹치는 순서

.box{z-index:1;}

42. 테이블두께 border-collapse

• 테이블 작업시 꼭 해준다.
• 테이블 border작업시 선의 표현 ( 기본2줄을 1줄로 )

border-collapse:separate; 

border-collapse:collapse;

43. 핵 (권장하지 않음)

• 각기다른 브라우저들을 통일시키기 위한...
• *html .html{color:red;}
• .under{color:red;_color:blue;}
• .hash{color:green;#color:yellow;} //순서정확히 그러나 권장하지 않음

브라우저 버전탐색시 그에 맞는 css link(이방법 권장)

<!--[if IE6]>

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

<![endif]-->

<!--[if IE7]>

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

<![endif]-->

44. 우선순위 !inportant

• CSS 우선순위를 정해준다.

p{color:red; !important; color:blue;}