[UI] 화면 중앙에 레이어 띄우기 (floating layer)

Layer 레이어는 css :target 셀렉터와 opacity 속성을 이용하여 css만으로 구현이 가능하다. 간단한 레이어 팝업의 경우에는 해당 방법으로 구현하는 것이 리소스 요청을 줄일 수 있어 좋다. 이 스니핏은 스크립트와 함께 작동하는 방식의 레이어를 표현한다. 화면 고정식 기본 팝업 레이어와 플로우 레이어, 토글식 레이어, 레이어 닫기(닫기 버튼 클릭시 닫기, 딤레이어 클릭시 닫기)등을 구현하였다. 1. Component 1) open layer .btn-layer : 레이어를 팝업시키기 위해 클릭하는 링크, 버튼 요소에 사용. data-layer 어트리뷰트를 지정하여 해당 값의 id를 가진 레이어를 열도록 함. .focus-layer : 레이어를 팝업시키 위해 포커싱하는 input 요소에 사용..
[UI] Carousel, Slider

carousel 버튼 클릭, 네비게이션 클릭, 스와이프 모션을 이용해 조종할 수 있는 캐러셀입니다. 플레이/정지 버튼을 이용하여 자동으로 슬라이드를 보여줄 수 있습니다. 1. Component .carousel-container[data-num] : 캐러셀을 포함하는 컨테이너 .carousel-prev : 이전 슬라이드 선택 버튼 .carousel-next : 다음 슬라이드 선택 버튼 .carousel-nav-wrap : 슬라이드 네비게이션 컨테이너 .carousel-autoplay : 슬라이드 자동재생 토글 버튼 2. Script 다음 스크립트를 추가한 후 사용해야 합니다. 3. Function 1) 슬라이드 넘기기 좌우 버튼, 네비게이션 버튼, 스와이프 모션을 이용하여 슬라이드를 좌우로 넘길 수 있습..
자바 입출력 > 이스케이프 문자(escape character)

public class 표준출력7 { public static void main(String[] args) { // " " : 문자열을 구분하기 위한 기호 // ' ' : 문자를 구분하기 위한 기호 // \ : 이스케이프문자를 구분하기 위한 기호 System.out.println("\"\""); // 큰따옴표 자체를 출력하고 싶을때, 큰따옴표 앞에 \ 붙임 System.out.println("\'"); // 작은 따옴표 System.out.println("\\"); // 백슬래쉬 System.out.println(); System.out.println("\"갤럭시S\""); System.out.println("\\50,000"); System.out.println("\'특가할인\'"); System.ou..
multi-column layout : columns

multi-column layout 1. columns column-width와 column-count의 단축 속성이다. 다른 단축속성들과 마찬가지로, 생략된 값은 초기값으로 설정된다. 2. column-width length 혹은 auto로 정의할 수 있다. 실제 너비는 가능한 공간에 맞추기 위하여 넓어지거나, 좁아질 것이다. 3. column-count 정의한 수만큼 요소의 컨텐츠 안의 컬럼의 갯수를 지정한다. 해당 값이 없거나, column-width가 auto가 아닌 경우, 컬럼의 갯수는 허용 가능한 최대 수가 된다. 4. column-gap column들의 사이 값으로 브라우저의 기본 간격 값이 사용된다. 멀티 컬럼 레이아웃에서 해당 값은 1em으로 정의된다. %값은 부모 요소의 너비를 기준으로..
리스트 정렬 (masonry)

리스트 정렬 (masonry) 1. CSS만 사용한 방법 See the Pen masonry by leeYura (@2yulrang) on CodePen. column- 프로퍼티를 이용한 masonry IE10 이상! 2. JS를 사용한 방법 See the Pen list by leeYura (@2yulrang) on CodePen. 파라미터로는 열의 갯수, 각 리스트의 너비, gutter 값을 입력해주면 된다. masonry 플러그인도 있다고 하니까 쓰실분들은 찾아보시는 것도 좋을 듯! 18.10.03 15:30 18.10.13 15:10 ​
1 2 3 4 ··· 12