Category FE 개발
<strong>과 <b>를 사용할 때 웹에서 보여지는 것은 둘다 차이가 없다. 좀 더 깊게 들어갈 경우 웹표준 및 웹 접근성을 따지게 되면.. W3에서 <strong> 과 <em>에 대해서 설명하기를.. – 내용을 강조하기 위해서 <strong> 및 <em>을 사용한다. – 일반적으로 사용자에게 보여줄 때… Continue Reading →
서브라임 텍스트는 강력한 툴인만큼 다양한 테마들이 있다. 그래서 인기있는 테마들 몇개를 소개하려고 한다. Theme – Soda (ST2/ST3) Soda 테마 홈페이지
객체 생성
배열 Array 배열 내부에 있는 값 하나하나를 요소(element)라고 부른다. 반면 객체 내부에 있는 하나하나의 값은 속성(property)이라고 부른다. 배열생성
URL 인코드/디코드 인코딩은 문자롬 컴퓨터에 저장하거나 통신에 사용할 목적으로 부호화하는 방법업니다. 웹상에서는 통신할 때
함수에서는 선언적 함수와 익명 함수가 있다. 선언적 함수 선억적 함수는 fucntion 함수명 () { } 이렇게 생성된 것을 선언적 함수라고 한다. 익명함수는 var 함수명 = function() { }; 이 형태는 함수이지만 이름을 가지고 있지 않으므로 익명함수라고 한다.
2017.08.27 소스코드 하이라이트가 깨져서 수정하였습니다. for문 JavaScript: //초기식 조건식 증감식 for(var i=0;i<5;i++){ document.write(i + '번째 반복문<br>'); } document.write('===========================<br>'); //반복문을 1~100까지의 합을 구하기 var total = 0; for(var i=1;i<=100;i++){ //단일 for문 total += i; //total = total + i } document.write('total… Continue Reading →
Switch문 document.write(”); 이것을 써서 바로 출력을 할 수는 방법이 있지만 <button> 을 사용하지 않을경우 페이지가 로딩되면 바로 경고창, 확인창, 입력창이 뜰 수 있기 때문에 <button> 을 만들었다.
페이지를 열면 바로 확인창이 뜰 수 있어서 함수를 만들어 놓고 불러오게 했다. 삭제 버튼을 누르면 실행 되게 한 것이다. 만약 html을 보고 싶다면 화면의 오른쪽에 상단에 Edit in JSFiddle 를 보면 html도 볼 수가 있다. 단일 조건 체크 if문
증감연산자
변수명의 정의 1. 키워드(예약어)를 사용하면 안된다. 2. 숫자로 시작하면 안된다. 3. 특수문자는 ‘_’와 ‘$’만 허용 4. 공백 문자를 포함할 수 없다. 식별자를 잘못 지정한 예 break(키워드) 10alpha(숫자로 시작) #num(특수문자 사용) has space(공백 사용)
자바스크립트는 기본적으로 html안에서 호출되어서 실행이 된다. <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>임베트 형태</title> <script type=”text/javascript”> /* 여러줄 주석 */ //한줄 주석 //document.write(‘하하<br>’); document.write(‘head에서 실행<br>’); </script> </head> <body> <script type=”text/javascript”> document.write(‘body에서 실행’); </script> </body> </html> 이런식으로 들어가게 된다. 위의 내용중에… Continue Reading →
한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; } … Continue Reading →
sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다. 원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다. 1. color는 글자에만 적용되는 게 아니다. – 이미지가 없을 때의 대체 텍스트 색상… Continue Reading →
HTML Character Entity Code Reference Table 보기 HTML Character Entity Code Reference Table Character Entity Description Displayed Character Entity Code Name Character Entity Code Name Displayed Character Entity Code Number Character Entity Code Number quotation mark, APL quote “… Continue Reading →
checked 여부 확인 $(“input:checkbox[id=’ID’]”).is(“:checked”) == true : false /* by ID */ $(“input:checkbox[name=’NAME’]”).is(“:checked”) == true : false /* by NAME */ checked/unchecked 처리 $(“input:checkbox[id=’ID’]”).attr(“checked”, true); /* by ID */ $(“input:checkbox[name=’NAME’]”).attr(“checked”, false); /* by NAME */ 특정 라디오버튼 선택… Continue Reading →
스크롤 내릴때와 올릴때 다른 이벤트를 적용하고 싶은데…헷갈려서 구글링 한결과 다음 같이 나왔다. <script type=’text/javascript’> $(function(){ //Keep track of last scroll var lastScroll = 0; $(window).scroll(function(event){ //Sets the current scroll position var st = $(this).scrollTop(); //Determines up-or-down scrolling if (st >… Continue Reading →
가끔씩 페이지 컨텐츠들을 다른 포스트 내용을 가져와야할 때가 있다. 내용이 똑같은데 굳이 또 쓸필요성을 못느끼고 편리하게 가져왔으면 할때가 있는데.. 그것을 플로그인을 이용하면 참 쉽다.the Improved Include plugin, RPS Include Content 두 플러그인 중에 선택해서 사용하면 된다. 그렇지만!! 플러그인을 쓰지 않아도… Continue Reading →
고정값이 없을때 고정값을 넣을때.. textarea에 width:100%를 줬을때 영역 벗어날 경우를 볼수 있다. textarea의 width 값은 100% + padding + borders 일 것이다. 그래서 padding과 border값을 빼줘야 한다. class로 해서 주게되면 다음과 같다.. <!doctype html> <html lang=”en”> <head> <style> label {… Continue Reading →
Sublime Text 2 shortcut 영어 한글 단축키 설명 New File 새파일 Ctrl+N 새문서나 새파일을 만듬. Open File 열기 Ctrl+O 새문서나 새파일을 열기 Open Folder 폴더열기 폴더열기 Open Recent 최근문서열기 최근문서열기 Reopen with Encoding 인코딩해서 다시열기 인코딩해서 다시열기 New View into… Continue Reading →
워드프레스를 이용하다보면 큰 파일을 업로드해야할때가 있는데 기본 용량으로는 충분하지 않을 때가 있다. 현재 인터넷에서 돌아댕기는 .htaccess 파일을 수정하거나, wp-config.php 수정을 해야한다고 하지만 .htaccess파일을 수정하는 방법은 시스템에 안좋은 영향을 미칠 수 있기 때문에 이 방법을 선호한다. 1. php.ini 파일 만들기 메모장… Continue Reading →
noUiSlider는 IE7++ 크롬, 파이어폭스, IE,오페라, 사파리 주요사용하는 모든 브라우저에 사용이 가능합니다. 사용방법: <!– jQuery or Zepto –> <script src=”jquery / zepto.js”></script> <!– The noUiSlider script and stylesheet –> <link href=”jquery.nouislider.css” rel=”stylesheet”> <script src=”jquery.nouislider.js”></script> 다운받기: http://refreshless.com/nouislider/download 출처: http://refreshless.com/nouislider/
CSS comments snippets for Sublime Text. 코드에서 주석은 매우 중요하다. Package Control에서 CSS Comments를 검색해서 다운받으면 된다. 만약 Package Control이 없다면 다운을 받아서 카피를 해야한다. Basic Comment trigger: c-basic⇥ /* Basic comment */ Long Comment trigger: c-long⇥ /* * Long… Continue Reading →
PC 단축키 (섬네일 클릭하면 이미지가 크게 보입니다.) MAC 단축키 출처: http://www.andismith.com/blog/2012/12/sublime-text-2-cheatsheets/
parents() http://api.jquery.com/parents/ 선택된 엘리먼트의 모든 부모 엘리먼트 요소를 가지오게 된다. 예) <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>parents demo</title> <style> p, div, span { margin: 2px; padding: 1px; } div { border: 2px white solid; } span { cursor:… Continue Reading →
<script LANGUAGE=”JavaScript”> var UserAgent = navigator.userAgent; if (UserAgent.match(/iPhone|iPod|iPad|Android|Windows CE|BlackBerry|Symbian |Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia |SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) location.href = “http://m.도메인 명”; </script> <head></head>안에 넣어주면된다.
디바이스 해상도 가로폭 명칭 480px 스마트폰 800px 태블릿 1024px 넷북 1600px 데스크톱 스마트폰 해상도 기종 해상도 웹 브라우저 해상도 아이폰4.4S 960 * 640 480 * 320 아어폰5 1136 * 640 568 * 320 갤럭시 S3 1280 * 720 640 *… Continue Reading →
아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →
input[type=text]::-ms-clear{display: none; } IE(익스플로러)10 이상 버전에서 인풋박스에 포커스하면 X표시가 나온다. 이걸 삭제 해주기 위해서는 위의 소스같이 하면 나오지 않는다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 에서 볼 수 있다.