본문 바로가기

웹 개발/웹프로그래밍29

NN 웹사이트 풀스택 개발자. 무엇을 개발하나? 웹에서 프론트 엔드와 백 엔드(서버) 모두를 개발가능한 사람을 말합니다. 혼자서 다 개발하기란 너무나도 힘든 일이지만 혼자서 온전히 하나의 웹사이트나 서비스를 개발할 수 있는 사람을 풀스택개발자라고 합니다. 목차 1. 프론트 엔드 (Front-End) 프론트 엔드는 사용자가 사이트에 들어와서 보여지는 부분 즉, 디자인과 인터페이스 등이 이에 속합니다. 1.1 사용자 인터페이스 (UI) 개발 웹페이지의 인터페이스를 디자인하고 개발하고 사용자 경험(UX)를 개선합니다. 1) HTML - 웹페이지의 구조 2) CSS - 웹페이지의 스타일 3) JavaScript - 웹페이지의 동적 기능을 구현하는 데 필수적인 언어입니다. jQuery : html의 클라이언트사이드 조작을 단순화합니다. jQuery UI : G.. 2024. 4. 26.
NN 파일업로드 dropzone.js 으로 손쉽게 구현하기 파일업로드를 이미 구현되어있는 dropzone 자바스크립트 라이브러리를 사용하여 가장 쉽게 구현하는 방법을 정리해 드릴게요. 추가로 웹사이트에 간단하게 적용시키는 것까지 해보겠습니다. 목차 서버 / 로컬서버 WAMP (Window, Apache, MySQL, PHP) 파일업로드를 구현하기 위해서는 서버가 있어야합니다. 업로드 후 서버단에서 php로 파일 처리를 해야하기 때문이죠. 로컬서버로 대신하셔도 됩니다. ▶ bitnami - wamp 환경을 만들어주는 bitnami 는 업데이트가 종료 되었습니다. Dropzone 라이브러리 CDN 링크로 사용하시려면 cdn 주소는 다음과 같습니다. 링크가 포함된 html 소스는 아래에 다시 나오기 때문에 넘어가셔도 됩니다. ▶ Javascript ▶ CSS 다운로드.. 2024. 3. 20.
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.

티스토리툴바