Language
Language
Swift - 조건문
조건문 변수선언 // 다크모드 여부 var isDarkMode : Bool = false if (isDarkMode == true) { print("다크모드 입니다.") } if (isDarkMode != true) { print("다크모드 아닙니다.") } if isDarkMode == true { print("다크모드 입니다.") } if isDarkMode { print("다크모드 입니다.") } if !isDarkMode { print("다크모드 아닙니다.") } if isDarkMode { print("true") } else { print("false") } var title : String = isDarkMode ? "true" : "false"
웹접근성 - caption css 처리
웹접근성 table 요소의 caption은 display:none하면 안된다. 코드 caption { overflow:hidden !important; position:relative; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; border:0 !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; }
Swift - 고차함수
스위프트 - 고차함수 - 다른 함수를 전달인자로 받거나, 함수실행의 결과를 함수로 반환하는 함수 MAP(변형) - 컨테이너가 담고 있던 각각의 값을 매개변수를 통해 받은 함수에 적용한 후 새로운 컨테이너를 생성하여 반환 - 코드의 간결성, 재사용 용이, 컴파일러 최적화 성능이 좋음 func map(_ transform: (Element) throws -> T) rethrows -> [T] ★ map let cast = ["Vivien", "Marlon", "Kim", "Karl"] let lowercaseNames = cast.map { $0.lowercased() } // 'lowercaseNames' == ["vivien", "marlon", "kim", "karl"] let letterCounts ..
JavaScript - 정규표현식
자바스크립트 정규표현식 RegExp - exec(), test(), stringdms match(), replace(), search(), split()등과 함께 사용 표현식 의미 ^ 문자열 시작 $ 문자열 종료 * 반복여부를 표현, 앞의 표현식이 0개 또는 0개이산 연속으로 반복되는 부분과 대응 앞의 문자가 없거나 0개이상(무한)인 경우 + 존재여부를 표현, 앞의 표현식이 1회이상 연속으로 반복되는 부분과 대응 앞의 문자가 1개 이상인 경우 ? 존재여부를 표현, 앞의 표현식이 0또한 1회 등장하는 부분과 대응 앞의 문자가 없어가 1개 있는 경우 . 임의의 한 문자 자리수를 표현, 개행문자를 제외한 모든 단일문자와 대응 | or [xy] 괄호는 일련의 문자를 찾는데 사용 [xy] : x와 y중 하나 [^..
제이쿼리(jQuery) - 이미지 온, 오프하기
이미지 온, 오프하기 제이쿼리를 사용하여 이벤트시 이미지의 경로를 바꾸는 방법 - img의 attr(src)를 replace한다. 코드 $(function() { var obj = $('.tab img'); $('.tab img').on('click', function(){ $('.tab img').each(function(){ $(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif')); }); $(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif')); }); });
제이쿼리(jQuery) - 순차적으로 활성화 시키기
셋인터벌(setInterval) 유용하게 사용할 수 있는 제이쿼리 코드'셋인터벌'사용하여 순차적으로 활성화 시키기 스크린샷 관련코드 $(function(){ var idx = 0; setInterval(time, 1000); function time(){ var box = $('li'); box.removeClass('on'); box.eq(idx).addClass('on'); idx++; if(idx >= box.length) idx= 0; } }); 예제 See the Pen setInterval - 순차적 활성화 by mansu (@mansunii) on CodePen.
제이쿼리(jQuery) - 탭메뉴 (tabmenu)
기본 탭메뉴 실무에서 기본적으로 많이 사용되는 기본적인 탭메뉴 웹접근성시에는 마크업이 달라지므로 유의해서 사용해야 한다. 스크린샷 코드 $('.tab-menu a').on('click', function(){ var a = $(this); var idx = a.index(); var box = a.closest('.tab-area'); box.find('.hidden-area').removeClass('on'); box.find('.tab-menu a').removeClass('on'); box.find('.hidden-area:eq('+idx+')').addClass('on'); a.addClass('on'); return false; }); 예제 See the Pen Tab-Menu by mansu ..
100% 레이아웃 잡는 방법
100% 레이아웃 기본적으로 제일 많이 사용하고 있는, 컨텐츠가 없어도 푸터가 하단에 고정되는 100% 레이아웃 잡는 방법 스크린샷 코드보기 css html, body { width:100%; height:100%; margin:0; padding:0; } header { position:relative; z-index:2; width:100%; height:80px; } .container { position:relative; z-index:1; min-height:100%; margin:-80px auto -200px; padding:80px 0 200px; } footer { clear:both; position:relative; z-index:2; width:100%; height:200px; }..
iOS - System Color
iOS System Color 시스템 기본컬러 예) UIColor.Label Name Light Mode Dark Mode label secondaryLabel tertiaryLabel quaternaryLabel systemFill secondarySystemFill tertiarySystemFill quaternarySystemFill placeholderText systemBackground secondarySystemBackground tertiarySystemBackground systemGroupedBackground secondarySystemGroupedBackground tertiarySystemGroupedBackground separator opaqueSeparator link dar..
제이쿼리(jQuery) - 이벤트 Event
제이쿼리 이벤트 기본코드 예시 $(element).명령어(function(event){ ▶ element 요소에 명령어 실행시 함수 동작 }); EVENT 제어 .on() 동적으로 생성된 DOM 객체들의 이벤트를 연결 $('a').on('click', function(event){...}); //a를 클릭 했을때 이벤트 .off() .on() 제거 .one() 선택된 이벤트를 지정 딱 한번만 이벤트가 실행 .trigger() 선택된 요소의 이벤트를 발생 .triggerHandler() trigger() 함수와 비슷하게 동작 - form submission에는 동작하지 않음 - 선택된 요소들중 가장 첫번째 요소만 영향을 미침 - 브라우저 기본동작, 버블링, live Events는 일어나지 않음 웹 브라우저..
제이쿼리(jQuery) - 효과 Effect
jQuery Effect .animate() 해당 객체의 CSS에 변화 효과 $('p').animate({CSS Map}, {options}); $('p).animate( {color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', complete : function(){....}} ); {queue:false} .delay() 해당 시간만큼 실행을 지연 $("div").slideDown().delay(5000).slideUp(); ▶ id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 .stop() 실행중인 애니메이션을 중지 $("div").stop(); ▶ div의 큐의 애니메이션을 멈춤 .show() 해당 요소를 보여줌 $(..
제이쿼리(jQuery) - 선택자 Selector
속성 [name] name속성이 있는 요소를 선택 [name="value"] [name2="value2"] name속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 [name="value"] name속성의 값이 value인 요소를 선택 [name!="value"] name속성의 값이 value가 아닌 요소를 선택 [name^="value"] name속성의 값이 value로 시작하는 요소를 선택 [name|="value"] name속성의 값이 value 이거나 value로 시작하는 요소를 선택 [name*="value"] name속성의 값에 value가 들어 있는 요소를 선택 [name~="value"] name속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선..