IT/개발 (27) 썸네일형 리스트형 반응형 웹 Off canvas 오프 캔버스 Off canvas 오프 캔버스 패턴은 수직으로 컨텐츠를 쌓기보다는 우선 자주 사용하는 컨텐츠만을 배치한 후 네비게이션이나 매뉴와 같은 요소를 충분히 큰 사이즈의 스크린에서만 보여주고 더 작은 스크린에서는 오직 클릭했을 경우에만 보여준다. css * {margin:0; padding:0;} #wrap {width:1000px; margin:0 auto;} #wrap_box {width:100%; display:block;} #box_a {height:400px; background:#fcb354; float:left; width:30%;} #box_b {height:400px; background:#f1779e; width:40%; float:left;} #box_c {height:400px.. 반응형 웹 Tiny tweaks 작은 변화 Tiny tweaks 작은 변화 패턴은 말 그대로 글꼴 크기나 이미지 크기를 조정하거나 매우 사소한 방법으로 컨텐츠를 이동시키는 등의 레이아웃의 작은 변화만 이루어진다. 이 패턴은 일직선의 one page 웹사이트와 같은 단일 열 레이아웃에서 잘 작동한다. css * {margin:0; padding:0;} ul {list-style:none;} #box_a {height:400px; background:#f1779e;} .list_man {margin:0 auto; width:80%; padding-top:50px;} .list_man li {width:18%; margin:1%; background:#fff; float:left;} @media screen and (max-width:102.. 반응형 웹 Layout shifter 레이아웃 시프터 Layout shifter 레이아웃 시프터 패턴은 여러개의 중단점(breakpoints)를 두어 여러 스크린의 너비에 가장 민감하게 반응하는 패턴이다. 이 패턴의 핵심은 열을 흘려보내고 떨어뜨리는 방식 대신에 컨텐츠를 이동시키는 방법이라는 것이다. 중단점(breakpoints)사이에 차이점이 매우 크기 때문에 레이아웃 유지가 어렵고 전체 레이아웃 뿐 아니라 요소안의 변화도 수반될 수 있다. css * {margin:0; padding:0;} #wrap {width:1000px; margin:0 auto;} #box_a {height:400px; background:#fcb354; float:left; width:20%;} #box_b {height:200px; background:#f17.. 반응형 웹 Column drop 열 드롭 Column drop 전체 폭이 가득찬 다중 열 레이아웃을 위해서 화면이 각 열이 컨텐츠에 비해 너무 좁아지면 열들이 수직으로 떨어지며 하나씩 쌓이게 된다. 결국 모든 열이 수직으로 쌓이게 된다. 이 패턴에서 중단점(breakpoints)은 컨텐츠에 따라 선택할 수 있고 디자인에 따라 변할 수 있다. css * {margin:0; padding:0;} #box_a {height:400px; background:#fcb354; float:left; width:30%;} #box_b {height:400px; background:#f1779e; float:left; width:50%;} #box_c {height:400px; background:#24bbaf; float:right; width:20.. 반응형 웹 Mostly Fluid 유동형 Mostly fluid 유동형 패턴은 주로 유동형 격자(grid)로 구성된다. 대형 혹은 중간크기의 스크린에서 이 패턴은 보통 같은 크기로 간주되며, 단지 더 넓은 화면에서는 여백정도만 조정된다. 더 작은 스크린에서 이 패턴은 열(columns)들이 수직 방향으로 쌓이면서 컨텐츠가 재배치 된다. 이 패턴의 중요한 장점은 작은 화면과 큰 화면 사이에 단 하나의 중단점(breakpoints)만 있으면 된다는 것이다. css *{margin:0; padding:0;} #wrap{width:1000px;margin:0 auto;} #box_a{height:400px; background:#f1779e;} #box_b{height:400px; background:#fcb354; width:50%; floa.. iframe 부모 자식 접근 부모 함수 호출 시 parent.함수명 부모 요소 접근 시 $(parent.document).find('셀렉터') 부모 요소 접근 시 window.parent.document.getElementById('요소아이디') 자식 함수 호출 시 document.getElementById('아이프레임아이디').contentWindow.함수명; 자식 요소 접근 시 $('#아이프레임아이디').contents().find('셀렉터') 자식 요소 접근 시 window.frames['아이프레임아이디'].document.getElementById('요소아이디') php 일단위로 for문 돌리기 Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 단일 연결 리스트 [singly linked list] 연결리스트에 대한 설명은 위키디피아에 되어 있습니다. 연결리스트 중에 단일 연결 리스트는 리스트의 각 노드에 다른 노드를 가리키는 포인터가 하나씩만 있는 연결 리스트입니다. 포인터는 특정 자료구조의 주소를 저장해놓고 기억하고 있는 역할을 합니다. 우선 단일 연결리스트는 다음과 구조를 같게 됩니다. 첫번째 자료의 포인터가 두번째 자료를 가리키고 두번째 자료의 포인터가 세번째 자료를 가리키는 이러한 형태가 반복됩니다. 위 그림을 자바스크립트로 간단하게 표현해 보면 아래와 같습니다. Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 var firstNode = { data:12, next:null }; firstNode.next = { data:99, next:null }; 이러.. 이전 1 2 3 4 다음 목록 더보기
