이웃집 사는 몽씨 (43)

반응형

이 이야기는 (여러 퍼블리셔들과 개발자들이 그러하듯) 스크롤을 통한 마우스휠 풀페이지의 대명사 fullpage.js를 대체하기 위한 삽질을 뜨면서 시작되었습니다. 

fullpage.js는 아시다시피 라이센스가 있는 라이브러리라서 상업적 이용은 오직 구매로써 가능해집니다. (구매가 한 큐에 되는 거였으면 이런 개고생도 안 했겠지) 결과적으로 fullpage를 구현하기 위해서는 라이브러리를 사용하기보다 직접 만드는 수 밖에 없었는데요.

처음에는 scroll snap css로 어떻게든 해보자 싶었지만 섹션과 섹션 사이에 넘어가는 애니메이션 속도를 조절하기 어려웠고 또 메뉴를 넣었더니 메뉴 링크대로 넘어가지도 않는 대환장 파티가 벌어졌습니다. 

(서치해보니 이미 저와 같은 사람이 있었다는 것에 눈물이.. https://ethansup.net/blog/scroll-snap-instead-fullpage 나는 왜 다 하고서 이걸 발견했는가)

우선 제가 구현하고자 하는 풀페이지의 기능은,

1. 전체 스크롤(마우스휠) 풀페이지일 것
2. 상단 메뉴가 fixed이고 스크롤 넘어갈 때마다 메뉴 배경이 유동적일 것
3. 풀페이지로 넘어갈 때 우측에 navigation dots가 있을 것
4. 마지막 섹션에 다다르면 footer가 올라와줄 것


인데... 이게 되면 저게 안 되고 저게 되면 이게 안 되고 결국 온갖 오만 삽질을 혼자 다 하다가 swiper.js로 fullpage.js를 어느정도 구현할 수 있다는 내용을 발견하게 되었습니다. 철이 없었죠. 이걸로 다 땡칠 줄 알았다는게... (이 이후로 ing는 계속..)

여하튼, 아래 내용은 온갖 삽질 끝에 나온 결과물입니다. 저와 같은 피해자가 없길 바라며 잡소리는 끝. (풀페이지도 끝!)

(구현결과는 꼭 codepen에서 fullpage screen으로 보세요)

 

 

See the Pen fullpage (swiper.js) by ivory (@imivory) on CodePen.

반응형
반응형

실무에서 pdf를 직접 수정하는 일이 생겨, 아크로뱃DC로 수정을 하는데 글자가 깨지는 현상이 있었습니다.

 

이렇게 아크로뱃DC 자체 내에서 깨지는 현상이 있고,

 

pdf를 열 때 연결프로그램이 인터넷(크롬,엣지)일 경우 깨지는 현상이 있는데, 전자의 경우는 아크로뱃DC에서 자체적으로 지우면 되지만 후자의 경우는 아크로뱃DC 내에서는 글자가 정상적이게 뜨는 경우가 있을 수 있습니다.

 

저의 경우에는 수정할 내용을 워드와 메모장에 옮겨놓고 복사, 붙여넣기를 해서 벌어진 문제였는데 이는 아크로뱃DC에서 복사, 붙여넣기가 아닌 수기로 작성 하면 쉽게 해결이 가능합니다.

 

(인터넷으로 열어도 정상적으로 보입니다.)

이외에 pdf를 열어보니 글자가 깨져보이는 경우가 있을 수 있는데, 이 때에는 edit > preferences(설정)으로 가셔서 좌측 page Display를 클릭, Rendering의 Smooth Text를 For Monitor로 설정을 바꿔주시면 해결됩니다.

 

 

반응형
반응형

좁은 폼 안으로 input, 특히 type이 date인 input을 넣을 때에는 안에 있는 글씨가 길 경우, 잘리는 현상이 있을 수 있습니다. 잘리는 것 정도는 어쩔 수 없다해도 date안에 든 아이콘의 공백이 너무 길어서 당황스러울 때가 있었는데요.

 

이럴 때, css로 단순하게 해결할 수 있는 방법이 있습니다.
아래 소스를 참고해주세요.

 

 

 

* 참고: 
https://stackoverflow.com/questions/65409348/html-input-date-how-to-decrease-space-between-date-and-icon

반응형
반응형

 css를 사용하다보면 디테일하게 속성을 선택해야하는 상황이 있습니다. scss를 쓰는 방법 외에 css 상에서 쓸 수 있는 방법이 있는데 바로 css 속성 다중 선택(하위 문자열 일치 속성 선택)입니다. 

예를 들어 class명이 box로 시작되는 div의 텍스트 색상 값을 바꿔야 하는 작업이 있을 경우,

 

<div class="box-1">text</div>
<div class="box-2">text</div>
<div class="box-3">text</div>
<div class="box-4">text</div>
<div class="boxs-1">text</div>
<div class="boxs-2">text</div>
<div class="boxs-3">text</div>
<div class="boxs-4">text</div>

 

css로 div값을 잡고 작업을 해도 되고 class명을 추가하는 방법이 있지만 div가 중복이 되거나 class명을 추가할 수 없는 경우에는 아래 내용으로 작업할 수 있습니다.

 

div[class*="box-"] {
	color:blue;
}

해당 css를 기입할 경우, class명이 box-로 있는 div들만 선택되게 됩니다.

 

 

 

이와 같은 방법으로 여러가지 응용을 통해 작업할 수 있는데, 기본 구문은 [att*=val]로 보시면 됩니다. 

 

[att*=val]
[속성*=문자열]

 

비슷한 속성 값으로는, [att^=val]과 [att$=val] 이 있는데, 각각 사용하는 방법이 다릅니다.

 [att^=val]는 문자열(val)이 시작하는 요소를 선택하게 해주는데, 보통 href 링크 속성값 때 많이 쓰입니다. 대표적인 예로는 아래와 같습니다.

 

a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
  color: blue;
}

 

[att$=val]는 [att^=val]와 반대로 문자열(val)이 끝나는 요소를 선택하게 해줍니다. 대표적인 예로는 아래와 같습니다.

 

a[href$=".pdf"] {
  background: url(../images/pdf.png) no-repeat center right;
  padding-right: 20px;
}


* 참고: 
https://www.impressivewebs.com/css3-attribute-selectors-substring-matching/
https://www.w3.org/TR/selectors/#attribute-substrings

반응형
반응형


여러 개의 항목 중에서 하나만 선택하게 하는 선택 버튼 형태는  라디오 버튼 (input type="radio")을 쓰는 것이 가장 기본적이긴 하지만, 필요에 따라서는 a 링크를 써야할 때가 있습니다. 

이번에 제가 진행했었던 결제 페이지 만들기가 그런 경우였는데요. 아래 내용을 그대로 따라해봅시다. 

* HTML

 

<a href="#;" class="Type" id="card">
  <div class="payType on">
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>
<a href="#;" class="Type" id="card_ISP">
  <div class="payType">
    <div class="payType_title">
      신용카드 결제<br /><span>(인증서 제출방식, 앱카드)</span>
    </div>
    <div class="chk_img" id="card_ISP_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>
<a href="#;" class="Type" id="mobile">
  <div class="payType">
    <div class="payType_title">휴대폰 결제</div>
    <div class="chk_img" id="mobile_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

* css

  .payType {
    display: block;
    border: 1px solid #dadada;
    border-radius: 5px;
    width: 517px;
    padding: 23px;
    margin-bottom: 10px;
  }
  .payType > .payType_title {
    display: inline-block;
    vertical-align: middle;
  }
  .payType_title {
    font-size: 15px;
    font-weight: 700;
    color: #ff273d;
  }
  .payType_title > span {
    font-size: 12px;
    font-weight: 500;
    color: #333;
  }
  .payType.on {
    background: #fff6f6;
    border: 1px solid #ff273d;
  }
  .chk_img {
    float: right;
    display: none;
    vertical-align: middle;
  }
  .payType.on > .chk_img {
    display: inline-block;
  }

* javascript

  $(".Type").click(function (e) {
    e.preventDefault();
    var id = $(this).attr("id");

    $(".Type .payType").removeClass("on");
    $(".chk_img").hide();
    $("#" + id + " .payType").addClass("on");
    $("#" + id + "_arr").show();
  });

이처럼 클릭 시, class를 추가 또는 제거하는 스크립트로 선택된 버튼과 선택되지 않은 버튼을 구분해줍니다.

 

 

 

위 내용으로 a링크가 아닌 라디오 버튼으로 버튼형태를 만들 수 있습니다. 아래 내용을 참고해주세요.

* html

<label class="Type" id="card">
  <div class="payType on">
    <input type="radio" name="value1" />
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</label>

<label class="Type" id="card_ISP">
  <input type="radio" name="value1" />
  <div class="payType">
    <div class="payType_title">
      간편결제<br /><span>(네이버페이,카카오페이,삼성페이 등)</span>
    </div>
    <div class="chk_img" id="card_ISP_arr">
      <img src="http://imivory.me/img/noname/icon_chk.png" />
    </div>
  </div>
</label>

<label class="Type" id="mobile">
  <input type="radio" name="value1" />
  <div class="payType">
    <div class="payType_title">휴대폰 결제</div>
    <div class="chk_img" id="mobile_arr">
      <img src="체크용 버튼 이미지" />
    </div>
  </div>
</label>

* css

.payType {
    display: block;
    border: 1px solid #dadada;
    border-radius: 5px;
    width: 517px;
    padding: 23px;
    margin-bottom: 10px;
  }
  .payType > .payType_title {
    display: inline-block;
    vertical-align: middle;
  }
  .payType_title {
    font-size: 15px;
    font-weight: 700;
    color: #ff273d;
  }
  .payType_title > span {
    font-size: 12px;
    font-weight: 500;
    color: #333;
  }
  .payType.on {
    background: #fff6f6;
    border: 1px solid #ff273d;
  }
  .chk_img {
    float: right;
    display: none;
    vertical-align: middle;
  }
  .payType.on > .chk_img {
    display: inline-block;
  }

  input[type="radio"] {
    display: none;
  }

* javascript

  $(".Type").click(function (e) {
    e.preventDefault();
    var id = $(this).attr("id");

    $(".Type .payType").removeClass("on");
    $(".chk_img").hide();
    $("#" + id + " .payType").addClass("on");
    $("#" + id + "_arr").show();
  });

 

 

반응형
반응형

금액 부분을 넣을 때, 숫자 3자리마다 콤마가 없으면 가독성이 떨어지기 때문에 되도록 콤마를 넣어주는 것이 좋습니다.

금액에 자동 콤마를 넣는 경우는 여러가지가 있지만 input에 사용자가 입력한 숫자에 자동적으로 넣게 하거나, 스크립트를 통해 나온 숫자에 콤마를 붙여주는 방법을 소개하려 합니다.

새로 만든 html 파일에 아래 내용을 넣어줍니다.

 

* html

<input type="text" maxlength="10" onkeyup="inputNumberFormat(this);" placeholder="input 숫자만" />

javascript 파일에 해당 내용을 넣어줍니다.
(아래 내용에는 input에 숫자만 넣을 수 있는 스크립트가 포함되어 있습니다.)

* javascript

function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    } 
    
    function inputNumberFormat(obj) {
        obj.value = comma(uncomma(obj.value));
    }
    
    function inputOnlyNumberFormat(obj) {
        obj.value = onlynumber(uncomma(obj.value));
    }
    
    function onlynumber(str) {
	    str = String(str);
	    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g,'$1');
	}

 이렇게 하면 input에 콤마를 자동적으로 넣을 수 있게 됩니다. 다음은 영역 안에 있는 숫자에 콤마를 붙여보죠.

* html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<span id="money">60000</span><span>원</span>

* javascript

var money = $('#money').text();
var money2 = money.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$('#money').text(money2);

id 안에 들어오는 숫자 데이터는 자동적으로 콤마가 붙여지게 됩니다.

 

 

 


* 참고사이트
https://chobopark.tistory.com/175

 

[정규식] input숫자만입력&콤마적용 방법!!

(일부 오류가 있어 onlynumber 함수를 추가하였습니다. 2021년 5월 11일) 안녕하세요. 오늘은 정규식에서 input창에 숫자만 적히면서 콤마를 붙일수도, 안 붙일수도 있는 정규식을 이야기해보겠습니다.

chobopark.tistory.com

 

 

반응형
반응형

보통 리스트를 만들 때, 많이 쓰는 태그는 뭐니뭐니해도 <ul> 이지만 숫자 리스트를 써야할 때는 간혹 <ol>을 쓰기도 하는데, 

앞단에 숫자만 나열하기에는 아쉬움이 남아 숫자를 이쁘게 꾸며볼 생각으로 이것저것 뒤적여보던 중에 <ol>이 아닌 <ul>로, 앞단에 자동으로 카운터가 붙는 리스트를 오직 css로만 써서 만들 수 있는 팁을 발견했습니다. 

먼저 예시로 아래 내용을 준비해주세요.

 

* HTML

<ul class="num">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.</li>	
	<li>Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. </li>	
	<li>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. </li>	
</ul>

 

* CSS

ul,li {
	list-style:none;
}
.num {
    counter-reset: list-number;
    margin-bottom: 49px;
}
.num > li {
    counter-increment: list-number;
    padding-bottom: 7px;
    font-size: 20px;
}
.num > li::before {
    content: counter(list-number);
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    background: #00CE7A;
    font-size: 16px
}

 

* 적용화면

 

 

부모 요소인 counter-reset는 카운터를 할 환경을 만들어주는 css로 list-number; 또는 list-number 0; 으로 값을 초기화 해줍니다. (여기서 list-number는 임의로 적어둔 변수입니다.)

counter-increment는 증가량으로 counter-reset과 마찬가지로 list-number; 또는 list-number 1; 으로 값을 지정해줍니다.

마지막으로 li::before에 content: counter(list-number);를 적어주면 완성됩니다.


* 참고사이트
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
https://wellcode.tistory.com/12

반응형
반응형

탭이 4,5개 이상 넘어버릴 때 디자인을 하기가 참 난감한 상황이 간혹 생깁니다. 탭을 나열하는 디자인 방식이라더라도 웹에서는 자연스러워 보일 지 모르겠지만 모바일 상에서 볼 때는 화면을 너무 차지해 지저분해보일 수 있으니까요.

이럴 때 쓰면 좋을 플러그인이 바로 slick.js 플러그인과 swiper.js 플러그인을 쓰는 방식인데요. 두 플러그인 전부 실무에서 많이 쓰는 플러그인인 만큼 실용성이 좋습니다.

먼저 <head> 안에 아래 스크립트로 세팅해줍니다.

 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

 

그 다음, <style>과 <body>, <script>에 각각 소스를 넣어주세요.

 

<style>

.slick-initialized .swipe-tab-content {
  position: relative;
  min-height: 365px;
}
@media screen and (min-width: 767px) {
  .slick-initialized .swipe-tab-content {
    min-height: 500px;
  }
}
.slick-initialized .swipe-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: none;
  border: 0;
  color: #757575;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  transition: all 0.5s;
}
.slick-initialized .swipe-tab:hover {
  color: #000;
}
.slick-initialized .swipe-tab.active-tab {
  border-bottom-color: #000;
  color: #000;
  font-weight: bold;
}

.main-container {
  padding: 25px;
  background: #f1f1f1;
}

 

<body>

<div class="sub-header ">
  <div class="swipe-tabs">
    <div class="swipe-tab">One</div>
    <div class="swipe-tab">Two</div>
    <div class="swipe-tab">Three</div>
    <div class="swipe-tab">Four</div>
    <div class="swipe-tab">Five</div>
  </div>
</div>
<div class="main-container">
  <div class="swipe-tabs-container ">
    <div class="swipe-tab-content">Tab 1</div>
    <div class="swipe-tab-content">Tab 2</div>
    <div class="swipe-tab-content">Tab 3</div>
    <div class="swipe-tab-content">Tab 4</div>
    <div class="swipe-tab-content">Tab 5</div>
  </div>
</div>

 

<script>

$(function () {
	'use strict';

	var $swipeTabsContainer = $('.swipe-tabs'),
		$swipeTabs = $('.swipe-tab'),
		$swipeTabsContentContainer = $('.swipe-tabs-container'),
		currentIndex = 0,
		activeTabClassName = 'active-tab';

	$swipeTabsContainer.on('init', function(event, slick) {
		$swipeTabsContentContainer.removeClass('invisible');
		$swipeTabsContainer.removeClass('invisible');

		currentIndex = slick.getCurrent();
		$swipeTabs.removeClass(activeTabClassName);
       	$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
	});

	$swipeTabsContainer.slick({
		//slidesToShow: 3.25,
		slidesToShow: 3,
		slidesToScroll: 1,
		arrows: false,
		infinite: false,
		swipeToSlide: true,
		touchThreshold: 10
	});

	$swipeTabsContentContainer.slick({
		asNavFor: $swipeTabsContainer,
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		infinite: false,
		swipeToSlide: true,
    draggable: false,
		touchThreshold: 10
	});


	$swipeTabs.on('click', function(event) {
        // gets index of clicked tab
        currentIndex = $(this).data('slick-index');
        $swipeTabs.removeClass(activeTabClassName);
        $('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName);
        $swipeTabsContainer.slick('slickGoTo', currentIndex);
        $swipeTabsContentContainer.slick('slickGoTo', currentIndex);
    });

    //initializes slick navigation tabs swipe handler
    $swipeTabsContentContainer.on('swipe', function(event, slick, direction) {
    	currentIndex = $(this).slick('slickCurrentSlide');
		$swipeTabs.removeClass(activeTabClassName);
		$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
	});
});

 

이렇게 완성! 

 


하면 좋겠지만 탭 자체가 좌우 화살표가 없어 조금 불편합니다. 

화살표까지 넣어보도록 하겠습니다.

<body> .sub-header 안에 내용을 추가합니다.

 

<div class="arrowSlider">
		<span class="prev" id="aro1_prev">◀</span>
		<span class="next" id="aro1_next">▶</span>
	</div>

 

swiper 슬라이더에 slick 탭이 있는 상황이기 때문에 slick 탭에 화살표를 넣어주어야 합니다. <script>에 적어둔 내용에 아래 내용으로 수정해주세요.

 

$swipeTabsContainer.slick({
		//slidesToShow: 3.25,  // 추가 수정된 내용!
		slidesToShow: 8,
		slidesToScroll: 1,
		arrows: true, // 추가 수정된 내용!
		prevArrow: $('#aro1_prev'),  // 추가 수정된 내용!
		nextArrow: $('#aro1_next'),  // 추가 수정된 내용!
		infinite: false,
		swipeToSlide: true,
		touchThreshold: 10,
		responsive: [
		{
		  breakpoint: 934,
		  settings: {
			slidesToShow: 3,
		  }
		}
		]
	});

 

마지막으로 <style>에 아래 내용을 넣어주면 완성입니다.

 

.arrowSlider {position:relative;}
#aro1_prev {position:absolute;left:0px;cursor:pointer;}
#aro1_next {position:absolute;right:0px;cursor:pointer;}
.slick-slider {margin:0 30px;}

 

 

이렇게 되면 화살표가 있는 형태로 완성됩니다.
반응형이기 때문에 모바일에서도 깔끔하게 보여집니다. 

 

 


* 참고 : https://codepen.io/gbhasha/pen/gaggRR

반응형
반응형

[Tip] 웹폰트 적용 방식


웹폰트를 적용하는 방법에는 여러 가지가 있지만 제가 실무에서 웹폰트를 주로 쓰는 방식은 

보통 css 파일에서 @import url로 다른 사이트에 있는 css를 불러와 사용하는 방식입니다. 

 

이밖에도 상황에 따라 웹폰트를 다르게 적용하고는 하는데, 

그중 개인적으로 제가 자주 쓰는 방식들로 정리해보았습니다. 

 

1. @import url

 

@import url("//fonts.googleapis.com/earlyaccess/notosanskr.css"); //노토산스체
@import url("//cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css"); //나눔스퀘어체

 

자주 쓰는 @import url 방식으로 css 파일에 해당 웹폰트를 올려주고 font-family에 폰트를 넣어주면 적용이 끝납니다.

노토산스체는 구글 폰트에서, 나눔스퀘어체는 눈누에서 가져왔습니다.

 

* 구글폰트 : https://fonts.google.com/specimen/Noto+Sans+KR?subset=korean

* 눈누 : https://noonnu.cc/font_page/37

 

 

2. link href

 

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">

 

html 안에 link를 넣는 방식으로 관련 소스는 @import url과 마찬가지로 구글 폰트에서 가져옵니다.

 

 

3. webfont loader

 

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Lato', 'Noto Sans', 'Noto Sans KR']
}
});
</script>

 

구글 웹폰트를 좀 더 빠르게 로드해야 한다면 위 소스를 추천합니다.

로드할 글꼴을 지정하기만 하면 되서 훨씬 간편하죠.

 

* webfont loader : https://github.com/typekit/webfontloader

 

 

4. 폰트파일이 있을 때

 

@font-face {
    font-family: 's-core-dream-thin';
    src: url('scdream1-webfont.woff2') format('woff2'),
        url('scdream1-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

가지고 있는 폰트 파일이 있다면 css파일에 직접 해당 소스를 넣는 방법도 있습니다.

format 파일은 local (사용자 환경) > eot > woff2/woff > ttf > svg 순서대로 기술하는 것이 좋습니다.

 

 

* 참고사이트 :

https://www.daleseo.com/css-web-fonts/

https://nolboo.kim/blog/2013/10/22/google-web-font-faster-tip/

https://kimdabin.tistory.com/entry/Font-format%EA%B3%BC-font-face-%EC%84%A0%EC%96%B8-%EB%B0%8F-%EC%A0%81%EC%9A%A9%EB%B2%95

반응형
반응형

 

[javascript] 팝업창 열고 지정 영역 제외 인쇄하기

 

영수증 팝업을 만들고 팝업 안에 프린트하기 버튼을 만든 후에, 버튼을 누르면 버튼을 제외한 영역이 인쇄되게끔 만드는 작업을 진행하였습니다.

필요한 화면은 총 두가지로,
영수증을 띄워야 하는 버튼이 있는 화면과
영수증과 프린트하기 버튼이 있는 화면이 필요합니다.

영수증을 띄워야 하는 버튼이 있는 화면부터 보겠습니다.
button 태그와 script를 만들어줍니다.

 

<button onclick="pop();">Pop</button>
<script type="text/javascript">
let POP;
function pop() {
POP = window.open('pri.html', 'thePopup', 'width=722,height=480')
};
</script>

 

그 다음 영수증과 프린트하기 버튼이 있는 화면을 만들어줍니다.

 

*HTML

 

<div id="wrap">
	<div class="order">[영 수 증]</div><br>
	<div class="container">
		<div class="info">
			[매 장 명] <br><br>
			<span class="adress">[주 소]</span><br><br>
		[대 표 자] 최종일 [TEL] <br><br>
		</div>
		============================
		<div class="info2">
			<ul class="title">
				<li>메 뉴 명</li>
				<li>단 가</li>
				<li>수 량</li>
				<li>금 액</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">
			<div class="pay">음식명</div>
			<ul class="orders">
				<li>000046</li>
				<li>9,900</li>
				<li>1</li>
				<li>9,900</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">합 계 금 액
			<div class="price">9,900</div>
		</div>
		------------------------------------------------
		<div class="info2">
			<ul class="vat">
				<li>부가세 과세물품가액</li>
				<li>부가세</li>
			</ul>
			<ul class="vat">
				<li>------</li>
				<li>------</li>
			</ul>
		</div>
		------------------------------------------------
		<div class="info2">받 을 금 액
			<div class="price">9,900</div>
		</div>
	</div>
	<button id="noprint" onclick="pops();">프린트하기</button>
</div>
<script>
function pops(){
	window.print();
	return false;
}
</script>

 

*CSS

 

html,body {
	margin:0px;
	padding:0px;
}
body, h1, h2, h3, h5, h6, li, p { 
	font-family: sans-serif, '맑은고딕', 'MalgunGothic' !important;
}
ul,li {
	margin:0px;
	padding:0px;
	list-style:none;
}
#wrap {
	margin:0 auto;
	text-align:center;
}
.container {
	overflow:hidden;
	margin:0 auto;
	width:220px;
	text-align:left;
	font-size:11px;
}
.order {
	padding-top:20px;
	font-weight:900;
	font-size:13px
}
.adress {
	letter-spacing:2.8px;
}
.info {
	margin-bottom:2px;
}
.info2 {
	line-height:2;
}
.info2:last-child {
	font-size:13px;
	font-weight:700
}
.pay {
	margin-bottom:-7px
}
.price {
	display:inline-block;
	float:right;
	padding-right:4px;
}
.title > li{
	display:inline-block;
	padding-right:25px;
}
.orders > li {
	display:inline-block;
	padding-right:23px;
}
.title > li:last-child, .orders > li:last-child {
	float:right;
	padding-right:4px;
}
.vat {
	display:inline-block;
	margin:3px 0px;
	line-height:1.5;
}
.vat:first-child {
	padding-left:30px;
}
.vat:last-child {
	float:right;
	padding-right:4px;
	text-align:right;
}
#noprint {
	margin-top:20px;
	padding:12px 20px;
	border:0px;
	background-color:#44a8ff;
	color:#fff;
	font-size:20px;
	font-weight:bold
}

 

여기까지 하면 전부 완료된 것처럼 보이겠지만 아직 하나가 더 남았습니다. 

영수증만 인쇄를 해야하는데 보시는 것처럼 화면에는 프린트하기 버튼이 남아있는 상태입니다. 

버튼을 제외하고 프린트가 되게끔 해야되는데요, 

해당 작업은 스크립트 작업이 아닌 css에서 추가 작업이 들어갑니다. 

코드는 아래와 같이 지정하면 해당 내용을 제외한 채로 인쇄가 가능하게 되죠.

 

@media print {
  #noprint { 
	display:none;
	}
}

반응형