:: [홈페이지 만들기 기초] css로 칼럼 만들기 <div class=row>과 <div class=column></div> 넣기

div 를 이용해서 두개의 칼럼을 만드는 코드이다. 그리고 css 에도 아래와 같이 코드를 넣어주면 완성이 된다.


<div class=”row”>
<div class=”column”></div>
<div class=”column”></div>
</div>

css 코드에는 아래와 같이 넣는다.

정확히 두개의 칼럼이 50% 되려면 아래와 같다.
.column {float: left; width: 50%;}
.row:after {content: “”; display: table; clear: both;}

양쪽의 칼럼 사이즈를 다르게 하려면 아래와 같이 넣어보자.
.column {float: left;}
.left {width: 25%;}
.right {width: 75%;}

모바일에서의 사이즈를 조정하려면 아래의 코드를 넣는다. (create a responsive two column layout)
@media screen and (max-width: 600px) {
.column {width: 100%;}
}


3개의 칼럼을 만드는 방법은 아래와 같다.

<div class=”row”>
<div class=”column”></div>
<div class=”column”></div>
<div class=”column”></div>
</div>

css 코드이다. 3개 칼럼이 모두 같은 사이즈로 보이려면 아래와 같이 넣는다.
.column {float: left; width: 33.33%;}
.row:after {content: “”; display: table; clear: both;}

3개의 칼럼이 다른 사이즈로 하는 방법은 아래와 같다.
.column {float: left;}
.left, .right {width: 25%;}
.middle {width: 50%;}

[홈페이지 만들기 기초] Go Back 버튼의 여러가지 코드 – 크롬 브라우져에서 안될때 사용가능한 방법

현재 페이지에서 한페이지 뒤로 가려할때 흔히 사용하는 코드는 아래와 같다.

<button onclick=”history.go(-1)”>Go Back</button>

<input type= ‘button’ onclick=’javascript:history.go(-1);return false;’ value=’Back’>

하지만 위의 코드는 크롬 브라우져에서 안되는 경우도 있다. 그럴때는 아래의 코드를 사용하여 해결할 수 있다.

<a href=”<?php echo $_SERVER[‘HTTP_REFERER’] ?>”>Go Back</a>

<a href=”<?php echo $_SERVER[‘HTTP_REFERER’] ?>” class=”btn btn-primary”>< Go Back</a>

<button onclick=”location.href='<?php echo $_SERVER[‘HTTP_REFERER’] ?>'” type=”button”>Go Back</button>

<input type=”button” onclick=”location.href='<?php echo $_SERVER[‘HTTP_REFERER’] ?>’;” value=”Back” />

WordPress and woocommerce integration with native flat shipping set up

Shipping(배송)은 항상 복잡한 내용중의 하나입니다. 그리고 저희가 추천해 드리는 것은 먼저 간단한 flat rate 인데 이것 자체도 저희가 제품을  잘 모르기 때문에 뭐라고 단순히 말씀드리기 쉽지 않습니다.

Shipping 가격은 밑의 내용들로 주로 셋업이 됩니다.

      • 무게, 위치 및 배송 속도에 따른 가변량
      • 고객이 주문한 품목에 관계없이 $ 5.00와 같은 고정 요금
      • 무료 배송
      • In-store pick up

 

배송에 관련해서 잘 알고 계시겠지만 배송업체로는 USPS, UPS 그리고 Fedex가 있지만 모두다 셋업하기도 그렇고  이중에서 하나를 선택하더라도 올리는 모든 제품의 무게와 사이즈가 정확하게 제품에 넣어져야 배송비 계산이 정확하게 이루어 집니다.

여기에 배송 label 까지 인쇄도 직접 가능하지만 이렇게 되면 여러가지 extension 소프트웨어를 플러그인으로 구입하고 서비스도 따로 받아야(subscribe) 합니다. 바로 이부분 때문에 제가 처음에 권해드리는 것은 가격에 따라 flat shipping  fee($5-10) 으로 먼저 시작하는게 좋을듯 합니다. 

사이트의 트랜젝션이 늘어나서 어느 정도의 수준에 오르면 그때 더 쉽핑 서비스를 더하고 개선해도  좋을듯 합니다. 아니면 그전부터 만들어서 한달 사용료 등등을 서비스비용으로 지불하게 되면 사이트 운영비용으로 더 커지게 됩니다.

 

그럼  시핑비를  더하는 기능에 대해서 알려드리겠습니다.

먼저 관리자페이지 로그인하시면 왼쪽 메뉴에서 WooCommerce를 선택하시고 sub menu 에서 Settings를 선택하면 아래의 그림과 같이 나오는데 그중에서 Shipping을 선택하면 됩니다.

그안에서 Shipping Zone을 생성하면 됩니다. 즉 쉽핑주소가 여기서 생성된 지역에 해당되면 자동으로 쉽핑방법이 카트에서 보여주게 되는 경우입니다.

그중에 USPS Regular Shipping을 선택하시면 아래와 같이 수정을 할수 있는 페이지가 나옵니다. 여기서 cost section 은 기본 요금입니다. $1가 기본이고 제품수가 늘어나는 데로 기본 코스트가 늘어 납니다.

예를 들어서 제품 Shipping Class Cost가 $5에 셋업이 되어 있고 제품을 2개를 구매했다고 하면 쉽핑 가격은 1*2 + 5 즉, 7불이 됩니다. (1.00 * [qty] + $5)

 

 

위와 같은 방식으로 USPS  Expedited Shipping 은 아래의 쉽핑 계산 방식으로 만들어 놓을 수 있습니다.

 

기본 베이스 계산은 10 * ( 1.[qty] ) , 즉 1개를 구입하면 기본 가격은 $11에 제품 Shipping Class Cost 를 더하면 됩니다.

예를 들면 밑의 쇼핑카트 처럼 Shipping Class Cost 가 $10인 제품을 3개를 구매하고 Expedited Shipping 을 선택하면 시핑가격은 10*(1.3) +10 =$23 .

 

 

지금까지의 내용처럼  쉽핑 옵션을 셋업하는 방법이었습니다.

 

밑의 스탭들은 제품에 특정 배송가격을 정해주기위한 순서들입니다.

먼저 위에서도 설명하였지만.. 제품 자체에는 Shipping Class Cost를 정해줄 수 있습니다.

 

위에 보이는 그림처럼 Shipping Class를 선택하면 됩니다. 그럼 밑의 내용처럼 나옵니다.

 

 

이중에서 “Add Shipping Class” 를 선택하고 새로운 시핑 클래스를 만둘고 왼쪽에 있는 Save버튼을 누르면 됩니다.

이렇게 생성된 클래스를 제품에 직접적으로 연결을 해줘야 합니다.

왼쪽메뉴에 “Products”를 선택하고  아래메뉴로 “All Products”선택하면 됩니다. 그리고 그중에서 원하는 제품을 선택후  Shipping 을 선택하고 그중에서 “Shipping  Class”를 맞게 선택하면 됩니다.

 

그 이외에 지역 zone으로 더 디테일하게 프리쉽이나 인스토어 픽업등을 셑업해야 하는 경우는 위의 첫번째 존 샡업에서 주를 선택하여 프리쉽이나 인스토어 픽업등을 더 첨부 할수 있습니다.

 

 

 

 

크롬(Chrome browser) 브라우져 풀스크린(Full Screen)으로 바꾸기

크롬 브라우져나 기타 다른 브라우져를 앱으로 사용할때 특히 URL을 보여주고 싶지 않을때 풀 스크린으로 바꾸어 주는 것이 완성된 앱으로서의 기본적인 사항일 것이다.

다음은 크롬 브라우져를 풀스크린으로 바꾸는 방법이다.

  1. 키보드에서 F11  키를 누르면 바로 풀스크린으로 바뀐다.
  2. 브라우져 맨위 오른쪽 끝에 점 3개를 크릭하면 옵션메뉴가 나오고 중간에 사각형 아이콘을 클릭하면 풀스크린으로 바뀐다.
크롬옵션오픈
크롬옵션오픈
크롬풀스크린 옵션
크롬풀스크린 옵션
  1. 아래의 자바스크립으로 위의 #1, #2를 하지 않고도 풀스크린으로 바꿀수 있다.<script>

    function myFullFunction() {

    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {

    docElm.webkitRequestFullScreen();
    }

    }

    </script>

<body onload=”myFullFunction()”>

 

하지만 위의 코드가 문제가 될수 있다. 테이블릿이나 전화기 또는 크롬북 등에서는

“Failed to execute ‘requestFullScreen’ on ‘Element’: API can only be initiated by a user gesture.”

즉 어떤 이벤트라도 만들어야만 제대로 작동할 수 있는 것이기 때문이다.

아직 특별히 다른 방법은 찿지 못했지만 아래의 방식으로 워크어라운드 할 수 있지만 권장하지는 않는다.

 

function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}

document.addEventListener(“keypress”, function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);

즉 앤터키나 리턴키를 다시 클릭해야만 하기 때문이다.

 

이렇게 풀스크린에서 다시 일반모드로 돌아갈려면 위의 #1 혹은 #2 를 하거나  마우스 커서를 브라우져 스크린 맨위쪽으로 옮기면 다시 정상모드로 돌아 갈수 있는 X자 표시를 클릭하면 된다.

 

 

error: Content is protected !!