![]()
6. Array(배열) 1) Array ✔ 배열(array) 여러 개체(Entity)값을 순차적으로 나열한 자료 구조 배열 내 값을 요소(element)라고 하며, 배열 요소는 index로 접근 대표 속성과 메서드 배열 크기 및 여부 확인: Array.length, Array.isArray() 배열 추가 및 삭제: Array.push(), Array.pop(), Array.shift(), Array.unshift(), Array.splice(), Array.slice() 등 배열 탐색: Array.indexOf(), Array.lastIndexOf(), Array.includes() 2) 배열 기본 메서드 ✔ 배열 선언, 접근, 속성 선언: "new Array()" 혹은 "[]"을 통해 선언, 사이즈 혹..
![]()
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 : 요소 자체를 사라져 버리게 ..
