당 떨어질 땐 초코딩

플렉서블 박스 레이아웃 : 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치 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] --------- - 위와 같을 때, 요소의 동생들 중 모든 요소에 스..

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. 그룹 선택자 : 둘 이상 요소에 ..

@media [only | not] 미디어 유형 [and 조건] * [and 조건] 반응형 : 디바이스 종류에 따라 웹페이지 크기가 자동적으로 조정되는 것 뷰포트 : 접속한 기기 화면에 맞춰 확대하거나 축소해 표시 속성 설명 width / height 뷰포트 넓이 / 높이 user-scalable 확대 / 축소 가능 여부 initial-scale 초기 확대 / 축소 값 minimum-scale 최소 확대 / 축소 값 maximum-scale 최대 확대 / 축소 값 가변 그리드 레이아웃 : 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법 - 가변 글꼴 : 글자 크기도 유동적으로 바뀌어야 함 (em과 rem을 주로 사용) - 가변 이미지 : 창의 넓이에 따라 이미..

CSS : Cascading Style Sheet - HTML 문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격 - 디자인을 목적으로 쓰임 - 편리성, 일관성 제공 기본 형태