개발 뜯기

0. JavaScript의 개요 1) 개요 ✔ JavaScript란? 객체(Object) 기반 스크립트 프로그래밍 언어 ECMAScript 사양을 준수하는 범용 스크립팅 언어 자바와 직접적인 연관은 없으며 웹의 동적 동작을 구현하기 위해 제작 JS 엔진 위에서 수행되며 google V8, Firefox SpiderMonkey 등이 있음 ✔ ECMAScript란? Ecma International이 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 자바스크립트를 표준화하기 위해 만들어졌음 Ecma International : 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구 97년 ES1 초판, 09년 ES5, ES2015(ES6)으로 매해 6월에 버전 갱신 중 2) 기본 입출력 ✔ 입..

8. Grid 1) grid ✔ grid의 개요 웹페이지를 위한 2차원 레이아웃 시스템이다. 행(row)과 열(column)이 존재함 gutters(gap) ✔ container : display flex와 마찬가지로 외부 container와 내부 item이 있다. ✔ container : grid-template-rows, grid-template-columns 몇 개의 행, 열을 가질 것인지 설정한다. 단위 값을 명시 해줘야함 명시한 값의 개수만큼 자리 차지함 fr : 대비되는 비율 repeat(반복할 횟수 n, 값 명시) : 반복 함수 .container { grid-template-rows: 1fr 1fr /* 2개의 행 */ grid-template-columns: 100px 100px 50px..

7. Flexbox 1) flexbox ✔ flexbox의 개요 1차원 직선의 형태로 요소를 정리하기 위함 부모 자식 관계가 성립 되어야 적용할 수 있음 ✔ 용어 - flex container, flex item, main axis, cross axis flex container : 아이템을 감싸는 부모 영역 flex item : 내부 정렬을 위한 요소들 main axis : 주축, 가로로 흐름 cross axis : 교차축, 세로로 흐름 ✔ container - display 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. 바깥쪽 : block, inline...외부 요소와의 관계 정의 안쪽 : flex, grid...내부 아이템 레이아웃 정의 i..

CSS 변형과 전환 1) transform ✔ transform(변형) 개요 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있다. transform-function 요소에 적용할 하나 이상의 CSS 변형 함수 변형 함수는 왼쪽에서 오른쪽으로 곱해짐 ✔ 크기 - scale x, y, z축 비율 설정 가능, 원래 공간은 계속 차지함 ✔ 회전 - rotate angle 자료형 deg - degree(도) turn - 바퀴 rotate - 각도만큼 회전 시킴 음수값도 가능 ✔ 이동 - translate (0, 0)을 기준으로 얼만큼 이동시킬지 결정한다. ✔ 기울이기 - skew deg, 다른 속성과 달리 값을 하나만 입력하면 x축에만 적용된다. ✔ 기준점 - transform-origin 기준..

5. 레이아웃과 색상, 배경 1) 레이아웃 ✔ display - inline, block, inline-block inline 영역의 크기가 내부 콘텐츠 크기로 정해짐 margin, padding의 top,bottom을 지정 못함 요소가 가로로 배치 됨 block 영역의 크기를 width와 height로 지정할 수 있음 width를 지정하지 않으면 가로로 전체를 차지함 요소가 세로로 배치 됨 inline-block 대표적으로 input이 있음 block처럼 width, height 크기를 지정할 수 있음 inline처럼 가로로 배치 됨 display 속성을 통해 변경 ✔ 요소를 없애는 방법 - display none, visibility hidden display none : 요소 자체를 사라져 버리게 ..