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..

오늘 CSS 경로를 잘못 입력해서 한참을 헤맨 나 자신... 여태 상대경로로 어떻게 파일을 링크시키는지도 제대로 모르고 있었다. 진짜 어이없.... 찾아본 김에 이번 기회에 제대로 정리를 해두려고 한다. 📍 HTML / CSS 파일 구조 웹 페이지를 제작할 때 보통 아래와 같은 파일 구조를 가진다. 재사용성, 가독성 등 더 효율적인 관리를 위해 하나의 상위 폴더 안에 같은 형식의 파일들을 모아서 저장한다. 📍 절대 경로란? 각 파일이나 웹 페이지가 가지고 있는 고유한 경로(절대적인 위치) 📍 상대 경로란? 작업하고 있는 문서를 기준으로 연결하고 싶은 이미지나 동영상, 문서 등의 위치를 알려주는 경로 (현재 열린 파일을 기준으로 상대적인 위치) 같은 위치 / 하위 위치 / 상위 위치 세 가지의 경우가 있..

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 ..