-
Javascript, jQuery 2015‧01‧26
jQuery - css로 display none와 block에 상태에 따른 처리
css를 이용해서 인터렉션을 구성해 놓은 경우가 있다. 특히나 display : block 과 none를 이용해서 요소를 보이거나 사라지게 하는 상황이 많은데 스크립트로 함수를 만드는 중에 이에 따른 행동이 필요할 때가 있다. if($('.popup').is(":visible")){ // display : none가 아닐 경우 }else{ // display : none일 경우 } .popup 엘리먼트가 가시적으로 보이는지 아닌지에 따른 조건문이다.
-
Javascript, jQuery 2015‧01‧26
jQuery - Ajax로 데이터 불러오기
외부 데이터를 불러올 때 Ajax를 통해서 가져오는 경우가 많다. Ajax를 통해서 Json 형식의 파일을 불러오는 예제를 만들면 아래와 같다. $.ajax({ type: "GET", url: "파일경로및 파일명", dataType: "json", cache: false, success: function(data){ $.each(data.dataList,function(index){ $('li').eq(index).html(data.dataList[index].val); }); },error: function(XMLHttpRequest, textStatus, errorThrown) { console.log("Status: " + textStatus); },timeout: 3000 }); 설명하자면 timeout 에 3000을 입력해둔 것은 외부 데이터를 불러오는 […]
-
Javascript, jQuery 2015‧01‧13
jQuery - 스마트폰 스크린 회전 감지 스크립트
스마트폰의 스크린이 가로모드와 세로모드를 감지하여 필요에 따라 스타일시트나 스크립트를 다르게 사용하는 경우가 있다. 일단 css의 미디어쿼리로 처리하는 방법을 보면 아래와 같다. #cover{ display:none; } @media only screen and (device-width: 768px) and (orientation: landscape) { #cover{ display: block; } } @media only screen and (min-device-width: 320px) and (orientation: landscape) { #cover{ display: block; } } 위 […]
-
Html, CSS 2015‧01‧13
css - 모바일웹 화면 회전시 텍스트 크기가 변경될 때
반응형 웹사이트를 제작하다보면 미디어쿼리를 이용해서 모바일 화면의 폰트 크기를 지정하는 경우가 있다. 그런데 세로로 보는 상태에서 화면을 회전시켜 가로 모드 (Landscape)가 되면 텍스트들이 자동으로 커지는 현상을 발견할 것이다. 픽셀로 정의한 폰트가 아닌 가변적인 치수로 지정할 경우 그러한데 이는 스마트폰의 브라우져가 컨텐츠 정보를 읽기에 최적화된 모드로 렌더링하기 때문이다. 이에 디자인을 기반으로 em이나 %로 폰트 사이즈를 설정한 […]
-
Tools 2015‧01‧07
페이스북 공유시 나오는 정보 수정 방법
일단 페이스북에 주소를 입력하거나 공유하게 되면 나오는 정보들이 있다.이 정보들을 사이트에 설정하려면 아래 링크를 찾아가서 메타 태그를 헤더안에 넣으면 된다. https://developers.facebook.com/docs/sharing/best-practices?locale=ko_KR 그리고 나온 정보가 제대로 반영되지 않을 때는 페이스북 개발툴에서 캐시를 삭제한다. https://developers.facebook.com/tools/debug/og/object/ 위 주소로 접속하면 캐시를 지울 사이트 주소를 입력하는 칸이 나온다.주소를 입력하고 'Show existing scrape information'를 누르면 설정된 값들이 나열 된다. 'Fetch new […]
-
Html, CSS 2015‧01‧06
css3 - 아이폰에서 스크롤이 부드럽지 않고 버벅일 때
overflow:scroll; -webkit-overflow-scrolling:touch; 위와 같이 써주면 스크롤이 자연스럽게 변하게 된다.
-
Php 2015‧01‧06
Mysql-간단하게 테이블과 필드 생성
create table 테이블이름( 필드명A int(10) NOT NULL auto_increment, 필드명B varchar(20), 필드명C int(10), PRIMARY KEY(필드명A)) 필드가 3개인 테이블을 생성하는 방법으로 필드명A는 고유키로 설정하며 자동으로 증가하는 인덱스와 같은 기능으로 사용하려고 설정하였다.
-
Php 2015‧01‧06
Mysql - 문자셋(character set) 변경문
테이블이나 필드에 한글이 안들어갈 때 문자셋을 utf-8로 변경하여 설정한다. 1. 테이블의 문자셋을 변경할 경우 ALTER TABLE `디비이름`.`테이블이름` CHARSET=utf8; 2. 테이블안의 필드에 문자셋을 변경할 경우 ALTER TABLE `디비이름`.`테이블이름` CHANGE `필드명` `필드명` VARCHAR(8) CHARACTER SET utf8 DEFAULT NULL; 위 처럼 명령을 입력한다.
-
Javascript, jQuery 2014‧11‧06
jQuery - 특정 속성 가진 엘리먼트 찾고 속성 제거하기
특정 속성을 가진 엘리먼트를 찾는 방법은 쉽니다. $('div[title]') 위 코드처럼 선택하면 div 중에 title 속성이 있는 엘리먼트들을 선택하게 된다.그러면 여기서 title이라는 속성을 지우면 아래와 같다. $('div[title]').removeAttr('title'); 간단하다. removeAttr이면 된다.
-
Html, CSS 2014‧10‧24
CSS3 - 미디어쿼리 사이즈별로 임포트 방법
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css) (screen and min-width:768px); 예제는 768px 이상일 경우 나눔글꼴 css 로딩 되도록 코딩함