**-위에서 아래로 해석하는 탑다운(topdown) 방식이며, 한 줄씩 읽는 인터프리터(interpreter) 방식
-프론트엔드에서 디자인을 담당하는 언어**

🪐 **내부스타일(internal) : html 문서 내의 style 태그에 작성

<style>
	div{padding:0;}
</style>**

🪐 **외부스타일(external) : css파일에 작성 후 html파일에 링크
<link rel="stylesheet" href="./css/reset.css">**

🪐 **인라인스타일(inline) : html 태그에 직접 작성
<div style="padding:0;"></div>**

🪐 **선택자(키워드, 예약어)
- 선택자의 우선순위는 지정 범위가 넓을수록 낮음
(!important > inline style > id > class > tag > *)

&요소 선택자**
▪️ **요소명으로 선택
- ex) li{style}**
▪️ **조상태그 자손태그 : 조상 태그와 자손 태그 사이를 한 칸 띄어씀
- ex) ul li{style}**
▪️ **부모태그 자식태그 : 부모 태그와 자식 태그 사이에 >를 씀
- ex) ul > li{style}**
▪️ *** : 모든 요소를 선택
- ex) *{style}**
▪️ **class(.) : 클래스를 선택
- 해당 클래스를 가진 요소만 선택할 수 있음
- ex) .className{style}, li.className{style}**
▪️ **id(#) : 아이디를 선택
- ex) #id{style}

&여러 선택자**
▪️ **, : #id, .class, div{} 
&속성 선택자**
▪️ **= : 해당 속성과 일치하면 선택 
- 선택자[속성명='속성값'], ex) a[target="_blank"]{style}**
▪️ **~= : 해당 속성이 포함되면 선택
- 선택자[속성명~='속성값'], ex) a[class~="portal"]{style}**
▪️ **^= : 해당 속성으로 시작하면 선택
- 선택자[속성명^='속성값'], ex) a[href^="http"]{style}**
▪️ **$= : 해당 속성으로 끝나면 선택
- 선택자[속성명$='속성값'], ex) a[href$=".net"]{style}**
▪️ ***= : 해당 속성을 포함한 모두
- 선택자[속성명*='속성값'], ex) a[title*="kor"]{style}

&가상선택자
- ex) 선택자:hover{style}**
▪️ **:link : 링크 태그 선택**
▪️ **:visited : 링크 클릭 후 선택**
▪️ **:hover : 마우스 커서를 올리면 선택**
▪️ **:focus : 탭으로 이동하면 선택**
▪️ **:active : 클릭하면 선택**
▪️ **:target : 앵커 대상을 선택
- ex) #intro:target{style}**
▪️ **:not() : 특정 요소를 제외하고 선택
- ex) input:not([type="radio"]){style}**
▪️ **:checked : 체크된 input를 선택
- ex) input:checked{style}
▪️ ::before : 가장 첫번째 자식으로 가상요소 생성
▪️ ::after : 가장 마지막 자식으로 가상요소 생성
- before, after 둘 다 인라인 요소
- 항상 content 속성을 포함
- ex) div::before{content:"";}

&가상클래스**
▪️ **nth-child(n) : 부모값의 자식이 여러 개일 때 가상클래스를 생성해
트정 자식값을 선택, n은 1부터 시작
- 첫번째 자식은 first-child, 마지막 자식은 last-child로 대체 가능 
- ex) li:nth-child(1){style}
- odd : 홀수 선택, ex) li:nth-child(odd){style}
- even : 짝수 선택, ex) li:nth-child(even){style}
- 2n : 배수 선택, ex) li:nth-child(2n){style}
- 2n+1 : 배수 + 1 선택, ex) li:nth-child(2n+1){style}

&형제클래스**
▪️ **+ : 바로 다음 형제 선택자 
- ex) div+p{style}
▪️ ~ : 다음에 오는 해당하는 모든 형제 선택
- ex) div~p{style}**

🪐 **색상(Hex) : 16진수로 이루어짐(0 ~ 9A = 10 ~ F = 16)
- RGB : 픽셀로 이루어진 비트맵 형식, RRGGBB로 구성된 가산혼합방식으로
#000000 형태로 쓰임 ()
(R = 0 ~ 255, G = 0 ~ 255, B = 0 ~ 255)
-> div{color:#00ff00;}**

🪐 **글꼴(font) : 폰트 변경
- 직접설치 사용 : 운영체제에 맞는 설치경로에 설치하여 사용(설치경로(윈도우) : C:\\Windows\\Fonts)
@font-face{
	font-family : 'trana'; /*이름 자유롭게*/
	src : url ('./font/trana.ttf') format('truetype')
}**

🪐 **외부 파일 사용**
▪️ **CDN 사용 : 폰트 제공 회사에서 제시하는 방법으로 사용 (import방식과 link방식 등)
- import 방식 : 별도의 css 파일 상단에 적용하거나 style 태그 내에 적용, import앞에 @(메모리에 자동 로드)를 씀
- link 방식 : head 태그 내에 적용
- ttf : 표준, MS와 애플이 개발한 폰트 포멧, 가장 많이 쓰임
- otf : 고해상도 출력 시 사용**

🪐 **속성

&공통속성**

▪️ **width : 100px; {width: 너비값; [기본값 : 100%]}**
▪️ **height : 100px; {height: 높이값; [기본값 : auto]}**
▪️ **border : 1px solid #000; {border : 굵기 모양 색상;}
- 태그 테두리에 선을 생성
- 보더 모양 : solid(default), dashed, dotted**
▪️ **border-radius : 15px 15px 15px 15px; {border-radius : top right bottom left;}
- 보더의 꼭짓점 부분을 원형으로 만듬(원의 반지름)
- 적용 단위 : px, % 등**
▪️ **box-sizing : border-box;
- width 값에 따라 박스 너비에 적용되는 padding, border 값을 맞춤**
▪️ **padding : 10px 20px 30px 40px {padding : top right bottom left;}
- css 초기화(padding:0)
- 박스의 내부 여백**
▪️ **margin : 10px 20px 30px 40px {margin : top right bottom left;}
- css 초기화{margin:0;}나 박스를 화면 중앙에 오게 할 때 사용{margin:0 auto;}
- 박스의 바깥 여백
- 마진 겹칩현상 : 위아래로 겹칠 경우 큰 값만 적용, 좌우는 합쳐서 적용** 
▪️ **line-height : 1em {line-height : px,em,%;}
- 기본 단위 em, 생략되어있음
- em(rem) 계산 : px/em, % 계산 : (px/em)*100**
▪️ **display : block; {display: block, inline, inline-block;}
- 해당 선택자의 속성(혈액형) 변경**
▪️ **background:url('./images/img.png') no-repeat right bottom fixed;
{ background:color url('경로') repeat설정 position(x y) attachment; }
- background-color : #000;
- background-size : 100px 100px; { background-size : x축 y축; 또는 cover;[x축 y축 값이 같으면 하나만 입력] }
- background-position : center center; { background-position : x축 y축;[x축 y축 값이 같으면 하나만 입력] }
- background-repeat : no-repeat; { 단위 : repeat[default], no-repeat; }**

▪️ **text-align : center; { 단위 : left[default], right, center, justify }**
▪️ **transform : translate(이동), skew(기울기), rotate(회전), scale(확대);
- matrix() : matrix(1,0,0,1,0,0); { matrix(scaleX,tan(skewY),tan(skewX),scaleY,translateX,translateY) }
- translate() : translate(30px, 30px); { translate(x축, y축) }
- rotate() : rotate(30deg); { rotate(각도) }

&그라디언트**

▪️ **background : 그라디언트 타입(시작지점 끝지점 | 각도, 색상1, 색상2, 색상3 ...); 
ex) background: linear-gradient(to left top, red, green, blue ...);
- 접두사(prefix)[webkit,moz] : css함수 앞에 붙여 해당 브라우저에 호환시킴 (-webkit-linear-gradient)

&테이블속성**

▪️ **border-collapse : collapse; {종류 : collapse, separate[default]}
- 테이블의 간격 합치기

&폰트속성**

▪️ **font : type | weight | size/line-height | 'main-font', sub-font 
{font : italic bold 20px/1.5 'Roboto', sans-serif;}**
▪️ **font-family : 'Roboto', sans-serif; {font-family : '적용폰트', 대체폰트;}**
▪️ **font-size : 16px; {단위 : px, em, rem, %}**
▪️ **font-weight : 600; {100 ~ 900 까지, 400[default], 700[bold]}**
▪️ **font-style : italic; {font-style : 적용스타일;}**
▪️ **color : #000; {단위 : #rrggbb, rgba(0~255, 0~255, 0~255, 0~1), 키워드[blue]}

&그림자속성**

▪️ **box-shadow : x-position y-position blur spread color | none | inset | initial | inherit
{box-shadow : 1px 1px 2px 3px #000;}
- blur : 그림자를 흐릿하게 만든다. 값이 클 수록 더욱 흐려진다.
- spread : 양수면 그림자를 확장하고, 음수면 축소한다.**

▪️ **text-shadow : offset-x offset-y blur-radius color | none | initial | inherit
{text-shadow : 1px 2px 3px #000 , 2px 3px 3px #001, 3px 4px 3px #002;}
- blur-radius : 흐림 정도를 정한다. (선택 : 값을 정하지 않으면 0)

&이미지속성**

▪️ **vertical-align : top;{종류 : top, middle 등} 
- 이미지의 기준을 top으로 잡음

&레이아웃속성**

▪️ **float : left; {종류 : left, right, none}
- 너비값이 있어야 적용, 부표처럼 둥둥 떠다니는 상태
- float 적용 시 무조건 float 해제를 해야함
- overflow : hidden;을 부모값에 적용**

▪️ **clear : both; {종류 : left, right, both}
- float가 적용된 형제 태그의 마지막에 적용하여 float 해제
- 이중 플롯일 때 부모 값에 플롯 해제할 경우 자식 플롯은 자동 해제
- 마지막 형제 태그에 float이 없을 경우 clear : both; 적용
- 부모값에 ::after 생성 후 clear : both; 적용
ex) ul::after{content:""; display:block; clear:both;}**

▪️ **position : relative {종류 : relative, absolute, fixed, static[default]}
- 박스를 겹칠 경우 사용
- relative : 홀이 존재, 구조가 안깨짐, 부모가 기준
- absolute : 홀이 없음, 구조가 깨짐, 부모 중에 relative가 코딩된 곳이 기준
{박스 중앙정렬 : left:50%; top:50%; transform:translate(-50%,-50%);}
- fixed : 홀이 없음, 구조가 깨짐, 브라우저가 기준

▪️ overflow : hidden {종류 : hidden, auto, scroll, visible}
- hidden : 적용된 요소의 범위만큼만 콘텐츠를 보여줌
- scroll : 적용된 요소의 범위보다 콘텐츠가 넘치면 스크롤 생성
- auto : 콘텐츠의 크기에 따라 자동적용
- visible : 항상 보이게함

▪️ display : flex;
- 부모에 적용 시 자식이 flex-items가 됨**

▫️ **flex-direction : row {종류 : row(default),row-reverse,column,column-reverse}
- 주축과 교차축을 정함
- row : x축으로 쌓임
- row-reverse : x축으로 쌓임, 콘텐츠 순서가 역방향
- column : y축으로 쌓임
- column-reverse : y축으로 쌓임, 콘텐츠 순서가 역방향**

▫️ **flex-wrap : nowrap {종류 : nowrap(default), wrap}
- nowrap : 한 줄에 전부 넣음
- wrap : 부모 크기보다 넘치면 밑으로 내려감**

▫️ **flex-flow : direction | type; {flex-flow : row wrap;} 
- flex-direction과 flex-wrap이 합쳐진 것 {flex-flow : direction | wrap}**

▫️ **justify-content : flex-start; {종류 : flex-start, flex-end, center, space-between, space-around}
- 플렉스 아이템 주축 기준으로 방향 배치[부모박스 적용]
- flex-start : 주축 시작 지점부터 정렬
- flex-end : 주축 끝 지점부터 정렬
- center : 주축 시작부터 끝 사이 중앙정렬
- space-between : 주축 시작과 끝 그리고 중앙에 균등 정렬
- space-around : 주축 시작과 끝을 기준으로 일정 간격 균등 정렬**

▫️ **align-items : flex-start; {종류 : stretch(default), flex-start, flex-end, center, baseline}
- 플렉스 아이템 교차축 기준으로 방향 배치[부모박스 적용]**

▫️ **align-self : flex-start; {종류 : flex-start, flex-end, center...}
- 플렉스 아이템 교차축 기준으로 방향 개별 배치[플렉스 아이템 적용]**

▫️ **order : 1 {종류 n , nth}
- 플렉스 아이템의 화면상에 보이는 순서 변경[플렉스 아이템 적용]**

▫️ **flex : 0 1 auto; {flex : flex-grow | flex-shrink | flex-basis}
- flex-grow[증가너비]
- flex-shrink[감소너비]
- flex-basis[기본너비] : 단위 사용 시 기본너비값 적용
- ex) 기본크기의 두 배 설정 : flex : 2 2 0;

&변환속성**
▪️ **transform : translate(30px,20px);
- translate(px,%,em,rem) : 위치변환, translateX(30px), translateY(20px)
- rotate(deg) : 회전
- scale(0 ~ 양수) : 크기변환, scaleX(1.2), scaleY(0.8)
- skew(deg) : 기울이기(왜곡), skewX(20deg), skewY(10deg)
- prefix : -webkit-,-moz- 등이 있음, 각 함수앞에 붙임
ex) transform : -webkit-translate(30px,20px);**

**&애니메이션속성
▪️ transition : prop1, prop2... | duration-time, duration-time... | play-type | delay;
- ex) transition : all 1s ease-in 2s;**
▫️ **transition-duration : time(s);**
▫️ **transition-property : prop; (적용할 css 속성, 여러 개 적용 가능)**
▫️ **transition-delay : time(s);**
**- linear : 같은 속도로 진행
- ease : 천천히 시작 후 빨라진 다음 마지막에 천천히 
- ease-in : 천천히 시작 후 빨라짐
- ease-out : 빠르게 시작 후 천천히
- ease-in-out : 천천히 시작 후 마지막에 천천히

▪️ cursor : pointer;
- 마우스 hover 시 커서 모양이 바뀜
- 참조 사이트 : [<https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword>](<https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword>)

▪️ animation: duration | easing-function | delay | name;
ex) animation: 3s linear 1s slidein;
- name : 애니메이션 이름
- interation-count : 반복횟수
- direction : 애니메이션 방향, 정방향 재생, 역방향 재생 등
- fill-mode : 실행 후 적용시킬 css
- duration : 재생 시간
- play-state : 현재 애니메이션 플레이 상태
- delay : 지연 시간
- prefix(-webkit-, -moz-) 미적용 시 실행 안되는 브라우저가 있을 수 있음 

▪️ @keyframes animation-name {
		from{
			처음 적용될 css
		}
		to{
			마지막에 적용될 css
		}
}
- 지정된 애니메이션과 연결하여 실행
- 내부에 from, to 또는 0% ~ 100% 수치로도 나눠서 적용가능**

🪐 **반응형

▪️ 미디어쿼리 : 조건에 따라 style 적용, CSS3의 기능

@media 적용타입 and (조건){style}
- 적용타입은 all 또는 screen을 주로 사용
/* 너비값이 최소 360px 이상이면 적용 */
@media all and (min-width:360px){
	body{
		background-color:red;
	}
}

@media 적용타입 and (조건) and (조건) {style}
- 조건은 and를 사용해서 여러 개 적용 가능
/* 너비값이 최소 360px에서 최대 768px까지 적용 */
@media all and (min-width:360px) and (max-width:768px){
	body{
		background-color:green;
	}
}

& MOBILE 퍼스트 : 모바일을 기준으로 CSS작성, min-width를 주 조건으로 사용하며, 
								탑다운 방식으로 위에서부터 모바일 > 태블릿 > PC 순으로 코딩, 
								공통코딩은 가장 위에 작성하며, 모바일 부분 대체

/* 공통코딩 */
body{background-color:red;}
/* 모바일 미디어쿼리 360px 이상 */
@media all and (min-width:360px){body{background-color:blue;}} 
/* 태블릿 미디어쿼리 768px 이상 */
@media all and (min-width:768px){body{background-color:green;}}
/* PC 미디어쿼리 1024px 이상 */
@media all and (min-width:1024px){body{background-color:purple;}}

& PC 퍼스트 : PC를 기준으로 CSS작성, max-width를 주 조건으로 사용하며, 
						탑다운 방식으로 위에서부터 PC > 태블릿 > 모바일 순으로 코딩, 
						공통코딩은 가장 위에 작성하며, PC 부분 대체

/* 공통코딩 */
body{background-color:red;}
/* PC 미디어쿼리 1024px 이하 */
@media all and (max-width:1024px){body{background-color:purple;}}
/* 태블릿 미디어쿼리 768px 이하 */
@media all and (max-width:768px){body{background-color:green;}}
/* 모바일 미디어쿼리 360px 이하 */
@media all and (max-width:360px){body{background-color:blue;}} 

& orientation:landscape : 너비 > 높이, 디바이스 기준 가로모드

/* 가로(너비) */
@media screen and (orientation:landscape){
    body{
        background-color:green;
    }
}

& orientation:portrait : 높이 > 너비, 디바이스 기준 세로모드
/* 세로(높이) */
@media screen and (orientation:portrait){
    body{
        background-color:red;
    }
}**