남다른 논리

프로그래밍/웹프로그래밍

쇼피파이 | 제품설명 부분 넓게 사용하기

쇼피파이(Shopify)의 기본 템플릿을 쓰다보면, 설명문이 아래의 그림처럼 오른쪽으로만 있습니다. 이것을 아래로만 바꾸면 더 많은 설명을 넣을 수 있습니다. 또한, 설명문이 길 경우 왼쪽만 비어있는 경우도 있습니다. 이를 바꾸는 방법을 설명합니다. 먼저, 관리자에서 Theme의 Action을 Edit Code로 선택합니다. 코드 수정파일이 나오면, 소스폴더의 Sections에서 'Add a template'을 한 후 Product-alternate1-template.liquid를 쓰면 빈 파일이 생깁니다. 같은 디렉토리의 Product-template.liquid를 열어 전체 내용을 복사해 위의 새로 만든 파일에 복사해 넣고 아래 내용을 찾습니다. (270줄) {{ product.description ..

프로그래밍/웹프로그래밍

[Javascript] Li 태그요소를 array (배열)로 넣기

자바스크립트를 만들다 보면 HTML안에있는 Li 또는 Form안의 값을 배열에 넣을 필요가 있다. 이때의 방법은 아래와같습니다. 1) [넣을 HTML] One Two Three Four Five [Javascript 처리 방법] var lis = document.getElementById("navbar").getElementsByTagName("li"); alert(lis[0].id); 각 Li의 값을 변수 lis 에 넣었고, 이것을 alert창으로 띄워 확인하는 것입니다. [처리 결과] One Two Three Four Five 두번째로 4개의 라디오 버튼에서 사용자가 무엇을 선택했는지 확인하는 방법입니다. [넣을 HTML] question"; "+chA+" "+chB+" "+chC+" "+chD+" ..

프로그래밍/웹프로그래밍

부트스트랩(BootStrap)이란

부트스트랩이란 반응형, 모바일 웹이라고 합니다. 요즘 모바일 또는 탭으로 웹을 접속하는 사람이 많기 때문에, 이러한 다양한 기기에 맞는 웹사이트를 별도로 만드는 것이 아니라 반응형, 모바일 중심의 사이트를 만드는 것입니다. 아래는 영어로된 정의입니다. (w3schools) Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. 부트스트랩은 HTML, CSS를 사용하기 편하게 정의해 놓고, 가져다쓰는 방식이라고 합니다. 기본 틀은 아래와 같은데, CSS부분을 보듯이 CSS를 웹을 제작할때마다 별도로 만드는 것이 아니라 사전 정의되었있는 웹에 있는것을 가져..

프로그래밍/웹프로그래밍

[워드프레스] 자식 테마 만들기 (child theme)

자식테마를 만드는 이유 테마가 업그레이드 될 경우, 테마를 수정한 부분이 없어진다. 따라서 자식 테마를 만들면 업그레이드가 되어도 수정한부분 즉, 푸터, 헤드 등의 디자인을 유지할 수있다. 자식테마 만드는 부분 아래의 세가지를 수정해야 한다. The child theme directory 만들기 style.css functions.php 1) wp-content/themes 아래로 이동한뒤 abc라는 테마가 있다면, '-child' 를 추가한 abc-child라는 디렉토리를 만든다. 2) style.css 스타일에 아래를 추가한다 /* Theme Name: abc Child Theme URI: http://example.com/abc-child/ Description: abc Child Theme Aut..

프로그래밍/웹프로그래밍

[jQuery] 자주쓰는 제이쿼리 함수 (모음)

jQuery 선택자 선택자명 설명 $('tag') Tag라는 이름의 모든 태그 요소를 선택 $(‘.class’) class라는 클래스명의 모든 클래스 요소를 선택 $(‘#id’) id라는 아이디명의 아이디 요소를 선택 $(‘div li’) div에 있는 li 모두 선택 $(‘div > p’) div의 p태그라는 직계 자식을 선택 $(this) 현재 선택 중인 요소를 가리킴 jQuery 메소드 메소드명 설명 eq(n) n번째에 위치하는 요소를 선택. length() 요소의 개수를 알 수 있음. parent() / parents() 요소의 직계 부모 선택 / 요소의 모든 부모들 선택 children(“a”) 요소의 a태그의 직계자손 선택 prev() / next() 이전 요소 선택 / 다음 요소 선택 val..

프로그래밍/웹프로그래밍

[jQuery] 제이쿼리 Ajax 사용하기

[1] .ajax 사용하는 방법 입니다. [2] .get(txt).load(html).load(xx.html #p2) : html중 id 가 p2인것만 출력하는 것입니다

프로그래밍/웹프로그래밍

[jQuery] 제이쿼리 애니메이션

다음 9가지 슬라이드 애니메이션 이펙트 적용하고자 합니다. : 하고 보이고, 없어지고 , 한번씩 번갈아 가며 적용( 토글) 애니메이션 효과입니다. 각 스크립트는 아래와 같습니다. : 사라지고, 보이게 하는 효과 [show, hide, toggle] [fadeIn, fadeOut, faedTo] : 앞의 숫자는 시간이고 (1초 =1,000), 뒤는 적용 % 입니다.0.3은 30%만 보이는 것입니다. 1.0 = 100%로 다 보이는 효과입니다[slide]

프로그래밍/웹프로그래밍

[jQuery] 제이쿼리 each 사용

제이쿼리 each 사용법은 jQuery.each( array, callback ) Description: A generic iterator function, which can be used to seamlessly iterate over both objects and arrays. Arrays and array-like objects with a length property (such as a function's arguments object) are iterated by numeric index, from 0 to length-1. Other objects are iterated via their named properties. 글 설명처럼, 이터레이팅 하는 것입니다.예제를 보면, 123$.each([..