Coding Archive

⚾️ flex 란? flex는 유연한 레이아웃을 잡기 위해 사용하는 속성이다. 1차원적 레이아웃을 위해 주로 사용한다. 📍 flex의 특징 flex는 부모와 자식 태그가 필요하고, 부모 요소(flex-container)와 자식 요소(flex-item)에 적용하는 속성이 구분되어 있다. flex는 각각의 item에 부여하는 게 아닌 부모 container에 속성을 부여한다. flex-container의 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content 등 flex-item의 속성 : flex, flex-grow, flex-shrink, flex-basis, align-self, order, z-index 등 📍 flex-..

빔캠프님 특강 내용을 바탕으로 margin에 대해서 실습해 보며 알게 된 내용들을 정리해보려 한다. 📍 margin margin은 우리가 알고 있듯 요소와 요소 사이의 공간을 띄울 때 많이 사용한다. margin을 조금 더 자세히 이해해 보자. ✔️ margin 이해하기 요소에 마진을 주면 차지하고 있는 공간만 늘어날 뿐 실제의 콘텐츠의 크기는 달라지지 않는다. 마진은 단순히 여백이라기보다는 차지하고 있는 공간과 보이는 디자인을 별개로 가져가게 할 수 있는 것이다. 레이어를 두 개라고 생각하면 편한데, 앞단은 보여지는 디자인이, 뒷단은 마진값을 준 실제로 차지하고 있는 공간이다. 요소가 차지하고 있는 공간이 달라진 거지 보이는 비주얼이 달라진 게 아니다. 이 두 가지를 서로 다르게 가져갈 수 있는 게 마..

html에 img 태그 말고도 backgroud를 사용해 이미지를 삽입할 수 있다 항상 이미지태그를 따로 사용하고 단순히 백그라운드 컬러 값만 주곤 했었는데, 이번에 알게 된 backgroud 속성을 사용하면 이미지를 backgroud로 이미지를 쉽게 넣을 수 있다. 📍 background backgroud는 단축속성으로 아래의 하위 속성을 포함한다. ✔️ background 속성 및 기본값 background-attachment: scroll background-clip: border-box background-color: transparent background-image: none background-origin: padding-box background-position: 0% 0% backgrou..

saving canvas painting 캔버스에 그린 그림을 저장하는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 save image Colored by Color Scripter cs html에서 캔버스와 세이브 버튼을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 body { padding: 44px; display: flex; flex-direction: column; align-items: center; background-color: #f7f7f7; } canvas { background-color: white; border-radius: 5%; bo..

canvas drawing image 캔버스에 사진을 첨부할 수 있는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 Colored by Color Scripter cs accept 속성을 추가해 첨부하려는 file을 특정할 수 있습니다. (accept="image/*" ->모든 이미지 파일을 허용한다는 의미) 이렇게 input file을 만들게 되면 위의 기본 스타일처럼 그려지게 됩니다. 하지만 css를 변경할 수 없기 때문에 스타일을 변경하고 싶은 경우라면 label을 사용해 해결할 수 있습니다. 1 2 3 4 5 6 7 Add Photo Colored by Color Scripter cs 라벨 태그의 for 속성을 이용해 input file 태그와 연결을 시켜주면, label을 클릭..

canvas drawing text 캔버스에 더블클릭으로 간단하게 원하는 텍스트를 출력할 수 있는 함수를 구현해보았습니다. [ html / css ] 1 2 3 4 Colored by Color Scripter cs html에서 캔버스, 타입이 텍스트인 인풋을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 body { padding: 50px; display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.05); } canvas { ..

canvas color palette 간단하게 브러시 색상을 바꾸는 함수를 만들어 보았습니다. [ html ] 1 2 3 4 5 6 7 8 9 10 11 12 Colored by Color Scripter cs div를 사용해 원하는 color들을 만들어 줍니다. [ js ] 1. 1 const colors = document.querySelectorAll(".color"); cs querySelector는 수많은 color div 중 오직 맨 처음 하나의 div만 선택합니다. 이럴 때 사용 가능한 건 querySelectorAll입니다. All이 붙으면 하나가 아닌 모든 color div를 선택할 수 있어 getElementsByClassName과 같은 효과를 볼 수 있습니다. 2. 1 2 3 4 5 ..

canvas drawing mode변경하기(fill/draw) 기본 상태는 draw 상태지만 fill 버튼을 누르면 canvas에 색을 채울 수 있도록 만들어 봤습니다. 1 . html 요소 선택, 접근하기 1 const modeBtn = document.querySelector(".modeBtn"); cs querySelector를 사용해 원하는 html 요소를 찾습니다. 2 . 버튼에 클릭 이벤트 주기 / 모드 변환 함수 구현하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const modeBtn = document.querySelector(".modeBtn"); let filling = false; function onModeClick() { if (!filling) { ..