본문 바로가기

웹 개발/웹프로그래밍44

NN JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) clipboard.js 자바스크립트를 사용해 클릭 시 내용이 복사되는 버튼을 만들어 보겠습니다. 티스토리에도 적용되도록 쉽게 설명드릴게요. 목차  clipboard.js clipboard.js는 요소를 클릭했을 때 클립보드를 복사해주는 자바스크립트입니다. 아래 관련 페이지로 가시면 자세한 내용을 확인하실 수 있어요.홈페이지 - https://clipboardjs.com/GitHub - https://github.com/zenorocha/clipboard.js/ 자바스크립트 파일을 다운로드해서 사용하는 방법과 CDN으로 연결하는 방법 둘 중 하나로 사용하시면 됩니다.   다운로드자바스크립트 파일을 다운로드해서 티스토리 html/파일업로드에 올려서 사용할 수 있습니다. 1) 다운로드 - https://cli.. 2023. 9. 30.
NN JavaScript | Swiper 슬라이드 메뉴 스와이퍼 플러그인 스와이퍼 플러그인은 터치 슬라이드 플러그인입니다. 아래에서 다운로드 받을 수 있습니다. http://www.idangero.us/swiper http://www.idangero.us/swiper/demos/ 구조 swiper-container — swiper-wrapper— swiper-slide— 소스 javascript 1 2 3 new Swiper( '.swiper-container', { // 옵션 }); Colored by Color Scripter cs 옵션 autoHeight : true — 자동높이조절 autoplay — 자동 슬라이드 설정 breakpoints — 반응형 설정 centeredSlide : true — 슬라이드가 가운데로 배치 freeMode : false.. 2021. 2. 7.
NN 코드이그나이터 | 데이터베이스 데이터 베이스 application/config/database.php 연결 cotroller $this->load->database(); 선언 application/controllers/topic.php application/config/autoload.php $autoload['libraries'] = array('database'); 액티브 레코드 수정된 형태의 액티브베이스 데이터베이스 패턴을 사용 정보의 추출, 삽입, 업데이트 최소한 코드 $this->db->get(); $this->db->insert(); $this->db->insert('mytable', $data); = INSERT INTO mytable (title, name, date) VALUES ('My title', 'My name.. 2021. 1. 30.
NN 코드이그나이터 | 라이브러리 라이브러리 Image Manipulation Class ❛ get_instance() $this 는 컨트롤러, 모델, 뷰에서만 사용 가능 $CI =& get_instance(); CI 객체를 변수에 할당 : $this 대신 사용 $CI->load->... helper 등에서 사용 $this->input->get() 로그 출력 1. echo 2. var_dump 3. config.php log_threshold = 4 logs 폴더안에 log 파일 생성 열람 : tail -f 로그파일명 팁 defined('BASEPATH') OR exit('No direct script access allowed'); BASEPATH 상수값이 정의되어있지 않다면 페이지를 종료한다는 이 소스는 CI 의 기본상수인 BASEP.. 2021. 1. 29.
NN 코드이그나이터 | index.php 제거 index.php를 제거하는 이유는 주소가 늘어지고 가독성이 안 좋기 때문입니다. 문제가 하나 있습니다. 아파치가 mod_rewrite를 지원해야만 해요. 아파치 mod_rewrite에 관한 글은 다음 글을 참고해 주세요 관련포스트 웹서버 | 아파치 mode_rewrite 확장 모듈 최상위 디렉토리 http://내홈피주소/index.php/컨트롤러/함수/변수값 http://dovetail.dothome.co.kr/index.php/welcome/hello/1 application 폴더와 system 폴더, index.php 파일이 위치한 디렉토리에 .htaccess 파일 RewriteEngine On RewriteBase / RewriteCond $1 !^(index.php|images|captcha|d.. 2021. 1. 26.
NN CSS | 6-2. 레이아웃 Grid Grid Flex와 가장 큰 차이점은 2차원 레이아웃 시스템이라는 점입니다. 기본구조 1. 컨테이너 - 그리드 전체 영역 2. 아이템 - 아이템들이 grid 규칙에 의해 배치 3. 트랙 - grid의 행과 열 4. 셀 - grid 한 칸 5. 라인 - 셀을 구분하는 선 6. 번호 - grid 라인의 각 번호 7. 갭 - 셀 사이의 간격 8. 영역 (Area) - grid 라인으로 둘러싸인 사각형 영역 컨테이너 컨테이너에 적용하는 속성 .container { display: grid; } 1. dispaly : gird | inline-grid 그리드의 시작 2. grid-template-rows, grid-template-columns: - 명시적 행과 열의 배치와 크기, 라인 이름도 정의 가능 repe.. 2021. 1. 25.
NN CSS | 6-1. 레이아웃 Flex Flex 1. table (전설 속에 존재) 2. float, inline-block 3. Flex 4. Grid 레이아웃 태그는 위와 같이 발전해 왔습니다. 언젠가는 float, inline-block도 전설 속의 태그가 될 수도 있어요. 그렇다고 Grid만 쓰기에는 Flex만 가능한 기능들이 있기 때문에 우리는 Flex와 Grid를 둘 다 배워야만 합니다. 기본구조 item1 item2 item3 기본구조는 컨테이너 안에 아이템들이 배치되어 있는 구조입니다. 이어서 컨테이너와 아이템에 적용하는 속성들을 알아볼게요. 컨테이너 컨테이너에 적용하는 속성 .container { display: flex; /* display: inline-flex; */ } 메인축 : 아이템이 배치된 방향의 축 교차축 : 메.. 2021. 1. 24.
NN HTML | 2. 기본 구조 HTML (Hyper Text Markup Language) 는 웹페이지를 위한 표준 마크업 언어입니다. 웹사이트를 만들 수 있고 배우기도 쉽습니다. HTML의 구조 테스트 전체적인 구조는 위와 같습니다. 아래의 한 줄만 보겠습니다. 테스트 요소 (Element) 위의 한 줄 전체가 html에서 개별적인 역할을 하기 때문에 '요소'라고 불립니다. 보통 시작태그와 종료태그로 구성된 내용을 포함한 태그 전체를 말합니다. 위 예시에서 요소는 테스트 태그 (Tag) 태그는 객체를 만들 때 사용됩니다. 시작태그 : 끝태그 : 속성 (Attribute) 속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어하는 설정값 위 예시에서 속성은 class "test"란 속성 값을 갖고 있는 class는 h1의.. 2021. 1. 6.
NN CSS3 | 10. 모듈과 변형 CSS3는 CSS와 완전히 호환되며 차이점은 다음과 같은 것들이 있습니다. 선택자 Level3미디어 쿼리 Level3색 Level3네임스페이스 CSS3 모듈 선택자 — 많은 선택자가 새롭게 정의박스 모델 — 배경 — 이미지 — 텍스트 효과 — 2D 변형 — 3D 변형 — 애니메이션 — 다중 칼럼 레이아웃 — 사용자 인터페이스 — 벤더 프리픽스 (vendor prefix)-ms- 익스플로러-webkit- 크롬-moz- 파이어폭스-webkit- 사파리-o- 오페라웹 브라우저 공급자가 제공하는 새로운 기능을 이전 버전의 웹 브라우저에 알려주기 위해 사용되는 접두어 CSS3 변형 Transitionccs 스타일 전환 효과를 설정합니다.transitiontransition-delaytransition-durati.. 2020. 12. 29.

티스토리툴바