당 떨어질 땐 초코딩

객체 : 데이터명과 값을 설정하여 저장할 때 사용 { 데이터명1 : 값1, 데이터명2 : 값2, 데이터명3 : 값3 } 변수 : 하나의 데이터를 저장 var 변수명 = 데이터; - 프로그램에서 데이터를 유지 - 메소드 밖에서는 사용 불가 배열 : 데이터를 순차적으로 저장 var 변수명 = [ 데이터1, 데이터2, 데이터3 ]; - 객체 선언 방법과 비슷하지만 '데이터명'을 지정하지 않는다는 차이 this : 데이터 수집 전용 변수 - this에 저장되는 데이터는 JavaScript의 실행 내용에 따라 자동으로 변환 - 사용 이유 1. 처리 성능 향상 2. 같은 코드 여러번 사용 가능 3. $( ) 함수에 여러 선택자를 지정한 경우, 처리 시점을 나눌 수 있음 - on( ) 메소드안에서 this를 지정하면..

animate( ) : 처리 대상에 애니메이션 효과를 줄 때 사용하는 메소드 .anmaite({ /* 첫 번째 매개 변수 */ 'CSS 속성 1' : '값 1', 'CSS 속성 2' : '값 2', 'CSS 속성 3' : '값 3' }, /* 애니메이션 실행 시간 */, /* 이징 종류 */, function() { //이벤트 } ); - 첫 번째 매개 변수 : 애니메이션 효과 실행 완료 시, 외형을 표현하는 CSS 속성과 값을 전달 - 애니메이션 실행 시간 : 얼마만큼 시간이 지난 후에 애니메이션 효과를 적용하는지 지정 - 이징 종류 : 애니메이션 효과의 변화 속도 - linear : 같은 속도, 완급 조절 없이 일정한 속도로 움직임 - swing : 가벼운 완급 조절, 애니메이션 효과의 속도가 약간 ..

on( ) : 특정 사건이 발생하는 시점에 실행할 명령을 설정하는 메소드 - on( ) 메소드의 첫 번째 매개변수는 이벤트 타입을, 두 번째 매개 변수는 이벤트 핸들러를 전달 on('이벤트 타입' . '이벤트 핸들러'); - 이벤트 : 특정 사건 - 이벤트 타입 : 이벤트 유형 - 이벤트 핸들러: 실행하려는 명령(함수) 주요 이벤트 타입 이벤트 타입 해당 시점 mouseover 요소에 마우스 포인터를 올려놓았을 때 mouseout 요소에서 마우스 포인터가 벗어날 때 mousedown 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭할 때 mouseup 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭했다가 땔 때 mousemove 요소 안에서 마우스 포인터를 움직일 대 click 요소를..

CSS 스타일 변경 $(function(){ $('선택자').css('속성', '값'); } - 선택자 : CSS와 같은 선택자를 지정 - 속성 : CSS 속성 지정 - 값 : 속성에 설정할 값을 지정 - 명령 대상 : $('선택자') - 명령 내용 : css('속성', '값') -> '명령대상에 명령 내용을 보낸다' 라고 해석 명령 대상 id="hello" //HTML $('#hello') // jQuery - css( ) 메소드의 명령 대상이 되는 것은 id의 값이 정의된 HTML 요소 - $( ) 의미 : 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다' - jQuery 객체 : $( ) 함수를 통해 jQuery 고유의 형식으로 변횐된 요소 명령 내용 - 의미 : CSS의 '속성'..

플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치 display : 플렉스 컨테이너 지정 - flex 속성 : 플렉스 박스를 박스 레벨 요소로 정의 - inline-flex 속성 : 플렉스 박스를 인라인 레벨 요소로 정의 flex-direction : 플렉스 방향 지정 속성 값 설명 row 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치 row-inverse 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽에서 왼쪽으로) 배치 column 주축을 세로로 교차축을 가로로 지정 플렉스 항목은 주축 시작점에서 끝점으로(위쪽에서 아래쪽으로) 배치 column-inverse 주축을 세로로..

@keyframes : 애니메이션 지점 설정 - 브라우저 접두사를 붙여서 사용 @keyframes { { } } animation-name : 애니메이션 이름 지정 animation-name : | none animation-duration : 애니메이션 실행 시간 설정 animation-direction : 애니메이션 방향 지정 - normal 속성 : 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아감 - alternate 속성 : 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행 animation-iteration-count : 반복 횟수 지정 animation-iteration-count : | infinite - : 입력한 숫자만큼 반복 (기본 값은 1) - infini..

트랜지션 : 웹 요소의 스타일 속성이 바뀌는 것 transition-property : 트랜지션을 적용할 속성 지정 - all 속성 : 요소의 모든 속성이 트랜지션 대상이 됨 (기본 값) - none 속성 : 트랜지션 동안 아무 속성도 바뀌지 않음 - : 트랜지션 효과를 적용할 속성 이름을 지정 속성이 여러개일 경우, 쉼표(,)로 구분해여 나열 transition-duration : 트랜지션 진행 시간 지정 transition-timing-function : 트랜지션 속도 곡선 지정 속성 값 설명 linear 시작부터 끝까지 똑같은 속도로 트랜지션 진행 ease 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냄 (기본 값) ease-in 시작을 느리게 함 ease-out 느리게 끝냄 eas..

변형 : 특정 요소의 크기나 형태가 변하는 것 - 2차원 변형 : 웹 요소를 변형시킬 때, 단순히 수평이나 수직으로 이동하고 회전 - 3차원 변형 : x축과 y축에 원근감을 주는 z축을 추기해 변형 transform - 2차원 변형 함수 -> -webkit- 와 -moz-, -ms-, -o- 등의 접두사를 붙여야 함 변형 함수 설명 translate(tx, ty) 지정한 크기 만큼 x축과 y축으로 이동 translateX(tx) 지정한 크기 만큼 x축으로 이동 translateY(ty) 지정한 크기 만큼 y축으로 이동 scale(sx, sy) 지정한 크기 만큼 x축과 y축으로 확대 / 축소 scaleX(sx) 지정한 크기 만큼 x축으로 확대 / 축소 scaleY(sy) 지정한 크기 만큼 y축으로 확대 /..

가상 클래스 : 클래스 이름 앞에 콜론(:)을 붙여 표시 사용자 동작에 반응하는 가상 클래스 - :link : 방문하지 않은 링크에 스타일 적용 - :visited : 방문한 링크에 스타일 적용 - :hover : 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용 - :active : 웹 요소를 활성화했을 때 스타일 적용 - :focus : 웹 요소에 초점이 맞춰졌을 때 스타일 적용 UI 요소 상태에 따른 가상 클래스 - :enabled / :disabled : 요소를 사용할 수 있을 때 / 없을 때 스타일 지정 - :checked : 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정 구조 가상 클래스 - :root : 문서 전체에 적용 - :nth-child(n) / :nth-last..

연결 선택자 : 선택자와 선택자를 연결해 적용 대상을 한정시킴 하위 선택자 : 지정한 모든 하위 요소에 스타일 적용 - 형태 : [상위요소] [하위요소] == ----- 111111 자식 선택자 : 자식 요소에만 스타일 적용 - 형태 : [부모요소] > [자식요소] == ----- 111111 - 위와 같을 때, 3가지의 요소 중 첫 번째 요소에만 스타일이 적용 인접 형제 선택자 : 가장 가까운 행제 요소에 스타일 적용 - 형태 : [요소 1] + [요소 2] --------- - 위와 같을 때, 태그의 형제 요소들 중 맨 먼저 오는 요소에 스타일 적용 형제 선택자 : 형제 요소에 스타일 적용 - 형태 : [요소 1] ~ [요소 2] --------- - 위와 같을 때, 요소의 동생들 중 모든 요소에 스..

비디오 - : 를 지원하지 않는 이전 브라우저에서 사용 지원 버전 브라우저 비디오 오디오 mp4 webm ogv mp3 ogg 인터넷 익스플로어 o (9+) x x o (9+) x 크롬 o (all) o (25+) o (all) o (all) o (all) 파이어폭스 o (35+) o (28+) o (3.5+) o (22+) o (3.5+) 사파리 o (3.2+) x x o (4+) x 오페라 o (all) x x o (4.1+) x IOS 사파리 o (all) x x o (4.1+) x 안드로이드 브라우저 o (4.4+) x x o (2.3+) o (2.3+) : 비디오 파일 삽입 : 여러 미디어 파일 한꺼번에 지정 - src : 미디어 파일 경로 지정 (공백이 있으면 안됨) - type : 웹 브라우..

: 머리말 - 주로 페이지 맨 위쪽이나 위쪽에 삽입 - 내용으로는 태그를 사용해 검색 창을 넣거나 태그를 사용해 사이트 메뉴를 넣음 - 본문 해당 부분의 머리말로 사용 : 문서를 연결하는 내비게이션 링크 - 동일한 사이트 안의 문서나 다른 사이트 문서로 연결하는 링크 모음 - 어느 부분이 내비게이션인지 쉽게 알 수 있음 - 위치에 영향을 받지 않음 : 주제별 콘텐츠 영역 나타냄 - 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용 : 콘텐츠 내용 넣기 - 웹 상의 실제 내용을 넣음 - 대부분 블로그의 포스트, 웹 사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 해당됨 - 태그을 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 될 때 사용 : 본문 이외..

box-sizing : 박스 너비 기준 설정 - 박스 모델 안에 있는 콘텐트 부분의 너비와 높이 지정 - content-box 속성 : width 속성 값을 콘텐츠 영역 너비 값으로 사용 (기본 값) - border-box 속성 : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용 float : 왼쪽이나 오른쪽으로 배치 - left 속성 : 해당 요소를 문서의 왼쪽으로 배치 - right 속성 : 해당 요소를 문서의 오른쪽으로 배치 - none 속성 : 좌우 어느 쪽으로도 배치하지 않음 clear : float 속성 해제 - left 속성 : float:left 무효화 - right 속성 : float:right 무효화 - both 속성 : left인지 right인지..

block-level : 태그를 사용해 요소를 삽입했을 때, 혼자 한 줄을 차지하는 요소 - 해당 요소의 너비가 100%라는 의미 - 오른쪽이나 왼쪽에 다른 요소가 올 수 없음 - 너비나 마진, 패딩 등을 이용해 크기나 위치를 지정 - 해당 태그 : ~ inline-level : 줄을 차지하는 요소 - 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 - 한 줄에 여러 개의 인라벨 요소 표시 가능 - 해당 태그 : ex) 태그는 태그 안에서 사용 가능 box model : 박스 형태의 콘텐츠 width, height : 콘텐츠 영역 크기 width : | | auto height : | | auto - 크기 : 너비나 높이 값을 px이나 cm같은 단위와 함께 수치로 지..

linear-gradient : 선형 그라데이션 linear-gradient( to , color-stop, ...); - 방향 : 'to' 키워드와 함께 사용 속성 값 설명 to top 아래에서 시작해 위로 to left 오른쪽에서 시작해 왼쪽으로 to right 왼쪽에서 시작해 오른쪽으로 to bottom 위에서 시작해 아래로 접두사 브라우저 버전 '위치' 속성 값 -webkit- 사파리 5.1 ~ 6.0 그라데이션 시작 위치 기준 -moz- 파이어폭스 3.6 ~ 15 그라데이션 끝 위치 기준 ('to' 키워드 사용하지 않음) -o- 오페라 11.1 ~ 12.0 그라데이션 끝 위치 기준 ('to' 키워드 사용하지 않음) - 각도 : 색상이 바뀌는 방향을 알려주는 또 다른 방법 - 'deg'로 표기 -..

background-color : 배경 색 지정 - 세밀하게 조절하고 싶으면 16진수 사용 - 투명도도 함께 조절하고 싶으면 rgba 사용 - 원색을 사용하고 싶으면 색상 이름 사용 background-clip : 배경 적용 범위 조절 - border-box 속성 : 박스 모델의 가장 외각인 테두리(border)까지 적용 - padding-box 속성 : 박스 모델에서 테두리를 뺀 패딩(padding)범위까지 적용 - content-box 속성 : 박스 모델에서 내용 부분에만 적용 background-image : 웹 요소에 배경 이미지 넣기 background-image : url('이미지 파일 경로') background-repeat : 배경 이미지 반복 방법 지정 - repeat 속성 : 브라우저 ..

16진수 표기법 - #기호 다음에 6자리의 16진수로 표시 - #RRGGBB (RR - 빨간색, GG - 초록색 BB - 파란색) - 00 : 색상이 하나도 섞이지 않음 - ff : 가득 섞여 있음 ex) #000000은 검은색, #ffffff은 흰색 십진수 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16진수 0 1 2 3 4 5 6 7 8 9 a b c d e f rgb / rgba 표기법 - 0 : 하나도 섞이지 않음 - 255 : 가득 섞임 ex) rgb(0,0,0) 또는 rgb(0,0,0,0) 은 검은색, rgb(255,255,255) 또는 rgb(255,255,255,255) 은 흰색 hsl / hsla 표기법 - h : hue (색상) - 색의 3요소 중 하나로 각도를..

list-style-type : 목록의 불릿과 번호 스타일 지정 - 불릿 모양 속성 값 설명 disc ● circle ○ square ■ none 없음 - 순서 목록에서 숫자 바꾸기 가능 속성 값 설명 decimal 1로 시작하는 10진수 decimal-leading-zero 앞에 0이 붙는 10진수 lower-roman 소문자 로마 숫자 upper-roman 대문자 로마 숫자 lower-alpha 또는 lower-latin 소문자 알파벳 upper-alpha 또는 upper-latin 대문자 알파벳 armerian 아르메니아 숫자 georgian 조지 왕조시대의 숫자 list-style-image : 불릿 대신 이미지 넣기 list-style-image : url('이미지 파일 경로') list-sty..

direction : 글자 쓰기 방향 지정 - ltr : 왼쪽으로 오른쪽으로 표기 (기본값) - rtl : 오른쪽에서 왼쪽으로 표기 text-align : 텍스트 정렬 - start : 현재 텍스트 줄의 시작 위치에 맞춰 문단 정렬 - end : 현재 텍스트 줄의 끝 위치에 맞춰 문단 정렬 - left / right / center / justifty : 왼쪽 / 오른쪽 / 가운데 / 양쪽에 맞춰 정렬 - match-parent : 부모 요소를 따라 문단 정렬 text-justify : 정렬 시 공백 조절 - auto : 웹 브라우저에서 자동으로 지정 - none : 정렬하지 않음 - inter-word : 단어 사이의 공백을 조절해 정렬 - distribute : 인접한 글자 사이의 공백을 똑같이 맞춰..

color : 글자 색 변경 - 16진수, rgb, hsl 또는 색상 이름으로 표기 text-decoration : 텍스트에 줄 표시 및 없애기 - none : 밑줄을 표시하지 않음 - underline : 밑줄을 표시 - overline : 영역 위로 선을 그림 - line-through : 취소선을 그림 text-transform : 텍스트 대소문자 변환 - none : 변환하지 않음 - capitalize : 시작하는 첫 번째 글자를 대문자로 변환 - uppercase / lowercase : 모든 글자를 대문자 / 소문자로 변환 - full-width : 가능한 모든 문자를 전각 문자로 변환 text-shadow : 텍스트에 그림자 효과 text-shadow : none | - 가로 거리 : 텍스..

font-family : 글꼴 지정 - 두 개 이상의 글꼴 이름윽ㄹ 지정할 때에는 쉼표(,)로 구분 body { font-family : "맑은 고딕", 돋움, 굴림 } 위와 같을 때, 맑은 고딕이 없으면 돋움을, 돋움이 없으면 굴림을 적용하란 의미 @font-face : 웹 폰트 사용 - 웹 폰트 : 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 - 구글에서 제공하는 무료 웹 포트를 사용하면 따로 다운로드 하지 않고 직접 링크해서 사용 가능 (다운로드 링크 : https://fonts.google.com/) @import url(https://fonts.googleapis.com/css?family=Nanum+..

접두사 : 브라우저에 따라 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사를 붙여 브라우저별로 구분 CSS3 브라우저 접두사 접두사 설명 -webkit- 웹키트 방식 브라우저(사파리, 크롬 등) -moz- 게코 방식 브라우저(모질라, 파이어폭스) -o- 오페라 브라우저 -ms- 마이크로소프트 인터넷 익스클로어 .box:hover { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 똑같은 기능을 각 브라우저별로 사용하기 위해 위와 같이 5줄의 소스가 작성을 해야 함 -> 이를 줄이..

CSS (Cascading Style Sheet) : 위에서 아래로 흐르는 스타일 시트 스타일 우선순위 : 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙 1. 중요도 - 사용자 스타일 시트가 최우선 : 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트 ex) 글자를 명확히 읽기 위해 윈도우의 '고대비' 설정 기능을 이용 - !important : 어느 스타일 보다 최우선 적용해야 할 스타일에 붙힘 2. 명시도 (우선순위 순으로 나열) - 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그에만 스타일을 적용 - id 스타일 : 지정한 id 부분에만 적용되는 스타일 -> 한 문서 안에 한 번만 적용 가능 - 클래스 스타일 : 지정한 클래스에만 적용되는 스타일 -> 한 문서 ..

선택자 : 스타일 속성을 적용하는 요소 1. 전체 선택자 : 스타일을 모든 요소에 적용할 때 사용 - *(별표)를 사용 - 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용 2. 태그 선택자 : 특정 태그에 스타일 적용 p { font-size: 12px; /*글자 크기*/ font-family: 돋움; /*글꼴*/ } 3. 클래스 선택자 : 특정 클래스에 스타일 적용 - 클래스 앞에 .(마침표)를 붙여야 함 .hello { color: blue; } 4. id 선택자 : 특정 id에 스타일 적용 - 마침표 대신 #기호를 붙여야 함 #bello { background: yellow; /*배경 색*/ width: 400px; height: 200px; } 5. 그룹 선택자 : 둘 이상 요소에 ..