소소한 일상 및 업무TIP 다루기

ERROR! The server quit without updating PID file (/usr/local/mysql/data/localhost.pid). (0)	2018.09.17
CentOS6 Apache 2.4 Virtual Host 설정 (0)	2018.07.14
iptime 공유기 포트포워딩 (0)	2018.04.19
CentOS6 SSH 포트 변경 (0)	2017.08.18
phpize 실행시 에러 (0)	2017.06.08

jQuery each 메소드와 map 메소드 차이점

Web 프로그램/js, jQuery 2018. 4. 29. 21:42

728x90

each 메소드와 map 메소드의 차이점을 알아보자.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var intArray = new Array(1, 2, 3, 4, 5);
$.each(intArray, function(index, element) {
if (element === 3) {
return false;
}
console.log(element);
});

$.map(intArray, function(element, index) {
if (element === 3) {
return false;
}
console.log(element);
});
</script>
</head>
<body>
</body>
</html>

위 예제를 실행해보면 결과에 차이가 난다.

$.map([], callback(elementOfArray, indexInArray))
$.each([], callback(indexInArray, element))

callback function 의 index, element(item) 위치가 서로 반대다.

each 메소드는 index 가 먼저고, 그 다음에 element 가 온다.

each 메소드

- jQuery 객체/배열의 수 만큼 반복하고, 선택된 요소들에 함수를 실행한다.

- 배열과 length 속성을 갖는 배열과 비슷한 객체들을 index를 기준으로 반복할 수 있다.

- jQuery 유틸리티 메소드 : .each(object, function(index, element) ) { 실행 함수 }

- jQuery 일반 메소드 : $(selector).each(function(index, item){ 실행함수 })

- jQuery 객체들을 위한 반복 로직을 처리하기 이해 만들어졌다.

- each 메소드에서 this 는 current element 를 가리킨다.

each 메소드는 원래의 배열을 반환(returns the original array) 하지만,

map 메소드는 제공된 배열 데이터를 변환시켜 다시 새로운 배열 객체를 반환(returns a new array)한다.

map 메소드를 과다 사용하면 많은 메모리를 낭비할 수 있다.

$(selector).each(...) 는 selector 아이템으로 반복 처리한다.
$.map() 메소드는 selector 를 사용하지 않는다.

실행결과는

each 메소드는 조건이 false를 만나면 loop 를 break 하여 결과는 1, 2 만 나온다.

map 메소드는 조건만 skip 하여 결과는 1, 2, 4, 5 가 나온다.

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

[jQuery] 동적 Input Add Remove (input 태그 name 값 다르게) (0)	2018.05.14
[jQuery] 동적 Input Add Remove (input 태그 name 값 동일) (0)	2018.05.13
jQuery map 함수 (0)	2018.04.29
Javascript 배열 정리 (0)	2018.04.29
jQuery - input 배열 수 세기 (0)	2018.04.20

Link2Me

,

jQuery map 함수

Web 프로그램/js, jQuery 2018. 4. 29. 18:42

728x90

jQuery map()함수는 배열 데이터를 변환시켜 새로운 배열 객체를 만든다.

jQuery 1.6 부터 Object 도 지원한다.

$.map() 함수를 사용하기 위해서는 반드시 완전한 배열로 바꿔줘야 한다.

jQuery.map(array, callback(elementOfArray, indexInArray) )
- array : 변환할 배열
- callback(elementOfArray, indexInArray) 모든 요소에 대해 실행될 함수.
첫번째 인자는 배열 요소(item),
두번째 인자는 배열 인덱스

jQuery.map(arrayOrObject, callback(value, indexOrKey))
- arrayOrObject 변환할 배열 또는 오브젝트
- callback( value, indexOrKey ) 모든 요소에 대해 실행될 함수.
첫번째 인자는 value,
두번째 인자는 배열 또는 오브젝트의 index 또는 key

아래 코드는 위와 같은 결과를 얻어내는 jQeury 함수와 스타일 시트다.

모양을 좀 더 미려하게 보여주는 CSS 코드라고 보면 된다.

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

[jQuery] 동적 Input Add Remove (input 태그 name 값 동일) (0)	2018.05.13
jQuery each 메소드와 map 메소드 차이점 (0)	2018.04.29
Javascript 배열 정리 (0)	2018.04.29
jQuery - input 배열 수 세기 (0)	2018.04.20
jQuery 체크박스 선택 여부 확인 (0)	2018.04.15

Link2Me

,

Javascript 배열 정리

Web 프로그램/js, jQuery 2018. 4. 29. 11:00

728x90

ㅇ 배열
   - 배열은 여러 개의 변수를 한곳에 저장할 수 있는 자료형이다.
   - 자바스크립트에서는 문자열과 숫자, 불, 함수, 객체와 정의되지 않은 자료형까지 총 6가지의 자료형이 존재
   - 배열은 이중 객체의 일종으로, 대괄호([])를 이용해서 생성
   - 배열 안에 입력된 값을 배열 요소라고 부른다.
   - alert(array[1]); // 배열 기호 안에 들어간 숫자를 인덱스(Index)라고 부른다.
   - for (var i in array) 은 for (var i = 0; i < array.length; i++) 와 같은 의미

ㅇ 배열 선언 방법

- 배열 리터럴 : 대괄호([]) 내에 데이터를 나열하여 배열을 선언하고, 데이터를 할당할 수 있다.

var arr = [데이터1, 데이터2, 데이터3, ...., 데이터 n];

- 배열 객체 :

var arr = new Array(); // 배열 개수 미지정 객체배열 생성

arr[0] = 2; arr[1] = "one"; arr[2] = 5;

var arr = new Array(3); // 배열 개수 지정

arr[0] = 2; arr[1] = "one"; arr[2] = 5;

var arr = new Array(1, 2, 3, 4, 5); // 배열을 선언함과 동시에 데이터를 배열에 할당

- 다차원 배열 선언 : 자바스크립트는 기본적으로 다차원 배열을 지원하지 않는다.

배열안에 배열을 넣는 방식으로 사용은 가능하다.

var arr = new Array();

var arr[0] = new Array();

var arr[0][0] = new Array();

ㅇ 배열 객체의 메소드 및 속성

join(연결문자)	배열에 저장된 모든 원소를 문자열로 변환한 후 연결하여 출력한다. var arr = new Array(1, 2, 3, 4, 5); arr.join("-"); 결과 : 1-2-3-4-5
reverse()	배열 요소의 순서를 반대로 정렬한다. var arr = new Array(1, 2, 3, 4, 5); arr.reverse(); 결과 : 5,4,3,2,1
sort()	배열 객체 데이터를 오름차순으로 정렬한다.
push()	배열의 마지막 위치에 데이터를 추가한다. var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); arr.push("레몬"); document.getElementById("demo").innerHTML = arr;
pop()	배열의 마지막 위치의 데이터를 삭제한다.
shift()	배열의 첫번째 위치의 데이터를 삭제한다. var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); document.write(arr.shift()+"<br />"); document.write(arr+"<br />"); 출력 결과 : 2,3,4,5,6,7,8,9,10
unshift()	배열의 첫번째 위치에 데이터를 추가한다. var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); document.write(arr.unshift("소림사")+"<br />"); document.write(arr+"<br />"); 출력 결과 : 소림사,1,2,3,4,5,6,7,8,9,10
length	배열에 저장된 총 데이터의 개수를 반환한다.
slice	배열 원소 중 부분적인 범위 내의 원소만 선택하여 배열을 만든다. var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); var slice = arr.slice(3,7); // 인덱스는 0부터 시작하므로 4번째 인덱스부터 // slice(start, end); 배열의 start index부터 end 바로 전의 index까지를 선택 document.write(slice);
splice	배열의 지정된 데이터를 삭제하고, 그 구간에 새 데이터를 추가하거나 삭제 var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); document.write(arr.splice(1,3)); // 두번째 인덱스부터 3개를 삭제 // 즉 2, 3, 4 를 삭제한다. document.write(arr+"<br />"); // 삭제되고 남은 배열 데이터만 출력한다.
splice	var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); document.write(arr.splice(1,3,"마마무","동방신기","소녀시대")); // 두번째 인덱스부터 3개를 삭제하고, // 마마무, 동방신기, 소녀시대를 삭제된 곳에 추가한다. document.write(arr+"<br />"); 출력 결과 : 1,마마무,동방신기,소녀시대,5,6,7,8,9,10
filter	배열의 데이터 중에 조건이 참인 데이터만 반환하여 새로운 배열을 생성한다. var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); var fdata = arr.filter(function(val){ return val >= 5; }); document.write(fdata + "<br />");

ㅇ 배열 활용

최대값 구하기

배열의 최대값 구하기

var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

var min = Math.max.apply(null, arr);

최소값 구하기

배열의 최소값 구하기
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
var min = Math.min.apply(null, arr);

이차원 배열

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

jQuery each 메소드와 map 메소드 차이점 (0)	2018.04.29
jQuery map 함수 (0)	2018.04.29
jQuery - input 배열 수 세기 (0)	2018.04.20
jQuery 체크박스 선택 여부 확인 (0)	2018.04.15
Popup Modal with jQuery (0)	2018.04.12

Link2Me

,

DIV 높이 자동 인식

Web 프로그램/메뉴 만들기 2018. 4. 28. 11:35

728x90

메뉴를 가로 정렬을 하고 div 배경색을 지정했는데 안먹힌다.

검색을 해보니 height:auto;min-height: 50px;overflow: hidden; 속성을 지정해주면 된다고 나온다.

box1:after 가상 선택자를 사용했더니 컨텐츠 내용에 따라 높이가 자동인식된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
@charset "UTF-8";
body {font-family: '맑은 고딕', 'Apple SD Gothic Neo', sans-serif}

.menu {list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu li a {display:block;
    padding:10px;
    color:#000000;
    font-size:16px;
    text-decoration:none;}
.menu li a:hover{background-color:#75dbe7;}
.menu:after{content: "";
    display:block;
    celar:both;}
.menu li {float:left;
    width:auto;}

.box1 {background-color:#f1f1f1;}
.box1:after {content: "";
    display: block;
    clear: both;}
</style>
</head>
<body>
<div class="box1">
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#map">Map</a></li>
</ul>
</div>

</body>
</html>

저작자표시 비영리

'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글

[bootstrap] Toggle Sidebar Navigation (0)	2018.11.27
[Javascript] Sidebar Navigation (0)	2018.11.27
메뉴 가로 정렬과 세로정렬 (0)	2018.04.24
다차원 배열 단순화 및 TreeView SQL (1)	2017.12.28
[bootstrap] PHP/MySQL 과 연동한 부트스트랩 메뉴 만들기 (2)	2017.02.15

Link2Me

,

PHP to JSP

Web 프로그램/PHP 응용 및 활용 2018. 4. 28. 08:24

728x90

JSP를 사용해본 적은 없지만, 네이버지식인에 PHP 를 JSP로 변환하는 것에 대한 질문이 있어서 나중에 사용하게 될 수도 있겠다 싶어 구글링 검색한 것과 알고 있는 지식을 적어둔다.

PHP	JSP
<php	<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %> <%@ page import = "java.sql.*" %> <%
?>	%>
if($_SERVER['REQUEST_METHOD'] == 'POST')	String requestMethod = request.getMethod(); if (requestMethod.equals("POST"))
$temperature = $_POST['temp'];	String temperature = request.getParameter("temp");

PHP 코드

<?php
// dbconnect.php 파일 내용
$db['host'] = 'localhost';
$db['name'] = 'testdb';
$db['user'] = 'root';
$db['pass'] = '패스워드';
$db['port'] = '3306';

$db = isConnectDb($db);

function isConnectDb($db){
   $conn = mysqli_connect($db['host'],$db['user'],$db['pass'],$db['name'],$db['port']);
   mysqli_set_charset($conn, "utf8"); // DB설정이 잘못되어 euc-kr 로 되어 있으면 문제가 됨
   if (mysqli_connect_errno()) {
       echo "Failed to connect to MySQL: " . mysqli_connect_error();
       exit;
   } else {
       return $conn;
   }
}
?>

<?php
// 파라미터로 넘어온 변수
$temperature = $_POST['temp'];
$date = $_POST['date'];
$time = $_POST['time'];

if($_SERVER['REQUEST_METHOD'] == 'POST'){ // 본 파일 직접 실행 방지
   require_once 'dbconnect.php'; // DB 연결
   // 테이블에서 자동으로 증가되는 uid 값이 있어야 할 거 같아서 insert 필요한 칼럼만 발췌한다.
   $sql = "insert into data(date,time,temperature) values ('$date','$time','$temperature')";
   //echo "$sql"; // insert sql 내용을 화면으로 출력한다.
   mysqli_query($db,$sql);
}
?>

JSP 코드

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import = "java.sql.*" %> 

<%
request.setCharacterEncoding("UTF-8");// 파라미터로 넘어온 문자를 한글이 깨지지 않도록 UTF-8로 받음
String temperature = request.getParameter("temp");//temp라는 파라미터를 읽어온다.
String date = request.getParameter("date");
String time = request.getParameter("time");
String requestMethod = request.getMethod(); // POST전송인지 GET 전송인지 판별한다.

// URL 인증우회로 GET 방식일 경우 취약 하므로 jsp 에서 POST 방식으로 submit() 해 주는 것이 좋다
if (requestMethod.equals("POST")) { // POST 전송시 코드 내용
   Connection conn = null; // null 로 초기화
   PreparedStatement pstmt = null;//JDBC를 사용하여 테이블에 쿼리를 실행하기 위해서 PreparedStatement 객체를 사용
   try{
       String url = "jdbc:mysql://localhost:3306/testdb"; // 사용 DB명을 포함한 URL 기술
       String id = "root"; // 사용자 계정
       String pw = "패스워드"; // 사용자 계정의 패스워드
       String driver = "com.mysql.jdbc.Driver";
       Class.forName(driver); // MySQL DB와 연동하기 위해 DriverManager에 등록
       conn=DriverManager.getConnection(url,id,pw);// DB와 연동하기 위해 DriverManager에 등록

       String sql = "insert into data values(?,?,?)";//sql 쿼리
       pstmt = conn.prepareStatement(sql); // prepareStatement에서 해당 sql을 미리 컴파일
       pstmt.setString(1,temperature);
       pstmt.setString(2,date);
       pstmt.setString(3,time);
       // pstmt.setString(3,new Timestamp(System.currentTimeMillis())); // 현재 날짜와 시간
       pstmt.executeUpdate(); // sql문 실행
       out.println("data 테이블에 새로운 레코드를 추가했습니다."); // 성공시 메시지 출력
   }catch(Exception e){
       e.printStackTrace();
       out.println("data 테이블에 새로운 레코드 추가에 실패했습니다.");
   }finally{
       if(pstmt != null) try{pstmt.close();}catch(SQLException sqle){} // PreparedStatement 객체 해제
       if(conn != null) try{conn.close();}catch(SQLException sqle){}   // Connection 해제
   }
} else {
   out.println("올바른 요청이 아닙니다.");
}
%>

저작자표시 비영리

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

접속단말 및 IP주소 (0)	2018.06.11
PHP 글자수 줄임 표시 (0)	2018.06.09
PHP Form 다중 체크박스 값 전달 및 POST (0)	2018.04.02
PHP 배열 합집합, 교집합, 차집합, 대칭차집합 (0)	2018.04.01
PHP 배열함수 정렬 - sort, rsort, ksort, krsort, asort, arsort (0)	2018.03.31

Link2Me

,

메뉴 가로 정렬과 세로정렬

Web 프로그램/메뉴 만들기 2018. 4. 24. 22:23

728x90

메뉴 가로 정렬과 세로 정렬의 차이점을 살펴보자.

메뉴(세로 정렬)

메뉴(가로 정렬)

li 태그도 기본적으로 세로 정렬을 한다.

가로 정렬을 하도록 하려면 float:left; 로 하고 width 속성을 auto로 지정한다.

float 는 블록 요소를 좌우 정렬시킬 때 사용한다.

float 속성 설명은 http://link2me.tistory.com/1452 참조

text-decoration: none; /* Remove underline from links */

https://www.w3schools.com/howto/howto_css_vertical_menu.asp 에 Vertical Menu 에 대해 직접 실행해 볼 수 있다.

list-style: none; /* 항목 표시가 되지 않음 */

disc : 기본값, 검은 원
circle : 원
square 사각형
decimal : 숫자(1로 시작하는 십진수)
lower-alpha : 알파벳 소문자 (a, b, c, d, e,..)
lower-roman : 로마자 소문자 (i, ii, iii, iv, v,..)
upper-alpha : 알파벳 대문자 (A, B, C, D, E...)
upper-roman : 로마자 대문자 (I, II, III, IV, V,...)
none : 항목 표시가 되지 않음
initial : 기본값으로 초기화

display:block; /* 요소를 block 요소처럼 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다 */

display:inline; /* 기본값, 요소 앞 뒤로 줄바꿈되지 않는다 */

display:none; /* 박스가 생성되지 않는다. 공간을 차지 하지 않는다 */

display:inline-block; /* 요소는 inline 인데 내부는 block 처럼 표시함. */

overflow : auto; /* 내용이 잘릴때만 스크롤바가 보인다 */

overflow : visible; /* 기본값으로 내용이 더 길어도 그대로 보인다 */

overflow : hidden; /* 내용이 넘치면 자른다. 자른 부분은 보이지 않는다 */

overflow : scroll; /* 내용이 넘치지 않아도 항상 스크롤바가 보인다 */

clear : float 를 해제할 때 사용한다.

clear : none /* 기본값으로 clear 를 설정하지 않는 것과 같다 */

clear : left /* float:left 값을 취소한다. */

clear : right /* float:right 값을 취소한다. */

clear : both /* 왼쪽, 오른쪽을 취소한다 */

저작자표시 비영리

'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글

[Javascript] Sidebar Navigation (0)	2018.11.27
DIV 높이 자동 인식 (0)	2018.04.28
다차원 배열 단순화 및 TreeView SQL (1)	2017.12.28
[bootstrap] PHP/MySQL 과 연동한 부트스트랩 메뉴 만들기 (2)	2017.02.15
[bootstrap] Multi level dropdown menu (0)	2017.02.13

Link2Me

,

Layout 만들기 예제 -1

Web 프로그램/Layout 2018. 4. 24. 20:28

728x90

Layout 예제를 만들어가면서 Layout 개념을 좀 더 확실하게 익히려고 한다.

네이버지식인에 답변된 내용을 토대로 좀 수정을 하고 내용을 보강하면서 연습중이다.

bootstrap 관련 css 와 js scrpit 를 연결했더니 좀 이상하게 나와서 관련 사항은 삭제를 했다.

div 태그는 세로 정렬이 기본이다.

가로 정렬을 하기 위해서는 container div 안에 content div, aside div 를 float 로 위치를 설정한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body {background:#FFFFF;}
p {
   font-size:1.5em;
   color:#666;
   text-align:center;
   line-height:80px;
}

.wrap {
   /* 전체를 wrap으로 감싸 브라우저의 사이즈에 상관없이 가운데 정렬되게 만든다. */
   width:800px;
   margin:0 auto;
}

.header {
   width:100%;
   height:60px;
   background:#F8ECE0;
}

.container {}

.container div {
   height:160px;
}

.container:after {
    display: block;
    clear:both;
}

.content {
   float:left;
   width:80%;
   background:#D8D8D8;
}

.aside {
   float:left;
   width:20%;
   background:#A9E2F3;
}

.footer {
   clear:both; /* float 영향을 받지 않겠다는 의미 */
   width:100%;
   height:60px;
   background:#81DAF5;
}
</style>
</head>
<body>
<div class="wrap">
    <div class="header">
        <p>Header</p>
    </div>
    <div class="container">
        <div class="content">
            <p>content</p>
        </div>
        <div class="aside">
            <p>aside</p>
        </div>
    </div>
    <div class="footer">
        <p>Footer</p>
    </div>
</div>

</body>
</html>

저작자표시 비영리

'Web 프로그램 > Layout' 카테고리의 다른 글

MDBootstrap Layout 알아둘 사항 (0)	2019.01.22
CSS 반응형 레이아웃 만들기 (1)	2018.06.02
div 태그를 이용하여 레이아웃 만들기 (0)	2018.04.24
bxslider 사용 예제 (폴더내 파일 자동 인식) (0)	2017.04.28
[PHP] 현재 디렉토리 경로 설정 (자동인식) (0)	2017.02.20

Link2Me

,

div 태그를 이용하여 레이아웃 만들기

Web 프로그램/Layout 2018. 4. 24. 15:43

728x90

<div></div> 태그는 Division의 약자로, 레이아웃을 나누는데 주로 쓰인다.
div 태그는 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓴다.
div와 span 요소는 보통 class 속성을 같이 사용한다.

레이아웃(layout)하는 순서
1. 실제 설계도를 그리는 것처럼 메뉴바, 사이드바, 본문, 하단 등의 배치를 그려본다.
2. 그리고 남들이 직관적으로 이해할 수 있는 이름을 붙인다.
   <div id="navbar"></div>
   <div id="sidemenu"></div>
   <div id="contents"></div>
3. 스타일 주기
   - width : 너비 속성(pixel, % 가능)
   - height : 높이 속성(pixel, % 가능)
   - float : 좌우 정렬 속성(left or right)
   - background-color : 배경색 속성

- line-height : 1.2 /* 줄 간격(텍스트를 싸고 있는 라인의 기본 높이를 설정) */

. 숫자 : 현재 글꼴에서 몇 배 크기로 할 지 지정

. % : 현재 글꼴 크기의 백분율로 높이를 지정

. 길이 : em, px, pt, cm 등의 고정된 폭

폰트 사이즈가 12px이고 line-height가 20px 이라면

그 나머지 8px의 반인 4px씩을 그 위와 아래에 더하게 된다.

한글의 경우 line-height를 100% 이상으로 지정하여 줄사이의 간격을 좀 띄우는 편이 가독성에 좋다.

     참조 : http://www.tiptech.net/lecture/html/css/line-height.html
4. 여백 주기
   - margin : 객체와 객체 사이의 공간
     margin-top (상단 여백)
     margin-right (오른쪽 여백)
     margin-bottom (아래 여백)
     margin-left (왼쪽 여백)
     table {
      margin: 5px 7px 3px 0px; (위, 오른쪽, 아래, 왼쪽 순임)
     }
5. border : 선 굵기
   - border-width : border의 width 값을 지정
     p {border-top: thick solid #ff0000;} // CSS 문법
     object.style.border="3px solid blue" // 자바스크립트 문법

   - border-style : border의 style 값을 지정 (4방향의 테두리에 적용될 선의 스타일을 지정)
     . none : border 스타일을 지정하지 않는다.
     . hidden : none 속성값과 같다.
     . dotted, dashed, solid, double, groove, ridge, inset, outset
     .inherit : 부모 요소로부터 값을 상속 받는다
     object.style.borderStyle="dotted double" // 자바스크립트 문법

   - border-color : border의 color 값을 지정 (4방향의 테두리에 적용될 색상을 지정)
     h4 {border-color: red;} /* all four borders are red */

6. padding : 내용과 border 사이의 공간

7. float 속성

   - float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성이다.
   - float 속성은 left, right, none 만 있다.
   - float 속성의 default 는 none(띄우지 않음)이다.
   - inline 으로 float 속성 설정
     <img src="imags.png" style="float:left;" >
   - css 이용한 float 속성 설정
     <style type="text/css">
     img { float:left; }
     </style>

   - float 속성 값을 right 로 지정하면 첫번째 박스부터 순서대로 오른쪽으로 붙게 된다.
   - 이미지에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 된다.
     이미지 좌우에 글자가 오는 걸 방지하려면 clear 속성을 설정한다.
     이미지가 float:left 상태인데 clear:left를 해 주면 글자가 글자가 이미지 아래로 내려간다.

- clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성이다.

8. div 속성 배우기

- 아무런 설정을 하지 않은 div는 세로 정렬을 한다.

- 가로 정렬을 하려면 div 태그로 감싸고 float, width 속성값을 추가한다.

    <div class="boxA">
    <div class="box1">
         BOX1
    </div>
    <div class="box2">
        BOX2
    </div>
    </div>

       <style>
            .boxA {
                border: solid 1px #00a0e9;
                background-color: #a0e0fe;
                color: #00a0e9
            }
            .boxA:after {
                display: block;
                clear: both; // float 의 영향을 받지 않겠다는 의미
            }

            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:50%; }
            .box2 { float: left; width:50%; }
        </style>

- 가로로 정렬한 div의 너비가 100%를 넘으면 옆으로 빠져나온 div가 아래로 내려가서 출력된다.

- box1 div width를 고정(250px)하고 싶다면 ... (왼쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both
            }
            /* BOX1와 BOX2를 가로 정렬 */
            .box1 { float: left; width:250px; }
            .box2 { float: none; width:auto;margin-left: 250px; }

- box2 div width 를 고정(250px)하고 싶다면.... (오른쪽 div 고정)

            .boxA:after {
                content: "";
                display: block;
                clear: both;
            }

            .box1 {
                float: left;
                width: 100%;
                margin-right: -250px;
                padding-right: 250px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box
            }

            .box2 {
                float: left;
                width: 250px
            }

- 반응형 웹 다지인 : 브라우저 화면의 크기에 따라 가로정렬, 세로정렬 상태를 변경

. 반응형 웹 : Device 가 모바일, 테블릿, PC에 구분없이 이용 가능한 템플릿을 이용하여 개발한다.

. https://startbootstrap.com/ 에서 템플릿을 다운로드 한다.

. 템플릿을 수정하여 화면의 변화를 확인하면서 class 의 내용을 확인한다.

. 직접 작성하는 반응형 웹 디자인은 "모던 웹사이트 디자인의 정석" 책과

홈페이지에서 소스코드를 받아서 직접 테스트하면서 해보면 도움된다.

9. 색상 선택

- https://html-color-codes.info/Korean/ 에서 색상을 선택하면 관련 코드가 나온다.

- 기본적인 활용 코드는 http://www.color-hex.com/ 를 참조하면 좋다.

- https://www.w3schools.com/colors/colors_names.asp 에서 다양한 색상을 참조할 수 있다.

회색	#888888	청록색	#7cbac1
회색	#eeeeee	밝은 하늘색	#94ecf6
흰색	#ffffff	하늘색	#75dbe7
검정색	#000000

10. 스마트폰 레이아웃 주의사항

- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트를 적용할 수 없을 수 있다.

출처: http://link2me.tistory.com/567?category=831192 [소소한 일상 및 업무TIP 다루기]

- overflow 속성을 사용해서 스크롤을 넣을 수 없다.
- 스마트폰은 hover가 없다. 그래서 hover, active 등 상태 선택자를 사용할 때 주의해야 한다.
- 동위 선택자에 제한이 있다.
- 선택자에 ~를 지원하지 않는 브라우저가 있다.
- iphone에서는 label 태그에 onclick="" 속성을 부여해야 정상 동작한다.
- 그래디언트 적용이 불가할 수 있다.

저작자표시 비영리

'Web 프로그램 > Layout' 카테고리의 다른 글

CSS 반응형 레이아웃 만들기 (1)	2018.06.02
Layout 만들기 예제 -1 (0)	2018.04.24
bxslider 사용 예제 (폴더내 파일 자동 인식) (0)	2017.04.28
[PHP] 현재 디렉토리 경로 설정 (자동인식) (0)	2017.02.20
모바일, PC 구분하는 코드 (0)	2017.02.12

Link2Me

,

오픈소스SW 라이선스 LGPL 바로알기

자료 구하기/정보 2018. 4. 24. 14:16

728x90

오늘 페이스북 타임라인을 읽다보니 '리눅스 HWP 공개 라이브러리 개발' 건에 대한 라이선스 이야기를 하는 글들이 보이네요. 저도 예전에 FCKEditor를 적용한 제품때문에 LGPL의 정체가 뭔지 몰라서 어려웠던 기억이 납니다. 글타래를 읽다보니 LGPL에 대해서 애매한 이야기들이 좀 있는것 같아서 정리해봅니다.

1. 공통적으로 지킬 것

일단 OSI(Open Source Initiative)에 등록되어 있는 오픈소스SW 라이선스는 GPL이건 LGPL 이건 상관없이 공통적으로 지켜야 하는 내용이 두가지 있습니다.

가. 저작권 관련 문구 유지

나. 제품명 중복 방지

- 아파치, 리눅스 같은 프로젝트명을 선택하면 안된다는 의미입니다.

두 가지 모두 무엇인가를 직접 만들어본 사람이라면 상식적인 수준에서 지켜야 하는 것이죠.

2. LGPL 라이선스를 가져다 쓰는데 소스코드를 공개해야만 하나요?

LGPL은 GPL의 조건이 너무 엄격해서 사람들이 쓰는 것을 꺼려할까봐 이를 감안해서 만든 라이선스 입니다. 따라서 GPL과는 다르게 LGPL 라이브러리에 응용프로그램을 정적 혹은 동적으로 링크시킨다고 해도 응용프로그램의 소스코드를 공개할 필요가 없습니다. LGPL 전문에 있는 ”라이브러리의 복제본을 무상이나 유상으로 배포할 경우에, 당신은 우리가 당신에게 부여한 모든 권리를 수취인에게도 그대로 부여해야 한다.“라는 내용으로 요구 조건만 준수한다면 상업적인 유상 배포도 허용하고 있습니다. 따라서 자기가 만든 소스코드의 공개없이 가격을 받는 상용제품으로 판매하셔도 됩니다.

다만, LGPL 라이브러리의 소스코드를 수정하였을 때에는 2차적 파생 저작물에 해당하므로 라이브러리의 소스코드를 제공해야 합니다.

3. LGPL을 가져와서 개발하고 GPL 라이선스로 변경해도 될까요?

대답은 변경해도 됩니다. 아래 내용을 보시면 "양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다"라고 표기되어 있습니다. 하지만 GPL 소스코드를 가져와서 임의로 LGPL로 변경하는 것은 안됩니다.

http://olis.or.kr/ossw/license/license/detail.do?lid=1005&mapcode=&currentPage=

제3조.
당신은 양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다. 이를 가능케 하기 위해서는 본 라이선스를 언급하는 모든 사항들을 GNU 일반 공중 라이선스 버전2의 사항들로 대체시켜야 한다. (만약 GNU 일반 공중 라이선스 버전 2 이후에 신규 버전이 공표되었을 경우에는 원한다면 신규 버전을 사용할 수 있다.) 그 외에 다른 사항들은 변경할 수 없다.
복제물에 대해 이러한 수정이 이루어졌을 경우에는 라이선스를 다시 변경하는 것은 불가능하며, 따라서 해당 복제물을 기반으로 만들어진 모든 저작물과 복제물에는 GNU 일반 공중 라이선스가 적용되어야 한다.
이러한 선택 사항은 라이브러리의 코드 일부분을 라이브러리가 아닌 프로그램에 포함시키고자 할 경우에 유용하다.

하지만 LGPL을 제외한 나머지 라이선스는 원 저작자가 아닌 사람이 임의로 라이선스를 변경할 수 없습니다. LGPL은 명확하게 전문에 표기하였기 때문에 문제가 없지만 다른 오픈소스SW 라이선스는 이를 허용하지 않습니다.

4. 더 궁금하시면

다른 오픈소스SW 라이선스에 대하여 궁금하시다면 아래의 링크를 이용하시면 됩니다.

- 한국저작권위원회 라이선스 설명 : http://olis.or.kr/ossw/license/license/list.do

- 공개SW역량플라자 라이선스 설명 : http://www.oss.kr/45607

- 공개SW 라이선스 가이드 다운로드 http://www.oss.kr/?mid=oss_license&page=3&document_srl=70139

- 오픈소스 라이선스 해설 http://www.oss.kr/oss_license/92922

그림출처 : http://terokarvinen.com/freehelia_licenses_and_the_definition_of_free_software.html

출처: http://hckim.tistory.com/422 [오픈비 : 삽질은없다]

오늘 페이스북 타임라인을 읽다보니 '리눅스 HWP 공개 라이브러리 개발' 건에 대한 라이선스 이야기를 하는 글들이 보이네요. 저도 예전에 FCKEditor를 적용한 제품때문에 LGPL의 정체가 뭔지 몰라서 어려웠던 기억이 납니다. 글타래를 읽다보니 LGPL에 대해서 애매한 이야기들이 좀 있는것 같아서 정리해봅니다.

1. 공통적으로 지킬 것

일단 OSI(Open Source Initiative)에 등록되어 있는 오픈소스SW 라이선스는 GPL이건 LGPL 이건 상관없이 공통적으로 지켜야 하는 내용이 두가지 있습니다.

가. 저작권 관련 문구 유지

나. 제품명 중복 방지

- 아파치, 리눅스 같은 프로젝트명을 선택하면 안된다는 의미입니다.

두 가지 모두 무엇인가를 직접 만들어본 사람이라면 상식적인 수준에서 지켜야 하는 것이죠.

2. LGPL 라이선스를 가져다 쓰는데 소스코드를 공개해야만 하나요?

LGPL은 GPL의 조건이 너무 엄격해서 사람들이 쓰는 것을 꺼려할까봐 이를 감안해서 만든 라이선스 입니다. 따라서 GPL과는 다르게 LGPL 라이브러리에 응용프로그램을 정적 혹은 동적으로 링크시킨다고 해도 응용프로그램의 소스코드를 공개할 필요가 없습니다. LGPL 전문에 있는 ”라이브러리의 복제본을 무상이나 유상으로 배포할 경우에, 당신은 우리가 당신에게 부여한 모든 권리를 수취인에게도 그대로 부여해야 한다.“라는 내용으로 요구 조건만 준수한다면 상업적인 유상 배포도 허용하고 있습니다. 따라서 자기가 만든 소스코드의 공개없이 가격을 받는 상용제품으로 판매하셔도 됩니다.

다만, LGPL 라이브러리의 소스코드를 수정하였을 때에는 2차적 파생 저작물에 해당하므로 라이브러리의 소스코드를 제공해야 합니다.

3. LGPL을 가져와서 개발하고 GPL 라이선스로 변경해도 될까요?

대답은 변경해도 됩니다. 아래 내용을 보시면 "양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다"라고 표기되어 있습니다. 하지만 GPL 소스코드를 가져와서 임의로 LGPL로 변경하는 것은 안됩니다.

http://olis.or.kr/ossw/license/license/detail.do?lid=1005&mapcode=&currentPage=

제3조.
당신은 양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다. 이를 가능케 하기 위해서는 본 라이선스를 언급하는 모든 사항들을 GNU 일반 공중 라이선스 버전2의 사항들로 대체시켜야 한다. (만약 GNU 일반 공중 라이선스 버전 2 이후에 신규 버전이 공표되었을 경우에는 원한다면 신규 버전을 사용할 수 있다.) 그 외에 다른 사항들은 변경할 수 없다.
복제물에 대해 이러한 수정이 이루어졌을 경우에는 라이선스를 다시 변경하는 것은 불가능하며, 따라서 해당 복제물을 기반으로 만들어진 모든 저작물과 복제물에는 GNU 일반 공중 라이선스가 적용되어야 한다.
이러한 선택 사항은 라이브러리의 코드 일부분을 라이브러리가 아닌 프로그램에 포함시키고자 할 경우에 유용하다.

하지만 LGPL을 제외한 나머지 라이선스는 원 저작자가 아닌 사람이 임의로 라이선스를 변경할 수 없습니다. LGPL은 명확하게 전문에 표기하였기 때문에 문제가 없지만 다른 오픈소스SW 라이선스는 이를 허용하지 않습니다.

4. 더 궁금하시면

다른 오픈소스SW 라이선스에 대하여 궁금하시다면 아래의 링크를 이용하시면 됩니다.

- 한국저작권위원회 라이선스 설명 : http://olis.or.kr/ossw/license/license/list.do

- 공개SW역량플라자 라이선스 설명 : http://www.oss.kr/45607

- 공개SW 라이선스 가이드 다운로드 http://www.oss.kr/?mid=oss_license&page=3&document_srl=70139

- 오픈소스 라이선스 해설 http://www.oss.kr/oss_license/92922

그림출처 : http://terokarvinen.com/freehelia_licenses_and_the_definition_of_free_software.html

출처: http://hckim.tistory.com/422 [오픈비 : 삽질은없다]

오늘 페이스북 타임라인을 읽다보니 '리눅스 HWP 공개 라이브러리 개발' 건에 대한 라이선스 이야기를 하는 글들이 보이네요. 저도 예전에 FCKEditor를 적용한 제품때문에 LGPL의 정체가 뭔지 몰라서 어려웠던 기억이 납니다. 글타래를 읽다보니 LGPL에 대해서 애매한 이야기들이 좀 있는것 같아서 정리해봅니다.

1. 공통적으로 지킬 것

일단 OSI(Open Source Initiative)에 등록되어 있는 오픈소스SW 라이선스는 GPL이건 LGPL 이건 상관없이 공통적으로 지켜야 하는 내용이 두가지 있습니다.

가. 저작권 관련 문구 유지

나. 제품명 중복 방지

- 아파치, 리눅스 같은 프로젝트명을 선택하면 안된다는 의미입니다.

두 가지 모두 무엇인가를 직접 만들어본 사람이라면 상식적인 수준에서 지켜야 하는 것이죠.

2. LGPL 라이선스를 가져다 쓰는데 소스코드를 공개해야만 하나요?

LGPL은 GPL의 조건이 너무 엄격해서 사람들이 쓰는 것을 꺼려할까봐 이를 감안해서 만든 라이선스 입니다. 따라서 GPL과는 다르게 LGPL 라이브러리에 응용프로그램을 정적 혹은 동적으로 링크시킨다고 해도 응용프로그램의 소스코드를 공개할 필요가 없습니다. LGPL 전문에 있는 ”라이브러리의 복제본을 무상이나 유상으로 배포할 경우에, 당신은 우리가 당신에게 부여한 모든 권리를 수취인에게도 그대로 부여해야 한다.“라는 내용으로 요구 조건만 준수한다면 상업적인 유상 배포도 허용하고 있습니다. 따라서 자기가 만든 소스코드의 공개없이 가격을 받는 상용제품으로 판매하셔도 됩니다.

다만, LGPL 라이브러리의 소스코드를 수정하였을 때에는 2차적 파생 저작물에 해당하므로 라이브러리의 소스코드를 제공해야 합니다.

3. LGPL을 가져와서 개발하고 GPL 라이선스로 변경해도 될까요?

대답은 변경해도 됩니다. 아래 내용을 보시면 "양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다"라고 표기되어 있습니다. 하지만 GPL 소스코드를 가져와서 임의로 LGPL로 변경하는 것은 안됩니다.

http://olis.or.kr/ossw/license/license/detail.do?lid=1005&mapcode=&currentPage=

제3조.
당신은 양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다. 이를 가능케 하기 위해서는 본 라이선스를 언급하는 모든 사항들을 GNU 일반 공중 라이선스 버전2의 사항들로 대체시켜야 한다. (만약 GNU 일반 공중 라이선스 버전 2 이후에 신규 버전이 공표되었을 경우에는 원한다면 신규 버전을 사용할 수 있다.) 그 외에 다른 사항들은 변경할 수 없다.
복제물에 대해 이러한 수정이 이루어졌을 경우에는 라이선스를 다시 변경하는 것은 불가능하며, 따라서 해당 복제물을 기반으로 만들어진 모든 저작물과 복제물에는 GNU 일반 공중 라이선스가 적용되어야 한다.
이러한 선택 사항은 라이브러리의 코드 일부분을 라이브러리가 아닌 프로그램에 포함시키고자 할 경우에 유용하다.

하지만 LGPL을 제외한 나머지 라이선스는 원 저작자가 아닌 사람이 임의로 라이선스를 변경할 수 없습니다. LGPL은 명확하게 전문에 표기하였기 때문에 문제가 없지만 다른 오픈소스SW 라이선스는 이를 허용하지 않습니다.

4. 더 궁금하시면

다른 오픈소스SW 라이선스에 대하여 궁금하시다면 아래의 링크를 이용하시면 됩니다.

- 한국저작권위원회 라이선스 설명 : http://olis.or.kr/ossw/license/license/list.do

- 공개SW역량플라자 라이선스 설명 : http://www.oss.kr/45607

- 공개SW 라이선스 가이드 다운로드 http://www.oss.kr/?mid=oss_license&page=3&document_srl=70139

- 오픈소스 라이선스 해설 http://www.oss.kr/oss_license/92922

그림출처 : http://terokarvinen.com/freehelia_licenses_and_the_definition_of_free_software.html

출처: http://hckim.tistory.com/422 [오픈비 : 삽질은없다]

오늘 페이스북 타임라인을 읽다보니 '리눅스 HWP 공개 라이브러리 개발' 건에 대한 라이선스 이야기를 하는 글들이 보이네요. 저도 예전에 FCKEditor를 적용한 제품때문에 LGPL의 정체가 뭔지 몰라서 어려웠던 기억이 납니다. 글타래를 읽다보니 LGPL에 대해서 애매한 이야기들이 좀 있는것 같아서 정리해봅니다.

1. 공통적으로 지킬 것

일단 OSI(Open Source Initiative)에 등록되어 있는 오픈소스SW 라이선스는 GPL이건 LGPL 이건 상관없이 공통적으로 지켜야 하는 내용이 두가지 있습니다.

가. 저작권 관련 문구 유지

나. 제품명 중복 방지

- 아파치, 리눅스 같은 프로젝트명을 선택하면 안된다는 의미입니다.

두 가지 모두 무엇인가를 직접 만들어본 사람이라면 상식적인 수준에서 지켜야 하는 것이죠.

2. LGPL 라이선스를 가져다 쓰는데 소스코드를 공개해야만 하나요?

LGPL은 GPL의 조건이 너무 엄격해서 사람들이 쓰는 것을 꺼려할까봐 이를 감안해서 만든 라이선스 입니다. 따라서 GPL과는 다르게 LGPL 라이브러리에 응용프로그램을 정적 혹은 동적으로 링크시킨다고 해도 응용프로그램의 소스코드를 공개할 필요가 없습니다. LGPL 전문에 있는 ”라이브러리의 복제본을 무상이나 유상으로 배포할 경우에, 당신은 우리가 당신에게 부여한 모든 권리를 수취인에게도 그대로 부여해야 한다.“라는 내용으로 요구 조건만 준수한다면 상업적인 유상 배포도 허용하고 있습니다. 따라서 자기가 만든 소스코드의 공개없이 가격을 받는 상용제품으로 판매하셔도 됩니다.

다만, LGPL 라이브러리의 소스코드를 수정하였을 때에는 2차적 파생 저작물에 해당하므로 라이브러리의 소스코드를 제공해야 합니다.

3. LGPL을 가져와서 개발하고 GPL 라이선스로 변경해도 될까요?

대답은 변경해도 됩니다. 아래 내용을 보시면 "양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다"라고 표기되어 있습니다. 하지만 GPL 소스코드를 가져와서 임의로 LGPL로 변경하는 것은 안됩니다.

http://olis.or.kr/ossw/license/license/detail.do?lid=1005&mapcode=&currentPage=

제3조.
당신은 양도받은 라이브러리의 복제물에 본 라이선스 대신 GNU 일반 공중 라이선스의 규정들을 적용시킬 수 있다. 이를 가능케 하기 위해서는 본 라이선스를 언급하는 모든 사항들을 GNU 일반 공중 라이선스 버전2의 사항들로 대체시켜야 한다. (만약 GNU 일반 공중 라이선스 버전 2 이후에 신규 버전이 공표되었을 경우에는 원한다면 신규 버전을 사용할 수 있다.) 그 외에 다른 사항들은 변경할 수 없다.
복제물에 대해 이러한 수정이 이루어졌을 경우에는 라이선스를 다시 변경하는 것은 불가능하며, 따라서 해당 복제물을 기반으로 만들어진 모든 저작물과 복제물에는 GNU 일반 공중 라이선스가 적용되어야 한다.
이러한 선택 사항은 라이브러리의 코드 일부분을 라이브러리가 아닌 프로그램에 포함시키고자 할 경우에 유용하다.

하지만 LGPL을 제외한 나머지 라이선스는 원 저작자가 아닌 사람이 임의로 라이선스를 변경할 수 없습니다. LGPL은 명확하게 전문에 표기하였기 때문에 문제가 없지만 다른 오픈소스SW 라이선스는 이를 허용하지 않습니다.

4. 더 궁금하시면

다른 오픈소스SW 라이선스에 대하여 궁금하시다면 아래의 링크를 이용하시면 됩니다.

- 한국저작권위원회 라이선스 설명 : http://olis.or.kr/ossw/license/license/list.do

- 공개SW역량플라자 라이선스 설명 : http://www.oss.kr/45607

- 공개SW 라이선스 가이드 다운로드 http://www.oss.kr/?mid=oss_license&page=3&document_srl=70139

- 오픈소스 라이선스 해설 http://www.oss.kr/oss_license/92922

그림출처 : http://terokarvinen.com/freehelia_licenses_and_the_definition_of_free_software.html

출처: http://hckim.tistory.com/422

라이센스에 대한 이해가 부족하여 검색하다가 좋은 글을 발견하여 퍼옴.

GPL은 Free Software Foundation(FSF)에서 만든 Free 소프트웨어 라이센스로 1989년 1차 버전, 1991년 2차 버전, 2007년 3차 버전까지 발표되었다.

기본적으로 어떤 프로그램을 개발할 때, GPL 코드를 일부라도 사용하게 되면 그 프로그램은 GPL이 된다.
GPL을 가진 프로그램을 유료로 판매하는 것은 가능하지만, 반드시 전체 소스코드는 무료로 공개해야 한다.

GPL 코드를 사용한 SW를 내부적인(개인, 기관, 단체 등) 목적으로만 사용할 때에는 소스코드를 공개할 필요가 없지만 유료든 무료든 외부에 공표/배포할 때에는 전체 소스코드를 공개해야 한다.

GPL과 관련되지 아니한 부분만 독립적으로 팔거나 배포하는 경우는 관계가 없다. 하지만 GPL 코드를 일부라도 사용한 프로그램 전체를 배포할 때에는 GPL을 적용(즉, 프로그램의 전체 소스코드 공개)해야 한다.

저작자표시 비영리

'자료 구하기 > 정보' 카테고리의 다른 글

아이콘 구할 수 있는 사이트 (0)	2019.01.29
이미지 해상도 낮춰주는 웹사이트 (0)	2018.09.29
Android 추천 사이트 (0)	2017.04.11
[PHP] PHP, jQuery 추천 사이트 (0)	2016.12.31
C# 추천 사이트 (0)	2016.01.17

Link2Me

,

jQuery - input 배열 수 세기

Web 프로그램/js, jQuery 2018. 4. 20. 16:51

728x90

<form name='my_form'>
<input type='button' id='my_button' value='개수 카운트' />
<hr>
<input type='text' name='tag' class='chk0' value='1' />
<input type='text' name='tag' class='chk0' value='2' />
<input type='text' name='tag' class='chk0' value='3' />
<input type='text' name='tag' class='chk0' value='' />
<input type='text' name='tag' class='chk0' value='' />
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#my_button").click(function() {
    //alert($("input[class='chk0']").length); // 전체 개수
    var count = 0;
    $('.chk0').filter(function() {
        if(this.value.trim().length > 0){ // 체크한 것의 개수
            count++;
        }
    });
    alert(count);

});
</script>

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

jQuery map 함수 (0)	2018.04.29
Javascript 배열 정리 (0)	2018.04.29
jQuery 체크박스 선택 여부 확인 (0)	2018.04.15
Popup Modal with jQuery (0)	2018.04.12
jQuery animate (2)	2018.02.14

Link2Me

,

iptime 공유기 포트포워딩

리눅스 2018. 4. 19. 06:49

728x90

IPTIME 공유기가 좀 저렴한 것이 DDNS 기능이 제대로 동작이 안되어 7만원대 공유기를 사서 이용중이다.

DDNS 란 유동 IP주소를 마치 고정 IP주소처럼 동작시켜주는 기능이다.

IPTIME 공유기는 단순 DDNS가 아니라 개인 도메인을 할당받아 사용이 가능하여 매우 편리하다.

http://aaa.iptime.org

여기서 aaa 가 개인이 설정할 수 있는 도메인이라고 보면 된다.

포트포워딩(port forwarding) 기능을 설정하고 사용하면 외부에서 내부에 있는 리눅스 서버에 자동으로 접속이 가능하다.

아래 그림에서 내부 IP 는 CentOS 7 이 설치된 IP주소이다.

만약 내가 설정한 CentOS 7 IP 주소가 192.168.0.20 이면 내부 IP 주소를 맞게 적어줘야 한다.

리눅스 시스템에서 방화벽 설정으로 접속을 제한하는 기능은 동작하고 있다.

설정방법(CentOS 6) : http://link2me.tistory.com/438 참조

외부에서 WinSCP 툴을 이용해서 IPTIME 공유기 내부에 있는 리눅스 서버 접속이 잘 된다.

80 포트를 통한 Web 서비스도 잘 된다.

##########################################################################
# CentOS 7 방화벽 설정
yum -y install firewalld
 
# 방화벽 데몬 시작
systemctl start firewalld
 
# 서버 부팅 시 firewalld 데몬 자동 시작 설정
systemctl enable firewalld
 
firewall-cmd --permanent --add-service=http 
firewall-cmd --permanent --add-service=https
firewall-cmd --permanent --add-service=mysql
firewall-cmd --permanent --zone=public --add-port=3306/tcp
 
firewall-cmd --permanent --zone=public --add-port=8000/tcp
firewall-cmd --permanent --zone=public --add-port=8080/tcp
firewall-cmd --reload
firewall-cmd --list-all
 
#########################################################################

저작자표시 비영리

'리눅스' 카테고리의 다른 글

CentOS6 Apache 2.4 Virtual Host 설정 (0)	2018.07.14
리눅스 시간 동기화 (0)	2018.04.30
CentOS6 SSH 포트 변경 (0)	2017.08.18
phpize 실행시 에러 (0)	2017.06.08
PHP mcrypt 동적 모듈 추가 (0)	2017.06.08

Link2Me

,

jQuery 체크박스 선택 여부 확인

Web 프로그램/js, jQuery 2018. 4. 15. 09:39

728x90

체크된 체크박스 value 가져오기

전체선택/해제 하는 jQuery 코드와

개별적으로 선택된 값을 가져오고 가져온 개수가 몇개인지 파악하는 코드다.

prop()는 현재 설정된 속성값과 입력폼의 체크등의 여부를 확인 가능한 매우 유용한 속성이다.

결과로 체크 여부에 따라 boolean 타입의 true, false가 반환된다.

$("input:checkbox[id='ID']").prop("checked");

$("input:checkbox[name='NAME']").prop("checked");

$("input:checkbox[name='class[2]']").prop("checked",true); // 배열 사용시 따옴표를 넣어야 인식되더라.

$("input:checkbox[id='class3']").prop("checked",true);

is() 메소드는 해당하는 요소의 상태에 따라 옳고 그름을 불리언으로 반환한다.
$(this).is(":checked");

if($("input:checkbox[id='ID']").is(":checked") == true){ }

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function(){
    $("#check_all").click(function(){
        var chk = $(this).is(":checked");
        if(chk) $(".allchk input").prop('checked', true);
        else $(".allchk input").prop('checked', false);
    });

    $("#submit").click(function(){
        var selectedCheck = new Array();
        $('.inputchk:checked').each(function() {
            selectedCheck.push(this.value);
        });
        // alert(selectedCheck + '\n개수 : '+selectedCheck.length);
        if(selectedCheck.length < 1 ){
            alert('최소한 1개 이상 항목을 선택하셔야 합니다');
            return false;
        }
        //document.form.submit();
    });

});
</script>
</head>
<body>
<label><input id="check_all" type="checkbox"> <b>전체선택</b></label>
<ul class="allchk">
<label><input class="inputchk" name="class[1]" value="1" type="checkbox">1</label>
<label><input class="inputchk" name="class[2]" value="2" type="checkbox">2</label>
<label><input class="inputchk" name="class[3]" id="class3" value="3" type="checkbox">3</label>
<label><input class="inputchk" name="class[4]" value="4" type="checkbox">4</label>
<label><input class="inputchk" name="class[5]" value="5" type="checkbox">5</label>
</ul>
<button type='submit' class='btn btn-primary' id='submit'>전송</button>
</body>
</html>

http://bytutorial.com/blogs/jquery/jquery-get-selected-checkboxes 를 참조하면 된다.

개수만 체크하는 경우에는 이렇게 하면 더 편하다.

var selectedCheck = new Array();
$('.inputchk:checked').each(function() {
       selectedCheck.push(this.value);
});
// alert(selectedCheck + '\n개수 : '+selectedCheck.length);
if(selectedCheck.length < 1 ){
      alert('최소한 1개 이상 항목을 선택하셔야 합니다');
      return false;
   }

전체 갯수 : $("input:checkbox[name='name명']").length;
선택된 갯수 : $("input:checkbox[name='name명']:checked").length;

따라서 위의 것을 간단하게 줄이면 $('.inputchk:checked').length; 가 개수 체크를 하므로

if($('.inputchk:checked').length < 1){

alert('최소한 1개 이상 항목을 선택하셔야 합니다');

return false;

}

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

Javascript 배열 정리 (0)	2018.04.29
jQuery - input 배열 수 세기 (0)	2018.04.20
Popup Modal with jQuery (0)	2018.04.12
jQuery animate (2)	2018.02.14
jQuery addClass() (0)	2018.02.04

Link2Me

,

PHP 네이버 스마트에디터 연동 방법

Web 프로그램/테이블, 게시판, 검색 2018. 4. 15. 06:54

728x90

PHP 에서 write.php 만들 때 textarea 만 포함하면 텍스트 형태로만 저장되어 표현의 다양성이 부족하다.

그래서 스마트에디터를 검색해보니 오픈소스인 네이버 스마트에디터(smart editor)를 연동하면 된다고 나온다.

자료를 많이 검색해도 잘 이해가 안되어 개념 잡는데 고생을 좀 했다.

네이버 스마트에디터(SmartEditor)는 JavaScript로 구현된 웹 기반의 WYSIWYG 편집기다.

연동에 필요한 사항 전부를 하나 하나 작성해둔다.

1. 네이버 스마트 에디터 다운로드

스마트에디터2.0 오픈소스는 github으로 이전했다.

https://github.com/naver/smarteditor2/releases 에서 받아야 한다.

스마트에디터3.0은 2.0버전과 동작방식이 전혀 다르고 설치형이 아니라 서비스형이다.

네이버는 오픈소스 계획이 없다.

2. 스마트 에디터 설치 준비

- 압축을 풀어서 plugin/editor/ 폴더에 복사를 한다.

다른 API 도 연동할 수 있으므로 plugin 폴더를 만들고 그 하위 폴더에 위치시켰다.

- readme.txt 파일을 보면 ....

      /css : 에디터에서 사용하는 css 파일
      /img : 에디터에서 사용하는 이미지 파일
      /js : 에디터를 적용할 때 사용하는 JS 파일
      /photo_uploader : 사진 퀵 업로더 팝업 UI를 구성하는 파일

3. 스마트 에디터 연동 과정

- smart editor 본문에 이미지를 추가하면 sample/photo_uploader/file_uploader.php 가 동작된다.

이미지가 file_uploader.php 에서 지정한 폴더에 저장된다.

- 원하는 폴더에 저장되게 하고 싶다면 file_uploader.php 를 수정한다.

- 이미지가 저장되면 코드가 자동으로 생성되어 smart editor 본문에 추가된다.

- 저장된 이미지의 경로명을 DB에 저장하고 싶다면 저장할 테이블을 만들고 아래 코드로 추출한다.

// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $getImageSrcPaths);

$b->bbs_imgSaveDB($getImageSrcPaths[1],$uid); // 이 코드는 개발자가 직접 구현 필요

4. 코드 예시

=== writeForm.php ===

<?php
require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();

$uid = isset($_GET['uid']) ? $_GET['uid'] : '';
if($uid){
    $sql ="select * from table_name where id=".$uid;
    $rs = mysqli_query($dbconn,$sql);
    if($R = mysqli_fetch_array($rs)){

    }
}
?>

<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" control="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/table.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="plugin/editor/js/HuskyEZCreator.js"></script>
</head>
<body>
<div class="rdata_write">
   <form name="writeForm" id="writeForm" method="post" action="write.php">
   <input type="hidden" name="uid" value="<?php echo isset($R['uid'])? $R['uid']:'';?>">
   <table class="table" width="800">
       <tr>
           <td class="td1">제목</td>
           <td class="td2"><input type="text" name="subject" value="<?php echo isset($R['title'])? htmlspecialchars($R['title']):'';?>" />
           </td>
       </tr>

       <tr>
           <td class="td1">내용</td>
           <td class="td2">
           <textarea name="content" id="ir1" rows="20" style="width:100%;height400px;">
           <?php
               if(isset($R['content'])&& strlen($R['content'])){
                   echo $b->html_decode($R['content']);
               } else { echo '';}
           ?>
           </textarea>
           
           <script type="text/javascript" src="plugin/editor/js/se2_insert.js"></script>
           </td>
       </tr>

       <tr>
       <td colspan="2" align="center"><input type="button" id="savebtn" value="서버전송" class="btnblue" /></td>
       </tr>

   </table>
   </form>
</div>
</body>
</html>

=== se2_insert.js ===

$(function(){
    // 전역변수 선언
    var oEditors = [];
    nhn.husky.EZCreator.createInIFrame({
        oAppRef: oEditors,
        elPlaceHolder: "ir1",
        // 스킨 경로명에 맞게 수정
        sSkinURI: "plugin/editor/SmartEditor2Skin.html",
        htParams : {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar : true,
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer : true,
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger : true,
            fOnBeforeUnload : function(){
                //alert("");
            }
        }, //boolean
        fOnAppLoad : function(){
            // 기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
        },
        fCreator: "createSEditor2"
    });

    function pasteHTML(str) { // 에디터에 내용 삽입
        sHTML = str;
        oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
    }

    function editerResetHTML() { // 에디터 내용 초기화
       oEditors.getById["ir1"].exec("SET_CONTENTS", [""]); // 내용초기화
    }

    function setDefaultFont() {
        var sDefaultFont = '돋움';
        var nFontSize = 11;
        oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
    }

    $("#savebtn").click(function(){
        // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어준다.
        if($("input[name='subject']").val() ==""){
            alert('제목을 입력하세요');
            $("input[name='subject']").focus();
            return false;
        }

        // 이부분에 에디터 validation 검증
        var ir1_data = oEditors.getById['ir1'].getIR();
        var checkarr = ['<p> </p>',' ','<p><br></p>','<p></p>','<br>'];
        if(jQuery.inArray(ir1_data.toLowerCase(), checkarr) != -1){
            alert("내용을 입력해 주십시오.");
            oEditors.getById["ir1"].exec('FOCUS');
            return false;
        }

        // id가 ir1인 에디터의 내용이 textarea에 적용됨
        oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

        //폼 submit
        $("#writeForm").submit();
    });
});

=== delete.php ===

<?php
if (!isset($_SESSION)) {
    session_start();
}

if($_SERVER['REQUEST_METHOD'] !== 'POST'){
   echo 0;
   exit;
}
extract($_POST);

// 업로드된 파일이 있다면 파일삭제
require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();
if($uid){
    $b->bbs_imgDeleteDB($uid); // 이미지 DB 삭제 및 파일 삭제
   $sql ="delete from table_name where uid=".$uid;
   mysqli_query($dbconn,$sql);
   mysqli_close($dbconn);
}
?>

=== write.php ===

<?php
if (!isset($_SESSION)) {
    session_start();
}

if($_SERVER['REQUEST_METHOD'] !== 'POST'){
   echo 0;
   exit;
}
extract($_POST);
// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $getImageSrcPaths);

require_once 'dbconnect.php'; // db접속
require_once 'phpclass/bbsClass.php'; // 게시판 클래스
$b = new bbsClass();

$ip   = $_SERVER['REMOTE_ADDR'];
$agent = $_SERVER['HTTP_USER_AGENT'];

if($uid){
   $sql ="Update table_name SET content='".$b->html_encode($content)."', title='".$subject."' Where uid=".$uid;
   mysqli_query($dbconn,$sql);
    if(count($getImageSrcPaths[1])){
        $b->bbs_imgSaveDB($getImageSrcPaths[1],$uid);
    }
   echo 1;
} else {
   $sql ="INSERT INTO table_name (uid,title,content,d_regis) VALUES (NULL,'".$subject."','".$b->html_encode($content)."','".date("Y-m-d H:i:s")."')";
   mysqli_query($dbconn,$sql);
   $uid = mysqli_insert_id($dbconn);
    if(count($getImageSrcPaths[1])){
        $b->bbs_imgSaveDB($getImageSrcPaths[1],$uid);
    }
   echo 2;
}
?>

5. Smart Editor2에서 이미지 삽입 후 정렬이나 크기 조정 옵션을 설정 하는 방법
GitHub : https://github.com/naver/smarteditor2/issues/36 를 참고하라고 나오네요.(이건 테스트 안해봤음)

실력이 부족해서 여기까지 알아내는데도 많은 시간이 걸렸다.

이미지 저장 처리 함수는 여기에 적어두지 않는다. 그 부분은 직접 로직 설계를 하면서 구현 ....

저작자표시 비영리

'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글

bootstrap4 paging with PHP (0)	2022.02.27
XSS(cross-site scripting) filtering function in PHP (0)	2018.05.01
PHP 검색어 함수 (0)	2018.04.08
HTML 특수기호 (0)	2018.01.17
부트스트랩 기반 WYSIWYG editor summernote (2)	2017.03.19

Link2Me

,

Popup Modal with jQuery

Web 프로그램/js, jQuery 2018. 4. 12. 11:17

728x90

깔끔한 모양의 팝업창처럼 보여주는 기능이다.

자세한 설명은

https://inspirationalpixels.com/tutorials/custom-popup-modal 을 참조하면 된다.

본 예제 코드는 첨부파일 참조

popup_jQuery.zip

=== import_header.php ===

<!DOCTYPE html>
<html lang="ko">
<head>
<?php $title='Home';include_once 'import_header.php';?>
</head>
<body>
<div class="container">
   <h3 align=center>설문조사</h3>
   <table class="table table-hover">
       <TR>
           <TD align=center>
               <a href="#" data-popup-open="popup-1">Open Popup</a>

               <div class="popup" data-popup="popup-1">
                   <div class="popup-inner">
                   <h3>jQuery 팝업 예시</h3>
                   <p>팝업할 본문 내용</p>
                   <p><a href="#" data-popup-close="popup-1">Close</a></p>
                   <a href="#" class="popup-close" data-popup-close="popup-1">x</a>
                   </div>
               </div>

           </TD>
       </TR>
       <TR>
           <TD align=center>
           Copyright(c) <?php echo date("Y"); ?>,
           <B><a href='http://link2me.tistory.com' target='_blank'>Survey</a></B> All Rights Reserved.</TD>
       </TR>
   </TABLE>
</div>
</body>
</html>

$(function() {
   //----- OPEN
   $('[data-popup-open]').on('click', function(e) {
       var targeted_popup_class = jQuery(this).attr('data-popup-open');
       $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
       e.preventDefault();
   });
   //----- CLOSE
   $('[data-popup-close]').on('click', function(e) {
       var targeted_popup_class = jQuery(this).attr('data-popup-close');
       $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
       e.preventDefault();
   });
});

/* Outer */
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

/* Inner */
.popup-inner {
   max-width:700px;
   width:90%;
   padding:40px;
   position:absolute;
   top:50%;
   left:50%;
   -webkit-transform:translate(-50%, -50%);
   transform:translate(-50%, -50%);
   box-shadow:0px 2px 6px rgba(0,0,0,1);
   border-radius:3px;
   background:#fff;
}
/* Close Button */
.popup-close {
   width:30px;
   height:30px;
   padding-top:4px;
   display:inline-block;
   position:absolute;
   top:0px;
   right:0px;
   transition:ease 0.25s all;
   -webkit-transform:translate(50%, -50%);
   transform:translate(50%, -50%);
   border-radius:1000px;
   background:rgba(0,0,0,0.8);
   font-family:Arial, Sans-Serif;
   font-size:20px;
   text-align:center;
   line-height:100%;
   color:#fff;
}
.popup-close:hover {
   -webkit-transform:translate(50%, -50%) rotate(180deg);
   transform:translate(50%, -50%) rotate(180deg);
   background:rgba(0,0,0,1);
   text-decoration:none;
}

저작자표시 비영리

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

jQuery - input 배열 수 세기 (0)	2018.04.20
jQuery 체크박스 선택 여부 확인 (0)	2018.04.15
jQuery animate (2)	2018.02.14
jQuery addClass() (0)	2018.02.04
jQuery all Checked (0)	2018.01.23

Link2Me

,

PHP DB 생성 및 테이블 생성

Web 프로그램/DB 연동 및 처리 2018. 4. 9. 23:34

728x90

PHP Code 상에서 데이터베이스(DB)와 테이블을 생성하는 코드 예제를 만들었다.

코드는 bootstrap 기반으로 구현했다.

테스트에 사용한 코드를 첨부한다.

테스트 환경 : 윈도우10 autoset9 APM(apache + PHP + MySQL)

dbcreate.zip

<!DOCTYPE html>
<head>
<title>DB 생성 및 테이블 생성</title>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA Compatible" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $("#create").click(function(){
       if(!form.hostname.value) {
        alert('Host명을 입력하세요!');
        form.host.focus();
        return false;
       }
       if(!form.dbuser.value) {
        alert('DB User가 입력되지 않았습니다!');
        form.dbuser.focus();
        return false;
       }
       if(!form.dbpasswd.value) {
        alert('DB Password를 입력하세요!');
        form.dbpasswd.focus();
        return false;
       }
       if(!form.dbname.value) {
          alert('DB Name을 입력하세요!');
          form.dbname.focus();
          return false;
       }
       form.submit();

    });
});
</script>
</head>

<body topmargin=50>
<?php
if(!empty($_POST['dbpasswd']) && !empty($_POST['dbname'])) {
    // DB 연결
    $conn = mysqli_connect("localhost",$_POST['dbuser'],$_POST['dbpasswd']);
    if(mysqli_connect_errno()){
        echo "MySQL 연결 오류 : ".mysqli_connect_error();
    }

    // Create Database
    $sql ="Create DATABASE IF NOT EXISTS ".$_POST['dbname']." default character set utf8";
    if(mysqli_query($conn,$sql)){

//echo '<script>alert("Created DATABASE");</script>'; // $sql 결과 테스트 용도

        // dbinfo.php 파일에 기록
        $myfile = fopen("dbinfo.php", "w") or die("Unable to open file!");
        fwrite($myfile, "<?php\n");
        $host = "\$db['host'] = 'localhost';\n";
        fwrite($myfile, $host);
        $dbname = "\$db['name'] = '".$_POST['dbname']."';\n";
        fwrite($myfile, $dbname);
        $dbuser = "\$db['user'] = '".$_POST['dbuser']."';\n";
        fwrite($myfile, $dbuser);
        $dbpasswd = "\$db['pass'] = '".$_POST['dbpasswd']."';\n";
        fwrite($myfile, $dbpasswd);
        $dbport = "\$db['port'] = '3306';\n";
        fwrite($myfile, $dbport);
        fwrite($myfile, "?>\n");
        fclose($myfile);
    } else {
        echo "DB 만들기 오류 : ".mysqli_error($conn);
        echo "<script>location.replace('dbcreate.php')</script>";
    }

    require_once 'dbconnect.php'; // DB 생성후 DB명까지 인식되는 db연결 필수

    // pollinfo 테이블 생성 (테이블 생성 예시로 반드시 MySQL에서 직접 실행해본 테이블을 적어야 한다.)
    $sql = "CREATE TABLE IF NOT EXISTS pollinfo(
        uid int(11) NOT NULL AUTO_INCREMENT,
        question varchar(100),
        start_date date,
        end_date date,
        now_progress char(1),
        select1 varchar(50),
        select2 varchar(50),
        select3 varchar(50),
        select4 varchar(50),
        select5 varchar(50),
        select6 varchar(50),
        select7 varchar(50),
        select8 varchar(50),
        select9 varchar(50),
        select10 varchar(50),
        poll_type char(1),
        no_item tinyint(2),
        PRIMARY KEY(uid)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1";
    mysqli_query($db,$sql);

    $sql = "CREATE TABLE IF NOT EXISTS pollresult(
        uid int(11) not null auto_increment,
        no_poll    int(10) default '0' not null,
        no_select tinyint(4),
        user_ip    varchar(15),
        submit_date    datetime,
        PRIMARY KEY(uid)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1";
    mysqli_query($db,$sql);

    echo "<center><font size=2>설문조사 테이블이 성공적으로 생성 되었습니다.</font></center>";
    echo "<script>location.replace('index.php')</script>";
    exit;

} else {
    //echo '<script>alert("입력된 값이 없습니다");</script>';
}
?>

<div class="container">
<h4 align=center><b>◎◎ 데이타베이스 생성 및 테이블 생성 ◎◎</b></h4>
<form name="form" method="post" action="dbcreate.php">
    <table class="table table-striped">
        <tr>
        <td colspan="3" align=center>DataBase Create Configuration</td>
        </tr>

        <tr>
        <td>Host Name</td>
        <td><input type="text" name="hostname" value="localhost" size="20"></td>
        <td>접속할 호스트 이름</td>
        </tr>

        <tr>
        <td>User Name</td>
        <td><input type="text" name="dbuser" value="root" size="20"></td>
        <td>MySQL 사용자 이름</td>
        </tr>

        <tr>
        <td>User Passwd</td>
        <td><input type="password" name="dbpasswd" value="autoset" size="20"></td>
        <td>MySQL 사용자 비밀번호</td>
        </tr>

        <tr>
        <td>DB Name</td>
        <td><input type="text" name="dbname" value="" size="20"></td>
        <td>생성할 MySQL DB이름</td>
        </tr>

        <tr>
        <td colspan=3>
        <div align='center'>
            <button type="submit" class="btn btn-primary" id="create">DB생성</button>
            <button type='reset' class="btn btn-warning">취소</button>
        </div>
        </td>
        </tr>

    </table>
</form>
</div>
</body>
</html>

저작자표시 비영리

'Web 프로그램 > DB 연동 및 처리' 카테고리의 다른 글

[Morden PHP] dbController Class 만들기 (2)	2018.06.13
MySQLi 객체 접속 방식(중복자료 검사 및 Insert) (0)	2017.10.07
PHP 에서 MySQL 테이블 생성하는 방법 (0)	2017.05.17
[PHP] MySQL 연동 기본 코딩 방법 ★★★ (0)	2017.03.11
[PHP] 통신의 기본 이해 및 코딩방법 ★★★★★ (1)	2016.10.28

Link2Me

,

PHP 검색어 함수

Web 프로그램/테이블, 게시판, 검색 2018. 4. 8. 08:36

728x90

PHP 검색어를 입력하면 색상이 다르게 표시해주는 함수다.

아래 간단한 함수 highlight 와 highlightkeyword 차이를 비교해보면 영문 검색시 차이가 난다. 한글 검색은 highlight 함수로도 충분하다.

네이버스마트 에디터로 작성한 view.php 에서 검색을 해보니 highlight 가 정상적으로 잘 보인다.

<?php
function highlight($text='', $keyword=''){
if(strlen($text) > 0 && strlen($keyword) > 0) {
    return (str_replace($keyword, "<span style=\"color:red;\">$keyword</span>", $text));
}
   return ($text);
}

function highlightkeyword($str, $search) {
    // 영어 대문자, 소문자 구분없이 검색
    $highlightcolor = "#FE2E2E";
    $occurrences = substr_count(strtolower($str), strtolower($search));
    $newstring = $str;
    $match = array();

    for ($i=0;$i<$occurrences;$i++) {
        $match[$i] = stripos($str, $search, $i);
        $match[$i] = substr($str, $match[$i], strlen($search));
        $newstring = str_replace($match[$i], '[#]'.$match[$i].'[@]', strip_tags($newstring));
    }

    $newstring = str_replace('[#]', '<span style="color: '.$highlightcolor.';">', $newstring);
    $newstring = str_replace('[@]', '</span>', $newstring);
    return $newstring;

}

$str="진실을 깨닫도록 시도해 보세요... 생명이 느껴지시나요? 생명의 빛을 느껴보세요.";
$str="The을 깨닫도록 시도해 보세요... the 느껴지시나요? the의 빛을 느껴보세요.";
$keyword ='the';
echo highlight($str, $keyword);

echo '<br />';
echo highlightkeyword($str, $keyword);
?>

출처 : https://tomelliott.com/php/highlight-search-keyword-string-function

저작자표시 비영리

'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글

XSS(cross-site scripting) filtering function in PHP (0)	2018.05.01
PHP 네이버 스마트에디터 연동 방법 (0)	2018.04.15
HTML 특수기호 (0)	2018.01.17
부트스트랩 기반 WYSIWYG editor summernote (2)	2017.03.19
부트스트랩 테이블 만들기(수정) (0)	2017.02.02

Link2Me

,

PHP Form 다중 체크박스 값 전달 및 POST

Web 프로그램/PHP 응용 및 활용 2018. 4. 2. 20:21

728x90

<form> 태그

- <form>태그는 사용자의 데이터를 서버로 전송해 줄 수 있는 기능의 태그이다.

- 입력양식의 모든 태그들은 반드시 <form>~ </form>사이에 기록되어져야 한다.

- <form>태그의 구조

   Action: 폼의 데이터를 처리해주는 화일명이 온다.
   enctype: 폼의 데이터를 전송 시 암호화 방법 지정
   method: 폼의 데이터를 전송하는 방법 지정(get,post)
   name: 폼의 이름, 자바스크립트에서 사용

- submit : 입력된 내용을 서버측으로 보냄

- reset : 입력된 내용을 공백으로 만듬

여러개의 체크 박스에서 $_POST 가져오기
체크박스 name뒤에 배열형태로 []를 붙여주면 된다.
여러개의 name 이 존재한다면 check_list[] 처럼 배열형태로 보내주면 받을 때도 배열형태로 받을 수 있다.

checkbox 부분에서 value 부분은 예시라서 for 문 또는 foreach 문으로 값을 넣어야 하는 것은 생략했다.

=== delete.php ===

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['check_list'])){
    $flag = false;
    foreach($_POST['check_list'] as $item){
        $sql ="delete from test where item='".$item."'";
        if(!mysqli_query($dbconn,$sql)){
            die('Error:'.mysql_error());
        } else {
            $flag = true;
        }
    }

    if($flag == true){
        echo "<script>location.href='index.php';</script>";
    }
}
?>

저작자표시 비영리

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

PHP 글자수 줄임 표시 (0)	2018.06.09
PHP to JSP (0)	2018.04.28
PHP 배열 합집합, 교집합, 차집합, 대칭차집합 (0)	2018.04.01
PHP 배열함수 정렬 - sort, rsort, ksort, krsort, asort, arsort (0)	2018.03.31
PHP 로또번호 생성 (0)	2018.03.28

Link2Me

,

PHP image 태그에서 src 추출

Web 프로그램/이미지 다루기 2018. 4. 2. 10:00

728x90

게시판 본문에 이미지가 여러개 삽입되어 있을 때 이를 추출해서 DB에 저장하는 용도로 활용.

// 정규식을 이용해서 img 태그 전체 / src 값만 추출하기
preg_match_all("/<img[^>]*src=[\"']?([^>\"']+)[\"']?[^>]*>/i", $content, $matches);

// img 태그 전체 추출하기
echo '<pre>';print_r($matches[0]);echo '</pre>';

// src 값만 추출하기
echo '<pre>';print_r($matches[1]);echo '</pre>';

// 본문 내용을 텍스트만 일부 표시하려는 경우 태그 제거

$contents = strip_tags($content);

// 게시판에 저장되어 있는 이미지 태그 제거 하기
$content = preg_replace("@<img.*?>@", "", $content);

저작자표시 비영리

'Web 프로그램 > 이미지 다루기' 카테고리의 다른 글

PHP 이미지에 글자쓰기 및 워터마크 (0)	2018.05.19
[부트스트랩] 이미지 파일명 자동 읽어오는 Carousel (0)	2017.11.27

Link2Me

,

PHP 배열 합집합, 교집합, 차집합, 대칭차집합

Web 프로그램/PHP 응용 및 활용 2018. 4. 1. 22:31

728x90

차집합, 대칭 차집합은 구현하고자 하는 목적에 따라 각각 사용을 하면 된다.

array_diff 함수를 잘못 이해하고 사용하면 엉뚱한 결과가 나올 수 있다.

<?php
$arr1 = array('1', '2', '3', '4');
$arr2 = array('3', '4', '5', '6', '7', '8');

echo "<h3>Union(합집합)</h3>";
$union = array_unique(array_merge($arr1, $arr2));
print_r($union);

echo "<h3>Intersection(교집합)</h3>";
$intersection = array_values(array_intersect($arr1, $arr2));
print_r($intersection);

echo "<h3>Complement(차집합)</h3>";
$complement = array_values(array_diff($arr1, $arr2));
print_r($complement);
$complement = array_values(array_diff($arr2, $arr1));
echo '<br />';
print_r($complement);

echo "<h3>Symmetric difference(대칭차집합)</h3>";
$sym_diff = array_values(array_diff(array_merge($arr1, $arr2), array_intersect($arr1, $arr2)));

또는

$sym_diff = array_merge(array_diff($arr1, $arr2), array_diff($arr2, $arr1));

print_r($sym_diff);

// 처음 1개 삭제
array_shift($arr);

// 마지막 1개 삭제
array_pop($arr);

// in_array() : 배열들의 요소중에 원하는 값이 있는지를 검사

$arr = array("1", "2", "3", "4", "5");
$v = "5";
if(in_array($v, $arr)) {
echo "$v가 있음";
} else {
echo "$v가 없슴";
}

$arr = array(array(1, 2,), 3, 4, 5, array(6, 7));
if(in_array(array(1,2), $arr)) {
echo "array(1, 2) 가 포함되어 있음.";
}

is_array : 자료형이 배열인지 알아볼기위해 사용하는 함수, 배열일 경우 1, 아닐 경우 0 반환

$arr = array(1, 2, 3, 4, 5,);
echo is_array($arr); //array가 맞으므로 1 반환

?>

저작자표시 비영리

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

PHP to JSP (0)	2018.04.28
PHP Form 다중 체크박스 값 전달 및 POST (0)	2018.04.02
PHP 배열함수 정렬 - sort, rsort, ksort, krsort, asort, arsort (0)	2018.03.31
PHP 로또번호 생성 (0)	2018.03.28
온라인 투표 소스 (회원관리 포함) (2)	2017.12.23

Link2Me

,

« 2018/04 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

'2018/04'에 해당되는 글 20건

'리눅스' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글

'Web 프로그램 > Layout' 카테고리의 다른 글

'Web 프로그램 > Layout' 카테고리의 다른 글

제3조.

제3조.

제3조.

제3조.

'자료 구하기 > 정보' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'리눅스' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글

'Web 프로그램 > js, jQuery' 카테고리의 다른 글

'Web 프로그램 > DB 연동 및 처리' 카테고리의 다른 글

'Web 프로그램 > 테이블, 게시판, 검색' 카테고리의 다른 글

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

'Web 프로그램 > 이미지 다루기' 카테고리의 다른 글

'Web 프로그램 > PHP 응용 및 활용' 카테고리의 다른 글

카테고리

태그목록

글 보관함

달력

공지사항

링크

Link2Me

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바