지 구 여 행

Grid item 속성 Grid item에서 사용 가능한 속성 정리 열/행 크기 설정 grid item의 위치를 지정해줄 수 있습니다. span 은 grid item이 차지할 칸(cell)의 수를 의미하며, grid item위치를 지정할 수 있습니다. grid-row-start grid-row-end grid-row : 행 시작위치 / 행 끝위치, 행 시작위치 / span # grid-column-start grid-column-end grid-column : 열 시작위치 / 열 끝위치, 행 시작위치 / span # grid-area : grid-row 와 grid-column 의 단축 속성, 또는 그리드 영역 이름 설정 그리드 선 그리드 선(grid lines)은 양수나 음수로 지정할 수 있고, 그리드..

Grid container 속성 Grid container에서 사용 가능한 속성 정리 그리드 트랙 그리드 트랙(Grid Track)은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. grid-template-rows 와 grid-template-columns 속성으로 그리드 트랙(행(rows)과 열(columns))을 정의할 수 있습니다. 값을 정의하지 않을 경우 grid item의 크기는 font-size에 비례합니다. px, em, %, fr(fraction, 공간비율)등의 단위를 사용합니다. repeat() , minmax() , fit-content() 함수도 사용할 수 있습니다. grid-template-rows grid-template-columns grid-template-areas : ..

Grid Layout 그리드 레이아웃이란 그리드 레이아웃(Grid Layout)이란 열과 행을 이용하여 인터페이스 요소들을 배치하는 2차원 레이아웃 모델입니다. (참고: Flexbox는 1차원 레이아웃 모델) Grid Layout은 기본적으로 그리드 컨테이너(grid container)와 컨테이너내에 배치되는 요소인 그리드 아이템(item)으로 이루어져있습니다. 외부 엘리먼트(부모 요소)에 display: grid; 또는 display: inline-grid;를 선언함으로써 grid container를 만들 수 있습니다. 내부 엘리먼트(자식 요소)는 자동적으로 grid item이 됩니다. display: grid; : Block 특성의 grid container를 정의 display: inline-gri..

Flex item 속성 Flex item에서 사용 가능한 속성 정리 flex-basis : 항상 main axis를 기준으로 flex item의 초기 너비값을 결정 일반적으로는 width와 같은 기능을 하지만 flex-direction: column; 인 상태에서는 main axis가 수직축으로 변경되면서 flex-basis 값은 높이(height)로 정의된다는 차이점이 있습니다. width와 flex-basis 두 속성 모두 값을 지정할 경우 flex-basis 속성값이 우선순위를 갖게 됩니다. 만약 content item의 실제 너비값이 flex-basis 로 설정한 너비값보다 클 경우, 설정한 값과는 상관없이 content item의 실제 너비값에 따라 렌더링됩니다. 하지만 content item의..

Flex container 속성 Flex container에서 사용 가능한 속성 정리 display: flex; : 부모 요소에 설정하여 새로운 플렉스 서식 환경을 구성 flex-direction : flex item들이 정렬되는 축 방향 변경 row (default value) row-reverse column column-reverse flex-wrap : flex item들의 총 넓이가 flex container의 넓이보다 클 때, flex item들을 다음 줄에 이어서 정렬 nowrap (default value) wrap wrap-reverse flex-flow : flex-direction , flex-wrap 를 한번에 정의 항상 위 순서가 지켜져야 정상적으로 표현됩니다. flex-flow:..

Flexbox Flexbox란 Flexbox, 또는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다. (참고: CSS Grid Layout는 2차원 레이아웃 모델) Flexbox는 기본적으로 플렉스 컨테이너(flex container)와 컨테이너의 컨텐츠인 플렉스 아이템(flex item)으로 이루어져있습니다. 여러 개의 내부 엘리먼트(자식 요소)를 담고 있는 외부 엘리먼트(부모 요소)에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트는 자동으로 flex item이 됩니다. 이때 외부 엘리먼트는 직접적으로 붙어있는 부모 요소(direct pare..

이미지 추가 / 텍스트 추가 / 파일 저장하기 이미지 추가하기 HTML Javascript const imageInput = document.querySelector("#image-file"); function onImageChange(event) { const file = event.target.files[0]; const fileURL = URL.createObjectURL(file); const image = new Image(); image.src = fileURL; image.onload = function () { ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }; } imageInput.addEventListener("change", o..

그리기 기능 설정하기 선 두께 변경 / 색상 변경 / 그리기 / 채우기 / 지우기 마우스로 선 그리기 HTML Javascript const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 300; canvas.height = 300; let isPainting = false; function startPainting() { isPainting = true; } function stopPainting() { isPainting = false; } function onMove(event) { if (isPainting) { ctx.lineTo(event.offsetX, event.off..

캔버스 크기 설정하기 캔버스 크기 설정 출력되는 이미지의 크기는 2번의 과정을 통해 설정합니다. ①HTML 또는 Javascript로 가상 캔버스의 크기를 설정하고, ②CSS를 통해 브라우저에 출력되는 이미지의 크기를 설정합니다. HTML Javascript const canvas = document.querySelector("#canvas") canvas.width = 300; canvas.height = 300; ※ CSS와 달리 HTML/Javascript에서는 사이즈 단위(px)를 표기하지 않습니다. CSS canvas { width: 300px; height: 300px; border: 5px solid black; } See the Pen Creating a drawing board on br..

기본 사용 방법 기본 메소드 드로잉 컨텍스트 ctx 의 다양한 메소드를 이용하여 선, 도형등을 그릴 수 있습니다. beginPath() : 새로운 경로(path) 생성 최초에는 호출하지 않아도 이미 경로(path) 하나가 존재합니다. 이전 경로와의 연결을 끊고 새 경로를 생성할 경우에 호출합니다. closePath() : 경로 닫기; 현재 하위 경로의 시작 부분과 연결된 직선을 추가 fill() 호출 시, 열린 도형은 자동으로 닫히게 되므로 closePath()를 호출하지 않아도 됩니다. stroke() 에는 적용되지 않습니다. stroke() : 윤곽선을 이용하여 도형 그리기 fill() : 경로의 내부를 채우기 moveTo(x, y) : 아무것도 그리지 않고 시작점을 (x,y) 좌표로 이동 (≒ 펜을..