CSS: submit 버튼(button)처럼 보이도록 앵커 태그(a) 스타일 지정 – button 태그와 a 태그 스타일 통일

“제출(submit)” 버튼(button)과 “취소(cancel)” 앵커(a)가 있는 폼이 있습니다. HTML은 다음과 같습니다. <input type=”submit” value=”Submit” /> <a href=”some_url”>Cancel</a> 이 두 태그의 스타일이 똑같이 보이게 하려면 어떻게 해야 할까요?   간단하게 작성할 수 있는 최선의 방법은 다음과 같습니다. 위의 태그에 각각 클래스 likeabutton 을 추가한 뒤, 아래의 CSS 를 추가합니다. 경우에 따라 원하는 모양으로 커스터마이징 더보기…

iOS 프로그래밍: 테이블 뷰 (Swift, 스토리보드) 2 – 커스텀 셀(custom cell) 추가

iOS 프로그래밍: 테이블 뷰 (Swift, 스토리보드) 1 – 테이블 뷰 추가   커스텀 셀이란 Xcode에서 일반적으로 제공하는 테이블 셀이 아닌 사용자가 직접 새로운 형태의 셀을 만들어 테이블 뷰에 적용하는 것을 뜻합니다.   1) 커스텀 셀 오브젝트 배치 먼저, 메인 스토리보드에서 테이블 뷰의 셀 크기를 충분히 늘린 뒤, 이미지와 레이블 등을 더보기…

iOS 프로그래밍: 테이블 뷰 (Swift, 스토리보드) 1 – 테이블 뷰 추가

iOS 프로그래밍에서 테이블 뷰(Table View)란 위의 그림처럼 목록이 있고 그 목록을 클릭할 수 있는 구성요소를 말합니다. 이 테이블 뷰를 생성하는 방법을 스위프트(Swift), 스토리보드(Storyboard) 기준으로 알아보겠습니다.   1) 테이블 뷰(Table View) 오브젝트 추가 오른쪽 상단의 [+] 버튼을 클릭합니다. table을 검색한 뒤 Table View 오브젝트를 메인 뷰로 끌어와 추가합니다.   테이블 뷰를 더보기…

자바스크립트 ES6+: 제너레이터 함수 (generator function)

제너레이터 함수 제너레이터 함수(generator function)는 여러 값을 시간차를 두고 반환할 수 있는 함수의 한 형태입니다. 일반 함수와 달리 function* 키워드를 사용하여 선언합니다. 예를 들어 1부터 3까지 시간차를 두고 반환하는 제너레이터 함수는 다음과 같습니다. function* generator1() { yield 1 yield 2 yield 3 } yield 키워드는 사용자가 명시적으로 다음 값을 호출할 때 더보기…

Swift(스위프트): 클로저 (Closure) – 정의 및 문법

클로저 (Closures) 클로저(closure)는 코드에서 전달 및 사용할 수 있는 독립된 기능 블록(blocks of functionality) 입니다. 다른 프로그램의 람다(lambda)와 유사합니다. 클로저는 정의된 컨텍스트에서 모든 상수 및 변수에 대한 참고를 캡처(capture; 포획)하고 저장할 수 있습니다. 이를 상수 및 변수에 대한 에워싸기(closing over)라고 합니다. 함수(function)은 특별한 형태의 클로저라고 볼 수 있습니다. 클로저는 다음 더보기…

jQuery: 제이쿼리 이미지 지연 로딩(lazy loading) 플러그인 (jQuery Lazy)

jQuery Lazy 웹사이트 이미지의 레이지 로딩을 할 수 있도록 하는 제이쿼리 플러그인입니다. 레이지 로딩이란 인터넷이 느린 환경에서 브라우저가 HTML 컨텐츠를 로딩하는 과정에서 이미지를 같이 로딩에 포함시켜 먹통이 되는 것을 방지하기 위하여, 이미지 데이터를 제외한 HTML을 우선적으로 렌더링한 뒤 이미지는 HTML 로딩이 끝난 후 나중에 불러오는 것을 뜻합니다. 이 플러그인을 사용하면 더보기…

Xcode: 아이콘 이미지를 Xcode 애플리케이션(앱) 아이콘으로 변환 (appicon.co 이용)

App Icon Generator 위 사이트에서 하나의 이미지 파일을 애플 아이콘으로 자동으로 변환해줍니다. 먼저 이미지 파일은 가로 세로 각각 1024px 이상이어야 합니다. 애플 앱에서 사용하는 아이콘 중 가장 큰 사이즈가 1024px이기 때문입니다.   1) 그래픽 소프트웨어를 이용해 아이콘 이미지를 만들어 1024px * 1024px로 저장합니다. 2) App Icon Generator 사이트에 접속한 다음 이미지를 업로드합니다. 더보기…

PHP: 이미지 섬네일(Thumbnail) 만들기 (Imagick 이용)

Imagick이 PHP 서버에 설치된 경우, 아래 코드를 이용하여 이미지 섬네일을 만들 수 있습니다. 저는 이용하는 호스팅 서버에 해당 프로그램이 설치가 되어 있어 별도 작업을 하지 않고 바로 사용하지만, 설치가 안된 경우에는 링크를 참고하여 설치하세요. 다음 함수를 추가합니다. /** * * Generate Thumbnail using Imagick class * * @param string $img 더보기…

CSS로 말풍선 툴팁 만들기 (cssarrowplease.com 이용)

https://cssarrowplease.com/ 위 사이트에 접속하면 CSS 말풍선을 만들 수 있습니다. 옵션 사항을 설정한 뒤 CSS를 복사해서 사용하면 됩니다. 단, 위의 CSS 는 기본 틀만 제공하기 때문에 그대로 붙여넣은 경우 왼쪽의 예제 그림처럼은 나오지 않습니다. 일종의 표지사기와 같습니다. 따라서 원하는 모양을 위해서는 추가 CSS를 작성해야 합니다. (밑의 코드의 customize tooltip 부분 참고) 더보기…