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;}
'CSS' 카테고리의 다른 글
[CSS3] 속성 (0) | 2015.06.05 |
---|---|
[CSS] 서버 웹폰트 적용 (0) | 2015.06.05 |
Block 요소의 가운데 정렬 (0) | 2015.05.06 |
float 요소 중앙정렬 (0) | 2015.05.06 |
[CSS] 서버 웹폰트 적용 @font-face (0) | 2015.05.01 |
IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.