log 2015. 6. 5. 16:42

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>

가상 요소

before,after

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

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

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;}

class, id

class

class는 문서내에서 여러번 사용할 수 있는 선택자로 요소명과 클래스명 구분은 점(.)을 사용-[요소명 생략가능]

.lnb{color:red;}

id

id는 문서내에서 한번만 사용할 수 있으며 요소명과 아이디명 구분할때는 파운드(#)을 사용-[요소명 생략가능]

#main{color:red;}

링크 a

• a:link링크걸린상태
• a:visited방문했던 사이트
• a:hover마우스올려놓았을때
• a:active클릭한상태
• a:focus

특정도 값이 같으므소 순서대로 작업

a:link{}
a:visited{}a:hover{}
a:active{}
a:focus{}

선택자

하위선택자

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

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

인접선택자

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

H1 + H2{color:blue;}
H1 ~ H2{color:blue;}

선택자 그룹화

다수의 요소에 동일한 선언을 지정하고자 할 경우 적용
H1,h2,p,.lnb{padding:0;}

자식선택자

부모요소 아래에 포함된 자식요소에만 스타일 적용
.parent > p{color:red;}

전체선택자

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

*{padding:0;}

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

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

개별성규칙

단계적으로 속성이 적용

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

h3{color:red;}
.cascade{color:blue;}
.specifi{color:green;}

주석

/* 내용 */

폰트단위 font-size

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

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

글꼴 font-family

복수로 지정하고 콤마로 구분한다 .
처음에 오는 폰트가 대표폰트, 뒤에오는 폰트가 대체폰트
영문한글 둘다 명시 해야한다.

p{font-family:"맑은고딕","malgun gothic",sans-serif;}

색상 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%);}

들여쓰기 text-indent

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

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

글꼴 굵기 font-weight

글꼴을 굵게, 보통굵기 표현

• bold(700)
• normal(400)

p{font-weight:bold;}

자간 letter-spacing

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

p{letter-spacing:20px;}

단어간격 word-spacing

단어와 단어사이 간격조절

p{word-spacing:20px;}

줄간격(행간) line-height

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

p{line-height:20px}

글꼴 스타일 font-style

normal,italic(기울임)

address{font-style:normal;}

텍스트라인 text-decoration

텍스트 꾸미기

• none
• underline
• overline
• line-througth
• blink_ (IE 지원 안함)

a:link{text-decoration:underline;}

가로정렬 text-align

문단 가로 정렬

• left
• center
• right
• justify

p{text-align:center;}

세로정렬 vertical-align

문단 세로 정렬

• top
• middle
• bottom
• super(윗첨자)
• sub(아랫첨자)

p{vertical-align:top;}

영문자표현

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

상속

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

테두리 border

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

크기 width/height

가로 세로 값

p {width:500px; height:500px;}

여백 padding

박스의 안쪽의 여백

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding:30px 10px;(상하 좌우)
• padding:10px 5px 30px 10px;(상,우,하,좌)
• padding:20px 50px 30px;(상,좌우,하)

여백 margin

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

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin:30px 10px;(상하 좌우)
• margin:10px 5px 30px 10px;(상,우,하,좌)
• margin:20px 50px 30px;(상,좌우,하)

목록 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;}/* 오른쪽바깥쪽 */

배경색상 background-color

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

body{background-color:red;}

배경 관련

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;} /* 백그라운드 작업 단축 */

공백문자처리 white-space

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

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

박스의 표시&요소변경 display

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

• display:none;
• display:hidden;
• display:block;
• display:inline;

컨텐츠의 배치 float(부유)

float를 이용하면 콘텐츠를 이동시킬 수 있다.
일반적으로 볼록박스의 흐름을 벗어나 배치 되기 때문에 다른 박스의 배치에 영향을 줌

• float 해제 : clear:both; (class지정해서)
• float:left;
• float:right;
• float:none;(float를 하지 않는 것)

박스의 표시 visibility

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

박스의 시각효과 overflow

IE6브라우저 지원X

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

박스의 배치 position

다수의사용시 유지보수가 힘들다.

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

박스의 순서 z-index

박스의 겹치는 순서

.box{z-index:1;}

테이블두께 border-collapse

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

• border-collapse:separate;
• border-collapse:collapse;

핵 (권장하지 않음)

각기다른 브라우저들을 통일시키기 위한...

*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]-->

우선순위 !inportant

CSS 우선순위를 정해준다.

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

css vendor prefix

-webkit- 웹킷 방식 브라우저 (사파리, 크롬)
-moz- 게코 방식 브라우저 (모질라나, 파이어폭스)
-o- 오페라 브라우저
-ms- 마이크로소프트 인터넷 익스플로러

border-radius

.round {-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;-ms-border-radius:20px;}
.round1 {-webkit-border-top-left-radius:20px;} /* 왼쪽 위 */
.round2 {-webkit-border-top-right-radius:20px;} /* 오른쪽 위 */
.round3 {-webkit-border-bottom-left-radius:20px;} /* 왼쪽 아래 */
.round4 {-webkit-border-bottom-right-radius:20px;} /* 오른쪽 아래 */

resize

.resize {resize:both; overflow:auto;} // 가로,세로 
.resize {resize:vertical; overflow:auto;} // 세로 
.resize {resize:horizontal; overflow:auto;} //가로 

border-shadow

.shadow {box-shadow:5px 5px 20px red;-webkit-box-shadow:5px 5px 20px red;}
.shadow {box-shadow:5px 5px 20px rgba(255,0,0,0.2);}

text-shadow

.text {font-size:2em;font-weight:bold;background:#fff;text-shadow:5px 5px 5px rgba(0,255,0,0.5);}

text-overflow

.overflow {width:200px;border:1px solid red; text-overflow:clip;overflow:hidden;}
.overflow {width:200px;border:1px solid red; text-overflow:ellipsis;overflow:hidden;}

background-image

.bg {
	width:600px;height:400px;border:1px solid green;background:url(bg.jpg) no-repeat, url(bg2.gif) repeat;
}

background-origin

.origin {
	width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:content-box;
}
/* padding을 제외한 컨텐츠 영역부터 기준점으로 배경 배치. repeat 지정시 기준점 밖 영역은 repeat 배경으로 채움 */
.origin {
	width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:padding-box;
}
/* padding영역부터 배경이미지 배치. 기준점 밖 영역은 repeat 배경으로 채움 */
.origin {
	width:200px;padding:30px;border:1px solid green;background:url(bg.gif) no-repeat;background-origin:border-box;
}
/* border의 바깥쪽 라인영역을 기준으로 배경이미지 배치. */

background-size

.bgsize {
	background:url(bg.gif) no-repeat;background-repeat:no-repeat;background-size:80px 60px;
}

background:Gradients

.gradient{
	width:300px; height:200px;
 	background:gradient(linear,left top,left bottom,from(#f00),to(#fff));
 	background:-webkit-gradient(linear,left top,left bottom,from(#f00),to(#fff));
}
/* 
	barground:gradient(유형linear,시작위치,끝위치,색상시작지정,색상끝지정) 
*/
.gradient {
	width:300px; height:200px;
   background:gradient(radial,center center,10,center center,90,from(#f00),to(#fff));
   background:-webkit-gradient(radial,center center,10,center center,90,from(#f00),to(#fff));
}
/*
	barground:gradient(유형radial,시작위치,반지름,위치,반지름,색상시작지정,색상끝지정)
*/

linear-gradient

.linear-gradient {
	width:200px; height:100px;
 	background:linear-gradient(45deg,red,green,blue);
 	background:linear-gradient(to top, rgba(0,255,0,0),rgba(0,255,0,0.8));
 }

columns

.columns {
	column-count:4;-webkit-column-count:4; /* 단의 갯수 */
   column-gap:50px;-webkit-column-gap:50px; /* 단과 단사이의 공백 */
   column-rule:2px dotted gray;-webkit-column-rule:2px dotted gray; /* 라인 */
   column-width:100px;-webkit-column-width:100px; /* 단의 가로크기 */
}

font-face

@font-face {
	font-family:src:url(파일명);
}

animation

.animation {
  width:50px; 
  height:50px;
  background:blue; 
  position:relative;
  animation:ani 5s;-webkit-animation:ani 5s;
}

@keyframes ani{
	0%{background:blue; left:0px; top:0px;}
	100%{background:red; left:200px; top:0px;}
}

@-webkit-keyframes ani{
	0%{background:blue; left:0px; top:0px;}
	100%{background:red; left:200px; top:0px;}
}

opacity

.opacity {
	opacity:0.3;
}

flex

<div class="flex">
  	<div class="box1">box1</div>
	<div class="box2">box2</div>
	<div class="box3">box3</div>
</div>

.flex{width:400px; height:300px; border:1px solid red; display:flex;}
.flex div{flex-basis:100px;}
.flex div:nth-of-type(1){flex-basis:200px;}
.box1{background:red;}
.box2{background:green;}
.box3{background:blue;}