[Tip] 워드프레스 관련 메모2

1. 가격표 플러그인 easy pricing table

(https://ko.wordpress.org/plugins/easy-pricing-tables/)

2. 게시판 플러그인 Kboard

(https://www.cosmosfarm.com/products/kboard)

: 게시판과 덧글을 같이 다운로드 해야합니다.

★ 플러그인 추가에서 직접 플러그인 업로드 가능 

★ Kboard 플러그인 사용 시, 웹 사이트 메뉴나 레이아웃이 보이지 않는 경우

: 대시보드 > 시스템설정 > font awesome 비활성화

3. SNS 공유하기 플러그인 korea SNS

(https://wordpress.org/plugins/korea-sns/)

: 활성화 시, 도구나 설정에서 메뉴를 찾아야 합니다.

4. 검색엔진최적화

- 성능최적화 : 워드프레스 자체 성능을 높이는 최적화

- 검색엔진 최적화 :인터넷에서 콘텐츠가 잘 검색되도록 검색 엔진에 노출하는 최적화

1/ 외부 링크를 통해 다른 웹 사이트를 내 웹 사이트에 연결

2/ 좋은 콘텐츠

3/ 도메인 이름과 기간이 긴 도메인 등록 기간 (주로 다루는 키워드가 도메인 이름에 포함되야 좋음)

4/ 웹사이트 접속 속도 향상 (플러그인 이용하여 정기적 최적화)

5. 용량 확인 방법 : php파일 업로드하여 확인 (memory_limit)

<?php phpinfo(); ?>

6. 검색 최적화 플러그인 yoast seo

(https://ko.wordpress.org/plugins/wordpress-seo/)

7. 복사방지 플러그인 wp content copy

(https://ko.wordpress.org/plugins/wp-content-copy-protector/)

8. 보안 플러그인 ithemes security

(https://ko.wordpress.org/plugins/better-wp-security/)

: 해킹 시도 내역을 메일로도 알려주는 플러그인입니다.

★ Security > setting으로 이동 

- Global Settings > Lockout White List 란에 아이피 입력

- 404 Detection > enable 클릭 후 내용 수정

: Minutes to Remember 404 Error (Check Period) : 공격시간을 뜻함, 5로 설정

: Error Threshold : 공격횟수를 뜻함, 20으로 설정

- Hide Backend : 체크하고 Login Slug에 로그인 접속주소 변경

- Local Brute Force Protection : 무차별 대입 공격 예방

: Max Login Attempts Per Host : 호스트 컴퓨터별 로그인 시도 제한 횟수

: Max Login Attempts Per User : 사용자 ID별 로그인 시도 제한 횟수

: Minutes to Remember Bad Login (check period) : 로그인 제한에 걸릴 경우 몇분동안 기능 막는지

9. 백업 플러그인 backwpup

(https://ko.wordpress.org/plugins/backwpup/)

: 제 경우에는 해당 새로 추가에서 플러그인이  설치가 되지 않아 플러그인 업로드 방식으로 설치하였습니다.

★ 수동 백업 설정

- add new job 메뉴 클릭

- Archive Format  > zip 체크

- Where should your backup file be stored?  >  Backup to Folder

- 스케쥴 탭과 투폴더에 내용 확인

-  jobs >  run now 버튼 클릭 시, 백업 작동

★ 자동백업 설정

: 자동백업 부분은 드롭박스와 mysql부분이 있음

★ 테마 포레스트 (https://themeforest.net/)

: 카드 정보 유출 위험이 있으므로 유료 테마는 테마포레스트 웹사이트를 권장

[Tip] 워드프레스 관련 메모

1. 설치형? 가입형?

: 가입형 워드프레스(https://ko.wordpress.com/create/) 는 사용하기 간편하다는 이점이 있으나

무료로 이용할 수 있는 부분이 제한되며 유료 요금 구간을 설정해서 서비스되고 있습니다. 

모든 기능을 이용하고자 한다면 자유도가 높은 설치형

(https://ko.wordpress.org/download/releases/) 이 좋습니다.

2. 워드프레스 사양?

: 우커머스나 PGALL 결제 등의 여러 플러그인에서 서버 환경인 PHP / MYSQL의 사양이 낮아 

정상적으로 동작되지 않은 상황이 발생할 수있습니다. 

PHP/mariadb-10.0x UTF-8로 서버 사양을 업그레이드해서 수정해야 합니다. 

(제가실습용으로 사용한 워드프레스 버전은 4.9.4 버전이었습니다.)

★ 워드프레스를 다운로드 받을 때, wordpress 폴더에 wp-config-sample 파일이 있습니다. 

해당 파일을 wp-config로 바꾸고 디비 네임과 디비 유저, 

디비패스워드를 수정하고 서버에 업로드 해야 합니다. 

★ 관리자 주소는 끝에 /wp-admin 를 붙여줍니다.

3. 고유주소? 

: 작성한 콘텐츠의 글이나 페이지에 접속할 수 있는 하나밖에 없는 주소를 뜻하는 URL입니다. 

고유주소는 글이름 형식으로 설정하는 것이 유리한데,  고유주소를 글 이름 형식으로 설정하면 

제목을 작성하는 순간 워드프레스는 제목의 텍스트를 사용해서 자동으로 고유주소를 생성합니다. 

이렇게 생성된 고유주소는 검색 키워드를 포함하므로 검색 엔진에 노출하는데 유리합니다. 

(설정 메뉴에서 고유 주소 클릭, 글 이름에 선택)

★ 글이나 페이지를 공개한 뒤에는 고유 주소를 변경하지 않는 것이 좋습니다. 

고유주소를 변경한다면 인터넷에 공유되어서 돌아다니는 

기존의 고유주소 링크를 다는 사람들이 클릭했을 때 

페이지를 찾을 수 없다는 오류가 발생하여 해당 오류가 자주 발생 시,

 웹사이트의 신뢰도가 떨어질 수 있습니다. 

검색엔진에서 고유주소 변경 전 URL을 색인했는데 고유 주소를 변경해서 

기존 링크가 깨지면 해당 글이 검색 엔진에 노출되기 어렵습니다.

★ 한글 고유 주소가 연결되지 않을 때는 명시적으로

 유니코드를 사용하도록 .htaccess를 아래와 같이 수정해야합니다.

<IfModule mod_url.c>
    ServerEncoding UTF-8
    ClientEncoding EUC-KR
</IfModule>

★ 카테고리와 태그를 잘 정리하면 검색 최적화에도 도움이 됩니다.

4. 특성 이미지?

: 일반적으로 글 목록에 나타나는 대표 이미지 입니다.

5. 이미지 대체 텍스트?

: 검색 엔진은 크롤링할 때 이미지 속성 중 대체 텍스트를 참조합니다. 

검색 엔진에 노출되어 자신이 올린 이미지와 글이 검색되는데 영향을 미칩니다. 

검색엔진 최적화 측면에서 이미지에 속성정보를 입력하는 것이 좋습니다.

6. 글과 페이지의 차이?

7. 댓글 관리?

: 자신이 운영하는 다른 웹 사이트나 블로그를 통합해서 관리할 수 있는 소셜 댓글 시스템, 라이브리 (https://livere.com/)

8. 전면페이지?

: 워드프레스 이전 버전에서 웹 사이트를 접속했을 때 처음 나타나는 홈페이지를 뜻하는 용어

9. 유용한 플러그인 

1/  contact form7 (https://ko.wordpress.org/plugins/contact-form-7/)

: 고객 문의 게시판을 만들 수 있는 플러그인 입니다. 

항목을 추가할 때 숫자가 나오는데 임의 지정된 문자라 수정해도 무방합니다.

2/ shortcodes ultimates (https://getshortcodes.com/docs/tabs/)

: 짤막한 코드를 사용해 웹사이트에서 원하는 기능을 구현하는 플러그인 입니다. 

[Tip] 세팅된 magnific popup에 추가 작업하기

반응형 페이지에서 쓰기 편한 팝업 플러그인으로

magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,

근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
            items: {
                src: 'img/이미지명.jpg'
            },
            type: 'image'

        }, 0);
    });
})(jQuery);

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
          items: {
                src: $('<a  href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
	type: 'inline'
			}
        }, 0);
    });
})(jQuery);

function closePopup() {
  $.magnificPopup.close();
}

var data = [
  {
    userWebsite_href: '이동할 페이지.html', 
    userAvatarUrl_img: 'img/팝업 이미지명.png'
  }
];

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
 key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
              '</a>'+'<a href="#">'+
                '<img src="img/버튼 이미지명.png" class="btn">'+
              '</a>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
    }
  }
		
        }, 0);
    });
})(jQuery);

jpg나 png 같은 이미지들을 일러스트 파일로 가져올 때, ai 파일로 변환할 수 없는 방법은 없을까 하고 고민한 적이 있었는데요.

완벽하게는 아니지만 실제 이미지를 백터화 시키는 방법이 있다는 사실을 근래에 알게 되었습니다.

(일러스트레이터를 다루고 사용한 지가 언젠데 그걸 이제서야... )

실제 이미지를 백터화 시키는 방법은 간단합니다.

먼저 [file] 에서 [open]을 눌러 원하는 이미지를 불러와줍니다.

(열려있는 파일에 불러오려면 [file]에서 [place]로 이미지를 불러오셔도 됩니다.)

가져온 이미지를 클릭하고 상단에 보면 [Image Tracing]이란 버튼이 있는데 해당 버튼 옆 ▼을 누르시면 다양한 메뉴들이 나옵니다.

내용은 다음과 같습니다.

-High Fidelity Photo : 고화질 사진 이미지로 표현 (★이미지를 고화질 느낌으로 가고 싶으시면 해당 메뉴를 클릭해주세요)

-Low Fidelity Photo : 저화질 사진 이미지로 표현

-3 Colors : 컬러를 3단계로 나눠 표현

-6 Colors : 컬러를 6단계로 나눠 표현

-16 Colors : 컬러를 16단계로 나눠 표현

-Shades of Gray : 이미지를 명암(흑백)으로 구분하여 표현

-Black and White Logo : 흑백 로고 스타일로 표현

-Sketched Art : 스케치 느낌으로 표현 

-Silhouettes : 실루엣 표현

-Line Art : 선으로 단순하게 표현

-Technical Drawing : 선으로 디테일하게 표현

원하시는 느낌으로 골라 클릭해주시면 되고 혹시라도 좀 더 디테일하게 조정하고 싶다 하시면

 [window]에서 [Image Trace]를 선택해주시면 우측에 해당 창이 열리게 됩니다.

Colors에서 More이 아닌 Less 쪽으로 드래그하시면 좀 더 이미지를 디테일하게 조정하실 수 있습니다.

(ex. 위쪽 colors : 20 / 아래쪽 colors : 80 )

원하는 백터화 조정까지 마치셨다면 이미지를 선택한 상태에서

[object]에서 [Expand]로 이동, OK누르시면 백터화가 마무리가 됩니다.

수정을 하실 때에는 오른쪽 마우스를 눌러 ungroup을 하시고 수정하시면 됩니다. 

내가 그린 그림들을 스캔해서 이미지 트레이스하여 다양하게 쓸 수도 있으니까 많이 응용해보세요.

트레이스에 대한 자세한 내용은 아래 어도비 사이트 링크를 참조해주세요.

https://helpx.adobe.com/kr/illustrator/using/image-trace.html

[javascript] 자동롤링되는 실시간검색어 만들기

데이터를 입히기 전, 자동롤링이 되는 실시간 검색어를 만들어보려합니다. 

일반 포털사이트(네이버,다음,네이트)같은 실시간 검색어창이 아니라 심플하게 단순한 한줄자리로 만들어보았는데요. 

먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

그다음, <body>에 해당 예제 뼈대를 만들어주시구요.

	<div id="wrap">
		<div class="container">
			<ul id="best_search">
				<li><p>인기검색어</p></li>
				<li>
					<dl class="time1" style="display:">
						<dd><a class="t" href="#"><div class="num">1</div>자전거</a></dd>
						<dd><a class="t" href="#"><div class="num">2</div>전동킥보드</a></dd>
						<dd><a class="t" href="#"><div class="num">3</div>비키니</a></dd>
						<dd><a class="t" href="#"><div class="num">4</div>모노키니</a></dd>
						<dd><a class="t" href="#"><div class="num">5</div>원터치텐트</a></dd>
					</dl>
					<dl class="time2" style="display:none;">
						<dd><a class="t" href="#"><div class="num">6</div>등산화</a></dd>
						<dd><a class="t" href="#"><div class="num">7</div>풋살화</a></dd>
						<dd><a class="t" href="#"><div class="num">8</div>요가복</a></dd>
						<dd><a class="t" href="#"><div class="num">9</div>텐트</a></dd>
						<dd><a class="t" href="#"><div class="num">10</div>래쉬가드</a></dd>
					</dl>
					<dl class="time3" style="display:none;">
						<dd><a class="t" href="#"><div class="num">11</div>수영복</a></dd>
						<dd><a class="t" href="#"><div class="num">12</div>디스커버리반팔티</a></dd>
						<dd><a class="t" href="#"><div class="num">13</div>축구화</a></dd>
						<dd><a class="t" href="#"><div class="num">14</div>노스페이스바람막이</a></dd>
						<dd><a class="t" href="#"><div class="num">15</div>전기자전거</a></dd>
					</dl>
					<dl class="time4" style="display:none;">
						<dd><a class="t" href="#"><div class="num">16</div>캠핑카</a></dd>
						<dd><a class="t" href="#"><div class="num">17</div>캠핑테이블</a></dd>
						<dd><a class="t" href="#"><div class="num">18</div>여성골프웨어</a></dd>
						<dd><a class="t" href="#"><div class="num">19</div>여성래쉬가드</a></dd>
						<dd><a class="t" href="#"><div class="num">20</div>캠핑의자</a></dd>
					</dl>
				</li>
				<li>
					<a class="best_add ad1" style="cursor:pointer" onClick="javascript:view('0')">></a>
					<a class="best_add ad2" onClick="javascript:view('1')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad3" onClick="javascript:view('2')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad4" onClick="javascript:view('3')" style="display:none;cursor:pointer" ><</a>
				</li>
			</ul>
		</div>
   </div>
  

css로 디자인해주세요. <style></style>사이로 소스를 넣어주셔도 됩니다.

글꼴을 이쁘게 만들고 싶어서 나눔스퀘어 폰트를 넣었습니다만 취향에 따라 글꼴을 다르게 설정하셔도 됩니다.

@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

html,body {
	padding:0px;
	margin:0px;
	font-family: 'NanumSquare', sans-serif;
	position:relative;
}
#wrap {
	margin:0px;
	padding:0px;
	width:100%;
}
.container {
	width:1240px;
	margin:0 auto;
}
a,img {
	border:0px;
	text-decoration:none;
}
ul,li {
	list-style:none;
	padding:0px;
	margin:0px;
}
h1 {
	color:#525252;
	font-size:40px;
	font-weight:100;
	text-align:center;
	margin:0px;
	margin-top:193px;
}
h1 > b {
	font-weight:900;
}

#best_search {
	width:740px;
	margin:0 auto;
	padding-top:50px;
	text-align:center;
}
#best_search li,dd {
	display:inline-block;
	vertical-align:middle;
}
button {
	width:121px;
	background-color:#0085e2;
	color:#fff;
	border:0px;
	height:63px;
	margin-left:-5px;
	padding:0px;
	font-size:18px;
}
#best_search li p {
	color:#393939;
	font-size:17px;
	font-weight:bold;
	margin:0px;
	padding-right:30px;
}
dd {
	margin:0px;
}
dd  a.t{
	cursor:pointer;
	margin:0px;
	color:#4b4b4b;
	text-overflow:ellipsis;
	overflow:hidden;
	width:94px;
	white-space:nowrap;
	display:inline-block;
	font-size:17px;
	text-align:left;
	padding-right:13px;
	font-weight:700;
	vertical-align:middle;
}
dd .num {
	background-color:#4b4b4b;
	color:#fff;
	font-size:10px;
	margin-right:10px;
	vertical-align:middle;
	width:18px;
	height:18px;
	float:left;
	line-height:18px;
	text-align:center;
}
.best_add {
	border:1px solid #bebebe;
	color:#4b4b4b;
	padding:0px 4px;
	margin-left:10px;
}

마지막으로 <script></script> 사이로 스크립트를 넣어주시면 완성입니다.

function view(arg){
	$(".time1, .time2, .time3, .time4, .ad1, .ad2, .ad3, .ad4").css("display","none");
	if(arg=="0") {
		$(".time2, .ad2").css("display","block");
		viewcount = 1;
	}
	else if(arg=="1") {
		$(".time3, .ad3").css("display","block");
		viewcount = 2;
	}
	else if(arg=="2") {
		$(".time4, .ad4").css("display","block");
		viewcount = 3;
	}
	else if(arg=="3") {
		$(".time1, .ad1").css("display","block");
		viewcount = 0;
	}
}
var viewcount = 0;
var rtcarousel = setInterval(function(){ view(viewcount) },5000);

$("#best_search").mouseenter(function() {
	clearInterval(rtcarousel);
});

$("#best_search").mouseleave(function() {
	rtcarousel = setInterval(function(){ view(viewcount) },5000);
});

완성화면은 아래를 참고해주세요.

jsfiddle에 소스를 넣었더니 스크립트가 잘 먹히지 않아서 html 안으로 넣은 점 참고 부탁드립니다.

[user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기

모바일용 페이지를 제작할 때는 모바일 내에서 구현이 되는지 핸드폰으로 확인하는 작업을 거칩니다.

그런데 핸드폰으로 확인하는 작업을 하자니, FTP로 해당 파일을 업로드해서 URL을 복사하고 

핸드폰으로 직접 확인하는게 손이 많이 가고 번거롭더라구요.

 데스크탑에서도 모바일 화면을 볼 수 있는 방법을 찾다보게 되었는데 의외로 많은 방법들이 있었습니다. 

그 중에서 써보니 가장 좋았고 지금도 쓰고 있는 것들을 소개하려 합니다.

1. 크롬 확장 프로그램 user-agent-switcher

(https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko)

크롬을 쓰고 계시는 분들은 개발자도구에서 디바이스를 모바일 크기로 줄여 

확인하는 방법에 대해 알고 계시는 분들이 대부분일거라 생각하는데요. 

(모르시는 분들은 크롬에서 f12 누르시고 ctrl+shift+m을 누르시면 해당 페이지로 이동됩니다.)

저 같은 경우에는 웹용 페이지를 열었을 때, 모바일로 접속했을 시 

모바일 페이지로 전환되는 것까지 확인해야했기때문에 이 부분에서는 크게 도움이 되지 않았습니다. 

그래서 크롬 확장프로그램을 다운받게 되었는데요. 

크롬에서 위 URL로 접속하면 설치화면이 뜨게 됩니다. 

설치를 마치면 URL 바로 옆에 선글라스를 낀 아이콘이 생성이 되는데요. 

아이콘을 누르면 다양한 디바이스로 이동할 수 있는 메뉴들이 나옵니다.

 iOS > iphone6 를 누르시거나 Android > Android KitKat을 누르시면 되는데 

저 같은 경우에는 iphone6로 확인하는 편입니다. 

핸드폰으로 확인을 하지 않더라도 크롬에서 빠르게 확인할 수 있는데 

단지 핸드폰에서 보여지는 웹 화면 사이즈에 그대로 출력하는 지라 

핸드폰 화면에 맞춰 창크기를 줄여야하는 번거로움이 있습니다. 

2. 오페라 모바일 에뮬레이터

(https://www.opera.com/ko/developer/mobile-emulator)

위 방법이 크롬에서 확인할 수 있는 방법이라면 아래 방법은 프로그램을 아예 다운받아 사용할 수 있는 방법입니다. 

위 URL로 접속하시면 다운로드를 받을 수 있는 창이 뜨는데요. 

해당 창에서 운영체제(윈도우/맥/리눅스)에 맞게 다운로드받아주시고 설치를 하면 바탕화면에 해당 아이콘이 생성됩니다. 

프로그램에 접속하면 어느 모바일로 접속을 할지 선택창이 뜨게 되는데요. 

사이즈를 모른다면 custom을 선택하시고 Launch를 누르시면 해당 화면으로 넘어가게 됩니다. 

주소 입력 창에 만든 웹페이지를 드래그해서 넣으면 빠르게 모바일용으로 구현확인이 가능하죠. 

+

그 밖에 인터넷으로 접속해 확인하는 방법으로는 트로이(http://troy.labs.daum.net/) 사이트에 접속하여

디바이스 선택 후 확인하는 방법이 있습니다만 (이것도 크롬개발자도구때와 같이 사용목적이 달라서 저는 쓰고 있지 않습니다.) 

필요하신 분들은 해당 부분은 참고해두셔도 좋을 것 같습니다. 

+ 추가 내용 (19-10-23)

네이버에서 나온 브라우저 웨일에서 모바일 화면을 볼 수 있도록 지원해주는 기능이 있어 훨씬 간편하게 모바일화면을 확인해보실 수 있습니다.

3. 네이버 웨일

( https://whale.naver.com/ko/ )

크롬 확장 프로그램때문에 크롬 로드 오류가 뜬다거나 쓰기 번거로우시다면 웨일을 이용해보세요. 

 이전에 썼던 스크립트들을 정리하다가 만들어둔 팝업창을  Esc키로 끄는 구문을 다시끔 보게됐는데,

 그때는 스크립트를 넣기만 했었지 따로 소스를 자세히 볼 생각을 못했어서 이번 기회에 구문을 다시

 보면서 다시끔 공부를 하는 기분이 들었습니다.

 Esc로 팝업창을 닫는 스크립트는 아래와 같습니다.

window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;

	if(key == 27) {
		$(".modal").fadeOut(90);
		$("body").css({overflow:'scroll'}).unbind('touchmove');
	}
}

 (이 아래 내용은 제가 공부 겸 메모로 적어놓은 구문풀이 내용임을 참고부탁드립니다)

 변수 key값이 e.keyCode ? e.keyCode : e.which; 구문 형태를 띄고 있는데,

 해당 구문은  조건부(삼항) 연산자로 e.keyCode가 true면 e.keyCode가 실행, false면 e.which가 실행된다고 합니다. 

조건부(삼항) 연산자는 if..else문의 단축형으로

 if..else문을 사용하면 너무 복잡해지는 식에서 사용된다고 하는데 

매번 보기만 해왔었지 이게 무슨 구문일지를 생각해오지 않았었다는게 다시끔 안습... 

(여기서 event.which는 키보드 키 또는 마우스버튼이 이벤트에 대해 눌러졌는지 반환합니다.)

if문에 쓰인 27의 경우는 keycode table에서 27이 Esc를 의미하기에 쓰인 값이며,

unbind는 이전에 연결된 이벤트 핸들러를 요소에서 제거하는 때에 쓰이는 메서드로 쓰인다고 하네요.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

코딩을 완료 후, 크롬에서는 아무 이상이 없었던 background의 이미지가 익스플로러에서 흐릿하게 뭉개지는 현상이 있었습니다.

css를 잘못 입력했나 이것저것 입력해봤는데 소용이 없더라구요.

구글링해보니 저와 같은 문제를 겪은 분이 계셨고, 그 분이 남기신 url로 들어가보니 왜 이런 문제가 생기는 지 알 수 있었는데요.

제 경우는 이미지보다 작은 엘리먼트에 해당 이미지를 background-image로 설정해서 발생한 버그였었습니다.

다행히도 이미지를 엘리먼트에 맞게 크롭하니 익스플로러에서도 이미지가 제대로 나오는 것을 확인할 수 있었구요.

(position을 center로 두는 것도 버그에 포함될 수도 있다고 하는데 이 부분은 참고로 알아두면 좋을 것 같습니다.)

이미지를 통째로 background로 넣기보다 이미지에 텍스트나 따로 뺄 수 있는 이미지 레이어가 있다면 분리해서 

background로 넣을 때 분리해서 넣는 것이 좋을 것 같다는 생각이 들었습니다.

... 꼭 크롬에서는 괜찮다고 여기면 늘 익스플로러에서 말썽이니;;

저만 번거롭게 느껴지는 걸까요. 크로스브라우징 체크는 기본이라고는 하지만

뭔가 손이 두번 세번 더 가는 기분이 들고 여간 번거로운게 아니네요.

++ 근래에 같은 버그가 또 생겨서 이유를 살펴보니 Element에 width 값을 주지 않아서 이미지가 흐릿하게 보이더라구요. 

위 방법으로 안될 시에는 width값을 주는 것도 방법이 될 것 같습니다.

* 참고 사이트 

- http://www.i-swear.com/956

- http://connect.microsoft.com/IE/feedback/details/810354/ie11-css-background-image-show-blur

모달창을 띄우고 그 안에 slick 슬라이더가 돌아가게 만드는 페이지를 코딩 작업중에 있었는데

이상하게 모달을 띄우면 슬라이더에 있는 이미지가 한대 뭉쳐져선 움직이지 않더군요.

글머리 기호를 클릭하거나 prev,next 버튼을 누르면 그제야 slick 슬라이더가 제대로 구현됐는데... 

그렇다고 사용자한테 글머리 기호 클릭하라고 할 수는 없는 노릇이니 어떻게든 오류를 수정해야만 했습니다.

css 뜯어고치고 모달 플러그인을 갈아엎고 슬라이더를 갈아엎고 별 난리를 쳐도 

저 상태가 계속 유지되서 북치고 환장할 노릇이었죠. -_-;;

하다가 도저히 안되겠어서 나같은 삽질자(..)가 분명 어딘가에 있겠지 싶어 열심히 구글링으로 뒤져보았는데

다행히도 저랑 같은 문제를 가지고 있던 분이 올린 게시물을 찾을 수 있었습니다.

https://stackoverflow.com/questions/26271790/slick-js-and-multiple-twitter-bootstrap-modal-windows

쉽게 말해 resize 함수를 쓰라는 내용이었죠. 

resize() 함수는 창의 크기가 변할때 무언가 처리하고 싶을때 쓰는 함수인데, 

제가 원하는 건 모달이 열릴때 슬라이더가 제대로 구현되어 작동되는 것을 원하는 거였으니까 

모달 팝업 자바스크립트에 해당 구문을 넣어야겠다는 생각이 들었습니다. 

settings = {
    //Model Popup
    objModalPopupBtn: ".modalButton",
    objModalCloseBtn: ".overlay, .closeBtn",
    objModalDataAttr: "data-popup"
}  
  $(settings.objModalPopupBtn).bind("click", function () {
        if ($(this).attr(settings.objModalDataAttr)) {

            var strDataPopupName = $(this).attr(settings.objModalDataAttr);

            
            //Fade In Modal Pop Up
            $(".overlay, #" + strDataPopupName).fadeIn(170);
	    $('slick 플러그인 클래스명').resize();
        }
    });

    //On clicking the modal background
    $(settings.objModalCloseBtn).bind("click", function () {
        $(".modal").fadeOut(90);
    });

$('slick 플러그인 클래스명').resize();를 넣으니까 그제야 제대로 구현이 되더라구요. 

이 한줄을 위해서 얼마나 삽질을 했던가... 혹시라도 모달 팝업창에 slick 슬라이더 넣으셔야하는 분들은 참고하셔도 좋을 것 같습니다.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

* slick slider 플러그인 : http://kenwheeler.github.io/slick/

[javascript] on,off 스위치 만들기 (토글버튼: Togglebutton)

더웠던 휴가 다녀오고 바쁜 업무를 처리하다보니 시간만 흘러 어느새 8월말이 다다르고 있네요. 

휴가를 너무 푹 쉬고 왔는지 피곤함만 더 늘어가는 요즘입니다.

피곤함을 조금 더 빨리 떨치기 위해서 소홀했던 블로그도 챙길 겸 ON,OFF 스위치를 만드는 법을 가져왔습니다.

on,off 스위치 즉 토글버튼(Togglebutton)은 상태값을 on,off할때 유용한 버튼이죠. 

만들기 앞서서 먼저 <head> 안에 해당 소스를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

다음 <html> 안에 해당 내용을 넣어주세요.

<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>
<p>OFF</p><p style="display:none;">ON</p>

<head> 안에 <style></style> 사이로 css를 넣어주세요.

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

p {
	margin:0px;
	display:inline-block;
	font-size:15px;
	font-weight:bold;
}

마지막으로 </body> 안의 <script></script> 사이로 해당 구문을 넣어주면 완성입니다.

var check = $("input[type='checkbox']");
check.click(function(){
	$("p").toggle();
});

참조 :  https://www.w3schools.com/howto/howto_css_switch.asp