티스토리

LogicalMaster

검색하기

블로그 홈

LogicalMaster

lomea.tistory.com/m

LogicalMaster 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

jQuery 사용하여 모달 창 만들어보기 - 소스 - 결과화면 공감수 0 댓글수 0 2020. 11. 10.
jQuery - 모달 창 만들고 띄우기 실행 결과 - 소스 이 모달창을 사용하기 위해서는 외부 JS, CSS 파일이 필요합니다. 파일을 첨부합니다. 공감수 0 댓글수 0 2020. 11. 3.
jQuery - Method / .hide() - 선택한 요소를 사라지게 하는 메서드 이 글의 일부는 www.codingfactory.net/10319 jQuery / Method / .hide() - 선택한 요소를 사라지게 하는 메서드 .hide() .hide()는 선택한 요소를 사라지게 합니다. 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. 문법 2 .hide( duration [, easing ] [, complete ] ) duration : 사라지는 데 걸리는 시간입니다. slow, fast, 숫�� www.codingfactory.net 이곳에서 가져왔습니다. .hide() .hide()는 선택한 요소를 사라지게 합니다. - 문법 1 .hide() 선택한 요소를 즉시 사라지게 합니다. - 문법 2 .hide( duration [, easing ] [, comple.. 공감수 0 댓글수 0 2020. 10. 17.
jQuery - 맨 위로 부드럽게 이동하는 링크 만들기 글의 내용 중 일부는 www.codingfactory.net/10676 jQuery / 맨 위로 부드럽게 이동하는 링크 만들기 사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 �� www.codingfactory.net 이곳을 참조했습니다. 사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를.. 공감수 0 댓글수 0 2020. 10. 17.
jQuery - 동적 페이지 이동 구현하기 동적 페이지 새로고침 구현하기 - lomea.tistory.com/80 jQuery - 동적 페이지 새로고침 구현하기 안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 xampp 와 같은 서버 프로그램을 설치합니다. jQuery load 는 CORS 정책에 의거, 파일에서 구동할 수 lomea.tistory.com 안녕하세요. 이번에는 동적 페이지 이동 기능을 구현 해 봅시다. 먼저 xampp 프로그램을 설치해야 합니다. www.apachefriends.org/index.html XAMPP Installers and Downloads for Apache Friends What is XAMPP? XAMPP is the most popular PHP develo.. 공감수 0 댓글수 0 2020. 10. 9.
jQuery - 동적 페이지 새로고침 구현하기 안녕하세요. 이번에는 제이쿼리를 이용한 동적 페이지 새로고침을 구현 해 보도록 하겠습니다. 먼저 xampp 와 같은 서버 프로그램을 설치합니다. jQuery load 는 CORS 정책에 의거, 파일에서 구동할 수 없으며 http://localhost 와 같은 호스팅이 있을경우에만 작동할 수 있습니다. 번역문 보기 : xampp 를 설치합니다. "xampp" 구글링 하면 나오니 참고 바랍니다. - 소스 function pageload(url) { // 페이지 로드 함수 $("#container").load(url); // url 을 입력하면 .load 함수를 이용하여 해당 페이지를 불러온다. } Hello World! 1번 페이지로 이동 2번 페이지로 이동 3번 페이지로 이동 - 결과화면 - 1번페이지 소.. 공감수 0 댓글수 0 2020. 10. 2.
CSS 기초 - Floating, Positioning - Part 6 뷰포트(Viewport)와 관련하여 레이아웃(배치)을 다루기 위한 float, clear 및 positon 속성 그리고 positon속성과 관련된 top, right, bottom, left, z-index 속성에 대해 알아보겠습니다. 대표적인 레이아웃 테크닉인 플로팅(Floating)과 포지셔닝(Positioning)을 알아보고, 모던 레이아웃인 플렉스박스(Flexbox)와 그리드(Grid) 레이아웃에 대해 알아보겠습니다. 먼저 플로팅 레이아웃에 대해 학습해 봅니다. - 일반적인 레이아웃 흐름(Normal Layout Flow) - 소스 html { font-size: 10px; } body { margin: 3rem; font: 1.4rem/1.5 Verdana, Arial, Sans-Serif; }.. 공감수 1 댓글수 0 2020. 9. 25.
CSS 기초 - CSS3 멀티라인 말줄임 처리 및 폴백 - Part 5 - 소스 p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; border:1px solid red; margin:30px; font-size:20px; width:300px; } WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim .. 공감수 0 댓글수 0 2020. 9. 15.
CSS 기초 Part 6 - CSS 3D Image Flip Gallery 이 포스팅에서는 CSS3를 이용한 3D 이미지 플립 갤러리에 대해 알아봅니다. - 소스 * { box-sizing: border-box; } body { font-family: Avenir, Arial, sans-serif; margin: 2%; } div.flip-3d { perspective: 1200px; width: 28%; display: inline-block; margin: 2%; } div.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; } div.flip-3d figure img { width: 100%; height: auto; } di.. 공감수 0 댓글수 0 2020. 9. 15.
CSS 기초 Part 7 - CSS 핵 보다 나은 조건부 주석문 글의 일부는 webclub.tistory.com/379?category=541913 CSS 핵 보다 나은 조건부 주석문(conditional comment) Better conditional classnames for hack-free CSS 조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다. 이것은 첫 번�� webclub.tistory.com 여기서 가져왔습니다. 조건부 주석문이란? 조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다. 이것은 첫 번째 폴 아일랜드 의해 설명되고 HTML5 보일러 플레이트에 의해 좀더.. 공감수 0 댓글수 0 2020. 9. 15.
HTML 이란 무엇인가? 글의 일부는 webclub.tistory.com/608?category=724656 #1 HTML 이란 무엇인가? HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사�� webclub.tistory.com 이곳을 참조했습니다. - HTML 이란 무엇인가? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있.. 공감수 0 댓글수 0 2020. 9. 14.
CSS 애니메이션 기초 (그레디언트, box-shadow) - Part 4 일부 글은 webclub.tistory.com/627?category=690155 #11 CSS Gradients, box-shadow CSS3 의 그레디언트, 박스 그림자에 대한 속성에 대해 알아봅니다. CSS 그레디언트(Gradients) 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linea webclub.tistory.com 이곳을 참조했습니다. - 그레디언트란 그레디언트는 한 색에서 다른 색으로 연결되는 중간 단계를 그라데이션이라고 하며, 종류에는 선형(linear), 원형(radial) 그레디언트가 있습니다. - 선형(Linear) 그레디언트 선형 그레디언트는 그레디언트 라인(gradient line)이라는, 각각의 점이 다른 컬러값을 갖는 하.. 공감수 0 댓글수 0 2020. 9. 13.
CSS 애니메이션 기초 (Animation, Keyframes) - Part 3 글의 일부는 webclub.tistory.com/625 #9 CSS 애니메이션(Animation), 키프레임(keyframes) CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임�� webclub.tistory.com 여기서 가져왔습니다. - animation-timing-function 애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성으로 재생하는 동안 단계별 재생 속도를 설정합니다. 예를 들어 animation-timing-function:ease-in-out; 속성은 시작 부분의 재생 속도를 점점 빠르게 하고, 마지막 부분의 재생 속도를 점점 느리게 .. 공감수 0 댓글수 0 2020. 9. 12.
CSS 애니메이션 기초 (Animation, Keyframes) - Part 2 글의 일부는 webclub.tistory.com/625 #9 CSS 애니메이션(Animation), 키프레임(keyframes) CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임�� webclub.tistory.com 여기서 가져왔습니다. - animation-delay animation-delay 속성은 애니메이션 시작을 지연할 시간을 설정하는 것으로 다음과 같은 값을 사용할 수 있습니다. 0 : 속성을 적용하자마자 애니메이션을 시작한다(기본값). now :속성을 적용하자마자 애니메이션을 시작한다. 0으로 설정한 것과 같다. iOS2.0부터 사용할 수 있다. .. 공감수 0 댓글수 0 2020. 9. 11.
CSS 애니메이션 기초 - 키프레임 (@keyframe) 글의 일부는 webclub.tistory.com/625 여기서 가져왔습니다. CSS3 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성되어 집니다. 그리고 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있습니다. 애니메이션 장점 CSS 애니메이션은 기존에 사용되던 자바스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. .. 공감수 0 댓글수 0 2020. 9. 10.
간단한 웹 서버 구축 해보기. 우분투 20.04 LTS 을 기준으로 작성되었습니다. 간단한 게시글이라 사진은 첨부되지 않았습니다. apt update -y; apt upgrade -y 위 명령어로 먼저 패키지를 업데이트 합니다. apt install nginx php-fpm mariadb-server -y 위 명령어로 NGINX 웹서버, PHP 서버, MySQL 데이터베이스 서버를 설치합니다. 이 다음에는 /var/www/html/ 에 웹 파일을 업로드 하거나 직접 경로를 변경하여 웹 파일을 업로드하여 서비스할 수 있습니다. - 웹 경로 변경해보기 vi /etc/nginx/sites-available/default 위 명령어로 NGINX 웹서버 설정 파일을 수정합니다. root 쪽에 경로를 수정하시면 됩니다. 단 ; (세미콜론) 은 .. 공감수 0 댓글수 0 2020. 9. 9.
PHP 로 게시판을 만들어보자 - Part 1 - 소스 - 결과화면 게시판이 존재하지 않아 잘못된 요청이라고 뜬다. 게시판 생성은 Part 2 에서 계속 진행하도록 하겠다. 공감수 0 댓글수 0 2020. 9. 8.
PHP 으로 게시판을 만들어보자 - Part 2 이전에 게시판을 만들긴 하였으나 게시판 소스만 만들고 실제로 게시판은 만들지 못했다. 따라서, 이번에 게시판까지 완벽하게 만들겠다. 설명 필요없이, 바로 시작. 초보자도 알기쉽게 소스 옆에 주석을 달아놓았다. - 소스 이전과 동일하다. 게시판 설정과 생성 페이지를 만들어 보겠다. 먼저 결과부터 - 결과화면 사실은 이전에 만들었던 사이트에서 가져오는 소스라 100% 완전히 보여줄 순 없습니다. 하지만 보여줄 수 있을때까지 계속 보여주면서 계속하겠습니다. - 소스 (input form, 클라이언트 부분) - 소스 (processing, 서버 처리 부분) 은 사실 아직까지 못 만들었다. 이번에 만들도록 하자. - 소스 5분안에 급하게 만든 소스이다. 각 소스에 주석이 달려있으므로 참고하세요. - 결과화면 아무.. 공감수 0 댓글수 0 2020. 9. 8.
jQuery 이용하여 타이머를 만들어 보자 이번 시간에는 jQuery 를 이용하여 직접 타이머를 만들어 보겠다. jQuery 에서 타이머를 실행하거나 시간 마다 함수를 실행해야 할 때, setInterval 함수를 사용한다. - 소스 script 안에는 자바스크립트 문법이 들어간다. setInterval jQuery 에서 타이머를 지정하는 함수이다. getElementById 또는 $("대상").html("html 내용"); 선택한 div 나 기타 클래스에 입력한 내용을 출력한다. clearInterval 타이머 종료 함수. - 결과화면 공감수 0 댓글수 0 2020. 9. 5.
JavaScript 를 사용하여 알림창을 구현해 보자 우선 alert, confirm, prompt 3개의 버튼을 만들어 보았다. 클릭 시 알림창이 뜨도록 해 놓았다. - 소스 문서 타입을 html 로 지정한다. html 첫 시작 태그. head 안에는 CSS 와 JS 등 여러 파일이나 구성요소가 들어가는 곳이다. body 안에는 내용이 들어간다. 레이아웃 제작시 많이 사용되는 태그이다. - 결과화면 alert confirm prompt 이번에는 alert 알림창을 좀 꾸며보자. - 소스 style 태그 안에는 CSS 문법이 들어간다. script 태그 안에는 JS 문법이 들어간다. button 태그는 주로 버튼을 만들 때 사용된다. onclick="속성" onclick 안에는 해당 요소 클릭 시 호출할 클래스나 JS 를 지정하는 곳이다. class="속성.. 공감수 0 댓글수 0 2020. 9. 5.
시험삼아 커뮤니티 사이트를 제작해 보았다 공부도 하고 이전 실력도 되살려볼 겸 커뮤니티사이트를 하나 만들어 보았다. PHP 로 구동되는 사이트이며, 라이믹스나 XE같은 툴 없이 직접 자체개발한 사이트이다. 지금까지 총 제작시간은 거의 1주일이 다 되어간다. 1주일 안에 벌써 기본 기능은 다 넣었다. 앞으로 근 두 달이면 커뮤니티 전체 기능은 다 들어갈 것이라고 볼 수 있다. 공감수 0 댓글수 0 2020. 9. 4.
초간단) jQuery (제이쿼리) 로 시계를 만들어보자 - 소스 - 결과화면 시계는 레이아웃에 따라 상이할 수 있다. 필자는 사이트 옆 배너에 달아주었다. 공감수 0 댓글수 0 2020. 8. 30.
HTML 강좌 - Part 3 (문구, 이미지, 버튼 삽입) 지난 Part 1, 2 동안 글을 써왔으나 초보자분들이 알아듣지 못하게 써서, Part 3 부터 재 작성을 시작합니다. 이번 강좌에서는 기본적은 문구 삽입, 이미지와 버튼을 삽입해보도록 하겠습니다. 먼저 Html 이란 Hyper Text Markup Language 의 약자이며 홈페이지를 만드는데 있어서 기본적인 프로그램 언어라고 생각하시면 됩니다. 먼저 HTML 구조는 으로 끝나는것을 태그라 칭합니다. 예를들면, 와 같습니다. 먼저 HTML 로 기초적인 문법을 사용하여 페이지를 한번 제작 해 보도록 하겠습니다. - 소스코드 문서 타입을 지정하는 태그입니다. html 기본 태그입니다. HTML 시작할때 처음으로 삽입하는 태그 입니다. head 태그는, 스크립트 혹은 CSS 스타일시트를 지정하거나 기타 웹.. 공감수 0 댓글수 0 2020. 8. 29.
HTML "반응형" 레이아웃 만들기 - Part 2 이전 자료 참고 lomea.tistory.com/58 HTML 레이아웃 만들기 - Part 1 LogicalMaster HTML 레이아웃 만들기 - Part 1 본문 카테고리 없음 HTML 레이아웃 만들기 - Part 1 LogicalMaster 2020. 8. 26. 16:48 Prev 1 2 3 4 5 6 ··· 47 Next lomea.tistory.com 출처 https://www.codingfactory.net/10534 CSS / 반응형 레이아웃 만들기 반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 www.codingfactory.net - 소스 Respons.. 공감수 0 댓글수 0 2020. 8. 27.
CSS 에 대해 알아보자 출처 https://webdir.tistory.com/338 CSS 기초(정의, 링크, 문법, 우선순위) CSS의 입문자들을 위해 유념해야 하는 부분들을 간단히 작성한 글입니다. CSS 정의 CSS는 Cascading Style Sheet의 약자이다. CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 � webdir.tistory.com CSS 정의 CSS는 Cascading Style Sheet의 약자이다. CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌다. CSS 레벨 CSS 명세는 World Wide Web Consortium에서 관리한다. CSS는 세 개의 주 레벨이 정의되어 있고 이 레벨들은 .. 공감수 0 댓글수 0 2020. 8. 26.
HTML 레이아웃 만들기 - Part 1 이번시간에는 HTML, CSS 를 이용하여 레이아웃을 만들어 보겠습니다. HTML 파일로 저장하시고 브라우저로 열면 됩니다. - HTML 하기 전에 먼저 알아야 할 것들 div - div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. style - style 속성은 CSS 처럼 스타일을 적용할 수 있습니다. 예) - 소스 doctype html> CSS #jb-container { width: 1080px; margin: 0px auto; padding: 20px; } #jb-header { ma.. 공감수 0 댓글수 0 2020. 8. 26.
서버 이전 완료 기존 MyIP IDC 호스팅에서 Vultr 호스팅으로 이전을 하였다. 리전은 한국 서울 리전이며 평균 PING 은 최대 4ms까지 나오는 것을 확인 하였다. 총 발생금액은 $10 이며 대한민국 원 기준으로 1만 2천원 정도 하는 것 같다. 속도도 나쁘지 않으며 성능도 괜찮은 것 같다. 공감수 0 댓글수 0 2020. 8. 24.
jQuery 에 대해 알아보자 jQuery 는 js에서 파생된 언어로 PHP 등 서버 단에서 구동되는 웹에서 데이터를 전송/수신 하기 위해 사용되는 언어이다. jQuery 는 외부 라이브러리에 있는 스크립트이다. 따라서 jQuery 스크립트를 로드 하려면 : 이런식으로 선언하여 호출하면 된다. jQuery 를 사용하기 위해서는 저런 식으로 jquery 인코딩(?) 파일을 반드시 인클루드 해야 한다. - 소스 - 결과화면 간단하게 버튼을 하나 만들고, jQuery 를 인클루드 했다. 그럼 이제 본격적으로 비동기 데이터 수신을 해보도록 하겠다. - 소스 - 결과화면 오류가 뜨는것이 당연하다. 아직 대상 파일을 만들지 못하였으므로.. function pageLoad 에 정의되어있는 jQuery/page_load.html 파일을 만들어야 한.. 공감수 0 댓글수 0 2020. 8. 24.
JS 에 대해 알아보자 JS 은 대표적인 HTML 와 같은 웹 언어입니다. 풀네임은 JavaScript (자바스크립트) 라 칭합니다. 이번시간에는 자바스크립트의 기본 문법에 대해 알아보도록 하겠습니다. - 소스 간단하게 버튼을 만들고, 클릭 시 알림창이 뜨도록 해보겠습니다. - 소스 안에 자바스크립트 함수를 선언했습니다. - 결과 화면 정상적으로 실행되었습니다. 이번엔 확인창을 띄어보도록 하겠습니다. - 소스 초보자가 하긴 좀 어렵습니다. 구글링 하면서 해보는것을 추천드립니다. 한개의 함수 안에 if 함수를 이용하여 여러개의 호출명령을 만들었습니다. - 결과화면 alert confirm prompt 각 버튼을 클릭하면 해당 알림창이 뜨도록 했습니다. - 전체 소스 doctype html> Hello World function .. 공감수 0 댓글수 0 2020. 8. 23.
HTML 에 대해 알아보자 HTML 는 가장 많이 쓰이며 보편적인 웹 언어 입니다. 서버 단이 아닌 클라이언트 단에서 구동되는 웹 언어이며 대표적으로 서버 단에서 구동되는 웹 언어는 Python 과 PHP 가 있습니다. 이번시간에는 HTML 문법에 대해 알아보고 응용을 해보도록 하겠습니다. 여기까지가 HTML 기본 문법입니다. 하나씩 뜯어보도록 합시다 html 문서 선언문 입니다. 이 문서는 HTML 이라고 선언 하는 것입니다. 하지만 요즘 대부분의 최신 브라우저 에서는 저 문법이 필요없습니다. (IE7 IE8 등 구버전 브라우저에서 필요) html 의 언어를 선택하는 것입니다. (인코딩) 요즘 대부분의 브라우저에서는 lang="ko" 속성이 필요없습니다. 는 로 열었던 구성요소를 닫는 것입니다. 자바스크립트 선언문 입니다. 안에.. 공감수 0 댓글수 0 2020. 8. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.