동해둘리의 IT Study

길고양이 치즈와 시도, 3개월째 무럭무럭 크는 중

동해둘리 — Sat, 28 Oct 2023 14:43:11 +0900

3개월 전 쯤, 우리집 마당으로 찾아온 길고양이 치즈 그리고 시도

손바닥 만하던 녀석이 이제는 제법 어른티가 납니다. 치즈는 아주 풍성하고 복실복실한 여우꼬리를 가지고 있어요

길고양이

시도는 말썽꾸러기 개냥이로 자라나서, 뜯고 물고 뛰댕기고 정신이 없게 살고있습니다.

길고양이

오늘의명언 ... 가난한 사람은 독서로 부자가 된다

동해둘리 — Fri, 27 Oct 2023 06:17:57 +0900

가난한 사람은 독서로 부자가 되고 부자는 독서로 귀하게 된다

이 말을 하신 분이 왕안석 인데요. 왕안석은 중국 송나라때 분입니다 중국 송나라때 학자인데 그 오래전
시기에도 독서를 통해서 부자가 된다는 말이 있었던 거죠. 그래서 참 재밌다는 생각을 해봤습니다

저는 독서를 통해서 부자가 될 수 있다고 믿고 있는 사람 중에 하난데요, 아직까지는 부자가 안 된 걸로 봐서는 부자가 되는 과정에 있지 않나 싶습니다

부자는 안됐지만 제가 책을 읽으면서 그동안에 지내왔던 일들 중에서 책 때문에 좋은 경험을 했거나 책 때문에 잘 넘어갔던 그런 기억들이 있는데요. 예를 들면 초창기에 읽었던 물[건을 팔지 말고 가치를 팔아라 ]요런 책들은 제가 오프라인 매장을 운영할 때 실질적인 도움을 받았던 책이고요

제가 지속적으로 계속 책을 읽고 있는 이유가 얻는게 없으면은음 읽을 리가 없겠죠 책을 읽으면서 적어도 마음이라도 편안해 지니까 그래서 저는 지금 부자가 되는 중이지 않나 그런 생각을 하고 귀하게 되는 거는 모르겠습니다 어 귀하기 되진 아니더라도 일단은 지금은 독서로 부자가 되는 길을 걸어가고 있다 그렇게 생각을 하고 있습니다

네 저는 책을 통해서 얻었던게 많다고 생각을 하는 사람이기 때문에 제 주변에 있는 친구들한테도 책을 자꾸 선물을 하고 권하는 편인데요 근데 책 선물하는게 정말 쉽지가 않더라고요. 안읽어요 안 읽는 건 둘째치고 차라리 진짜 소고기 한 건 사 주는게 낫지 책을 선물하는게 이게 쉽지가 않더라고요

상대방이 나를 무시하는 거 아닌가 뭐 이런 책을 줘 뭐 이럴 수도 있는 거고 그 사람이 어떤 수준의 책을 읽는지도 모르고 잘 그래서 권하기가 참 애매하죠 예를 들어 뭐 화를 다스리면 인생이 달라진다 이런 책을 저는 너무 좋아하는 책이라서 선물을 하잖아요 그러면 내가 뭐 화를 많이 낸다는 얘기야 뭐 이렇게 생각할 수도 있는 거고 그래서 책 선물이 참
힘들긴 한데 어 오늘도 제가 책을 포장을 해서 택배를 보내려고 친구한테 준비를 해놨는데요 어 제가 굉장히 노력을 쏟고 있는 친구인데 다행히 요즘에 책을 읽고 있다고 합니다 그래서 어 참 감사한 마음을 가지고 있고 제가 책을 통해서
조금씩 성장하듯이 그 친구도 책을 통해서 어 좀 더 성장하고 그 발전할 수 있는 그런 친구가 됐으면 하는 마음입니다

통계청 소비자 물가지수 연동해서 웹사이트에 표시하기, 통계청 API 연동

동해둘리 — Fri, 6 Oct 2023 19:53:49 +0900

통계청 소비자 물가지수 연동해서 웹사이트에 표시하기

지표누리공유서비스에 접속한 후에, 회원가입 후 활용신청을 해야합니다.

활용신청 메뉴에서 승인신청을 합니다

활용신청 메뉴에서 승인신청을 먼저 진행한 후에 API승인 탭에서 필요로 하는 지표명을 선택하여 신청하면 됩니다.

아래 코드는 소비자 물가지수 입니다

아래 코드는 iframe 방식으로 API를 연동하는 경우의 코드입니다.

1
2

 <iframe src="https://www.index.go.kr/unity/openApi/chartUserShow.do?idntfcId=0925M2IO2015C329&ixCode=1060&statsCode=106001&chartNo=1" 
                width="90%" height="650px" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0"></iframe>

cs

아래에서 보듯이 IFRAME 방식과 XML방식, JSON 방식 중에서 선택해서 이용할 수 있습니다

프로그래밍 관련 재밌는 명언 모음^^ 코딩명언

동해둘리 — Fri, 6 Oct 2023 19:38:54 +0900

"컴퓨터 과학은 문제 해결을 위한 예술이다." - Donald Knuth
(Computer science is an art of problem-solving.)

"코드는 언어의 일부가 아니라, 문제 해결의 일부이다." - Unknown
(Code is not just a part of the language, it's a part of problem-solving.)

"나쁜 코드를 원하는 사람은 없다. 단지 시간이 부족해서 그렇다." - Robert C. Martin
(No one wants bad code; they just don't have enough time.)

"좋은 프로그래머는 남들과 다른 방식으로 생각한다." - Linus Torvalds
(Good programmers think differently than everyone else.)

"만약 당신이 어떻게 코드를 쓰느냐에 대해 걱정한다면, 그것은 당신이 그만큼 충분히 강력한 도구를 사용하지 못하고 있다는 것이다." - Linus Torvalds
(If you worry about how to write code, you're not using powerful enough tools.)

"프로그래밍은 작은 실수를 찾는 것과 큰 실수를 숨기는 것이다." - C.A.R. Hoare
(Programming is about finding small mistakes and hiding big ones.)

"코드는 언젠가는 작동하지 않게 된다. 주석은 언제나 작동한다." - Rick Osborne
(Code will eventually stop working. Comments always work.)

식판 다이어트로 이룬 13kg 감량 성공

동해둘리 — Mon, 18 Sep 2023 21:05:24 +0900

170이 안되는 작은 키에 몸무게는 78kg?

몇달 전 까지만 해도 몸무게가 78kg 이 나갔었다. 운전을 하는데 너무 숨이 가빠서 답답해질 정도로 뱃살은 사정없이 나오기 시작했고, 무거워진 몸 때문에 점점 더 게을러져 갔다.

식판다이어트

그래서 생각해 낸 것이 바로, 식판 다이어트

고심끝에 생각해낸 다이어트 방법은 바로, 식판 다이어트 였다. 먹고싶은건 먹고 싶은데 닭가슴살만 먹는 다이어트는 너무 힘이들고 맛이 없었다.

식판다이어트

먹고싶은건 마음대로 먹지만, 그 양이 식판 하나를 넘지 않을 정도만 먹어보자 라는 원칙을 정해놓고, 그때 그때 먹고싶은 것을 먹기 시작했는데, 이상하게도 양을 제한하니까 기름끼 있는 음식은 점점 줄어들게 되는 이상한 효과를 경험하게 됐다.

식판다이어트

식판 다이어트를 시작한 지 6개월 정도 지났을때, 78kg 이었던 몸무게는 65kg 이 되어 있었고, 가벼워진 몸은 정신까지도 개운하게 만들어 주는 듯 했다. 다만, 그동안 입었던 옷들은 죄다 헐거워 지는 바람에 옷값좀 들게 생겼다.

웹사이트에 환율정보 넣기, 환율정보 가져오기

동해둘리 — Sat, 16 Sep 2023 20:02:52 +0900

Investing.com 에서 제공하는 환율정보

아래 사이트에서 제공하는 환율정보를, 자신의 웹사이트에 넣기 위한 소스를 알려드립니다.

환율정보가져오기

환율정보를 넣는 코드는 다음과 같습니다

1
2
3
4
5
6
7
8
9
10
11
12

<section id="rolling_box" >            
    <div style="text-align:center">
                <p style="font-size:1.6em; font-weight:600; margin-bottom:10px">환율</p>
        <iframe src="https://kr.widgets.investing.com/live-currency-cross-rates?theme=darkTheme&hideTitle=true&cols=last,prev,high,low,change,changePerc&pairs=9511,158,159,650" 
            width="90%" height="300px" frameborder="0" allowtransparency="true" marginwidth="0" marginheight="0"></iframe>
        <div class="poweredBy" style="font-family: Arial, Helvetica, sans-serif;">
            제공자 <a href="https://kr.investing.com?utm_source=WMT&amp;utm_medium=referral&amp;utm_campaign=LIVE_CURRENCY_X_RATES&amp;utm_content=Footer%20Link" 
            target="_blank" rel="nofollow">Investing.com</a>
        </div>        
    </div>
</section>
 
Colored by Color Scripter

cs

해상도에 따라서 아래와 같이 폭이 줄어들면서, 표시되는 정보도 적절하게 줄어듭니다.

자작캠핑카... 나무로 만든 원목 캠핑카 나만의 1호 자작캠핑카

동해둘리 — Tue, 5 Sep 2023 23:04:45 +0900

엉뚱한 짓을 많이하는 동해둘리

이상한 짓을 많이해서 엉뚱하다는 소리를 많이 듣는 저 동해둘리가, 이번에도 엉뚱한 짓을 하나 했습니다.

자작캠핑카

나무로 만든 자작 캠핑카

누구나 한번쯤은 캠핑에 대한 로망을 가지고는 하죠. 처음엔 텐트로 시작해서 타프를 구입하고 테이블을 준비하고.... 그리고, 고속도로를 달릴때 가끔 보게되는 캠핑카를 보게되면 가슴이 두근대기 시작하죠

자작캠핑카

호기심이 생기면 일단 하고보는 동해둘리

호기심이 많은데다가 저지르기를 잘하다 보니, 일단 캠핑카를 만들어 보자 라고 결심하고 제작에 들어갔습니다. 바퀴까지 제가 만들 수는 없으니까, 자작용으로 많이 애용되는 평판 트레일러를 구입해서 제작하기로 결정했습니다.

피나클사에서 나온 RW-600 을 기본 프레임으로 사용하기로 했는데요, 피나클 트레일러는 등화장치 및 배선까지 모두 완벽하게 준비된 제품이라 바로 번호판을 신청해서 받을 수 있는 트레일러 입니다.

우선, 트레일러 위에 바닥판을 재단해서 붙여봅니다. 도로 주행을 하기 때문에 10mm 두꺼운 볼트와 너트로 확실하게 조여주었습니다.

자작캠핑카

기본 뼈대 만들기

도로 주행을 하기 때문에 혹시나 모를 위험이나 파손을 대비하기 위해, 기본 프레임은 철재를 용접하여 만들어 봤습니다.

자작캠핑카

기본 프레임에 기둥 설치

철제 프레임 사이사이에 작은 나무를 촘촘하게 배치하여 고정시켜줍니다.

자작캠핑카

아래 사진은 제가 지었던 목조주택인데요, 마치 목조주택의 스터드(사이기둥)와 같은 역할을 하는 기둥입니다. 목조주택의 기둥도 세로기둥 만으로는 좌우 하중에 취약하지만, 외부에 OSB합판을 붙여줌으로 인해 상하좌우 하중에 강한 구조가 됩니다.

자작캠핑카

목조주택의 OSB 합판역할을 하는 가로판 부착

목조주택의 OSB합판처럼 가로판을 부착해 줍니다

.

네눈박이 진돗개 나리도 궁금한지 안쪽을 둘러보더니 폴짝 올라가 들어가버리네요 ㅎ

자작캠핑카

끝없이 커지는 욕심

만들다 보니, 욕심은 점점 커져갑니다. 기왕이면 넓은 실내공간을 만들어 보기로 해서, 슬라이딩 방식의 확장형 벽체를 만들어 봤습니다.

자작캠핑카

다른 한쪾은 위로 개폐되는 챠양을 만들어 달고, 그쪽도 역시 슬라이딩 방식으로 확장 ㅋㅋㅋ 확장이 된 후에는 싱크대와 가스렌지가 또 다시 돌출되는 구조

자작캠핑카

오랜 노력끝에 완성된 자작캠핑카

어려운 과정이긴 했지만 만드는 내내 행복감을 주었던 나만의 1호 자작 캠핑카가 완성되었습니다.

자작캠핑카

차량등록 사무소에가서 번호판 교부

도로주행을 위해 차량등록사무소에 방문해서 번호판을 교부받았습니다.

자작캠핑카

https://youtu.be/rhI0QJvlOTA

길고양이 치즈와 시도의 하루

동해둘리 — Mon, 4 Sep 2023 08:09:51 +0900

길고양이 치즈와 시도의 하루

게시판 긴 제목 원하는 길이로 자르기/ 자른후에 ... 붙이기/ 문자열자르기 PHP 코드

동해둘리 — Fri, 1 Sep 2023 13:05:22 +0900

문자열 원하는 길이로 자르기

아래와 같이 게시판의 제목을 일정 길이로 잘라내어 한줄로 표시하게 하기위한 PHP 코드입니다.

게시판제목자르기

한글의 경우, 잘못 잘라내면 끝 부분이 깨지는 현상이 생기기도 하는데요, 아래 코드는 그런것 까지 감안해서 한글이 안깨지도록 작성한 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function truncateString($string, $length, $ellipsis = "...") {
    if (mb_strlen($string, 'UTF-8') <= $length) {
        return $string;
    } else {
        return mb_substr($string, 0, $length, 'UTF-8') . $ellipsis;
    }
}
 
$originalString = "이 문자열은 정말 길어서 일정 길이로 잘라내고 표시하려고 합니다.";
$maxLength = 20;
$truncatedString = truncateString($originalString, $maxLength);
 
echo $truncatedString;
 
Colored by Color Scripter

cs

javascript undefined null 체크하기, 자바스크립트 undefined

동해둘리 — Fri, 25 Aug 2023 09:24:24 +0900

javascript undefined 와 null

자바스크립트로 작업을 하는경우, 사용자의 입력값을 확인하는 등의 작업을 할때 간혹 마주치는 것이 undefined 와 null 입니다.

javascript undefined

typeof 로 확인가능

특정 객체의 undefined 또는 Null 유무는 typeof 로 확인이 가능합니다. javascript 의 typeof 는 아래와 같은 형식으로 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11

var num = 42;
var str = "Hello";
var bool = true;
var obj = { key: "value" };
var func = function() { };
 
console.log(typeof num);   // 출력: "number"
console.log(typeof str);   // 출력: "string"
console.log(typeof bool);  // 출력: "boolean"
console.log(typeof obj);   // 출력: "object"
console.log(typeof func);  // 출력: "function"

cs

undefined 와 null 을 확인하기 위한 typeof 는 아래와 같이 사용하여 체크합니다

1
2
3

if(typeof str == "undefined" || str == null || str == "") {
   // 객체가 undefined , null 또는 
}
Colored by Color Scripter

cs

javascript 동적생성, 입력폼 input 박스 등등 동적으로 생성/삭제하기.. 설문조사 항목생성 실전코드

동해둘리 — Mon, 14 Aug 2023 14:02:38 +0900

javascript 동적생성, 입력폼 input 박스

아래와 같이 설문조사를 위한 등록화면에서, 설문조사 항목을 동적으로 생성하는 프로젝트를 진행하게 되어 작업내역을 공개하려고 합니다.

javascript 동적생성

설문조사 항목 동적생성

위 화면에서 '선택형' 또는 '입력형' 을 선택한 후에 + 버튼을 클릭하면, 아래와 같이 설문조사 항목을 입력할 수 있는 입력폼이 동적으로 생성되게 됩니다.

javascript 동적생성

각 질문은 삭제가 가능하며, 선택가능한 항목도 추가 삭제가 가능하게 만들어 봤습니다. 각 선택항목은 위/아래 화살표를 이용하여 위치이동이 가능하도록 만들어 봤습니다.

먼저, 설문조사 항목이 동적으로 추가될 div 를 생성합니다.

1

<div id = "question_box"></div>

cs

설문조사 동적생성 설문항목 동적생성

그런후에 '선택형' 또는 '입력형'을 선택하고 + 버튼을 클릭하면 앞서 정의한 DIV인 question_box 내에 설문항목이 동적으로 추가됩니다.

아래의 AddQuestion() 함수가 + 버튼을 클릭시 실행되는 함수이며, '선택형'과 '입력형'에 따라 각각의 입력폼을 정의하여 동적으로 question_box에 추가하는 코드입니다.

 


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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

var gQuestionNum  = 0;                                
 
function AddQuestion()
{
    gItemNum = 0;
 
    if ( gQuestionType == "" ) {
        alert("질문 타입을 선택하세요"); return false;
    }
 
    // 설문조사 DIV를 읽어온다
    question_box = document.getElementById("question_box");
 
    // 질문 개수를 증가한다 
    gQuestionNum += 1;
 
    // P 엘리먼트를 만들고 question1, question2 ~~ questionN 과 같이 
    // ID를 부여하여, 삭제시 ID를 이용하여 삭제한다 
    const newP = document.createElement('p');
    newP.id = "question" + gQuestionNum;
    
    var sQuestion = "";
 
    if ( gQuestionType == "선택형" )
    {
        // 동적으로 생성할 입력폼을 정의한다
        // AddItem() 함수는 질문의 선택옵션 항목을 추가하기 위해 포함시켰습니다 
        sQuestion = "<table style='width:850px;margin-top:25px;'>" +
            "<tr>" +
                "<td style='width:50px;vertical-align: top;font-size:19px;font-weight:600;'>" +
                    "<div style='margin-top:5px;'>Q</div>" +
                "</td>" +
                "<td style='width:1150px'>" +
                    "<input type = 'hidden' name = 'question" + gQuestionNum + "_type' value = '선택형'>" +
                    "<input type = 'text' id = 'question" + gQuestionNum + "' name = 'question" + gQuestionNum + "' style='width:550px;margin-bottom:5px;float:left;margin-right:30px;' placeholder='질문'>                                    " +
                    "<div onclick = 'RemoveQuestion(" + gQuestionNum + ")' class='arrow-button' style='margin-top:1px' >X</div>" +
                    "<div id = 'item" + gQuestionNum + "'>" +
                        "<div id = 'item_list" + gQuestionNum + "'>" +
                        "</div>" +                                                    
                    "</div>" +                                                
                "</td>" +
            "</tr>" +                                        
            "<tr><td></td><td>" +
            "<div onclick = 'javascript:AddItem(" + gQuestionNum + ")' class='arrow-button' style='font-size:18px;font-weight: 600;'>+</div>" +                                        
            "</td></tr>" +                                        
            "</table>";
 
        newP.innerHTML = sQuestion;
 
        question_box.appendChild(newP);                                
 
    }
    else if ( gQuestionType == "입력형" )
    {
        // 입력형은 질문항목에 대해 응답자가 직접 답을 입력하는 방식(주관식)입니다. 
        sQuestion = "<table style='width:850px;margin-top:25px;'>" +
            "<tr>" +
                "<td style='width:50px;vertical-align: top;font-size:19px;font-weight:600;'>" +
                    "<div style='margin-top:5px;'>Q</div>" +
                "</td>" +
                "<td style='width:1150px'>" +
                    "<input type = 'hidden' name = 'question" + gQuestionNum + "_type' value = '입력형'>" +
                    "<input type = 'text' id = 'question" + gQuestionNum + "' name = 'question" + gQuestionNum + "' style='width:550px;margin-bottom:5px;float:left;margin-right:30px;' placeholder='질문'>                                    " +
                    "<div onclick = 'RemoveQuestion(" + gQuestionNum + ")' class='arrow-button' style='margin-top:1px' >X</div>" +
                    "<div id = 'item" + gQuestionNum + "'>" +
                        "<div id = 'item_list" + gQuestionNum + "'>" +
                        "</div>" +                                                    
                    "</div>" +                                                
                "</td>" +
            "</tr>" +                                        
            "</table>";
 
        newP.innerHTML = sQuestion;
 
        question_box.appendChild(newP);                                
 
    }
 
}    
Colored by Color Scripter

cs

위 코드 중에서 RemoveQuestion() 함수는 생성된 입력폼을 삭제할때 호출되는 함수입니다. 함수의 인자로 질문번호가 전달되며, RemoveQuestion()함수에서는 전달받은 질문번호를 이용하여 질문DIV의 ID를 만들어 삭제하게 됩니다.

1
2
3
4
5
6
7

function RemoveQuestion(nQuestionNum)
{
  question_box = document.getElementById("question_box");
target_question = document.getElementById("question" + nQuestionNum);
  question_box.removeChild(target_question);                               
}
Colored by Color Scripter

cs

아울러, AddItem() 함수는 질문에 대한 선택옵션을 개별로 추가하기 위한 함수로서, 동적으로 생성되는 입력폼 하단에 위치한 버튼에 의해 호출됩니다.

AddItem 함수 호출시에는 질문번호인 nQuestionNum 이 인자로 전달됩니다. 이 질문번호를 이용하여 선택항목을 둘러싸고 있는 item_list DIV를 찾아서 동적생성된 입력폼을 추가하게 됩니다.

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
31
32
33
34
35

//###########################################################
//# 항목추가버튼 + 클릭시 호출되며, 항목을 하나 추가한다 
//###########################################################
function AddItem(nQuestionNum)
{
    item_list = document.getElementById("item_list" + nQuestionNum);
 
    gArItemNum[nQuestionNum] += 1;
 
    var nItemNum = gArItemNum[nQuestionNum];
 
    const newP = document.createElement('p');                                                                
    newP.id = "item" + nQuestionNum + "_" + nItemNum;
 
 
    var ItemName = "array_item_" + nQuestionNum + "[]";
    var ItemId   = "item_id_" + nQuestionNum + "_" + nItemNum;
 
    newP.innerHTML = "<table>" +
                "<tr>" +
                "   <td>" +  
                "       <input type = 'text' id = '" + ItemId + "' name = '" + ItemName + "' style='width:550px;margin-top:5px;' placeholder='항목입력'>" +
                "   </td>" +
                "   <td style='width:250px'>" + 
                "       <div onclick = \"javascript:MoveItem('UP','" + nQuestionNum + "','" + ItemId + "')\" class='arrow-button'>▲</div>" +
                "       <div onclick = \"javascript:MoveItem('DOWN','" + nQuestionNum + "','" + ItemId + "')\" class='arrow-button'>▼</div>" +
                "       <div onclick = \"javascript:RemoveItem('" + nQuestionNum + "','" + newP.id + "')\" class='arrow-button'>X</div>" +
                "   </td>" +
                "</tr>" +
                "</table>";
 
 
    item_list.appendChild(newP);   
    
}
Colored by Color Scripter

cs

실전에서 작업하면서, 그때그때 수정하다보니 코드가 좀 지저분 합니다... 양해바랍니다^^

웹스크래핑으로 채용정보 가져오는 PHP코드, 예제 ... 웹크롤링과 웹스크래핑의 차이

동해둘리 — Thu, 10 Aug 2023 07:20:18 +0900

웹스크래핑으로 채용정보 가져오기

웹스크래핑은 특정 웹페이지의 데이터를 가져와서 원하는 데이터를 추출하여 가공 또는 표시하는 방법을 말합니다. 반면 웹크롤링은 여러 URL을 반복적으로 탐색해서 데이터를 가져오는 방법입니다.

저는 웹스크래핑을 설명드릴건데요, 제가 작업했던 실 사례를 들어서 설명해 볼까 합니다.

웹스크래핑 채용정보

장애인 고용포털 사이트에서 채용정보 가져오기

저의 경우는 [장애인 고용포털 사이트] 에 올라와 있는 취업정보를 가져와서 브라우저에 표시하는 작업이었습니다. 개발언어는 PHP로 개발했습니다.

웹스크래핑 채용정보

전체 코드를 먼저 살펴보시죠

아래에 전체 PHP 코드가 있습니다. 원하는 웹페이지의 데이터를 crul 을 이용하여 가져와서 파싱하는 방법을 사용했습니다. curl은 다양한 프로토콜로 데이터 전송이 가능한 Command Line Tool 입니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<?php
 
//접속 할 URL을 지정
$url = "https://www.worktogether.or.kr/empInfo/empInfoBbs/empScrapInfoList.do";
 
//cURL 세션 초기화
$ch = curl_init();
 
//URL과 옵션을 설정
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // https 일때 이 한줄 추가 필요
 
//cURL 실행
$str = curl_exec($ch);
 
$enc = mb_detect_encoding($str, array('EUC-KR', 'UTF-8', 'shift_jis', 'CN-GB'));
if ($enc != 'UTF-8') {
    $str = iconv($enc, 'UTF-8', $str);
}
 
include_once 'simple_html_dom.php';
 
$html = new simple_html_dom(); // Create a DOM object
$html->load($str); // Load HTML from a string
 
 
$ret = $html->find( 'tr td' );
 
 
//var_dump($ret);
 
//결과 표시
//var_dump($str);
 
//세션을 종료
curl_close($ch);
 
?>
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<?
for ( $k = 1; $k <= 60; $k++ )
{
    $ret[$k] = str_replace("/empInfo/", 'https://www.worktogether.or.kr/empInfo/', $ret[$k]);    
    $ret[$k] = str_replace("<a ", "<a target='NEW'", $ret[$k]);
    $ret[$k] = str_replace("<br>", "", $ret[$k]);
    $ret[$k] = str_replace("  ", " ", $ret[$k]);
    $ret[$k] = str_replace("<td ", "<td style='font-size:16px;height:45px;' ", $ret[$k]);
}
 
?>
<table style="width:100%;" border = "1">
    <tr>
        <td style="color:#676767;border-top:1px solid black;font-size:15px;height:42px;text-align:center;width:50px;">번호</td>
        <td style="color:#676767;border-top:1px solid black;font-size:15px;height:42px;text-align:left;width:110px;">분류</td>
        <td style="color:#676767;border-top:1px solid black;font-size:15px;height:42px;text-align:left;width:750px;">제목</td>
        <td style="color:#676767;border-top:1px solid black;font-size:15px;height:42px;text-align:left;width:18%;">등록기관</td>
        <td style="color:#676767;border-top:1px solid black;font-size:15px;height:42px;text-align:left;width:18%;">등록/마감일</td>
    </tr>
    <?
 
    for ( $k = 0; $k < 10; $k++ )
    {
        $myIndex = ($k * 6 ) + 1;
 
        ?>
        <tr>
            <td style="text-align:center;"><?echo $k+1;?></td>
            <?echo $ret[$myIndex ];?>
            <?echo $ret[$myIndex + 1];?>
            <?echo $ret[$myIndex + 2];?>
            <?echo $ret[$myIndex + 3];?>                
        </tr>
        <?
    }
 
?>
</table>
 
</body>
</html>
Colored by Color Scripter

cs

위 코드중에서 curl 접속시의 옵션을 설정하는 부분이 있는데요, 그 중에서 CURLOPT_SSL_VERIFYPEER 는, 접속하려는 URL이 https 프로토콜을 사용하는 경우 설정해 줘야 하는 옵션입니다.

아래와 같이 curl_exec() 함수를 이용하여 데이터를 가져오게 되는데요

1
2

//cURL 실행
$str = curl_exec($ch);

cs

위 함수를 실행한 후에 $str 을 화면에 출력해보면, 아래와 같이 특정 웹사이트의 데이터가 바로 출력되는 걸 확인할 수 있습니다.

웹스크래핑php예제

소스코드를 확인해 보면, 특정 사이트의 소스와 동일하다는 것을 확인할 수 있습니다.

웹스크래핑php예제

HTML DOM Parser 를 이용하여 파싱하기

가져온 소스코드 중에서 내가 원하는 특정 데이터를 추려내기 위해서는 파싱(Parsing)을 해줘야 하는데요, 저의 경우는 tr태그와 td 태그를 추려내여 표시하는 케이스 였습니다

1
2
3
4
5
6

$html = new simple_html_dom(); // Create a DOM object
$html->load($str); // Load HTML from a string
 
 
$ret = $html->find( 'tr td' );
 
Colored by Color Scripter

cs

tr태그와 td태그만을 골라내서 $ret 변수에 넣고 출력하기

아래 부분은 가져온 데이터를 화면에 뿌려준 후에, 클릭시 원래 링크로 이동할 수 있도록 링크를 걸기위한 부분입니다. 이는, 가져온 데이터에 따라 다르기 때문에 참고만 하시기 바랍니다. 중요한 것은 $ret 배열에 있는 데이터 이니까, 각 케이스에 맞게 활용하시면 될듯합니다.

1
2
3
4
5
6
7
8

for ( $k = 1; $k <= 60; $k++ )
{
    $ret[$k] = str_replace("/empInfo/", 'https://www.worktogether.or.kr/empInfo/', $ret[$k]);    
    $ret[$k] = str_replace("<a ", "<a target='NEW'", $ret[$k]);
    $ret[$k] = str_replace("<br>", "", $ret[$k]);
    $ret[$k] = str_replace("  ", " ", $ret[$k]);
    $ret[$k] = str_replace("<td ", "<td style='font-size:16px;height:45px;' ", $ret[$k]);
}
Colored by Color Scripter

cs

웹스크래핑php예제

PHP 시간관련 함수 정리 date() strtotime() time() mktime() date_diff()

동해둘리 — Thu, 3 Aug 2023 01:12:51 +0900

오늘은 PHP에서 자주 사용되는 시간 관련 함수 다섯 가지에 대해 소개해드리겠습니다.

함수소개에 앞서, 먼저 timestamp에 대해 알아볼께요

TIMESTAMP는 1970년 01월 01일 00시 00분 00초로부터 현재까지 몇 초가 지났는지를 정수로 반환한 값입니다. 이 값을 이용하여 더하기/빼기 등의 간단한 연산으로 두 날짜의 차이를 구하거나, 현재 날짜로 부터 몇일 후 날짜값을 얻거나 할때 유용하게 사용할 수 있습니다.

1. date() 함수

date() 함수는 현재 날짜와 시간을 원하는 형식으로 포맷하여 출력하는 함수입니다. 주로 로그 작성, 화면에 날짜 표시 등에 사용됩니다. date함수의 괄호안의 문자는 Ymd 를 제외한 나머지 문자는 자유롭게 입력하면 그 형식대로 표시됩니다.

1
2
3

$today = date("Y년 m월 d일");
echo "오늘은 " . $today . "입니다.";
 

cs

2. strtotime() 함수

strtotime() 함수는 사람이 이해하기 쉬운 형태의 날짜 및 시간 문자열을 타임스탬프로 변환해줍니다. 이는 날짜를 계산하거나 비교할 때 특히 유용합니다. +1 months 또는 +3 days , +1 years 등의 옵션을 사용할 수 있습니다.

1
2
3

$nextWeek = strtotime("+1 week");
echo "다음 주에는 " . date("Y년 m월 d일", $nextWeek) . "입니다.";
 
Colored by Color Scripter

cs

3. time() 함수

time() 함수는 현재 시간의 타임스탬프를 반환합니다. 이를 활용하여 특정 시간과 비교하거나 경과 시간을 계산하는데 유용합니다. 이때의 currentTime 값은 TimeStamp 값입니다.

1
2
3

$currentTime = time();
echo "현재 시간의 타임스탬프: " . $currentTime;
 
Colored by Color Scripter

cs

4. mktime() 함수

mktime() 함수는 주어진 시간 정보를 기반으로 타임스탬프를 생성합니다. 특정 날짜와 시간의 타임스탬프를 얻을 때 사용합니다. 함수의 괄호안은 mktime([시간], [분], [초], [월], [일], [연도]) 형식으로 사용하실 수 있습니다.

1
2
3

$timestamp = mktime(12, 30, 0, 8, 3, 2023);
echo "지정한 날짜와 시간의 타임스탬프: " . $timestamp;
 
Colored by Color Scripter

cs

5. date_diff() 함수

date_diff() 함수는 두 날짜 사이의 차이를 계산하여 날짜 간격을 반환합니다. 이를 통해 이전 날짜와 현재 날짜 사이의 일수를 구할 수 있습니다. timestamp 는 정수이기 때문에 두 날짜의 차이를 구하는 것은 더하기 빼기로도 가능한데요, date_diff 함수는 timestamp 값을 더하거나 뺀 후에 이를 다시 날짜로 변환시켜주는 함수 입니다.

1
2
3
4
5

$pastDate = new DateTime('2023-07-01');
$currentDate = new DateTime();
$interval = date_diff($pastDate, $currentDate);
echo "과거로부터 " . $interval->format('%a') . "일이 지났습니다.";
 
Colored by Color Scripter


cs

PHP 배열관련 함수 총정리... array_push() array_pop() array_shift() array_unshift() array_slice() array_merge()

동해둘리 — Wed, 2 Aug 2023 10:38:31 +0900

PHP 언어에서 제공하는 배열과 관련된 함수

오늘은 PHP에서 제공하는 배열과 관련된 함수를 총 정리 해볼까 합니다.

1. count($array)

count() 함수는, 배열에 포함된 요소의 개수를 반환합니다. 사용자가 선택한 항목의 개수를 파악하거나 반복문의 범위를 지정할 때 사용하면 좋습니다

1
2
3
4
5
6

$fruits = ["사과", "바나나", "딸기"];
 
$fruit_count = count($fruits);
 
echo "과일의 개수: " . $fruit_count;
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

과일의 개수: 3

2. array_push($array, $value1, $value2, ...)

array_push()함수는, 배열의 끝에 하나 이상의 요소를 추가합니다. 사용자가 입력한 데이터를 배열에 추가할 때 사용하면 됩니다

1
2
3
4
5
6

$fruits = ["사과", "바나나"];
 
array_push($fruits, "딸기", "오렌지");
 
print_r($fruits);
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

Array ( [0] => 사과 [1] => 바나나 [2] => 딸기 [3] => 오렌지 )

3., array_pop($array)

array_pop() 함수는, 배열에서 마지막 요소를 제거하고 반환합니다. 예를 들어, 가장 최근의 항목을 제거할 때 유용합니다.

1
2
3
4
5
6

$fruits = ["사과", "바나나", "딸기"];
 
$last_fruit = array_pop($fruits);
 
echo "마지막 과일: " . $last_fruit;
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

마지막 과일: 딸기

4. array_shift($array)

array_shift() 함수는, 배열에서 첫 번째 요소를 제거하고 반환합니다. 가장 오래된 항목을 제거하거나 처리할 때 사용할 수 있습니다.

1
2
3
4
5
6

$fruits = ["사과", "바나나", "딸기"];
 
$first_fruit = array_shift($fruits);
 
echo "첫 번째 과일: " . $first_fruit;
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

첫 번째 과일: 사과

5. array_unshift($array, $value1, $value2, ...)

array_unshift() 함수는, 배열의 앞에 하나 이상의 요소를 추가합니다. 사용자가 입력한 데이터를 배열의 시작 부분에 추가할 때 유용합니다.

1
2
3
4
5
6

$fruits = ["사과", "바나나"];
 
array_unshift($fruits, "딸기", "오렌지");
 
print_r($fruits);
 
Colored by Color Scripter

cs

위와 같이 실행했을 경우 아래와 같이 출력됩니다.

Array ( [0] => 딸기 [1] => 오렌지 [2] => 사과 [3] => 바나나 )

6. array_slice($array, $offset, $length)

array_slice()함수는, 배열에서 특정 범위의 요소들을 추출하여 새로운 배열로 반환합니다. 특정 부분의 데이터를 추출하거나 나누는 데 유용합니다.

1
2
3
4
5
6

$fruits = ["사과", "바나나", "딸기", "오렌지", "수박"];
 
$sliced_fruits = array_slice($fruits, 1, 3);
 
print_r($sliced_fruits);
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

Array ( [0] => 바나나 [1] => 딸기 [2] => 오렌지 )

7. array_merge($array1, $array2, ...)

array_merge()함수는, 여러 개의 배열을 하나로 병합합니다. 다양한 배열을 하나로 합치는데 유용합니다.

1
2
3
4
5
6
7

$fruits = ["사과", "바나나"];
$vegetables = ["당근", "오이"];
 
$merged_array = array_merge($fruits, $vegetables);
 
print_r($merged_array);
 
Colored by Color Scripter

cs

위와 같이 실행할 경우 아래와 같이 결과가 출력됩니다

Array ( [0] => 사과 [1] => 바나나 [2] => 당근 [3] => 오이 )

자주 쓰이는 PHP 함수 isset() strlen() explode() 활용법 알아보기

동해둘리 — Mon, 31 Jul 2023 17:14:56 +0900

오늘은 PHP에서 자주 활용되는 함수들을 살펴보고, 간단한 예시를 통해 사용법을 배워보려고 합니다.

isset() 함수: 변수가 설정되어 있는지 확인하기

먼저, isset() 함수는 변수가 설정되어 있는지 확인하는 유용한 도구입니다. 변수가 설정되어 있다면 true를 반환하고, 설정되어 있지 않다면 false를 반환합니다. 아래의 예시를 통해 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
$variable1 = 42;
$variable2 = "Hello, world!";
 
if (isset($variable1)) {
    echo "\$variable1은 설정되어 있어요!<br>";
} else {
    echo "\$variable1은 설정되지 않았네요.<br>";
}
 
if (isset($variable2)) {
    echo "\$variable2는 설정되어 있어요!<br>";
} else {
    echo "\$variable2는 설정되지 않았네요.<br>";
}
?>
 
Colored by Color Scripter

cs

 
 
 
위의 코드에서 $variable1과 $variable2는 값이 할당되어 있으므로, isset() 함수는 두 경우 모두 true를 반환합니다. 이를 통해 변수의 존재 여부를 확인할 수 있습니다. 
 
 
 
 
strlen() 함수: 문자열의 길이 알아내기 
다음으로, strlen() 함수는 문자열의 길이를 측정하는 데에 사용됩니다. 문자열의 길이를 알아내는 것은 텍스트 처리에 자주 활용되는 작업입니다. 아래의 예시를 통해 살펴보겠습니다.
 

1
2
3
4
5
6
7
8

<?php
$myString = "Hello, PHP World!";
 
$length = strlen($myString);
 
echo "문자열의 길이는 $length 입니다.";
?>
 
Colored by Color Scripter

cs

 
 
 
explode() 함수: 문자열을 배열로 분할하기 
또 다른 유용한 함수인 explode()는 문자열을 구분자를 기준으로 분할하여 배열로 반환해주는 함수입니다. 주로 CSV 파일과 같은 데이터 처리에 자주 사용됩니다. 예시를 통해 살펴보겠습니다.
 

1
2
3
4
5
6
7
8
9
10

<?php
$data = "apple,banana,orange";
 
$fruits = explode(",", $data);
 
echo "첫 번째 과일: " . $fruits[0] . "<br>";
echo "두 번째 과일: " . $fruits[1] . "<br>";
echo "세 번째 과일: " . $fruits[2] . "<br>";
?>
 
Colored by Color Scripter

cs

 
위의 코드에서 explode() 함수를 사용하여 $data 문자열을 쉼표를 기준으로 분할하여 $fruits 배열로 만들었습니다. 이를 통해 과일 데이터를 쉽게 접근하고 활용할 수 있습니다.
 
 

유튜브 촬영장비, 스튜디오 장비 준비하기

동해둘리 — Sun, 23 Jul 2023 07:55:33 +0900

유튜브 촬영을 위한 장비와 스튜디오를 준비했습니다

저 동해둘리가 준비중인 목공사업을 위해 마케팅 용도로 도움을 주기위해 유튜브 스튜디오를 준비해봤습니다.

유튜브촬영장비

첫 도전이니까 저렴한걸로 시도

처음으로 유튜브 촬영을 시도하는 거라서, 장비는 일단 저렴한 것으로 준비해서 테스트 해보기로 했습니다. 쿠팡에서 2개 세트가 48,500원 하는 촬영조명을 구입했습니다.

유튜브조명

전구는 별도로 구입을 해야 합니다. 같은 업체에서 판매하는 50w 전구를 2개 구입했습니다. 크기가 가늠이 잘 안되긴 했지만, 막상 구입해보니 생각보다 엄청 큰 전구였습니다.

유튜브조명

스튜디오조명

조명세트에 전구를 부착했습니다. 전구 부착 후에는 화이트디퓨저 라는 천을 씌우게 되는데요, 가장자리 부분에 튼튼하게 박음질이 되어 있어서, 끼우기만 하면 설치가 완료되더군요

유튜브촬영장비

조명크기를 보니 생각보다 엄청 컸습니다.

유튜브촬영장비

지향성 마이크도 하나 구입했습니다

마이크는 저가형이지만, 노이즈 캔슬링과 지향성 기능이 탑재된 마이크를 구입했습니다.

유튜브촬영장비

이렇게 해서 완성된 저만의 스튜디오

처음이라 많이 부족하지만, 저만의 스튜디오를 완성했습니다.

유튜브촬영장비

길고양이가 찾아왔어요, 새끼 길고양이 먹이챙겨주기

동해둘리 — Thu, 20 Jul 2023 08:26:36 +0900

지긋지긋하던 장맛비가 그친 어느 날

지긋지긋하던 장맛비가 그친 어느날, 집 뒷편 창고에서 새끼 고양이 울음소리가 들려옵니다. 나가보니 한달 쯤 되어보이는 고양이 한마리가 쳐다보며 울고있네요

새끼길고양이

츄르를 준비해서 근처에 두었더니, 한참이 지나서 다가옵니다.

새끼길고양이

그런데 한 마리가 아니었어요. 턱시도 새끼 고양이도 출현!!!

새끼길고양이

둘이 같은 날 태어난듯 비슷한 크기의 새끼 고양이....

새끼길고양이

츄르를 금방 먹어버려서 고양이캔을 조금 더 주어 봤는데, 게걸스럽게 먹어제낍니다.

새끼길고양이

치즈 고양이는 사람손을 탓는지 근처에서 애교를 떨기 시작합니다.

새끼길고양이

요녀석들 챙기느라 한동안 바빠질 듯 하네요.... 손을 안타게 하는게 좋은건지 고민도 되고... 암튼, 귀여운 녀석들과 함께하는 아침이라 흐뭇합니다.

새끼길고양이

청주사는데 진짜 징글징글하게 비가 옵니다. 앞으로도 비소식이 쭈~욱 이어지는데 산사태도 걱정이고...

동해둘리 — Tue, 18 Jul 2023 12:13:06 +0900

청주에 사는데 비가 정말 징글징글하네요

살다살다... 이렇게 오래, 이렇게 많이 내리는 비는 처음 보네요. 새끼 고양이 한마리도 비를 피해 창고로 숨어들었다가 깜짝 놀라 도망갑니다.

청주비소식

벌써 5일넘게 내리는 비

집 주변이 산으로 둘러쌓여 있어서 이제는 산사태도 걱정이 되는 상황이네요.

청주비소식

더큰 문제는 청주 날씨예보가 다음주에도 계속 비소식이 있다는 겁니다. 지반이 너무 약해저 있는데 비소식은 계속 이어지니 큰일이네요

요녀석도 멀리 못가고 창고 주변을 서성이는데, 먹이라도 좀 챙겨줘야 겠습니다.

동영상 얼굴보정, PC 모바일 둘 다 지원되는 동영상 편집 프로그램

동해둘리 — Sun, 16 Jul 2023 12:17:39 +0900

동영상 얼굴보정하기

사진을 찍은 후에 얼굴의 잡티를 없애주거나 피부톤을 보정해주는 프로그램은 많지만, 동영상 속의 얼굴을 보정하는 프로그램은 찾기가 쉽지 않습니다.

동영상 얼굴보정

쉬운 동영상 얼굴보정 프로그램 필모라

필모라 라는 프로그램은 동영상 속의 얼굴을 다양한 필터를 통해 보정을 해주는 기능을 가지고 있습니다. 프로그램을 설치한 후에 실행시키면 다음과 같은 첫화면이 나옵니다.

동영상얼굴보정

새 프로로젝트를 클릭한 후에 , 아래 동그라미 부분을 클릭해서 편집할 영상을 불러옵니다. 드래그를 해서 넣어도 됩니다.

동영상얼굴보정

동영상이 아래 동그라미 있는 곳으로 들어왔습니다. 이를 편집하기 위해서는 동영상을 드래그 해서 화살표가 가르키는 위치로 내려주어야 합니다.

동영상얼굴보정

영화의 필름처럼 동영상이 들어가는걸 볼 수 있습니다. 그리고, 오른쪽 상단에 큰 화면으로 영상이 보여지게 됩니다. 아래 동그라미 부분의 빨간색 아이콘이 현재 위치를 표시해 주는 곳입니다. 이를 좌우로 움직이면 동영상이 해당 시간대로 이동하게 됩니다.

동영상얼굴보정

동영상 얼굴보정하기

동영상의 얼굴을 보정하려면, 아래 화면처럼 '이펙트 효과 아이콘을 클릭한 후에, 원하는 필터를 검색하시면 됩니다. 일반적으로 사용되는 잡티제거 등을 하려면 [뷰티] 라고 검색한 후에 [뷰티스킨]을 사용하면 됩니다.

동영상얼굴보정

[뷰티스킨] 효과를 드래그 해서 하단부의 동영상 위치로 넣어주면, 동영상에 [뷰티스킨] 필터가 적용됩니다. 동영상의 길이에 맞도록 [뷰티스킨] 바를 늘려주거나 이동시키면 원하는 위치에 효과를 적용할 수 있습니다.

동영상얼굴보정

[뷰티스킨] 바를 클릭하면, 우측에 옵션 설정 화면이 나옵니다. 여기에서 [뷰티스킨]을 On 을 세팅한 후에, 색상/ 알파/ 반지름/ 허용오차 등을 조정하면 바로바로 얼굴보정이 됩니다.

동영상얼굴보정

아래의 왼쪽이 얼굴보정 전이고, 오른쪽이 보정이 적용된 화면입니다.

동영상얼굴보정

카카오 로그인 설정하기, Kakao API 이용한 로그인 구현, 카카오톡 로그인 PHP코드

동해둘리 — Wed, 12 Jul 2023 13:52:37 +0900

카카오 로그인 설정하기

웹사이트에서 카카오 로그인을 이용하는 방법에 대해 설명하고자 합니다. 카카오 로그인을 이용하기 위해서는 우선, 카카오 개발자 사이트에 가입해야 합니다.

카카오로그인

내 애플리케이션 등록

가입한 후에는 내 어플리케이션을 등록해 주어야 합니다. [어플리케이션 추가하기]를 통해 추가하시면 됩니다. 이번 포스팅에서는 카카오 로그인 API 사용에 대한 설명위주라서, 카카오 개발자 센터 가입이나 어플리케이션 등록에 대한 설명은 자세히 하지 않겠습니다.

카카오api

API 키 확인하기

[내 애플리케이션 등록] 후에는 API를 사용하기위한 KEY 값을 확인해 주셔야 합니다. 이 키값을 통해 웹사이트와 API간에 통신을 하게됩니다.

카카오로그인구현 카카오로그인구현

로그인 페이지 작성

먼저, 아래와 같이 로그인을 위한 페이지를 작성합니다.

카카오로그인

위 이미지는 일반로그인과 네이버로그인, 카카오 로그인이 모두 포함된 예제입니다. 소스코드는 아래와 같습니다. 아래 소스코드의 GoToLogin() 함수는 일반적인 아이디와 비번으로 로그인 하는 경우이므로 참고만 하시기 바랍니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

<html>
<head>
</head>
<body topmargin = "0" leftmargin="0">
<center>
 
<link rel="stylesheet" type="text/css" href="css/lib.css" >
<link rel="stylesheet" type="text/css" href="css/common.css" >
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript" src="js/style.js"></script>
 
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
 
<script language = "javascript">
        
    function GoToLogin() {
        var obEmail       = document.getElementById("email");
        var obPasswd      = document.getElementById("passwd");
 
        if (!obEmail.value) {
            alert("이메일을 입력하세요!");
            obEmail.focus();    
            return;
        }
        else if (!obPasswd.value) {
            alert("비밀번호를 입력하세요!");
            obPasswd.focus();    
            return;
        }
 
        var sEmail    = obEmail.value;
        var sPasswd   = obPasswd.value;
 
        sEmail = sEmail.trim();
        sPasswd = sPasswd.trim();
 
        var strURL = "general_login_check.html"; // DB에 접속하여 이미 가입한 회원인지 확인하는 페이지 
        strURL = strURL + "?email=" + sEmail;
        strURL = strURL + "&passwd=" + sPasswd;    
 
        $.ajax({
            url : strURL,
            dataType: 'html'
        }).done(function(data) {
 
            if ( data.trim() != "" ) {
                if ( data.trim() == "LOGIN_OK" ) { // 로그인 성공
                    window.document.location.href = "./kebi_mypage.html"; // 로그인 성공시 이동할 페이지를 입력합니다. 
                }
                else if ( data.trim() == "NOT_ENROLL_EMAIL" ) { // 등록되지 않은 이메일
                    alert("회원가입 하지 않은 이메일 입니다");
                }
                else if ( data.trim() == "PASSWD_ERROR" ) { // 비밀번호 오류
                    alert("잘못된 비밀번호 입니다");
                }
            }
        })    
    }
 
</script>
 
 
<article class="contain-sub login" style="width:50%">
 
    <section class="cont-login">
        <input type="text" value = "<?echo $_REQUEST['email'];?>" name = "email" id = "email"  placeholder="이메일 계정" class="input-login-mail" >
        <input type="password" value = "<?echo $_REQUEST['passwd'];?>" name = "passwd" id = "passwd" placeholder="비밀번호" class="input-login-password" >
        <span class="btn-type1"><button OnClick = "javascript:GoToLogin()">로그인</button></span>
    </section>
 
    <p class="line-division"><span>또는</span></p>
<?php
 
 
    //카카오 개발자사이트 에서 발급받은 REST API키를 입력합니다 
    $restAPIKey = "REST API KEY입력"; 
 
    // 카카오 로그인 후, 결과값을 받을 페이지 주소를 입력합니다. 
    $callbacURI = urlencode("https://www.gongkebi.com/login_redirect_kakao.html");  
    
    $kakaoLoginUrl = "https://kauth.kakao.com/oauth/authorize?client_id=".$restAPIKey."&redirect_uri=".$callbacURI."&response_type=code";
 
 
 
    //네이버로그인
    //네이버 개발자사이트 에서 발급받은 client_id 를 입력합니다 
    $client_id = "JQeTR****3p7H1"; // 위에서 발급받은 Client ID 입력
    $redirectURI = urlencode("https://www.gongkebi.com/login_redirect_naver.html"); //자신의 Callback URL 입력
    $state = "RAMDOM_STATE";
    $apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=".$client_id."&redirect_uri=".$redirectURI."&state=".$state;
?>
 
    <section class="cont-login-other">
        <a href="<?php echo $apiURL ?>">
            <span class="btn-login-naver"><button>네이버로 로그인</button></span>
        </a>        
        <a href="<?= $kakaoLoginUrl ?>">
            <span class="btn-login-kakao"><button>카카오로 로그인</button></span>
        </a>        
    </section>
 
    <section class="cont-link-join">
        <p>아직 계정이 없으신가요? <a href="./kebi_enroll.html">회원가입 하기</a></p>
        <p>비밀번호를 잊어버리셨나요? <a href="./password_find.html">비밀번호 찾기</a></p>
    </section>
 
    <div id="status">
    </div>
    
</article>
 
</body>
</html>
 
 
Colored by Color Scripter

cs

로그인 처리 절차

위 화면에서 [카카오로 로그인] 버튼을 클릭하게 되면, 아래와 같이 카카오 로그인 창이 뜨게 됩니다.

카카오로그인php

2단계 인증이 진행됩니다.

카카오 아이디로 로그인 하게되면 2단계 인증절차가 진행됩니다.

카카오로그인구현

카카오 로그인 결과값이 넘어옵니다

로그인이 성공하게 되면 아까 윗 부분의 소스코드 내에 기록되어 있던 callbacURI 경로로 결과값이 넘어오게 됩니다. 아래에 있는 callbacURI 부분 입니다.

1
2
3
4
5
6
7
8
9
10
11
12

 
 
    //카카오 개발자사이트 에서 발급받은 REST API키를 입력합니다 
    $restAPIKey = "REST API KEY입력"; 
 
    // 카카오 로그인 후, 결과값을 받을 페이지 주소를 입력합니다. 
    $callbacURI = urlencode("https://www.gongkebi.com/login_redirect_kakao.html");  
    
    $kakaoLoginUrl = "https://kauth.kakao.com/oauth/authorize?client_id=".$restAPIKey."&redirect_uri=".$callbacURI."&response_type=code";
 
 
 
Colored by Color Scripter

cs

카카오 로그인 결과값을 받아서 사이트내 로그인 처리를 합니다

카카오 로그인 결과가 넘어오면 그 값을 가지고 웹사이트의 데이터베이스에 INSERT 하거나, 이미 가입된 경우 로그인 하도록 처리하면 됩니다.

아래 내용이 callbacURI 로 지정되어 있는 login_redirect_kakao.html 문서의 내용입니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

<?
 
    $returnCode = $_GET["code"]; // 서버로 부터 토큰을 발급받을 수 있는 코드를 받아옵니다.
    $restAPIKey = "REST API KEY"; // 본인의 REST API KEY를 입력해주세요
    $callbacURI = urlencode("https://www.gongkebi.com/login_redirect_kakao.html"); // 본인의 Call Back URL을 입력해주세요
 
    // API 요청 URL
    $returnUrl = "https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=".$restAPIKey."&redirect_uri=".$callbacURI."&code=".$returnCode;
    
    $isPost = false;
    
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $returnUrl);
    curl_setopt($ch, CURLOPT_POST, $isPost);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    
    $headers = array();
    $loginResponse = curl_exec ($ch);
    $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close ($ch);
    
    $accessToken= json_decode($loginResponse)->access_token; 
    $header = "Bearer ".$accessToken; // Bearer 다음에 공백 추가
    $getProfileUrl = "https://kapi.kakao.com/v2/user/me";
 
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $getProfileUrl);
    curl_setopt($ch, CURLOPT_POST, $isPost);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 
    $headers = array();
    $headers[] = "Authorization: ".$header;
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
 
    $profileResponse = curl_exec ($ch);
    $status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close ($ch);
 
 
    $profileResponse = json_decode($profileResponse);
 
    $userId = $profileResponse->id;
    $userNickName = $profileResponse->properties->nickname;
    $userEmail = $profileResponse->kakao_account->email;
 
 
    if ( $userId != "" ) {

        include "./kebi_dbconn.inc";
 
        SetCookie("id",$userId,time()+60*60*24*7,"/");
        SetCookie("email",$userEmail,time()+60*60*24*7,"/");
        SetCookie("login_gu","kakao",time()+60*60*24*7,"/");
 
        date_default_timezone_set('Asia/Seoul');
        
        $signdate    = time();
        $enroll_date = date("Y") . date("m") . date("d");
 
        //###########################################################
        //# START : 동일한 아이디가 존재하는지 확인후 INSERT
        //###########################################################        
 
        $login_gu = "kakao";
 
        $sIsDuplQuery = "SELECT id, login_gu, linknum FROM member WHERE id = '$userId' AND login_gu = '$login_gu'";
        $rIsDuplResult = mysqli_query($dbconn,$sIsDuplQuery);
        $nIsDuplCount = mysqli_affected_rows($dbconn);        
 
        $IsDuplRow = mysqli_fetch_array($rIsDuplResult);    
 
        $my_id  = $IsDuplRow[id];                    
        $linknum  = $IsDuplRow[linknum];                    
        
        if ( $my_id != "" ) { //# 이미 로그인한 경험이 있는경우 
            SetCookie("linknum",$linknum,time()+60*60*24*7,"/");        
 
            ?>
            <script language = "javascript">                
// 기존 회원의 경우, 로그인 완료시 이동할 페이지
                window.document.location.href = "./kebi_mypage.html";
            </script>
            <?
        }
        else { //# 처음 로그인한 경우 
 
        
// 데이터베이스의 회원테이블에 입력
            $query = " INSERT INTO member (id, name, nickname, email, login_gu, signdate, enroll_date, member_gu, linknum )";
            $query = $query . " VALUES ('$userId', '$name', '$userNickName', '$userEmail', 'kakao', $signdate, '$enroll_date','member', $linknum )";
 
            $result = mysqli_query($dbconn,$query);
 
            ?>
            <script language = "javascript">
                window.document.location.href = "./kebi_mypage.html";
            </script>
            <?
        }
        //###########################################################
        //# END : 동일한 아이디가 존재하는지 확인후 INSERT
        //###########################################################        
 
        mysqli_close($dbconn);
 
    }
    else  {
        ?>
        <script language = "javascript">
            window.document.location.href = "./kebi_login.html";
        </script>
        <?
    }
?>
 
 
Colored by Color Scripter

cs

아래 이미지는 로그인이 완료되었을때 이동하는 페이지 인데요, 참고하시라고 올렸습니다.

카카오로그인

생각을 넓혀라, 그렇지 않으면 똑같은 일만 하게 될 것이다...[오늘의 명언]

동해둘리 — Sun, 9 Jul 2023 08:59:49 +0900

오랜만에 손에는 책

아주 오랜만에 ... 정말 오랜만에 손에들게 된 책.

오늘의명언

그 속에서 찾아낸 한문장

'생각을 넗혀라, 그렇지 않으면 똑같은 일만 하게 될 것이다'

에디슨을 비로하여 헨리포드 등 너무나도 유명한 사람들을 성공으로 이끌게 한 원칙을 정리해 놓았다는 책 '생각하라 그리고 부자가 되어라'

그 시작은 바로 '생각'

오늘의명언

생각을 바꿈으로 인해서 벌어지는 놀라운 효과를 직접 경험하고 실현시킨 많은 사람들의 실제 사례를 바탕으로 했기에, 한번 따라해 보기로 했다.

웹상에서 엑셀파일 보기, 엑셀파일 보는 웹사이트

동해둘리 — Fri, 7 Jul 2023 12:32:31 +0900

웹상에서 엑셀파일을 볼 수 있는 웹사이트가 여러곳 있는데요,

아래와 같은 형식의 엑셀파일을 업로드해서 확인해 봤습니다.

근데, 뭔가 엉뚱한 데이터가 보여지기도 하고, 테이블 형식도 뭔가 다르게 표시가 됩니다.

웹상에서엑셀파일보기

두번째 사이트에서 테스트 해봐도 잘 안되고.....

웹상에서엑셀파일보기

그러다가, 정확하게 동일한 형태로 표시되는 사이트를 찾았습니다.

웹상에서엑셀파일보기

아래 발간색 주소로 접속하신 후에 엑셀파일을 드래그 하시면 바로 확인할 수 있습니다.

웹상에서엑셀파일보기

슈퍼맨 처럼 자세를 취하는 것만으로도 달라진다 ... 오늘의 명언

동해둘리 — Thu, 6 Jul 2023 09:26:19 +0900

지금의 현실에 만족하고 계신가요?

만족하신다면 축하드립니다^^ 하지만, 무언가 바꾸고 싶은게 있으시다면, 무언가 얻고 싶은게 있으시다면, 그리고, 무언가 이루고 싶은게 있으시다면 이렇게 해보세요

출처 : KELLY CHOI 유튜브

자세를 바꿔 보세요

자세를 바꾸는 것 만으로도 많은 변화가 일어난다고 합니다. 슈퍼맨처럼 가슴을 쫙 펴는 것 만으로도 마음이 달라지고 행동이 달라진다고 합니다.

출처 : KELLY CHOI 유튜브

제가 롤 모델로 삼고있는 KELLY CHOI 가 유튜브 강의에서 한 말입니다. 그저 자세를 바꾸는 것 하나가 얻을 수 있는 좋은 영향을 소개하고 있습니다.

출처 : KELLY CHOI 유튜브

이미 성공한 분이지만, 많은 이들에게 좋은 영향력을 끼치는 것에 많은 힘을 쏟고있는 KELLY CHOI 의 강연을 듣고 하나하나 따라해 보려고 노력중입니다.

함께 따라해 보시지 않으실래요?

더울땐 역시 막국수가 정답... 청주 공이막국수 다녀왔어요

동해둘리 — Mon, 3 Jul 2023 16:25:05 +0900

더워도 너무 덥네요....

30도가 넘는 무더위가 몇일째 이어지고 있네요. 날 더울땐 역시 시원한 막국수가 최고죠^^ 오늘은 청주 공이막국수 집에 다녀왔습니다.

청주공이막국수

허영만 화백의 식객 관련된 포스터가?

식객의 저자 허영만 화백의 글과 그림이 벽에 붙어있더라구요, [공이] 가 뭔지 설명해 주는 글인데...

청주공이막국수

그림속의 코주부 아저씨 이름이 저랑 똑같네요 ㅋㅋㅋ

오늘은 좀 과하게 시켰네요

수육도 하나 시키고 , 만두도 시키고 막국수 까지 !!!

청주공이막국수

비비기 전에 찍었어야 했는데, 저도 모르게 열심히 비비고 있다가 생각나서 한장 찰칵 ^^

청주공이막국수

어머님도 좋아하시는 막국수라 종종 막국수집을 찾고는 합니다. 덩달아 청주의 명물 덕산막걸리도 한잔 곁들이면 최고의 점심이 된답니다.

청주공이막국수

더운 여름날, 모두들 무리하지 마시고 시원하게 보내시길 바랍니다^^

pdf뷰어, pdf viewer 웹상에서 pdf 볼수있는 오픈소스

동해둘리 — Fri, 30 Jun 2023 09:39:58 +0900

pdf를 웹상에서 바로보기

pdf문서를 웹상에서 바로보기 위해서는 여러가지 방법이 있는데요. 대부분은 브라우저에 플러그인이 있어서, pdf문서를 브라우저에서 바로 볼수 있긴 합니다.

pdf뷰어

플러그인이 없거나 모든 브라우저에서 보게 하려면?

하지만, 플러그인이 설치되지 않았을 경우, 또는 여러가지 브라우저에서 모두 보이게 하려면 별도의 코딩이 필요하겠죠. 오늘 소개드리려는 pdf 뷰어는 PDF.js 입니다.

또한, 전체화면이 아니라 일부분에 pdf 문서를 표시하고자 할때에도 별도의 pdf뷰어를 설치해야 합니다.

pdf뷰어

위 사이트에서 다운로드 버튼을 눌러 소스코드를 다운로드 받은 후에, 압축을 해제하고 서버에 업로드 합니다. 그리고는 web 폴더내에 있는 viewer.html 문서를 브라우저에서 열어봅니다.

별다른 코딩없이 예제만 실행시켜봐도 웹상에서 바로 pdf 문서가 열리는 걸 확인할 수 있습니다.

pdf뷰어

iframe 으로 브라우저의 일부 영역에 pdf 문서를 표시하기

이제, 브라우저의 전체화면이 아니라, 내가 원하는 특정 영역에 내가 원하는 크기로 pdf 문서를 표시하기 위해서는 iframe 을 사용하면 됩니다.

 
1

<iframe src="web/viewer.html" style="width:600px; height:400px; border:1px solid blue;"></iframe>

cs

iframe 을 사용하게되면 아래와 같이 내가 원하는 영역에 내가 원하는 크기로 pdf 문서를 표시할 수 있습니다.

pdf뷰어

iframe 을 사용하지 않을 수는 없을까?

브라우저의 보안정책 때문에 iframe을 사용하기 어려운 경우가 있습니다. 그럴때는 아래와 같이 코딩하면 가능합니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

 
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
    <style>
        #the-canvas {
        border: 1px solid black;
        direction: ltr;
        }        
    </style>
    <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
 
    <h1>PDF.js 데모</h1>
    
    <canvas id="the-canvas"></canvas>
    
    <script language = "javascript">
 
        var url = 'sample.pdf'; // 표시하려는 pdf 파일명
 
        // Loaded via <script> tag, create shortcut to access PDF.js exports.
        var pdfjsLib = window['pdfjs-dist/build/pdf'];
 
        // The workerSrc property shall be specified.
        pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
 
        // Asynchronous download of PDF
        var loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function(pdf) {
        console.log('PDF loaded');
        
        // Fetch the first page
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
            console.log('Page loaded');
            
            var scale = 1.5;
            var viewport = page.getViewport({scale: scale});
 
            // Prepare canvas using PDF page dimensions
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
 
            // Render PDF page into canvas context
            var renderContext = {
            canvasContext: context,
            viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
            console.log('Page rendered');
            });
        });
        }, function (reason) {
        // PDF loading error
        console.error(reason);
        });
 
    </script>
</body>
</html>
Colored by Color Scripter

cs

위 코드를 실행시키면 아래와 같이 브라우저 상에서 pdf 문서의 내용이 바로 표시되는 걸 확인할 수 있습니다. 이때, 기존과 다른점은 마치 이미지를 표시하듯이 pdf 뷰어의 메뉴가 없다는 것입니다. 메뉴없이 pdf문서를 바로표시하고자 할때가 있는데 이럴때 유용하게 사용할 수 있습니다.

물론, 메뉴표시는 옵션을 변경해서 가능합니다.

pdf 뷰어

이상 웹상에서 pdf를 바로 볼 수 있는 pdf뷰어, pdf viewer 에 대해 알아봤습니다.

동기가 있어서 시작하는 것이 아니다 ... [오늘의 명언]

동해둘리 — Thu, 29 Jun 2023 09:59:55 +0900

동기가 있어서 시작하는 것이 아니다

처음 접하는 일을 시작하려고 할때, 또는 담배를 끊고자 할때 처럼 수많은 변명과 이유를 찾으려고 할 때가 있습니다.

오늘의명언

정작 필요한 것은 일단, 시작하는 것이다

하지만, 동기가 있어서 시작하는 것이 아니라 일단 시작하면 비로소 생겨나는 것이 동기입니다.

오늘의명언

시작하게 되면 동기가 생겨나고 동기가 생기면 의지가 굳어집니다

시작하기 겁이 날 수 있습니다. 하지만, 만약 실패하지 않는다는 걸 안다면, 과연 무엇을 시도해 보겠는가?

오늘의명언

자신이 처음 접한 환경에 순응하기를 거부하는 순간, 성공을 향한 첫 걸음을 뗀 셈이다

시작하세요!!!!

웹상에서 psd 파일 보기, 포토샵파일 뷰어, psd 파일 뷰어

동해둘리 — Wed, 28 Jun 2023 09:31:16 +0900

웹상에서 포토샵파일(psd파일) 보기

웹상에서 psd파일을 바로 볼 수 있도록 하는 psd파일뷰어 기능을 소개드립니다

아래 사이트에 접속하시면 psd파일을 볼 수 있는 PHP class 파일이 있습니다.

psd파일뷰어

php-class-to-read-psd-files 라는 소스코드를 다운로드 한 후에, classPhpPsdReader.php 라는 이름으로 저장한 후에 서버로 업로드 합니다. 그 후에 HTML 문서를 하나 만들고 아래와 같은 코드를 작성하고 브라우저에서 열어보면 됩니다.

이때 myfile.psd 는 실제로 보여지게되는 psd 파일이므로 자신의 파일명을 적어주시면 됩니다.

1
2
3
4
5

<?php 
    include_once('classPhpPsdReader.php');
    header("Content-type: image/jpeg"); 
    print imagejpeg(imagecreatefrompsd('myfile.psd')); 
?> 
Colored by Color Scripter

cs

제가 포토샵에서 샘플로 만든 psd 파일입니다.

포토샵파일뷰어

이름 브라우저에서 열어보면 아래와 같이 psd 파일을 웹상에서 바로 볼 수 있습니다.

psd파일뷰어

ai파일 웹상에서 보기, 일러스트파일 웹, ai파일 웹뷰어, ai웹뷰어

동해둘리 — Mon, 26 Jun 2023 05:10:36 +0900

ai웹뷰어, ai웹

AI 파일을 웹상에서 본다?

ai파일은 Adobe Illustrator 프로그램이나 PhotoShop 과 같은 그래픽 프로그램이 설치되어 있어야 볼 수 있는게 정석인데요, 그런 이유로 ai 파일을 웹상에서 보이게 하려고 아래와 같이 코딩을 하게되면

1
2
3
4
5
6
7
8
9
10
11

 
<!doctype html>
<html lang="ko">
<head>
  <title></title>
<meta charset="utf-8">
</head>
  <body>
    <iframe src="my_aifile.ai" width="1000px" height="900px"></iframe>
  </body>
</html>
Colored by Color Scripter

cs

 
 화면에 보여지는 대신에 다운로드 하라? 
위와 같이 코딩을 하게되면, 웹 브라우저가 ai 파일을 해석할 수 있는 기능을 탑재하고 있지 않기 때문에, 화면에 보여지지 않고, 대신 파일을 다운로드 하라고 탐색기 창이 뜨게 됩니다. 
 
ai웹뷰어
 
 
AI파일 뷰어 서비스
 
웹상에서 ai 파일을 업로드 하면, 이를 볼 수 있게 제공해주는 사이트가 있기는 합니다. 하지만, 이런 사이트를 이용해서 파일의 내용만 확인하는게 아니라, 내가 운영중인 내 웹사이트에서 ai파일을 바로 볼수는 없을까요?
ai웹뷰어
 
 
 내가 운영중인 내 웹사이트에서 ai파일을 바로 볼수는 없을까요?
 
여러가지 방법을 테스트 해보던 중에, 놀라운 사실을 하나 발견하게 되었습니다. 그것은 바로 확장자를 변경하는 것!!!
 
바로, 처음 작성했던 코드의 my_aifile.ai 파일의 확장자를 pdf로 변환하는 것입니다. 

1
2
3
4
5
6
7
8
9
10
11

 
<!doctype html>
<html lang="ko">
<head>
  <title></title>
<meta charset="utf-8">
</head>
  <body>
    <iframe src="my_aifile.pdf" width="1000px" height="900px"></iframe>
  </body>
</html>
Colored by Color Scripter

cs

 
 
어떤 일이 벌어질까요?
 
이렇게 할 경우, 브라우저는 이 파일을 pdf 파일로 인식하게 되고, 브라우저에 이미 장착되어 있는 pdf 뷰어 기능을 통해 웹상에서 바로 보여지게 합니다. 
 
ai웹뷰어
 
크롬에서도 잘 보이고, 엣지 에서도 잘 보입니다. 
 
테스트 해본 경과, 크롬에서도 잘 보이고, 엣지에서도 잘 보입니다. 다만, FireFox 에서는 안보입니다. 
 
 
 
너무 싱거운 방법이긴 합니다만, 유용하게 쓸 수 있을 듯 하여 공유합니다^^
 
 
 

역량을 키우고 싶으면 무조건 정신부터 키워야 한다 ... [오늘의 명언]

동해둘리 — Sat, 24 Jun 2023 11:41:16 +0900

역량을 키우고 싶을때 가장 먼저 해야할 일은?

어떠한 분야에서라도 역량을 키우고 싶을때, 사람들은 학원에 다니거나 강의를 듣거나 독학을 하는 경우가 많습니다.

오늘의명언 역량키우기

하지만, 그보다 먼저 선행되어야 할 것은 정신입니다

왜냐하면, 정신적인 준비가 되지 않은 상태에서 역량과 기술만을 습득하게 되면, 습득한 역량과 기술로 인해 주어지는 새로운 환경에 대응할 정신적인 스트레스에 휘둘리기 쉽습니다.

오늘의명언

최고의 자리에 오르기 위해 발이 부르트고 관절이 꺽여가며, 올라선 무대의 중압감을 이겨내지 못한다면.... 다시 내려갈지 도 모른다는 조바심을 이겨내지 못한다면, 역량을 키우기 위해 그동안 노력했던 모든것들은 한순간에 무너져내리기도 합니다.

정상에서 삶을 포기한 수많은 사람들

누구도 따라하지 못할 엄청난 역량과 재능을 가졌는데도 불구하고, 삶을 포기해 버린 대기업 회장과 유명한 연얘인들의 이야기가 잊혀질 만 하면 들려오는 이유는, 바로 정신적신 성장이 없는 역량때문이 아닐까 싶습니다.

selectbox 라이브러리 selectric, 손쉽게 예쁜 selectbox 만들기

동해둘리 — Fri, 23 Jun 2023 17:56:25 +0900

selectbox 라이브러리 selectric

selectbox 라이브러리 중에서 selectric 을 이용하면 아래와 같이, 다양한 형태의 selectbox를 쉽게 만들 수 있습니다.

selectbox라이브러리

아래 사이트에 접속하시면 데모코드를 확인하실 수 있습니다.

예쁜selectbox

기본적인 사용방법

selectbox 라이브러리를 이용하기 위해서는 CDN을 이용하거나, 소스코드를 다운로드 받아서 사용하시면 됩니다. 아래와 같이 1번 또는 2번의 방법으로 라이브러리를 포함시킵니다.

selectric.css 도 포함시켜줍니다.

그런후에 적용하려는 selectbox에 selectric() 를 실행시켜주기만 하면 됩니다.

예쁜selectbox

다양한 테마와 커스텀 기능

sectctric 홈페이지에서는 아래와 같이 테마를 제공합니다. 기본테마부터 다양한 형태와 색상의 테마까지 제공하고, 내가 원하는 대로 설정할 수 있는 Custom 기능까지 제공하고 있습니다.

[성공과 실패] 실패하는 가장 확실한 방법? 알버트 아인슈타인의 명언

동해둘리 — Thu, 22 Jun 2023 17:31:13 +0900

알버트 아인슈타인 ( Albert Einstein )

현대 물리학의 가장 중요하고 영향력 있는 인물 중 하나인 알버트 아인슈타인

[상대성 이론]이라는 어마무시한 이론을 정립한 분이자, 현대 물리학의 아버지로 불리우는 위인이시죠

알버트 아인슈타인

수 많은 물리학 적인 성공과 더불어 명언 제조기로도 알려져 있는데요, 알버트 아인시 타인이 성공과 실패에 대해서는 이러한 말을 남겼다고 합니다.

"실패하는 가장 확실한 방법은 아무것도 시도하지 않는 것이다"

흔히들, 실패는 성공의 어머니다 라거나, 실패없는 성공은 없다 등등 성공과 실패에 대한 많은 말들이 있지만, 알버트 아인슈타인의 말이 가장 명확하게 실패에 대한 정의를 내린게 아닌가 싶다.

저 동해둘리는 너무 많은 것들에 대한 호기심으로 수많은 시도를 해왔기에, 당연히 많은 실패를 경험해 봤습니다. 알버트 아인슈타인의 명언이 더 깊이 와닿는 까닳이 아닐까 싶습니다.

selectbox 이쁘게 만들기, select2 라이브러리로 이쁘게, 그룹으로 묶기까지

동해둘리 — Wed, 21 Jun 2023 11:43:20 +0900

selectbox 이쁘게, 멀티셀렉트

기본적인 셀렉트 박스

기본적인 selectbox 태그를 사용하게 되면, 아래와 같은 모양의 selectbox 가 나타나게 됩니다. 그런데, 별로 이쁘지가 않고, 리스트의 내용이 아주 길 경우에는 검색을 할 수가 없기때문에 스크롤을 엄청 오래 해야하는 불편함이 있습니다.

selectbox 이쁘게, 멀티셀렉트

select2 라이브러리를 사용하자

select2 라이브러리를 사용하게되면, 아주 손쉽게 아래와 같이 모양도 이쁘고, 검색도 가능한 selectbox를 만들 수 있습니다.

selectbox 이쁘게, 멀티셀렉트

* select2 라이브러리를 사용하려면 먼저 아래와 같은 코드를 페이지에 삽입해야 합니다.

1
2
3

  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

cs

* 그런 후에 아래와 같이 document.ready 에서 해당 selectbox에 select2() 함수를 적용시켜주기만 하면 됩니다.

1
2
3
4
5
6

  <script language = "javascript">
  // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
      $('.my-selectbox').select2();
  });    
  </script>
Colored by Color Scripter

cs

그룹이 가능한 selectbox

아래 그림처럼 그룹핑이 되어 있는 selectbox 도 쉽게 생성할 수 있습니다.

selectbox 이쁘게, 멀티셀렉트

아래와 같은 형태로 optgroup 태그를 이용하여 그룹을 만들고, 각각의 그룹 하위에 option 태그를 사용하면 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <select class="my-selectbox2" style="width:200px;">
    <optgroup label="중국집">
      <option value="짜장">짜장</option>
      <option value="짬뽕">짬뽕</option>
      <option value="탕수육">탕수육</option>
    </optgroup>
    <optgroup label="일식">
      <option value="라멘">라멘</option>
      <option value="스시">스시</option>
      <option value="초밥">초밥</option>
    </optgroup>
    <optgroup label="한식">
      <option value="비빔밥">비빔밥</option>
      <option value="설렁탕">설렁탕</option>
      <option value="삼겹살">삼겹살</option>
    </optgroup>
  </select>
Colored by Color Scripter

cs

지금까지의 모든 selectbox 가 들어있는 코드는 아래와 같습니다. 참고로, CSS 에 정의되어 있는 select2-selection--single 는, link 태그로 포함되어 있는 select2.min.css 에 기본적으로 정의되어 있는 CSS 선택자인데, 코드 내에서 이를 재정의 하여 사용하는 예를 보여드린 겁니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

 
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
  <style>
    /* 선택된 옵션 스타일링 */
    .select2-selection--single {
      height: 36px !important;      
      border: 1px solid #ccc !important;
      border-radius: 4px !important;
      padding: 3px !important;
    }
  </style>
</head>
<body>
  <!-- Select2 셀렉트 박스 -->
  <select style="width:200px;">
    <option value="짜장">짜장</option>
    <option value="비빔밥">비빔밥</option>
    <option value="짬뽕">짬뽕</option>
    <option value="삼겹살">삼겹살</option>
    <option value="스시">스시</option>
  </select>
 
  <select class="my-selectbox" style="width:200px;">
    <option value="짜장">짜장</option>
    <option value="비빔밥">비빔밥</option>
    <option value="짬뽕">짬뽕</option>
    <option value="삼겹살">삼겹살</option>
    <option value="스시">스시</option>
  </select>
 
  <select class="my-selectbox2" style="width:200px;">
    <optgroup label="중국집">
      <option value="짜장">짜장</option>
      <option value="짬뽕">짬뽕</option>
      <option value="탕수육">탕수육</option>
    </optgroup>
    <optgroup label="일식">
      <option value="라멘">라멘</option>
      <option value="스시">스시</option>
      <option value="초밥">초밥</option>
    </optgroup>
    <optgroup label="한식">
      <option value="비빔밥">비빔밥</option>
      <option value="설렁탕">설렁탕</option>
      <option value="삼겹살">삼겹살</option>
    </optgroup>
  </select>
 
  
  <select class="my-selectbox3" style="width:200px;border: 1px solid #DE4C4C;background-color: #FFC0C0;">
    <option value="1">옵션 1</option>
    <option value="2">옵션 2</option>
    <option value="3">옵션 3</option>
    <option value="4">옵션 4</option>
    <option value="5">옵션 5</option>
  </select>
 
  <script language = "javascript">
  // In your Javascript (external .js resource or <script> tag)
    $(document).ready(function() {
      $('.my-selectbox').select2();
      $('.my-selectbox2').select2();
      $('.my-selectbox3').select2();
 
  });    
  </script>
</body>
</html>
 
Colored by Color Scripter

cs

jquery 이용하여 테이블 소팅하기, Table Sort / 테이블정렬

동해둘리 — Mon, 19 Jun 2023 11:43:18 +0900

jquery를 이용하여 테이블소팅/ 테이블정렬

jquery를 이용하여 테이블을 소팅하는 코드입니다. 상단 제목 부분을 클릭하면 해당 항목을 기준으로 정렬되어 표시됩니다.

배열에 대한 이해가 있으시다면 이해하기 쉬우실 꺼에요. comparator 함수가 값을 비교하여 결과를 전달하면, rows 라는 array에 값을 넣어놓고 reverse()함수를 이용하여 배열내의 값을 정렬하는 코드입니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<!DOCTYPE html>
<html>
<head>  
</head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<meta charset="utf-8" />
<style>
.styled-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
}
 
.styled-table thead th {
  padding: 12px 15px;
  text-align: left;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
 
.styled-table tbody td {
  padding: 12px 15px;
}
 
.styled-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
 
.styled-table tbody tr:hover {
  background-color: #ddd;
}
 
</style>
<body>
  <table id="myTable" class="styled-table">
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
        <th>도시</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>25</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
      </tr>
      <tr>
        <td>Alice</td>
        <td>20</td>
        <td>Paris</td>
      </tr>
    </tbody>
  </table>
  
  <script language = "javascript">
$(document).ready(function() {
  $("th").click(function() {
    let table = $(this).parents("table").eq(0);
    let rows = table.find("tr:gt(0)").toArray().sort(comparator($(this).index()));
    this.asc = !this.asc;
    if (!this.asc) {
      rows = rows.reverse();
    }
    for (let i = 0; i < rows.length; i++) {
      table.append(rows[i]);
    }
  });
 
  function comparator(index) {
    return function(a, b) {
      let aValue = getCellValue(a, index);
      let bValue = getCellValue(b, index);
      if (index === 1) {
        // 나이를 숫자로 변환하여 정렬
        aValue = parseInt(aValue);
        bValue = parseInt(bValue);
      }
      if (aValue < bValue) return -1;
      if (aValue > bValue) return 1;
      return 0;
    };
  }
 
  function getCellValue(row, index) {
    return $(row).children("td").eq(index).text();
  }
});
 
 
  </script>  
</body>
</html>
 
Colored by Color Scripter

cs

JavaScript 로 시계만들기, 3가지 타입 javascript시계

동해둘리 — Sat, 17 Jun 2023 06:03:33 +0900

javascript시계

javascript 로 시계를 만드는 코드입니다.

가장 기본적인 시계를 만드는 코드먼저 살펴볼께요

javascript시계

getHours() , getMinutes(), getSeconds() 함수로 현재 시간을 읽어와서 setTimeout() 함수로 1초마다 업데이트 해주면 됩니다.

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
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
<head>
  <style>
    #clock {
      font-family: 'Arial', sans-serif;
      font-size: 48px;
      text-align: center;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div id="clock"></div>
 
  <script>
    function updateClock() {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
 
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
 
      var time = hours + ':' + minutes + ':' + seconds;
 
      document.getElementById('clock').textContent = time;
 
      setTimeout(updateClock, 1000); // 1초마다 업데이트
    }
 
    updateClock(); // 초기 실행
  </script>
</body>
</html>
Colored by Color Scripter


cs

좀더 이쁘게 만들어 볼께요

CSS 를 적용해서 테두리를 약간 이쁘게 만들어 볼께요.

이번에는 CSS 코드를 이용해서 글씨 주변에 그림자 있는 사각박스를 넣어봤습니다. box-shadow 를 이용해서 그림자를 넣습니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f5f5f5;
    }
 
    #clock {
      font-family: 'Arial', sans-serif;
      font-size: 48px;
      text-align: center;
      margin-top: 100px;
      color: #333;
    }
 
    #clock .time {
      display: inline-block;
      margin: 0 10px;
      padding: 10px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div id="clock">
    <span class="time" id="hours">00</span> :
    <span class="time" id="minutes">00</span> :
    <span class="time" id="seconds">00</span>
  </div>
 
  <script>
    function updateClock() {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
 
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
 
      document.getElementById('hours').textContent = hours;
      document.getElementById('minutes').textContent = minutes;
      document.getElementById('seconds').textContent = seconds;
 
      setTimeout(updateClock, 1000); // 1초마다 업데이트
    }
 
    updateClock(); // 초기 실행
  </script>
</body>
</html>
 
Colored by Color Scripter

cs

동그란 시계를 만들어 보겠습니다.

이 코드에서 중요한 것은 justify-content 입니다. 이 설정을 center 로 하면, 표시되는 아이템이 중앙에 정렬되어 시계처럼 보이게 됩니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f5f5f5;
    }
 
    #clock {
      width: 300px;
      height: 300px;
      margin: 100px auto;
      border: 10px solid #333;
      position: relative;
      display: flex;
      flex-wrap: wrap;
    }
 
    .digit {
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Arial', sans-serif;
      font-size: 24px;
      color: #333;
    }
  </style>
</head>
<body>
  <div id="clock">
    <div class="digit">1</div>
    <div class="digit">2</div>
    <div class="digit">3</div>
    <div class="digit">4</div>
    <div class="digit">5</div>
    <div class="digit">6</div>
    <div class="digit">7</div>
    <div class="digit">8</div>
    <div class="digit">9</div>
    <div class="digit">10</div>
    <div class="digit">11</div>
    <div class="digit">12</div>
  </div>
 
  <script>
    function updateClock() {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
 
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
 
      document.getElementById('clock').innerHTML = `
        <div class="digit">${hours}</div>
        <div class="digit">${minutes}</div>
        <div class="digit">${seconds}</div>
      `;
 
      setTimeout(updateClock, 1000); // 1초마다 업데이트
    }
 
    updateClock(); // 초기 실행
  </script>
</body>
</html>
 
Colored by Color Scripter

cs

CSS 텍스트 형광펜 효과주기/ 전체 형광/ 절반만 형광

동해둘리 — Fri, 16 Jun 2023 05:39:36 +0900

위와 같이 텍스트에 형광펜 효과를 주기위한 코드 입니다.

linear-gradient() 함수는 배경에 선형 그라디언트(gradient) 효과를 생성하는 데 사용되는데요, 이 함수를 사용하여 두 개 이상의 색상을 부드럽게 변환하는 그라디언트 효과를 만들 수 있습니다.

예를 들면 아래와 같이 사용할 수 있습니다.

1
2
3
4
5
6
7
8

/* 세로로 그라디언트 */
background: linear-gradient(to top, blue, red);
 
/* 가로로 그라디언트 */
background: linear-gradient(to right, yellow, green);
 
/* 대각선 그라디언트 */
background: linear-gradient(to top right, purple, orange);

cs

 
 
아래 코드는 일반적인 형광펜 효과를 주기 위한 코드입니다.  
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight {
        background-color: yellow;                
    }
 
    .half_background {
        background: linear-gradient(to top, yellow 50%, transparent 50%);
    }    
 
    .linear_background {
        background: linear-gradient(to top, yellow 50%, transparent 100%);
    }    
</style>
</head>
<body>
    <p>이 텍스트에서 <span class="highlight">형광펜 효과</span>를 주고 싶습니다.</p>
    <p>이 텍스트에서 <span class="half_background">형광펜 효과</span>를 주고 싶습니다.</p>
    <p>이 텍스트에서 <span class="linear_background">형광펜 효과</span>를 주고 싶습니다.</p>
</body>
</html>
Colored by Color Scripter

cs

 

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

그누보드 아이디찾기, 비밀번호 찾기 이메일 발송 안될때 조치방법

동해둘리 — Thu, 15 Jun 2023 17:38:50 +0900

그누보드 이메일발송

그누보드를 설치한 후에 테스트를 해보면, 이메일 발송이 안되는 경우가 있습니다.

그럴땐, 루트 디렉토리에 있는 config.php 파일을 수정하면 해결이 됩니다.

1
2
3

define('G5_SMTP',      '127.0.0.1');     // 이 부분을 
 
define('G5_SMTP',   '');   // 요렇게 변경

cs

모, 너무 간단한거라 추가 설명은 필요없을듯 합니다^^

CSS 로 배경색상을 변경하는 애니메이션 코드... 10초간격 반복변경

동해둘리 — Thu, 15 Jun 2023 10:10:50 +0900

css 를 이용하여 배경색을 변경하는 코드입니다.

10초의 간격을 두고 검은색에서 붉은색으로 천천히 변경되기를 반복하게 됩니다.

@keyframes 으로 animateBackground 라는 변수에 애니메이션에 대한 설정을 하게 되는데요

0%는 시작, 50%는 중간, 100%는 애니메이션의 끝을 나타냅니다.

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
31
32
33
34

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<style>
.background-animation {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #000;
    animation: animateBackground 10s infinite;
}
 
@keyframes animateBackground {
    0% {
        background-color: #000;
    }
    50% {
        background-color: #ff0000;
    }
    100% {
        background-color: #000;
    }
}
 
</style>
    <div class="background-animation"></div>
</body>
</html>
Colored by Color Scripter


cs



 
 
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요
 
https://cafe.naver.com/ingsuccess
 
성공하는 중이다 : 네이버 카페
성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!
cafe.naver.com

 

css를 이용해서 html table에 효과주기 기본, 마우스오버, 라인배경색, 모바일 최적화

동해둘리 — Wed, 14 Jun 2023 12:35:31 +0900

css를 이용해서 테이블을 꾸밀때, PC, 모바일, 테블릿 상관없이 폭이 조정되고, 홀수 라인과 짝수 라인을 구별하도록 배경색을 설정하고, 마우스 오버시에 해당 라인을 특정시켜주는 기본코드입니다.

css table

 


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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    
    th {
      background-color: #f2f2f2;
    }
    
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    
    tr:hover {
      background-color: #e9e9e9;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>제목 1</th>
        <th>제목 2</th>
        <th>제목 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>데이터 1</td>
        <td>데이터 2</td>
        <td>데이터 3</td>
      </tr>
      <tr>
        <td>데이터 4</td>
        <td>데이터 5</td>
        <td>데이터 6</td>
      </tr>
      <tr>
        <td>데이터 7</td>
        <td>데이터 8</td>
        <td>데이터 9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Colored by Color Scripter

cs

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

Youtube API 동영상 좋아요 수 불러오기 php 코드

동해둘리 — Mon, 12 Jun 2023 17:36:00 +0900

youtube Api 좋아요수

Youtube API 를 잉용하여 특정 동영상의 좋아요 수 읽어오기

아래의 코드에서 $apiKey 부분만 자신의 API KEY 로 변경해 주시면 됩니다.

동영상 고유ID는 $videoId 에 설정되어 있는데요, 코드상에 있는 데이터는 저 동해둘리의 유튜브에 있는 영상중의 하나입니다.

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

 
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<?
// Google Developers Console에서 발급받은 API 키
$apiKey = 'YOUTUBE_API_KEY';
 
// 댓글을 가져올 동영상의 고유 ID
$videoId = "sUnwx-k2DHE"; // 동해둘리의 영상중에서 하나를 샘플로 넣어놓았습니다. 
 
 
// 댓글 목록을 가져오기 위한 API 엔드포인트
 
$apiUrl = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id={$videoId}&key={$apiKey}";
 
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$apiUrl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
 
// API 요청 보내기
$response = curl_exec($ch);
 
// cURL 세션 닫기
curl_close($ch);
 
// 응답 JSON 데이터 디코딩
$data = json_decode($response, true);
 
// 좋아요 수 확인
$likeCount = $data['items'][0]['statistics']['likeCount'];
 
// 결과 출력
echo "동영상의 좋아요 수: " . $likeCount;
 
 
?>
</body>
</html>
 
 
 
Colored by Color Scripter

cs

유튜브API 이용해서 특정 영상의 댓글 가져오기 PHP코드

동해둘리 — Sun, 11 Jun 2023 13:17:28 +0900

유튜브API 를 이용해서, 특정 영상의 덧글 가져오기

유뷰브API 를 이용해서 댓글을 가져오는 php 코드입니다.

코드 중에서 YOUR_API_KEY 는 자신의 키값으로 변경해 주셔야 합니다.

videoId 는 임시로 제 동해둘리 유튜브 채널에 있는 영상의 videoId 로 세팅해 놓았는데요, 변경하시려면 원하는 유튜브 영상의 videoId 를 찾아서 변경하시면 됩니다.

videoId 찾는 법은 영상을 클릭하신 후에, 아래와 같이 주소창에 있는 빨간색 부분을 복사해서 변경해 주시면 됩니다.

https://www.youtube.com/watch?v=sUnwx-k2DHE&t=2s

제 서버에서 작동하는 거 테스트를 마친 코드입니다^^

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

 
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<?
// Google Developers Console에서 발급받은 API 키
$apiKey = 'YOUR_API_KEY';
 
// 댓글을 가져올 동영상의 고유 ID
$videoId = "sUnwx-k2DHE"; // 동해둘리의 영상중에서 하나를 샘플로 넣어놓았습니다. 
 
 
// 댓글 목록을 가져오기 위한 API 엔드포인트
$apiUrl = "https://www.googleapis.com/youtube/v3/commentThreads?part=snippet&videoId=$videoId&key=$apiKey";
 
 
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$apiUrl);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
 
// API 요청 보내기
$response = curl_exec($ch);
 
// cURL 세션 닫기
curl_close($ch);
 
// 응답 JSON 데이터 디코딩
$data = json_decode($response);
 
// 댓글 목록 출력
foreach ($data->items as $item) {
    $commentSnippet = $item->snippet->topLevelComment->snippet;
    $author = $commentSnippet->authorDisplayName;
    $text = $commentSnippet->textDisplay;
    
    echo "작성자: $author\n";
    echo "댓글: $text\n";
    echo "------------------------\n";
    echo "<br>";
}
?>
</body>
</html>
 
 
 
Colored by Color Scripter

cs

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

성공하는 중이다 네이버 카페를 개설했습니다. 성공하는 과정을 함께하시지요

동해둘리 — Sat, 10 Jun 2023 06:49:00 +0900

성공하는중이다 네이버카페

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

우리는 성공하는 중입니다.

어떤 분야에 종사하는지와는 무관하게, 무엇인가를 위해 노력하는 과정에서 필수적으로 맞이하게 되는것이 바로 실패와 좌절이 아닐까 싶습니다.

성공하는중이다, 성공카페

성공을 위한 여정을 여러분들과 나누고 싶습니다. 힘이 되는 이야기, 힘이 되는 사진, 나의 성공이야기, 나의 실패 이야기 등등 다양한 정보를 나누고 싶습니다.

성공하는 중이다

제 책상앞에 붙어있는 저의 좌우명 입니다. 많은 시행착오를 거쳐왔고 어려움에 당면했었지만, 실패를 통해 배워왔고 그 배움을 기반으로 다시 한번 성공에 도전해 보고자 합니다.

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

유튜브 API를 이용해서, 특정 채널의 동영상 목록을 가져오기 PHP 코드

동해둘리 — Sat, 10 Jun 2023 06:39:40 +0900

유튜브API

PHP에서 유튜브 API를 이용해서, 특정 채널의 동영상 목록을 가져오는 코드입니다.

api_key를 발급받는 것은 구글 클라우드 플랫폼에서 신청해야 하는데, 신청과정은 본 포스팅에서는 소개하지 않습니다.

아래 코드는 curl을 이용해서 목록을 가져오는 코드인데요.

제 서버는 allow_url_fopen 이 막혀있기 때문에, curl을 이용해서 가져오는 방법을 선택했습니다.

php.ini 를 직접 수정할 수 있는 분이라면 allow_url_fopen 을 허용해서 file_get_contents() 방식을 사용하셔도 됩니다.

참고로, 아래 코드에 입력된 채널 아이디는 제가 만든 유튜브 채널 '동해둘리' 입니다.

아래 코드에서 api_key만 변경하고 서버에 업로드 하신 후에 확인하시면

제 채널의 동영상 목록이 보여지게 됩니다.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<?
$api_key = 'API KEY를 입력하세요';
$channel_id = 'UCMAC9PA8dMvvxIiM0vp8XYA'; // 유튜브 채널의 아이디
 
 
$max_result = 10;
 
$url = 'https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId='.$channel_id.'&maxResults='.$max_result.'&key='.$api_key;
 
 
$ch = curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
 
$video_list = json_decode(curl_exec($ch),TRUR);
curl_close($ch);
 
foreach ($video_list['items'] as $item) {
    if (isset($item['id']['videoId'])) {
        echo '<div class="">
                <iframe width="400" height="300" src="https://www.youtube.com/embed/'.$item['id']['videoId'].'" frameborder="0" allowfullscreen></iframe>
                <h2>'. $item['snippet']['title'] .'</h2>
            </div>';
    } 
}
?>
</body>
</html>
Colored by Color Scripter

cs

 

성공하는 중이다 카페를 개설했습니다... 동해둘리의 새로운 도전

동해둘리 — Fri, 9 Jun 2023 13:50:44 +0900

저 동해둘리가 직접 운영하는 카페를 개설 했습니다. 분야에 상관없이 성공을 위해 준비하고 노력하는 사람들끼리, 서로 힘이되고 위로가 될 수 있는 정보를 나누고자 합니다.

힘이되는 이야기

힘이되는 사진

나만의 비법공개

작은 성공이야기

작은 실패이야기

작은 도전이야기

등등의 여러 메뉴를 통해 좋은 정보를 공유하고자 합니다.

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

유튜브api를 이용해서 html문서에 삽입 후, 볼륨조절하는 php 코드

동해둘리 — Fri, 9 Jun 2023 13:41:13 +0900

아래의 코드에서 'VIDEO_ID_HERE'를 실제 유튜브 동영상의 ID로 대체해야 합니다.

유튜브 동영상의 ID는 동영상 URL에서 확인할 수 있습니다.

예를 들어, " https://www.youtube.com/watch?v=VIDEO_ID_HERE "와 같은 URL에

'VIDEO_ID_HERE' 부분이 동영상의 ID입니다.

아래 코드는 YouTube 플레이어 API를 사용하여 유튜브 동영상을 HTML 페이지에 삽입하고, 플레이어가 준비되면 동영상을 자동으로 재생하고 볼륨을 50으로 설정합니다.

이 코드를 PHP 파일로 저장하고 웹 브라우저에서 해당 PHP 파일을 열면 됩니다^^

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
31
32
33
34
35
36

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.youtube.com/iframe_api"></script>
  <style>
    #player {
      width: 640px;
      height: 360px;
    }
  </style>
</head>
<body>
  <div id="player"></div>
  
  <script>
    // 유튜브 플레이어 API가 로드되면 onYouTubeIframeAPIReady 함수를 호출합니다.
    function onYouTubeIframeAPIReady() {
      // 플레이어 인스턴스를 생성합니다.
      var player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: 'VIDEO_ID_HERE', // 여기에 재생할 유튜브 동영상의 ID를 입력하세요.
        events: {
          'onReady': onPlayerReady
        }
      });
    }
 
    function onPlayerReady(event) {
      // 플레이어가 준비되면 실행할 코드를 작성합니다.
      event.target.playVideo(); // 동영상을 자동으로 재생합니다.
      event.target.setVolume(50); // 볼륨을 50으로 설정합니다.
    }
  </script>
</body>
</html>
Colored by Color Scripter

cs

 
 
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다'  카페를 소개드립니다. 
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요 
https://cafe.naver.com/ingsuccess
 
성공하는 중이다 : 네이버 카페
성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!
cafe.naver.com
 

라디오버튼 제목(텍스트)과 수직정렬 하기, 라디오버튼 정렬

동해둘리 — Mon, 8 May 2023 04:03:57 +0900

라디오버튼의 크기를 키울 경우, 해당 버튼의 레이블(제목)과 라디오 버튼 사이의 수직정렬이 틀어지는 경우가 많습니다.

html 코드를 보자면..... 라디오버튼의 크기와 커서만 설정되어 있는걸 볼 수 있죠

위와 같이 라디오버튼의 수직정렬이 맞지 않을 경우, 아래와 같이 코드를 넣어주면 됩니다.

vertical-align: middle;margin-top:-1px;

보통 vertical-align:middle 만 써주면 어지간한 녀석들은 수직정렬이 되는데, 라디오박스는 margin-top:-1px 를 넣어줘야 되더라구요^^ 참고하세요

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

공무원 넘들 가만 안 둔다... 슈나우저 대박이의 출근길

동해둘리 — Fri, 5 Aug 2022 11:11:35 +0900

바빠죽겠는데 눈때문이 뿔난 슈나우저 대박이랍니다^^

css버튼 이쁘게 꾸미기, 애니메이션 효과주기

동해둘리 — Fri, 5 Aug 2022 11:03:39 +0900

css버튼 이쁘게, 애니메이션

CSS 를 이용하여 버튼에 애니메이션 효과를 주는 소스를 찾아보다가 심플하면서도 괜찮은게 있어서 공유합니다

제가 만든건 아니구요^^

아래와 같은 3가지 타입의 버튼이 있는데요, 애니메이션 효과를 주어 역동적인 느낌을 주는 버튼입니다

css버튼 이쁘게

아래 링크에 접속하시면 소스코드를 확인하실 수 있습니다

https://codepen.io/sazzad/pen/yNNNJG

Animated CSS3 Buttons

Experimental css buttons by Designify.me...

codepen.io

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

고양이 생후 20일된 꼬물이들

동해둘리 — Tue, 26 Jul 2022 11:13:17 +0900

사고로 큰 수술까지 받아야했던 소망이와 깜이가 새끼를 낳았어요^^

깜이와 알이^^

녀석들의 알콩달콩 일상을 담아봤습니다

php 표준편차, 평균, 최대값, 최소값 구하기

동해둘리 — Thu, 26 May 2022 12:26:17 +0900

php표준편차

php 표준편차와 평균, 최대값, 최소값을 구하기 위해서 사용되는 함수들을 알아보겠습니다

여러개의 데이터를 대상으로 하기 때문에, 대상이 되는 값들을 배열에 넣어두고, 아래의 함수를 호출하며 배열을 넘겨주면 해당값을 구할 수 있습니다

// 최대값을 구하는 함수

function array_max( &$arr ) {
    $max = FALSE;
    foreach( $arr as $a )
        if( $max === FALSE || $a > $max ) $max = $a;
    return $max;
}

// 최소값을 구하는 함수

function array_min( &$arr ) {
    $min = FALSE;
    foreach( $arr as $a )
        if( $min === FALSE || $a < $min ) $min = $a;
    return $min;
}

// 평균을 구하는 함수
function array_avg( &$arr ) {
    $sum = 0;
    foreach( $arr as $a )
        $sum += $a;
    return $sum / count($arr);
}

// 표준편차를 구하는 함수
function array_dev( &$arr, $avg = NULL ) {
    if( $avg == NULL ) $avg = array_avg($arr);

    $dev = 0;
    foreach( $arr as $a )
        $dev += pow(($a - $avg),2);
    return sqrt($dev);
}

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com

그누보드 한글깨짐, MySql 한글깨짐, utf8 한글깨짐 해결하는 방법

동해둘리 — Sun, 18 Jul 2021 23:07:14 +0900

잘 되다가도 간혹 안되기도 하는 한글깨짐

그누보드를 사용하는 경우, 서버의 캐릭터셑이 utf-8 로 되어 있고 mysql 캐릭터셑도 utf-8로 되어있는데도 한글이 깨지는 경우가 발생하기도 합니다

제일 먼저 확인할 것은 mysql 캐릭터셑

SELECT schema_name , default_character_set_name FROM information_schema.schemata

mysql 에 접속한 후에 위와 같이 쿼리를 실행하면 해당 데이터베이스의 캐릭터셑을 확인할 수 있습니다

두번째로 확인할 것은 HTML 코드내의 캐릭터셑 설정

HTML 코드내에 meta 태그를 이용하여 캐릭터셑을 설정하는데요, 그게 제대로 되어있는지 확인합니다

보통 아래와 같이 설정하게 됩니다.

<!doctype html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

마지막으로 확인할 것은 mysql connection

두번째 까지 확인을 했는데요 여전히 한글이 깨진다면, HTML 코드내에서 mysql 에 접속할 때 오류가 생기는 경우를 확인해 봐야 됩니다.

보통, 아래와 같이 데이터베이스에 연결하는데요, 연결 자체가 utf-8 이 아니라 euc-kr로 접속이 될 수도 있습니다.

<?
	$dbconn = mysqli_connect("localhost","유저명","비밀번호","DB명") or die("Database Connection Error");

	if (mysqli_connect_errno())
	{
		echo "Failed to connect to MySQL: " . mysqli_connect_error();
	}		
?>

이를 확실하게 하기위하여, 연결 후에 다음과 같이 쿼리를 실행하면 확실하게 utf-8로 mysql connection이 설정되게 됩니다

<?
	$dbconn = mysqli_connect("localhost","유저명","비밀번호","DB명") or die("Database Connection Error");

	if (mysqli_connect_errno())
	{
		echo "Failed to connect to MySQL: " . mysqli_connect_error();
	}		
	
	mysqli_query($dbconn,"set session character_set_connection=utf8;");
	mysqli_query($dbconn,"set session character_set_results=utf8;");
	mysqli_query($dbconn,"set session character_set_client=utf8;");

?>

참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.

각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요

https://cafe.naver.com/ingsuccess

성공하는 중이다 : 네이버 카페

성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!

cafe.naver.com