당 떨어질 땐 초코딩

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

@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..

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 : 인접한 글자 사이의 공백을 똑같이 맞춰..

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 - HTML 문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격 - 디자인을 목적으로 쓰임 - 편리성, 일관성 제공 기본 형태