HTML

핀터레스트(Pinterest)와 유사하게 보여지는 UI , 보여지는 것 보다 간단하게 css로 구현이 가능 CSS 코드 #columns { column-width: 250px; /* 컬럼의 열 폭(실제 열 폭은 영역 크기에 따라 변화)*/ column-count: 7; /* 컬럼의 열 수를 지정 */ column-gap: 15px; /* 컬럼 사이의 간격 */ column-rule-width: 2px; /* 컬럼을 구분하는 선의 굵기 */ column-rule-style: dashed ; /* 컬럼을 구분하는 선의 종류 */ column-rule-color: grey; /* 컬럼을 구분하는 선의 색깔 */ } #columns figure { display: inline-block; border: 1px so...

flex에 대해서 자세히 알아보자. 주로 레이아웃을 구성할때, 아이템 배치/배열을 할때 사용하고 있다. flex 테스트 기본코드 CSS .container { width: 600px; height: 200px; border: 1px solid grey; } .grid-box { display: flex; background-color: #efefef; } .item { padding: 1rem; } .item:nth-child(1) { background-color: #44C1F2;} .item:nth-child(2) { background-color: #49D3F2;} .item:nth-child(3) { background-color: #36D96F;} .item:nth-child(4) { backgro...

PC,Mobile 웹 브라우저에서 서명을 받아 저장 가능한 프로그램 설명 인터페이스 HTML 코드 서명을 위한 캔버스와 동작을 위한 버튼 <!-- 서명 공간 --> <div> <h3>서명1</h3> <div class="canvas-draw-box"> <div class="canvas-draw-base" data-id="canvas_name1"></div> <div class="canvas-draw-pad-box"> <canvas id="canvas_name1" class="canvas-draw-pad">1...