no image
[CSS] Transition 을 이용한 애니메이션
CSS의 transition 을 사용하면 간단한 것부터 복잡한 애니메이션 효과를 만들 수 있다. 간단한 예시는 아래를 참고하고, 자세한 내용은 맨 아래에 링크된 글을 참고한다. .btn-default { display:inline-block; padding: 5px 20px; background-color:#E5E5E5; border:1px solid #AAA; cursor:pointer; -webkit-transition:background-color .5s; transition:background-color .5s; } .btn-default:hover { background-color:#AAA; } ※참고. https://developer.mozilla.org/en-US/docs/Web/CSS/CS..
2016.09.03
no image
[JavaScript] JavaScript 와 Json 을 이용한 ajax 통신
1. jQuery를 이용한 경우 (예시) $("#btn_normal").click(function () { $.ajax({ type: 'POST', dataType: 'json', data: { 'idx': '14', 'content': 'yeah' }, url: 'getList/', success: function (data) { if (data) { // 응답 성공 alert(data.name); } }, error: function (req, status, error) { // 응답 실패 } }); }); 2. 순수 Javascript를 이용한 경우 var httpReq; function makeRequest(url, data, response) { if (window.XMLHttpRequest) ..
2016.09.03
[ERROR] Cannot access empty property
오류 원인 말 그대로 속성을 참조하려는데 빈 속성이어서 일어나는 오류 해결 방안 실수로 아래와 같은 코드가 작성될 수 있다. 지금 위의 코드를 그대로 실행시키면 'Cannot access empty property' 라는 오류가 난다. 아래와 같이 써줘야 가능하다.
2016.09.01
no image
[CSS] Clearfix Hack
방법은 굉장히 여러 가지 수단이 있는데 아래는 그 중의 하나 .clearfix { overflow:auto; zoom:1; /* for IE6 */ } 작업하다보면 성가시게 만드는 것 같다. ※Clearfix - http://stackoverflow.com/questions/8554043/what-is-clearfix ※Ref 1) http://aboooks.tistory.com/328 2) http://ko.learnlayout.com/clearfix.html
2016.08.30
[PHP] Codeigniter 에서 Helper 를 활용한 asset 폴더 생성
예를 들면 view를 통해서 javascript나 css를 불러오고 싶은데 ci 주소 특성상 일반적인 주소 접근으로는 어렵다. 폴더 계층으로 보면 system/ application/ assets/ css/ images/ 이렇게 위치한 상태의 assets 폴더를 사용하는 방법이다. 1. 우선 application/helpers 폴더 안에 다음과 같은 내용을 적고 utility_helper.php 파일로 저장한다. 2. application/config/autoload.php 파일을 열고 $autoload['helper'] 의 배열에 utility를 추가시킨 후 저장한다. $autoload['helper'] = array('url', 'file', 'utility'); 3. application/confi..
2016.08.30
[CSS] LESS 활용한 박스를 웹 브라우저 창 가운데에 배치하는 방법
LESS 로 다음과 같은 코드가 입력되있다고 하자 @form_width: 600px; @form_height: 400px; #content { position: absolute; top: 50%; left: 50%; width: @form_width; min-height: @form_height; /* 이 부분 */ margin-top: -1 * @form_height / 2; margin-left: -1 * @form_width / 2; } 원리는 간단하다. 해당 박스(#content)의 기준 점이 왼쪽 상단인데, position과 top, left 로 인해 이것이 화면의 중앙에 위치하게 된다. 이것을 가운데에 배치된 것처럼 만드려면 해당 박스의 가로 폭의 반만큼 왼쪽으로, 세로 폭의 반만큼 위쪽으로 ..
2016.08.30
[PHP] 코드이그나이터(CI) config.php 설정
base_url //$config['base_url'] = ''; $config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http"); $config['base_url'] .= "://" . $_SERVER['HTTP_HOST']; $config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']); 이 방법은 가끔 어떤 경우에는 통하지 않는 경우가 있으니 주의해서 사용합니다. index_page $config['index_page'] = ''; 주소에서 index.php를 삭제하려면 공백..
2016.08.28
[PHP] 코드이그나이터(CI) 에서 index.php 없애기
코드이그나이터(CodeIgniter)에서 URL 규칙은 다음과 같다. (3.X버전, 2.X버전) http://example.com/[controller-class]/[controller-method]/[arguments] 사실 위의 경우처럼 하려면 중간에 index.php가 들어가야 하는데 보통 주소를 간단하게 하기 위해서 index.php 를 포함시키지 않는다. 이를 위해서는 아래의 두 가지 중 하나를 진행해야 한다. 1. config.php 설정 index_page 항목에서 index.php 값을 공백으로 변경한다. /* |-------------------------------------------------------------------------- | Index File |-----------..
2016.08.28
no image
[HTML] 오픈 그래프 메타 태그 (Open Graph Meta)
카카오톡이나 SNS 등에서 특정 링크를 붙여놓으면 알아서 만들어주는 기능을 볼 수 있을텐데 그 역할을 하는 것이 이것이다. ※자세한 내용은 https://ogp.me/ 에서 확인할 수 있다.
2016.08.28