CSS (Less)

핀터레스트(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...

선택자 종류 예시 설명 div[class~=ko-kr] { background-color: red } ko-kr 을 포함하는 태그를 선택 div[class|=ko-kr] { background-color: red } ko , kr 을 포함하는 태그를 선택 div[class^=ko-kr-name] { background-color: red } ko-kr 로 시작하는 태그를 선택 div[class$=name-ko-kr] { background-color: red } ko-kr 로 끝나는 태그를 선택 div[class*=name-ko-kr-name] { background-color: red } ko-kr 을 포함하는 태그를 선택 예시 html 코드 <div class="box_1">...

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

온라인 포토샵(photopea)의 무료 계정에서 광고를 제거하는 방법 광고 제거 전 오른쪽에 광고 배너가 위치하기 때문에 이용자에게 왼쪽의 작업 공간이 협소해지는 불편함을 제공하여 유료 사용을 독려하고 있다.. 광고 제거 후 광고가 사라져서 작업공간이 넓어짐 광고 제거 적용 방법(Chrome, Edge) 개발자도구로 진입해서 아래 순서로 진행 (새코드로 등록해두면 이후엔 실행만 해주면 됨) 적용할 JS 코드 var _photopea_style = "<style>"; _photopea_style += ".app > div:nth-of-type(2){display:none !important}"; _photopea_style += ".app > ...

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