웹퍼블리셔의 팁 창고

http://rwdb.kr/코딩필수css-reset모음/

http://aboooks.tistory.com/115

reset.css

한줄 말줄임 처리(글자수 제한) (block 요소에서만 적용)

<style>
    .txt1 {
        width:200px;
        overflow:hidden;            /* 넓이 200px을 넘는 내용에 대해서는 보이지않게 처리 */

        text-overflow:ellipsis;      /* 글자가 넓이 200px를 넘을 경우 생략부호(...) 표시 */

        white-space:nowrap;      /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리 (\A로 줄바꿈 가능) */

        background:#999; color:#fff;

}

</style>

<div class="txt1">디오 Rainbow in the Dark. 번개가 있을때마다 너는 그것이 나를 언제나 좌절시킨다는걸 알잖아.</div>

- 결과 : 

멀티라인 말줄임 제한(글자수 제한)

<style>

    .txt2 {
        width:480px; vertical-align:top;

display: -ms-flexbox; display: -webkit-box; display: -moz-box; display: box;
max-height:80px;
        overflow:hidden;
        text-overflow: ellipsis;                /* 글자가 넘치면 생략부호(...) 표시 */
        word-break:break-all;                /* 글자 단위로 "강제" 줄바꿈 처리 */
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;

line-height:1.3em; height:3.9em;   /* height:1.3em x 3배 */
background:#999; color:#fff;
    }
</style>

<div class="txt2">

디오 Rainbow in the Dark.<br/>

번개가 있을때마다 너는 그것이 나를 언제나 좌절시킨다는걸 알잖아.<br/>

왜냐하면 그것은 자유롭고 나는 그걸 알고있어.<br/>

떠나버려서 영영 찾을수 없는 사람말이야.<br/>

나는 마법을 갈망해, 그 기운이 빛 아래에서 춤추는게 느껴져.<br/>

그것은 차가웠고, 나는 놓쳐버리고 말았어

</div>

- 결과(크롬) :

- 한계 및 해결법 :
  웹킷 엔진을 사용하는 브라우저에서만 display: -webkit-box; 속성과 -webkit-line-clamp 프로퍼티를 활용하여 여러줄의 문단을 말줄임 처리를 할 수 있음.

  웹킷 엔진을 사용하지 않는 브라우저에서는 해당 코드가 무시되므로 적절한 처리가 필요.

  단순히 height 값을 넣어서 영역을 벗어난 글자를 잘라낼 경우 아래와 같은 문제가 발생.
   

 사진 출처 : Toby Yun | CSS를 통한 멀티라인 말줄임 처리와 폴백

-webkit-line-clamp 값이 지정되어있어도 그보다 큰 height값이 요소에 지정되어있다면 나머지 텍스트도 노출되어버리는 문제가 발생
이를 방지하기 위해 height 값을 적절히 줄여 사용할 수도 있지만 모바일 환경에서는 단말기에 따라 폰트도 달라지기 때문에 폰트의 크기를 확신할 수 없음.
결국 어느 단말기에서는 잘려보일 수 있는 위험이 존재.
이를 방지하기 위해서는 line-height 값을 설정 + 그에 비례하는 height 값을 설정하여 해결.
예를들어,
line-height: 14px; -webkit-line-clamp: 3; 이면 height 값은 14px와 3을 곱한 42px 값을 주어야함

line-height: 1.2em; -webkit-line-clamp: 2; 라면 height 값은 1.2em과 2를 곱한 2.4em을 주면됨
- 한계 및 해결법의 출처 : Toby Yun | CSS를 통한 멀티라인 말줄임 처리와 폴백

Tips

display: box; 특정 영역 안의 여러 박스들을 수평정렬 혹은 수직 정렬 해주는 속성. 역순 배열하거나 임의로 순서를 변경할 수도 있음. float 혹은 table 혹은 table-cell과 비슷.

display:box;

-webkit-box-orient:vertical/horizontal; -moz-box-orient:vertical/horizontal;         /* vertical 혹은 horizontal */

box-pack: start/center/end/justify;                         /* 좌측정렬, 중앙정렬, 우측정렬, 양쪽배분정렬 */

-webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse/normal; /* 방향 : reverse 혹은 normal */

* 출처 및 자세한 정보 : 날라리기획자와 키다리디자이너 | CSS3 - display:box 에 대해 공부해 보자.

word-wrap: normal / break-word;
 - 긴 텍스트를 강제를 끊어 줄바꿈을 해주는 속성
 - word-wrap 속성은 비아시아 언어의 줄바꿈을 제어, 아시아언어(CJK)의 줄바꿈은 word-break 속성을 참조
 - normal: 기본값. 글자가 길어도 끊어지지않고 한 줄에 계속 표시
 - break-word: 강제 줄바꿈 처리
 - word-wrap이 가능한 요소 : height 나 width를 지닌 인라인 요소, 블록요소이거나, 절대적 위치의(absolutely positioned) 블록 요소
 * 출처 및 자세한 정보 : 지구별 안내서 | word-wrap 줄바꿈 속성(normal, break-word)

word-break: normal / break-all / keep-all / initial / inherit;

 - 줄바꿈을 어떻게 할 것인지에 대한 옵션
 - 아시아를 위해 만들어진 속성(영문의 경우 자동으로 하나의 연결된 단어는 함께 묶어서 줄바꿈이 되지만 한글 이외의 2byte 이상의 문자들은 그렇지 않죠)으로
   영문과 달리 byte단위로 구분되지 않는 언어의 랩핑을 돕습니다. 즉 영문이 아닌 단어의 줄바꿈을 원할 경우 사용하면 좋음.
    * 위설명 출처 : WebIsFree | [CSS] Linebreak 줄바꿈 처리하기, Word-Wrap, Word-Break, White-Space
 - word-wrap은 비아시아 언어의 줄바꿈을 제어한다면 word-break는 아시아, 비아시아 언어의 줄바꿈을 모두 제어할 수 있음.
    * 위설명 출처 : 지구별 안내서 | word-break 줄바꿈 속성(break-all, keep-all)

 - break-all : 글자 기준으로 "강제" 줄바꿈. 즉 단어 무시

 - keep-all : 단어 기준으로 줄바꿈

 * 출처 및 자세한 정보 : CMS FACTORY > CSS 강좌 | Property > word-break

# white-space : normal / nowrap / pre / pre-wrap / pre-line / inherit;

 - 요소내 공백 처리 방법 & 줄바꿈 처리 방법

 - normal : 기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 요소의 넓이 초과시 자동 줄바꿈 됨(wrap)

 - nowrap : 공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않음

 - pre : <pre>태그와 동일 기능. 공백을 코드에 있는 그대로 표시함. 줄바꿈이 코드와 동일하게 유지

 - pre-wrap : 공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨.

 - pre-line : 공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시
 - inherit : 부모요소로 부터 상속

 * 출처 : 지구별 안내서 | white-space 속성(pre, pre-wrap, pre-line 차이)

substring 메서드

- 문자열에서 특정한 구간의 문자열을 추출

- string.substring(from,to)

<script>

jQuery('#main_facebook ul > li').each(function(){

var Excerpt = jQuery(this).find(jQuery('.FBStream')).text().substring(0, 40);

jQuery(this).find(jQuery('.FBStream')).text(Excerpt);
//jQuery(this).text(Excerpt + "...");

});

</script>

2018년 3월 21일 현재, 우커머스 최신 버전 : WooCommerce Version 3.3.3 (February 21, 2018)

https://github.com/woocommerce/woocommerce/releases
https://github.com/woocommerce/woocommerce/blob/master/CHANGELOG.txt

https://github.com/woocommerce/woocommerce
https://github.com/woocommerce

루트가 아닌 wp 혹은 wordpress로 셋업한 경우 주소 변경시

위 타이틀로 검색시 생각보다 많은 글들이 검색됩니다. 쉽게 해결되는 경우도 있지만 그렇지 않은 경우도 있습니다.
몇개의 블로그 글을 보고 감이 잡혀서 바로 실행에 옮겼지만 예상과 달리 바로 해결이 안되더군요.
중요한 건 순서가 아니라 로직과 근본적인 이해입니다.
아무튼... 필요하신 분은 참고하세요!

1. 워드프레스 admin > 설정 > 일반의 '사이트 주소(URL)' 변경

- phpMyAdmin을 통한 DB 접속 후 wp_options (wp는 카페24 기준 사용자가 설정한 접두어임) 테이블을 업데이트하여 직접 수정도 가능
   (option_name : siteurl / home)
   워드프레스 공식 홈페이지에 wp-config.php 파일, 혹은 functions.php를 편집하여도 가능하다고 하였으나 제경우는 실패하였음. 최종적으로는 DB 값만 설정되면 OK
- 워드프레스 주소 및 사이트 주소는 구매한 도메인, 즉 최종 설정할 도메인이 아닌 임시도메인(ex. http://yoursite.cafe24.com)으로 맞추어도 무방함
  물론 이경우 도메인 구입처에서 네임서버 변경은 당근!
- 위 작업 이후 프런트 단에서 사이트를 확인하면 먹통됨. 정상적인 부분임.

2. index 파일의 수정 및 업로드

본래의 index.php 파일을 로컬에 복사
→ 파일을 에디터로 오픈 후 'wp-blog-header.php'의 url 부분을 절대경로로 설정 후 저장

→ 수정한 index.php 파일을 웹상에 놓여할 위치(ftp상 www 호출시 로딩되는 디렉토리)에 업로드

※ Tips
 - 워드프레스는 처음부터 root에 설치할 것

 - 여러 블로그 글에 호스팅 루트에 있는 .htaccess을 수정 후 업로드하라는 글이 있었지만 제경우에는 결과적으로 수정할 필요가 없었음
 - 위내용에 대한 로직의 이해나 지식이 바닥이라면 보부상에 있는 글, 'AutoMatic Domain Changer' 플러그인을 이용하세요!

Reference Sites
bizmark.co.kr : http://bizmark.co.kr/archives/1
WPBOX | 워드프레스 주소창의 wordpress 폴더 이름 없애기 : https://wpbox.kr/wordpress-manual/delete-url-wordpress-folder/
CMS Factory : https://www.cmsfactory.net/node/11112
wordpress.org | codex : https://codex.wordpress.org/ko:사이트_URL_변경_방법

join() 함수 : 배열값을 구분 문자열로 연결하여 하나로 콤바인. 인수값이 없을 경우 기본적으로 컴마(,)로 추가됨

문법 : var str = str.join();

예제1)

<script>

var strArray = [ 'Yngwie', 'Johan', 'Malmsteen' ];

var str1 = strArray.join();

var str2 = strArray.join( ' / ' );

document.write( '<div>' + str1 + '</div>' );

document.write( '<div>' + str2 + '</div>' );

</script>

결과값 : 

Yngwie,Johan,Malmsteen

Yngwie / Johan / Malmsteen

예제2) 인수값이 없는 경우

<script type="text/javascript">

var arr = new Array("사과","오이","배추","무");

arr.join()

document.write(arr);

</script>

결과값 : 사과,오이,배추,무

예제3) 인수값이 있는 경우

<script type="text/javascript">

var arr = new Array(0,1,2,3,4);

var brr = arr.join("-");

document.write(brr);

</script>

결과값 : 0-1-2-3-4

예제 2, 3 출처: 녹두장군 - 상상을 현실로 | http://mainia.tistory.com/4266

push(), pop(), join() 메소드

push() 메소드 : 배열에 아이템을 밀어 넣음 (배열의 끝에 추가)

pop() 메소드 : 배열의 아이템을 삭제 (push메서드와 마찬가지로 배열의 끝을 삭제)

join() 메소드 : 배열의 아이템을 합침. 이때 각 아이템의 구분자를 지정할 수 있음

 - 출처: http://zappysound.tistory.com/9

$("article").live('mouseenter', function() {

var Tmp1 = $(this).find('.qodef-ptf-category-holder').text();

var Tmp2 = Tmp1.split(" / ");

$(this).find('.qodef-ptf-category-holder').text(Tmp2.sort().reverse());

var Tmp3 = $(this).find('.qodef-ptf-category-holder').text();

var Tmp4 = Tmp3.split(",");

});

JavaScript reverse Method : Array의 요소 순서를 반대로 바꿈

 * 구문 : arrayObj.reverse()    //arrayObj : 임의의 Array 개체

 * 반환값 : 역순 배열

[jQuery] reverse, each 참조1 : http://zzznara2.tistory.com/455

[jQuery] reverse, each 참조2 : http://thinkwave.tistory.com/67

[javascript] 문자열 반대로 뒤집기 - reverse() : http://gocoding.tistory.com/153

<script>

var tmptxt1 = jQuery('body.page-id-749 div.fusion-post-content-container > p').text();

var tmptxt2 = tmptxt1.split("|");

jQuery('body.page-id-749 div.fusion-post-content-container > p').text(tmptxt2[2]);

</script>

/* 요약글의 타이틀 숨김 처리 */

<script>

jQuery('.aaa > p').each(function(){

var tmptxt1 = jQuery(this).text();

var tmptxt2 = tmptxt1.split("|");

jQuery(this).text(tmptxt2[1]);

});

</script>

$('.aaa > img').mouseenter(function(){

$(this).attr("src","/wp-content/uploads/main_icon1_ov.png").stop(true,true).hide().fadeIn(600);

$('.aaa > p:nth-child(1) > span').css('color', '#6d3ee6');

});

$('.aaa > img').mouseleave(function(){

$(this).attr("src","/wp-content/uploads/main_icon1_out.png").stop(true,true).hide().fadeIn(600);

$('.aaa > p:nth-child(1) > span').css('color', '#4f4f4f');

});

https://wpml.org/documentation/plugins-compatibility/creating-multilingual-sliders-with-revolution-slider-and-wpml/

https://wpml.org/forums/topic/how-to-translate-the-slider-revolution/

https://www.themepunch.com/revslider-doc/multiple-languages-wpml/

https://wpml.org/forums/topic/can-i-change-zh-hans-to-zh-or-cn-something/

https://wpml.org/forums/topic/change-language-directory-name/#post-1223663

https://wpml.org/forums/topic/sub-folder-name-change/

https://wpml.org/documentation/support/editing-wpmls-languages-table/

简体中文 (간체중문) / zh_CN / 중국어 / Simplified Chinese

繁體中文 (번체중문) / zh_TW / 대만어 / Taiwan

Chinese Standard Web Fonts : A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese

중국의 표준 웹 폰트 : 중국어 간체 웹 디자인을 위한 css 폰트 패밀리 안내

- 표준 중국어(간체) 웹 폰트 종류:

Windows

OS X

黑体：SimHei

宋体：SimSun

新宋体：NSimSun

仿宋：FangSong

楷体：KaiTi

仿宋_GB2312：FangSong_GB2312

楷体_GB2312：KaiTi_GB2312

微软雅黑体：Microsoft YaHei [as of Win7] 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD]

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti

华文楷体：STKaiti

华文宋体：STSong

华文仿宋：STFangsong

- 중국어 폰트 사용하기 위한 좋은 css 규칙:

중국폰트를 사용하며 중국어와 로마자 표기법(영어)을 같이 선언해주면 현지와 현지 이외에서의 사용에 도움이 된다.

ex) font-family: Tahoma, Helvetica, Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;

- 중국어 대상 폰트 앞에 영어 대상 폰트 선언:

영문폰트는 중국문자를 포함하고 있지 않지만 중국폰트는 영어문자를 포함하고 있다. 만약 중국폰트를 영문폰트 앞에 선언한다면 영문폰트 대신 중국폰트의 영어문자가 표현될 것이다. 중국폰트의 영어문자는 영문폰트의 영어문자보다 못생겼다.

그러므로 영문폰트를 중국폰트 앞에 선언하면 영어문자가 첫 번째로 렌더링 되고 중국문자가 뒤의 중국폰트의 중국문자를 사용하여 표시된다.

ex) font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

- 마이크로 소프트(윈도우)와 맥 폰트 선언:

위의 영어 대상 폰트 선언처럼 Mac용 중국폰트와 윈도우를 위한 중국폰트를 적어도 하나 선언해야 한다. (Arial / Helvetica와 같이)

목표로 하고 있는 플랫폼(윈도우/맥)에 맞추어 첫 번째를 선언해야 한다.

- 중국폰트 선언시 글꼴 따옴표를 넣어야 할까? :

명확하게 규정되어 있는 대답은 찾을 수가 없다. 일부에서는 따옴표를 선언하고 일부에서는 선언하지 않는다.

ex) without quotes: font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

and without quotes: font-family: Georgia, "Times New Roman", "Microsoft YaHei", 微软雅黑, STXihei, 华文细黑, serif; 

- 중국의 주요 글꼴들 :

宋体12号 – SimSun 12pt font

중국 웹 디자인에서 영어폰트의 arial폰트처럼 가장 공통 일반적으로 사용하는 기본 폰트이다.

Example site: 중국 비디오 공유 사이트 http://www.tudou.com 에서 기본 body 폰트로 SimSun 을 사용한다.

ex) font-family: Arial, Helvetica, tahoma, verdana, 宋体, SimSun, 华文细黑, STXihei, sans-serif;

微软雅黑 – Microsoft YaHei

중국 폰트의 Helvetica 느낌. Mac 폰트는 STHeiTi 의 라이트 버전인 STXihei에 상응한다고 생각한다.

Example site: 중국의 reader and web developer DaiJie의 Baidu blog

ex) font-family: Tahoma, Arial, Helvetica, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑", sans-serif;

仿宋 – FangSong

편안하고 막연한 scripty폰트. 많은 scripty 폰트들처럼 폰트사이즈를 14px 기본으로 그 이상을 필요로 한다고 본다.

ex) font-family: Georgia, "Times New Roman", "FangSong", "仿宋", STFangSong, "华文仿宋", serif;

楷体 – KaiTi

FangSong보다 조금 더 매끈한 그리고 문자 간격이 조금 더 넓은 scripty 폰트이다. 14pt아래로 잘 하지 않는다고 본다.

ex) font-family: Georgia, "Times New Roman", "KaiTi", "楷体", STKaiti, "华文楷体", serif;

대부분의 중국 폰트 파일은 적어도 3000 기본 문자를 갖는 어마어마한 종류의 폰트여서 @font-face로 잘 embedding 하여 렌더링하지 않는다. 많은 표준 아닌 중국 폰트들은 대부분 5MB 이상이고, @font-face 생성은 폰트 사이즈 제한을 2MB로 하고 있다.

- 중국 번체 간체의 차이?

약 50년 전 중국은 문맹률이 매우 낮아서 중국 전체 문자 언어를 "단순화"하기로 결정했다. 중국 문자인 한자의 복잡성을 줄이고, 문자의 많은 선의 톤을 제거한 쓰기 시스템을 내놓았다.

문제점: 중국 본토에 사는 사람들만 영향을 받았다. 중국 본토 외부에 사는 사람들인 대만, 홍콩, 미국과 해외 중국 이주자들은 채택하지 않았다. 그래서 지금 한자는 두 가지 방법을 쓸 수 있다. 한 가지 방법은 오래된 방법인 "기존의 문자", 웹 폰트로는 Big5라고 부른다.

다른 방법은 새 방법인 중국에서만 사용하는 "간체자", 웹 폰트로는 GB2312이다.

만약 당신 중국 본토 대상의 사이트를 위한 폰트를 선택한다면 GB2312(간체자)를 선택하라. 만약 홍콩, 해외의 차이나 타운, 대만 등을 대상으로 한다면 Big5를 사용해라. 대부분의 중국 웹 사이트들은 다중 언어 플랫폼을 모두 제공한다.

- 참조 및 원문 : http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

 - 출처 : Chinese Standard Web Fonts(중국의 표준 웹 폰트 : 중국어 간체 웹 디자인을 위한 css 폰트 패밀리 안내) | Web Publish / WWW 이야기 | 2014. 1. 13. 19:28 | 작성자 : 잎새 (jynsys) | URL : http://jynsys.blog.me/70182873010

홀수 : .company_table td:nth-child(odd) {background:blue;}

짝수 : .company_table td:nth-child(even) {background:green;}


* odd : 이상한, 특이한, 홀수의, 이용할[쓸] 수 있는, 대략 …의, … 남짓한

* even : (예상 밖이나 놀라운 일을 나타내어) …도[조차], (비교급을 강조하여) 훨씬, 더 정확히 말하면, (심지어) …하기까지 하게, 평평한, 반반한, (변화가 많지 않고) 고른[일정한], 균등한, 동일한, 대등한, 짝수[우수]의, (간격・크기가) 고른, 차분한

jQuery의 remove(), empty(), detach() 함수를 이용하여 노드를 dom에서 제거하는 방법

1. remove() : 선택된 노드를 dom에서 제거

ex) 이미지 태그중 첫번째 노드 제거

$("img:first").remove();

2. empty() : 선택 객체의 자식노드를 삭제. 선택한 객체를 삭제하는 remove와는 다르게 자식노드를 삭제하기 떄문에 선택객체는 남아있음

ex) p태그중 첫번째 p태그의 내용을 삭제, p노드 자체가 삭제되지는 않음

$("p:first").empty();

3. detach() : remove 함수처럼 선택된 노드를 삭제하지만 detach함수에 의해 제거된 노드를 임시로 보관할 수 있어서 제거와 삽입을 반복할 떄에 많이 사용

ex) div#content의 내용을 div#content2에 넣는다.

var temp = $("div#content").detach();

$("div#content2").html(temp);

정리해보면, remove함수는 해당노드를 포함한 모든 노드, 관련된 모든 이벤트, 데이터 모두 제거. 이때 데이터와 이벤트를 제거하지 않으려면 detach()를 사용.

empty함수는 선택 객체는 삭제 하지 않고 자식노드를 삭제. 세 함수중 제거 속도는 remove가 가장 빠름

예제1)  remove : <p><img src="img1.jpg"/></p> 노드가 완전히 제거됨

$(function(){

//이미지 태그중 첫번째 노드 제거

$("img:first").remove();

});

<div id="content">

<img src="img1.jpg"/>

<img src="img2.jpg"/>

<img src="img3.jpg"/>

</div>

예제2) empty : <p>item1</p>에서 item1만 삭제되고 <p></p>가 남게됨

$(function(){

//p태그중 첫번째 p태그의 내용을 삭제,p노드 자체가 삭제되지는 않음

$("p:first").empty();

});

<div id="content">

<p>item1</p>

<p>item2</p>

<p>item3</p>

</div>

예제3) detach : div#content의 모든 내용은 dom에서 제거되고 div#content2에 삽입됨

$(function(){

//div#content의 내용을 div#content2에 넣는다.

var temp = $("div#content").detach();

$("div#content2").html(temp);

});

<div id="content">

<p>item1</p>

<p>item2</p>

<p>item3</p>

</div>

<div id="content2">

</div>

* 참고서적 : 바로바로 할 수 있는 jQuery 입문 저자 : 유광열

* 출처 : 방글라 (gmlwns77)의 jQuery dom제거 함수 remove(), empty(), detach() | JQUERY / 프로그램 | 2012. 12. 18. 11:49
           http://blog.naver.com/gmlwns77/50157391611

부등호 및 등호 연산자/조건문

> : ~보다 크다, 초과

< : ~보다 작다, 미만

>= : ~보다 크거나 같다, ~이상

<= : ~보다 작거나 같다, ~이하

= : 오른쪽에 있는 값을 왼쪽에 치환하여라

== : 값이 같다. (결과값만 같으면 true)

=== : 값이 같다. (데이터 형식까지 같아야 true)

!= : 다르다

&& (조건1 && 조건1) : 2개 이상 조건을 만족시켜야 true

|| (조건 || 조건) : 또는 true

prompt() : 입력할 수 있는 안내창

alert() : 안내창, 경고창

If 조건문

(1) 기본 조건문

 if(조건){

    true일 경우의 실행문

}

(2) [else] 2개일 경우

if(조건){

    true일 경우 실행문

}else{

    false일 경우 실행문

}

(3) [else if] 2개 이상일 경우

if(조건1){

    조건1 true일 경우 실행문

}else if{

    조건2 true일 경우 실행문

}else{

    false일 경우 실행문

}

예제A

(1) 기본 조건문 : 만약 70점 이상이면 합격이라고 안내창 띄우기

var avg = prompt('숫자입력','0')

if(70점이하일때){ 불합격 }

if(avg >= 70){

alert('합격')

}else{

alert('불합격')

}

(2) [else] 2개일 경우 : 만약 80 이상이면 우수, 6 0이상이면 보통, 60 미만이면 노력 (3개)

if(80이상){ 우수 }else if{ 보통 }else{ 노력 }

if(avg >= 80){

alert('굿')

}else if(avg >= 60){

alert('올')

}else{

alert('엄마젖좀 더먹고와!')

}

(3) [중첩if문] // [else if] 2개 이상일 경우 : 0~100까지 입력했을 때만 아래 조건을 실행

2개 조건을 만족(&&) ▶ if(0보다 크고 100보다 작을때만){ if(80이상){ 우수 }else if{ 보통 }else{ 노력 } }

if(avg >=0 && avg<=100){

if(avg >= 80){

alert('굿')

}else if(avg >= 60){

alert('올')

}else{

alert('엄마젖좀 더먹고와!')

}

}else{

alert('0부터 100까지의 숫자를 입력해 주세요.')

}

예제B

- 전송버튼 눌렀을 때 input에 내용이 있으면 "전송완료"

- 내용이 없으면 "내용을 입력하세요."

- 보통 내용이 있는경우는 어떤게 있을지 몰라서 없는경우 먼저 선언하는게 좋음

- 내용이 없다 → ''

if(내용이 없다면){

내용을 입력하세요

}else{

전송 완료

}

<input type="text">

<button>전송</button>

<p style="font-size:12px; color:#ff1499; width:180px; text-align:center;"></p>

<!-- input안의 내용은 value값 [.val()] -->

<script>

$(function(){

$('button').click(function(){

if($('input').val() == ''){

$('p').text('내용을 입력하세요.')

$('input').focus()

}else{

$('p').text($('input').val()+' 전송이 완료되었습니다.')

}

})

})

</script>

* 출처 : 자료 - [제이쿼리] 부등호연산자, if조건문 / 딩동댕 Hoit_:D . 2017.06.24 13:06 : http://5603.tistory.com/153

웹사이트의 주소 변경 후 아바다 테마의 아이콘, icomoon이 깨져서 보일 경우 대처법

Theme Options > Advanced > Dynamic CSS & JS에서 Reset Fusion Caches 클릭 : 이후 올바른 위치에서 리소스를 가져오게 된다.

https://theme-fusion.com/knowledgebase/how-to-make-a-full-screen-revolution-slider/

Avada Theme

<script>

jQuery(document).ready(function() {

/* 이미지 밑 제품명 */

jQuery('a[data-title="AAA"]').parent().parent().parent().next().find('a').removeAttr("href");

/* 이미지 hover 제품명 */

jQuery('a[data-title="COIL"]').next().find('a').removeAttr("href");

});

</script>

matchMedia() 함수 혹은 $(document).width()

/* 1024px 보다 작을경우 : Not Flexible */

if (matchMedia("screen and (max-width: 1024px)").matches) {

$('#menu-item-1 > a > span').text('AAA');

$('#menu-item-2 > a > span').text('BBB');

} else {

$('#menu-item-1 > a > span').text('CCC');

}

/* 1024px 보다 작을경우 : Not Flexible */

if($(window).width() < 1024){ $('#Container').removeAttr('id'); }

1. 자동 생성해주는 웹사이트

 embedresponsively.com : http://embedresponsively.com

2. 블로거 꿈쟁이(cyclo80916)님의 글 : https://blog.naver.com/cyclo80916/220120445344

<style>

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }

.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

</style>

<div class="embed-container"><iframe src="http://www.youtube.com/embed/bE52Nr2Ok5k" frameborder='0' allowfullscreen></iframe></div>

3. CMS FACTORY의 글 : https://www.cmsfactory.net/node/20765

 <style>

.youtubeWrap {position: relative; width: 100%; padding-bottom: 56.25%;}

.youtubeWrap iframe {position: absolute; width: 100%; height: 100%;}

</style>

<div class="youtubeWrap">

<iframe width="560" height="315" src="https://www.youtube.com/embed/bE52Nr2Ok5k" frameborder="0" allowfullscreen></iframe>

</div>