당 떨어질 땐 초코딩

트랜지션 : 웹 요소의 스타일 속성이 바뀌는 것 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. 그룹 선택자 : 둘 이상 요소에 ..

: 폼 만들기 속성 설명 method 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정 get - 주소 표시줄에 사용자가 입력한 내용이 그래도 드러남 post - 사용자가 입력한 내용이 드러나지 않음 name 폼 이름 지정 action 서버 상의 프로그램 지어 target 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 autocomplete 자동완성 기능 : 폼 요소에 레이블 붙히기 , : 폼 요소 그룹으로 묶기 - : 와 사이의 폼들을 하나의 영역으로 묶고 외각선을 그려줌 - : 로 묶은 그룹에 제목을 붙여 줌 : 입력 항목 - type 속성 유형 설명 hidden 사용자에게는 보이지 않지만 서버로 넘겨지난 값 text 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자..

텍스트 : 제목 표시 - 일반 텍스트보다 크고 진하게 표시 - ~ 까지 사용 -> 이 가장 크게 표시되고 이 가장 작게 표시 : 단락 만들기 - 텍스트를 표시할 때 가장 많이 사용 #단락 : 앞뒤에 줄바꿈이 있는 텍스트 덩어리 : 줄 바꾸기 - 닫는 태그 ()가 없음 : 분위기 전환을 위한 수평 줄 넣기 - 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용 - 닫는 태그 없음 - 기본으로 가로선이 삽입되지만, CSS를 이용해 가로선을 없앨 수 있음 : 인용문 넣기 : 입력하는 그대로 화면에 표시 , : 글씨를 굵게 - 중요도를 높이고 싶으면 중복 사용 가능 - 은 강조 할 때 사용 - 는 단순히 굵게 표시 , : 이탤릭체(비스듬이)로 표시 - 는 단순히 이탤릭체로 표시할 때 사용 -은 흐름상 특정 부..

ref (reference) : DOM에 이름을 다는 방법 - DOM을 직접 건드려야 할 때 사용 사용 방법 1. props를 설정하듯이 DOM에 ref 속성 추가 2. ref 값으로는 콜백 함수 전달 - 콜백 함수 : ref를 파라미터로 가짐 {this.input=ref}}> DOM을 꼭 사용해야 하는 상황 - 어쩔 수 없이 DOM에 직접적으로 접근해야함 -> ref 사용 1. 특정 input에 포커스(커서) 주기 import React, {Component} from 'react'; import './ValidationSample.css'; class ValidationSample extends Component{ state = { password : '', clicked : false, valida..

state : 컴포넌트 내부에서 읽고, 업데이트 가능 - 언제나 기본 값을 미리 설정해야 사용 가능 -> 초기화 - 객체 형식으로 생성 및 갱신 - 값 갱신 가능 -> setState( ) 함수 사용 constructor( ) : state 초기값을 내부에서 설정할 떄 사용 - MyComponent.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; class MyComponent extends Component { constructor(props){ super(props); this.state = { number : 0 //state에 number값을 0으로 설정 } } render() { return ( 숫자..

props (properties) : 컴포넌트 속성을 설정할 때 사용 - 부모 컴포넌트가 자식 컴포넌트에 주는 값 - 값을 받아오기만 할 뿐, 수정 불가 - MyComponent.js import React, {Component} from 'react'; class MyComponent extends Component { render(){ return ( 안녕하세요 제 이름은 {this.props.name} 입니다. ) } } export default MyComponent; - App.js import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { render(..

JSX : 자바스크립트 확장 문법 1 2 3 4 5 6 7 8 9 10 11 12 13 import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; cs - 위와 같이 작성한 코드는 babel-loader를 사용하여 자바스크립트로 변환함 장점 - 보기 쉽고 익숙함 -> HTML 코드와 비슷함 기본 문법 1. 컴포넌트에 여러 요소가 있다면, 무조건 부모 요소 하나로 감싸야 함 1 2 3 4 5 6 7 8 9 10 11 12 13 14 class App extends Component { render() { return ( Hello React! Welcom..