집돌이의 하루

국민취업지원제도 후기 글 모음

집이좋은 덜렁이 — Tue, 17 Jan 2023 23:31:52 +0900

주관적인 의견을 담은 후기입니다. 도움이 되셨으면 좋겠습니다.

2022.07.19 - [각종 후기] - 국민취업지원제도 1회차(상담 1/3) 후기

국민취업지원제도 1회차(상담 1/3) 후기

이전 게시물에서 국민취업지원제도를 신청하고 약 일주일 후에 연락을 받았습니다. 다행히 1유형 으로 국민취업지원제도를 신청이 됬습니다~! (신청이 안되는 경우는 별로 없다 하더라구요?) 202

palkong.com

2022.07.21 - [각종 후기] - 국민취업지원제도 1회차 (2/3) 후기

국민취업지원제도 1회차 (2/3) 후기

상담(1/3)회차 끝나고 또 다시 1주일 뒤 직업선호도검사(L형)을 실시하고 혹시 몰라 프린트까지 해가지고 갔습니다.(구직 준비도 검사는 안하셔두 됩니다!! 시키는 것만 하세요) 지난 주와 달리 은

palkong.com

2022.07.24 - [각종 후기] - 국민취업지원제도 1회차 (3/3) 후기

국민취업지원제도 1회차 (3/3) 후기

1회차 2번째 상담에 이어서 마지막 3번째 상담까지 왔습니다~!!! (짝짝짝) 3회차 상담에서는 크게 2가지로 진행했습니다. 취업활동계획(IAP) 세우기 구직촉진수당 신청하기' 취업활동계획(IAP)는 2가

palkong.com

2022.07.26 - [각종 후기] - 국민취업지원제도 2회차 후기

국민취업지원제도 2회차 후기

이전글 url 2022.07.19 - [각종 후기] - 국민취업지원제도 1회차(상담 1/3) 후기 2022.07.21 - [각종 후기] - 국민취업지원제도 1회차 (2/3) 후기 2022.07.24 - [각종 후기] - 국민취업지원제도 1회차 (3/3) 후기 오

palkong.com

2022.08.06 - [각종 후기] - 국민취업지원제도 3회차 - 국비지원학원 및 구직촉진수당 신청

국민취업지원제도 3회차 - 국비지원학원 및 구직촉진수당 신청

국민취업지원제도 1회, 2회차를 거치고 3회차 국비지원학원 및 구직촉진수당 신청까지의 후기 입니다. 1회차, 2회차 후기를 보고 싶으신 분들은 맨 하단 링크 걸어놨습니다. (꾸벅) 3회차 - 취업활

palkong.com

2023.01.17 - [각종 후기] - 국민취업지원제도/국비지원학원 마지막 후기 (장점, 단점, 추천,비추천 ...

국민취업지원제도/국비지원학원 마지막 후기 (장점, 단점, 추천,비추천 ...)

안녕하세요. 국민취업제도를 이용했고 국비지원을 다녔던 경험을 바탕으로 국민취업제도와 국비지원학원에 대한 장점과 단점, 그리고 수강후기 등 주관적인 의견을 적고자 합니다. 제 경험을

palkong.com

국민취업지원제도/국비지원학원 마지막 후기 (장점, 단점, 추천,비추천 ...)

집이좋은 덜렁이 — Tue, 17 Jan 2023 23:26:47 +0900

국민취업지원제도 메인 사이트

안녕하세요. 국민취업제도를 이용했고 국비지원을 다녔던 경험을 바탕으로

국민취업제도와 국비지원학원에 대한 장점과 단점, 그리고 수강후기 등 주관적인 의견을 적고자 합니다.

제 경험을 바탕으로 작성 된 글이니 혹시라도 궁금한 점은 댓글 남겨주시면 답변해드립니다.

(현재 개발자로서 취업을 했기 때문에 국비지원학원은 개발자 과정을 기준으로 작성하겠습니다.)

목 차

1 ) 국민취업지원제도

2 ) 국비지원학원

3 ) 결론

4 ) 후기

1. 국민취업 지원제도

국민취업지원제도?

: 취업을 원하는 사람에게 취업지원 서비스를 제공 및 저소득층에게는 최소한의 소득도 지원해주는 제도.

취업지원 종류 (기관마다 약간 다를 수 있음)

직업선호도 검사(예: 워크넷 검사)
취업 상담 (진로에 관련된 각종 고민거리.. 2주 ~ 3주 1회)
이력서 관리 (작성 방법에 관하여)
모의 면접
취업 알선
구직촉진수당 지원(1유형 한함 : 월 50*6개월 + 부양가족*1인당 10만원 월 최대40만원)

장점

진로를 결정하는데 있어서 도움이 많이 됨.
구직촉진수당 지원 (약 300만원)
취업 후에도 몇 개월간 케어기간을 가짐.(회사관련 제도 및 사회 초년생을 위한 팁 제공)

단점

대부분의 상담사분들은 친절함. but 다 그런사람만 있는건 아님. (전 잘 만난 것 같아요)
저소득층 소득지원을 받아도 남는 시간에 알바하는건 불가함.(단, 월 120만원 이하? 소득은 가능)
- 구직촉진수당 지급 주기중 발생한 소득은 신고를 해야함. (귀찮음)
약 6개월의 기간 중 약 1~2개월 후 진로를 결정했든 안했든 취업활동을 무조건 해야함.
- 예 : 월 2회 이력서 지원 , 국비지원학원 수강(학원 수강시 월 2회 이력서 지원 x)
국가가 시행하는 제도이다 보니 구직사이트는 "워크넷"에 맞춰져 있어 사람인/리크루트 구직사이트도 이용가능하지만 이력서 지원 인증시 불편함.

이런분들은 추천합니다

돈을 버느라 취업할 기회가 없으셨던 분
국비지원학원을 다닐 예정이신분
내 스스로 이력서 넣기 힘드신 분

2. 직업훈련포털 HRD-Net (국비지원학원)
직업훈련포털 사이트

국민내일배움카드

: 취업준비생 / 이직 희망자 / 회사원 / 은퇴한 중장년 등 "내일배움카드"를 통해 국가적 지원을 받으며 훈련을 받을 수 있는 제도

국비지원학원 장점

훈련에 필요한 자비부담금이 (적다/없다)
적절한 커리큘럼을 갖췄다. (아무런 계획이 없는 사람에게는 추천)
취업 준비 및 취업 알선을 도와준다.
국민취업지원제도와 연계가 잘 되어있다.

국비지원학원 단점

강사마다 수업의 질이 천차만별이다. (고를 수 있지만 그 강사가 하는 강좌가 자신이 원하는 기간이 아닐 확률이 큼)
모든 사람의 공부 속도에 맞추다보니 수업의 질이 떨어질 수 있다.
- 짧은 기간동안 막대한 양을 배우다보니 기간 안에 커리큘럼을 마치려고 자세하게 배워야할 것들을 빠르게 하고 넘어가는 경향이 있음.
주변 환경에 영향을 많이 받는다 있다. (잠자는 사람, 게임하는 사람, 잘하는 사람 등등)
학원 입장에서 실적이 남아야 하기 때문에 기간 안에 취업시키도록 부추길 수 있음.
국민취업지원제도를 받고 있는 사람은 남는시간에 부수입원으로 알바하는 것에 제약이 있을 수 있다.

이런 분들은 추천합니다.

해당 수강에 대한 지식이 0에 가깝고 기초부터 쌓고 싶은 분
(어느 곳이든) 빠르게 취업을 하고 싶으신 분
주변 환경에 영향을 잘 받지 않으신 분 (= 집중력 좋으신분)

이런분들은 말리고 싶어요

어느정도 혼자 공부하였고 나만의 공부 습관을 가지고 계신 분 (하루 3시간 개발공부 등등)
- 수업 후 빈 시간동안 목표를 가지고 혼자 자습이 가능하신 분 (도중에 노는사람 많이 봄..)
넉넉한 취업기간을 가지고 취업활동 하고 싶으신 분
학원다니면서 알바도 병행하려고 생각하시는 분 (둘 중 하나는 포기하시는게..)

이거는 말하고 싶어요 (학원을 다니려는 분들에게)

선생님들은 많은 경력을 가진 분들이 많습니다. 학원에 대한 커리큘럼에 불만을 가지고 계셔도 선생님 신분이다 보니 따를 수 밖에 없어요.
제 선생님 같은 경우 커리큘럼에 관계없이 틈틈이 본인의 팁을 알려주간 개인 공부 질문에 친절히 답해주셨습니다.
(소심하셔도 남은 시간동안 질문을 많이 하시는 것이 본인에게 많이 남는 다는 것!!)

결론

"국비지원학원"을 다닐 예정이라면 "국민취업지원제도"를 통해서 다니는 걸 "추천"
본인이 취업하겠다는 의지가 강한게 아니라면 학원은 "비추"
이력서에 적을게 없고 뭘 해야될지 모른다면 학원 다니는거 "추천"

후기

개발자 커리큘럼으로 보고 갔으나 퍼블리셔 쪽 위주로 가르쳐서 별로였다.
주변 환경 영향이 좀 컸다..(자기변명)
강사님에게 많이 물어보질 않아서 아쉬운 감이 많았다.

지금까지 제 경험을 바탕으로 작성해보았는데요. 제 개인적인 의견이기 때문에 참고만 하시고 뭐든지 선택은 본인의 몫 이라는거 아시죠? 글 작성하는게 서투르지만 봐주셔서 감사합니다.

Git 기초 명령어

집이좋은 덜렁이 — Wed, 19 Oct 2022 22:13:02 +0900

1. $git config 명령어

$git config --list 명령어를 통해 자신이 설정한 config 값을 볼 수 있다.
설치하면서 했던 [user.name]과 [user.email]확인 가능.

git config --list

2. git config 설정 변경 ( user.name 과 user.email 를 예시로)

2-1. 아직 초기 설정을 안했을 경우 ($ git config --global user.name 등등)

지역(local) 설정
- $ git config user.name "이름"
- $ git config user.email "이메일@주소"

지역 설정인 경우 cd 명령어를 통해 .git이 저장된 디렉토리로 이동 후에 명령어를 입력해야 한다.

전역(global) 설정
- $ git config --global user.name "이름"
- $ git config --global user.email "이메일@주소"

2-2. 초기 설정을 한 번이라도 했었던 경우

3번의 --unset 옵션으로 삭제했다가 2-1 작업으로 되돌아와 설정한다.

3. $git config 설정 삭제 (--unset 옵션)

$ git config --unset "삭제할 config 설정명"

//값이 "독립(한개)"적인 config 설정값 일 때 (user.name 등)
//★Local
$ git config --unset user.name  // local 설정된 user.name 삭제
$ git config --unset user.email // local 설정된 user.email 삭제

//★Global
$ git config --unset --global user.name //global 설정된 user.name 삭제
$ git config --unset --global user.email //global 설정된 user.email 삭제


//값이 "중복(여러개)"적인 config 설정값 일 때 (user.name 등)
//★Local
$ git config --unset-all user.name  // local 설정된 user.name 삭제
$ git config --unset-all user.email // local 설정된 user.email 삭제

//★Global
$ git config --unset-all --global user.name //global 설정된 user.name 삭제
$ git config --unset-all --global user.email //global 설정된 user.email 삭제

4. $ git init - git 저장소 만들기 (=git 초기화)

$ git init 명령어시 아래와 같이 .git 이라는 저장소가 만들어진다.

git init

5. $ git status - git 상태 확인 (아래쪽에 "알아 둘 점" 한 번 보고오면 좋음)

.git 폴더가 들어있는 곳에 cd명령어를 이용해 이동 후에 명령어를 입력한다.

git status

git status 문장 뜻

On branch master - 현재 master 브랜치에 있다.
No commits yet - 아직 커밋한 파일이 없다.
nothing to commit ~~(생략) - 현재 commit할 파일이 없다.
- 아직 스테이지 영역에 있다는 뜻

여기서 알아 둘 점. (작업트리, 스테이지, 저장소)

Git 의 기능 중 하나가 “버전 관리” 이다.
Git 에서 문서를 수정하고 저장할 때마다 하나의 버전이 생긴다.
하나의 버전 마다 아래와 같은 구조를 지닌다.

git 버전 등록시 거치는 과정

작업 트리 : 파일 수정, 저장 등 작업 하는 디렉터리이다.
스테이지
- 버전으로 만들 파일들이 commit 전 “대기”하는 곳
- .git 폴더 안의 INDEX 에 저장되며 눈에 보이지 않는다.
저장소 : 스테이지에 있던 파일을 버전으로 만들어 “저장” 하는 곳
- .git 폴더 안의 HEAD 에 저장되며 역시 눈에 보이지 않는다.
- repository 라고도 하며 나중에 원격저장소인 Github로 대체가 가능하다.

6.$git add [파일명]/옵션 : 작업 트리 → 스테이지로 작성중인 파일 저장

예) $git add .

git add 옵션	의미
[파일명]	[특정 파일]만 스테이징 하겠다.
-A	[모든 파일]을 스테이징 하겠다.
.	[모든 파일]을 스테이징 하겠다.

7. $git commit -m "메시지 명" : 스테이지 → 저장소로 스테이징하던 현재 파일 저장

스테이징에서 옵션을 무엇을 줌에 따라 커밋의 양이 달라진다.
한 번 커밋 후 바로 두 번째 커밋은 할 수 없음.

8. $git log [<options>] [<revision range>] [[--] <path>…] : 로그 확인

옵션을 사용해 원하는 로그를 출력할 수 있는 기능
실습을 위해 $git log 로만 작성.

git log

9. 작업 취소 (checkout, reset 옵션)

$git checkout -- [파일명]
- 작업 트리에서 수정한 파일 되돌려줌
- 파일을 수정한 뒤에 최신 버전으로 되돌리려고 할 때 사용한다.
- 다시 복구되지 않음.
- 예) $git checkout -- test.txt
$git reset [<commit>] [--soft | --mixed [-N] | --hard | --merge | --keep]
- 요약 : $git reset HEAD
1. $git reset HEAD [파일명]
  - 스테이징 되돌리기 : 스테이지 올린 상태에서 되돌릴 때
  - reset HEAD 뒤에 파일을 지정하지 않을 시 스테이지에 있는 모든 파일을 되돌린다.
2. $git reset HEAD^
  - ^(캐럿) 사용
  - 최신 커밋 되돌리기
  - 가장 마지막에 했던 커밋을 되돌리려고 할 때 커밋 취소와 함께 스테이지에서도 내려진다.
  - 최근 3개 커밋 취소하려면 ~(틸드) 다음 숫자를 붙여주면 된다.
    - $git reset HEAD~3

10. $git revert 커밋 해시(커밋 ID)

작업 트리에서 수정한 파일 되돌리는 명령어
- 예) $git revert bd097e8
$git log 명령어를 통해 커밋 해시를 확인 후 사용한다.
해당 커밋 해시의 직전 커밋으로 돌아간다.
이후 커밋은 그대로 유지됨.

git log

$git log 명령시 노랑색 commit 오른쪽에 있는 것이 해시 코드임.

단, 해시코드가 길어서 보기 힘들 땐 log의 옵션 --oneline 을 사용하면 된다.

git log --oneline

해시코드가 약 7글자로 축약되는데 이걸 사용해도 결과는 같다.

설명이 좀 부족해서 참고하시라고 아래 사이트 소개합니다..!

Git / GitHub 안내서

초보를 위한 Git / GitHub 안내서

subicura.com

Git 특징 및 설치, 기초 환경 설정

집이좋은 덜렁이 — Tue, 18 Oct 2022 21:18:58 +0900

GIT 기능(특징)

버전관리
- 문서를 수정할때마다 버전별로 기록이 가능해서 언제 어느것을 수정했는지 확인이 가능하다.
백업
- 작업중인 자료를 인터넷 상의 공간(원격 저장소)에 백업할 수 있다.
- 대표적인 원격저장소로 GitHub 가 있다.
- 보통 Git과 GitHub는 같이 사용한다.
협업
- 원격저장소 기준으로 여러 사람이 함께 작업이 가능하다.
- 버전관리
터미널 창에 직접 명령을 실행하는 CLI(Command Line Interface) 방식
- 대부분의 개발자들이 선호한다.

다양한 Git 관련 프로그램 (아래 링크 참조)

Git - GUI Clients

GUI Clients Git comes with built-in GUI tools for committing (git-gui) and browsing (gitk), but there are several third-party tools for users looking for platform-specific experience. If you want to add another GUI tool to this list, just follow the instru

git-scm.com

Git 설치방법 - windows (아래 Mac 용 있음)

1. 사이트 접속 (아래 링크있음)

Git

git-scm.com

2. 각 운영체제(windows, Mac 등)에 맞게 프로그램을 다운로드한다.

(Windows 라면 오른쪽 모니터에 있는 다운로드 버튼을 눌러 다운받는다.)

git-scm

3. [Git Bash] 찾아 실행

Git Bash

4. $git --version 명령어 입력 후 버전 정보가 나온다면 설치 완료

git --version

Git 설치방법 - macOS

(사진 첨부는 못했습니다.)

1. 터미널 실행

2. [Homebew] 설치 (아래 사이트에서 코드 복사 붙여넣기 하시면 된다.)

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

homebrew

3. brew 명령어를 통해 설치 확인

4. brew install git 명령어 입력하여 git 설치

5. 이전에 설치 했었다면 brew upgrade git 명령어로 최신버전으로 업데이트

6. git version 설치 확인

Git 환경설정 - Windows, macOS (공통)

//이름설정
$ git config --global user.name "Your Name"

// 이메일 설정 (유출되도 상관없는 이메일(공적인 이메일 등)
$ git config --global user.email "you@your-email.com"

// 한글 출력 오류 방지
$ git config --global core.quotepath false

// 자모 분리 현상 방지 macOS 유저만, (혹시나 windows에서도 
//현상이 일어난다면 그때 적용)
$ git config --global core.precomposeunicode true

프론트엔드 애용템 Bootstrap v5 설치하는 법 (CDN,cdnjs)

집이좋은 덜렁이 — Fri, 7 Oct 2022 17:21:20 +0900

코딩 시간을 대폭 줄여주고, 복잡한 ui를 간단하게 짜주는 아이템

Bootstrap 설치방법에 대해 알아봅시다.

설치방법

1.아래 bootstrap에 접속한다.

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

2.아래쪽 살짝 내려서 오른쪽의 CDN의 코드를 복사 붙여넣기 한다.

(어디다 넣어야할 지 모르겠다는 분은 아래 링크 참고 or 아래 코드 적어놓은 것처럼 작성하시면 됩니다.)

<!doctype html> 과 <meta name="viewport" ...> 태그는 필수로 넣어주시기 바랍니다.
버전 5부터는 jQuery 코드를 설치할 필요가 없지만 ui 요소에 따라 따로 설치해주시면 됩니다.

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap</title>
    
     <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    
    <!-- css 추가연결 -->
    <link rel="stylesheet" href="addCss.css">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- bootstrap bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>

여기까지 bootstrap v5 cdn 작성요령

bootstrap 버전 5 이하 사용하고 싶은 경우 (예: 3.4.1 ver)

5 이하 버전에서 jQuery 사용시 jQuery -> popper.js ->bootstrap.js 순으로 정리하시면 됩니다.
popper.js 같은 경우 드롭다운, 팝오버, 툴팁 UI를 사용하지 않을 경우에는 뺴셔도 무방합니다. (빼면 용량줄어듦)

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap</title>
    <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@버전숫자/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <!-- css 추가연결 -->
    <link rel="stylesheet" href="addCss.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
    
    <!-- popper js (용도에 따라 빼도됨)-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    
    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@버전숫자/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
  </body>
</html>

cdnjs 확장 프로그램으로 다운받기 (VScode 기준)

1. [F1]키를 눌러 상단의 입력창이 활성화 되는지 확인

F1 누르면 활성화

2. cdnjs 입력후 [cdnjs: Search for libraries] 선택

3. 순서대로 [ bootstrap ] - [ bootstrap] - [5.2.2] 아래 이어서 ↓↓(*버전은 최신버전만 보일것임)

4. [ css/bootstrap.min.css ] 와 [ js/bootstrap.bundle.min.js ] 선택한다. [~~ Copy to Clipboard] 로 복사/붙여넣기 하면 된다.

(*5버전 이하로 하실 분은 [ js/bootstrap.min.js] 를 선택한 뒤 버전 숫자만 바꿔주면된다.

특정 패키지로 설치하시는 분이나 Ruby로 설치하시는 분은 홈페이지 아래 설치예시 있으니 참고 바랍니다 !!

글이 도움 되셨으면 아래 공감 ♥ 버튼 눌러주시면 감사합니다 !!~

boostrap 양식 써놓고 저장하는 방법

VScode 기본 셋팅(2) - HTML snippets 설정

★참고 저는 기본 셋팅으로 이렇게 설정한다. 를 알려드리고 싶은거 뿐 개인적으로 설정하시는데 참고용으로 봐주시기 바랍니다. 지난 번 세팅 때 요거 ↓↓↓ 설치하신분들 한해서 제가 쓰는

palkong.com

카카오톡 꿀팁 2탄, 단톡방 초대 안받게 하는방법 & 사진 깔끔히 옮기는법 & 실수로 채팅방 착각해서 보내는 습관 방지법

집이좋은 덜렁이 — Wed, 5 Oct 2022 23:34:00 +0900

카카오톡 숨겨진 꿀기능 2탄!!

실생활에서 종종 사용할만한 기능들을 가지고 왔는데요. 도움되셨으면 좋겠습니다 :)

1.지속적인 단톡방 초대 오지 않게 하기 !! (완전 쉬움)

더 이상 단톡방에 있고 싶지 않은데 실수 or 일부러 다시 초대하여 귀찮게 하는 상황 혹시 있으신가요?

지금은 없지만 나중에라도 이러한 상황에 처해지면 곤란할텐데요. 지금 알고 나중에 써먹어 봅시다.

해결방법

1) 나가고 싶은 단톡방에 들어가 메뉴 클릭

메뉴 클릭

2) 하단의 설정(톱니바퀴) 클릭

(나가기 버튼 누르기 X)

설정 클릭

3.맨 아래 [초대거부 및 나가기] 클릭

초대거부 및 나가기

2. 핸드폰으로 찍은 사진 원본 그대로 옮기는 법 (화질 좋게 보내는 법)

(사진 자주 찍어 옮기시는 분한테 추천)

핸드폰으로 찍은 사진을 컴퓨터로 옮길때 화질이 깨져서 보일 때가 있습니다.

평소에도 설정해두셔도 괜찮습니다 !! 나쁘지 않은 설정

설정방법

1) 앨범 클릭

앨범 클릭

2) 하단 오른쪽의 (···) 메뉴 클릭

메뉴선택

3) 선명한 사진 그대로 보고싶다면 "원본", 동영상도 고화질로 저장하고 싶다면 "고화질" 선택 후 확인

(설정 각각 해보시고 더 맘에 드는걸로 하시면 됩니다.)

화질 설정

3. 채팅방 착각해서 잘못 카톡 보내는 실수 줄이는 방법 (간단함!!)

친구한테 보내야할껄 선생님이나 부모님, 또는 친하지 않은 지인한테 보낸다고 생각해본다면 상상만해도 소름끼치죠?

잘 톡하지 않거나 조심스러운 분한테 간단한 설정만으로 이 위기는 극복할 수 있습니다.

설정방법

1) (실수로 보내지 않아야할 상대) 톡방 메뉴 클릭

메뉴 클릭

2) 설정 클릭

설정 클릭

3) [현재 채팅방 입력창 잠금] ON 설정

채팅방 잠금 설정

4) 잠금된 화면 설정

잠금화면

대화를 보낼때는 오른쪽의 자물쇠 누르시면 채팅창으로 바뀝니다.

정보가 도움 되셨다면 아래 공감♥ 한 번 눌러주세요!!

새어나가는 개인정보 유출, 간단한 휴대전화 설정으로 예방하기

집이좋은 덜렁이 — Mon, 3 Oct 2022 23:21:51 +0900

날이 가면 갈수록 심해지는 개인정보 유출 피해,

스미싱, 보이스 피싱 등 여러 경로로 부터 새어나가는 나의 개인정보들,

휴대전화 사용중에 당연하게도 앱 설치등 권한이 필요하다고 하면은 바로 의심없이 수락하는 시대입니다.

하지만 사용중인 기능이나 앱을 만든 회사측에서 나의 개인정보가 새어나갔다는 소식을 들으면

괜히 찝찝하고 답답한게 현실이죠?

이제는 스스로도 개인정보보호를 해야합니다. 간단한 휴대폰 설정으로 개인정보 예방이 되는 방법 몇 가지 가르쳐 드립니다.

1.MMS (장문의 문자메시지) 권한 설정 (기기마다 약간의 차이가 있을 수 있음!)

: MMS의 경우 장문의 문자는 내용이 표시가 되지 않아서 그 안에 어떠한 내용물이 있는지 모릅니다.

: 따라서 내용물이 뭔지 클릭함과 동시에 악성코드로 인한 개인정보 유출이 일어나기 때문에 방지해 줍니다.

설정 방법

1.메시지 앱을 켜 세로 점선 형태의 [메뉴] 클릭 - [추가 설정] 클릭

메시지 권한 설정1

2. 다시 [추가 설정] 클릭

추가설정 클릭

3. [멀티미디어 메시지 (MMS)] 클릭

MMS 메뉴 클릭

4. [내용 바로 보기] 설정 기능 OFF

(아래의 로밍 시 자동으로 내용 보여주기도 함께 꺼졋다면 설정 -끝-)

2.앱 위치 권한 설정

: 앱 다운시 [위치] 정보를 필수로 받는 앱들이 많이 있는데, [위치] 정보 탈취 당할 시 본인 거주지, 활동 기록 등 신상 노출이 될 위험이 있습니다.

:(예)구글 MAP, 네이버 지도, chrome 등등

:[위치] 권한을 24시간 필요로 하는 앱이 아니면 앱 사용중일때만 사용하도록 해줍니다.

간단 설정 예 (기기마다 다를 수 있음.)

1. [설정] -> [애플리케이션] 클릭

설정 - 애플리케이션

2. [메뉴] - [앱 권한] 클릭

(일일이 어플마다 클릭해서 위치 설정 해주는 방법도 있습니다.)

앱 권한 클릭

3. [위치] 앱 권한 클릭

위치 권한

4. 필수 앱에다가만 [위치 권한 체크] 그 외는 OFF

어플 위치 권한 설정

3.개인정보보호 권한설정 (진단데이터, 마케팅 정보 수신)

:휴대폰이 오작동하거나 고장이 날 때 고치기 위한 샘플로 진단 데이터를 보내는데요.

:진단 데이터를 보냄과 동시에 휴대전화 속 개인정보도 빠져나가기 때문에 위험할 수 있습니다.

:진단 데이터 거부와 동시에 마케팅 정보 수신도 제거해 놓읍시다.

설정방법

1.[설정] - [생체 인식 및 보안] 클릭

[설정] - [생체 인식 및 보안]

2. 아래의 [진단 데이터 보내기] 및 [ 마케팅 정보 수신] 체크 OFF

진단 데이터 보내기, 마케팅 정보 수신 off

4. 구글 계정의 2차 보안 인증

:자신이 가지고 있는 구글 계정에 모르는 사람이 사용할 때 알람을 보내주는 기능입니다.

:이것은 자율이니 원하시는 분만 하시면 될 것 같습니다.

설정 방법

1. [설정] - [계정 및 백업] - [계정 클릭]

계정보호하기

2. 자신이 생성한 [구글 계정] 클릭 - [보안] 탭의 [2단계 인증] 클릭하여 설정

2단계 인증

4번을 제외한 1,2,3 번만 설정 하셔도 일상생활 속 개인정보보호는 상당히 가능해졌다고 볼 수 있습니다.

요즘에는 가족들,친구 이름으로도 스미싱을 시도하기도 하니 평소와 다른 말투라면 의심해 보는 것도 좋을 것 같습니다.

정보 도움 되셨다면 아래 ♥공감 한번 부탁 드립니다!!

이상한 변호사 우영우 9화 - 피리부는 사나이 (내용有)

집이좋은 덜렁이 — Sat, 1 Oct 2022 23:48:36 +0900

어린이들을 해방해주기 위해 납치까지 하며 애들하고 노는 독특한 청년에 대한 이번화 -피리부는 사나이- 편

인기가 식을 시기일 때 마저 챙겨보는 나 자신.. 돌이킬 수 없기에 16화까지 달려봅니다..

어린이 해방군 총 사령관 방구뽕

사진 속 서있는 청년이 이번화 주인공 "방구뽕" 씨입니다.

방구뽕 이란 청년은 저기 타있는 학원버스의 원장 아들로서 아이들과 친해지기 위해 가지고 있던 이름을 버리면서 까지 개명을 하였습니다.

방구뽕 씨는 본래있던 학원 운전기사를 커피에 수면제에 타서 다른곳에 보내고 아이들에게 놀자면서 버스를 훔치고 산에가서 놀게 됩니다. (학원에서 헤어나오지 못하는 아이들은 오랜만에 놀 생각에 신나합니다.)

잡힌 주인공 방구뽕 씨

방구뽕 씨는 역시나 답게 아이들 학부모들의 신고로 미성년자 약취 유인 혐의로 체포되었다.

이번 화 내내 방구뽕씨의 일관된 주장이 있었는데

어린이는 지금 당장 놀아야한다.
어린이는 지금 당장 행복해야한다.
나는 잘못하지 않았다.

이러한 주장과 태도를 변호사와 상담을 했음에도 불구하고 재판에서도 당당하게 자신의 생각을 말하자 이를 본 재판장은 이를 마땅치 않아 하며 눈치없는 주인공의 죄질은 나아지지 않게 됩니다.

가뜩 징역형을 살지도 모르는 재판에서 자기반성이라도 하면 실형을 안받을 수 있을텐데, 저런 판단을 하는 것 자체가 대단 하다고 느껴졌습니다. 다 잘못했다라는 환경속에서 자신만의 주장을 펼치는 것은 참 어려운 일일텐데 말입니다.

어린이들과 놀고 있는 어린이 해방군 총사령관

우영우 변호사는 방구뽕 씨에게 어린이들을 산으로 데려가 무엇을 했냐? 라는 식으로 묻자.

방구뽕 씨는 어린이 해방군 입대식이라 칭하지만 우리도 옛날에 놀법한

술래잡기
군고구마 먹기
얼음 땡
무궁화 꽃이 피었습니다

등 민속놀이 같은 체험학습 위주로 어린이들을 데리고 놀았습니다.

위 상황을 아무것도 모르는 어른들이 들으면 미x놈이라고 생각들법한 일들이네요.

아이들을 납치해 버스 강탈하고 산에서 민속놀이체험을 한다.. 드라마 아니였으면 변명도 힘들 것 같습니다 ㅋㅋ

어린이 해방군들 취조

우영우 변호사는 방구뽕씨가 자신의 주장에 불리함을 해소하기 위해 어린이들의 의견을 물어보러 학원에 찾아갑니다.

이 곳 학원의 어린이들은 학교가 끝나고 바로 학원으로 불려오며 저녁 끼니를 챙기지도 못하자 근처 패스트푸드 점이나 주로 편의점에서 끼니를 때우는 데 이걸 본 우영우 변호사는 사태의 심각성을 깨닫습니다.

어린이들에게 부모들의 입김이 들어갔는지 방구뽕 씨에 대해 물어보자 대답을 회피하거나 그날 일은 좋았다 라는 의견은 받았지만 옹호하는 애들은 거의 없었고 그나마 한명이 벌받는 것을 싫다는 말에 우영우 변호사는 잘못하지 않았다 라는 결론을 내렸는지 최대한 자료를 수집합니다.

학부모와 학원 원장 회의

피해 학부모들이 모여 학원 원장과 합의를 위해 만났습니다. 역시나 학부모측은 재발 가능성과 사태의 심각성만을 놓고 일관된 의견을 내려놓자. 학원원장은 아들의 선한 성격을 주장하며 무릎조차 꿇으며 봐달라고 말합니다.

이 회의장면 씬은 자기들 만족하자며 어린애들 굴리는 부모 입장도 이해 되지만 방구뽕씨의 의견도 이해 되서 좀 혼란 스럽더라구요.

방구뽕 마지막 재판

마지막 재판에서 어린이들 앞에서 당당하게 난 떳떳하다는 걸 보여주기 위해 어린이들을 불러달라는 방구뽕씨의 부탁으로

한바다는 학부모를 어떻게든 꼬드겨 재판에 참석하게 합니다.

재판이 시작된 순간 방구뽕씨는 진술 대신에 사진처럼 앞으로 나와 어린이들과 나눈 선언을 하게되는데..

이 부분이 개인적으로 인상깊었습니다.

1. 어린이는 지금 당장 놀아야 한다.

2. 어린이는 지금 당장 건강해야 한다.

3. 어린이는 지금 당장 행복해야 한다.

방구뽕 씨와 어린이들이 합동되게 말하니 좀 짠했습니다.

지금의 학부모와 학원은 잘못되었다. 라는 말도 드라마가 아니라 현실에서도 있는일이기에 와닿았던 것 같습니다.

재판장은 방구뽕씨와 아이들의 관계를 보고 실형은 주지 않은 것 같습니다.(열린결말)

제 학창시절에서도 새벽에 잠깐 학원나가 등교시간 전까지 학원다니다가 학교끝나고 학원을 또 가는 친구들이

심심찮게 보였었는데 이번화를 보면서 그 친구들이 생각 났던 것 같습니다.

지금의 옛날보다 심해진 사교육이 아이들을 저리 망치고 있는 걸 보면 이런 행태는 언제 바뀌나 싶습니다.

교육체계가 사교육이 필요없어질 만큼으로 좀 풀어 줬으면 하네요.

★이번 화 법 지식

1. 미성년자 약취 유인죄

(요약: 제 3자로 하여금 미성년자의 자유를 약취한 행위에 해당하면 죄가 성립된다.)

미성년자를 자기나 타인의 지배하에 두어, 정상적인 보호 관계나 자유로운 생활 상태를 침해하는 범죄
가해자는 부모가 될 수 있으며 미성년자는 궁극적으로 미성년자의 자유를 보호하기 위한 범죄이므로 정범 및 공범 또한 될 수 없음.
10년 이하의 징역에 처한다.

2.처벌 불원서

(요약: 피해자가 피고인의 처벌을 원하지 않는다는 사실을 작성하는 문서)

형사합의로 인해 피해자가 피고인의 처벌을 원치 않을 때 작성됨.
합의 후 작성할 시 합의금 수령시 제출하거나 당장 합의금 못받는 경우 공증을 받는 것이 좋다.

코딩 시간을 줄여주는 에밋(emmet)

집이좋은 덜렁이 — Thu, 29 Sep 2022 23:10:30 +0900

에밋(emmet)은 여러개의 코드를 기호로 연결지어 한 줄로 생성하게 해주는 기능을 말한다.

에밋(Emmet)

HTML & CSS 코등 입력을 지원하는 에디터용 확장 기능을 뜻한다.
기존 코드가 생략되어 효율적인 코드 작성이 가능하게 됨.
예) margin-bottom:100px; ⇒mb100; 입력 후 [tab] 을 누르면 자동 완성 되는 것을 볼 수있다.

에밋(Emmet)이 탑재된 에디터

VScode (비주얼 스튜디오 코드)
Adobe Dreamweaver(어도비 드림위버)

확장기능으로 에밋(emmet) 추가가 가능한 에디터

Atom(아톰)
Brackets(브래킷)
Sublime Text(서브라임 텍스트)

HTML 에밋(emmet) 사용법

emmet 사용설명서

기호는 "div ." 또는 "div >" 와 같이 띄어쓰면 안되며 무조건 붙여 써주어야 한다.

예시) 오른쪽의 Emmet Abbreviation 박스는 생성시 만들어지는 모습을 미리 보여준다.

emmet으로 ul 리스트 생성

CSS 에밋(emmet) 사용법

HTML보다 에밋을 사용하기 살짝 번거롭지만 자주 사용하는 것들만 기억해 둔다면 매우 편하다.

자주쓰는 css 에밋 예시

css 에밋 예시

몇 가지 예를 들자면

w100 -> width:100px; 로 자동완성을, df - > display:flex; 가 된다.

단위를 써야하는 경우 (width나 height 작성시)

css 에밋 적용시 단위

그 외 emmet에 대해 자세히 알고 싶다면 아래 emmet 사이트 참고하시면 됩니다.

Cheat Sheet

Download cheat sheet as printable PDF A5

docs.emmet.io

자주쓰는 HTML 양식 저장해서 시간 절약하는 방법

VScode 기본 셋팅(2) - HTML snippets 설정

palkong.com

"사설 렉카 강제 견인" 당하지 마세요. 사설렉카 대처법 & 예비운전자도 필수

집이좋은 덜렁이 — Wed, 28 Sep 2022 22:21:18 +0900

렉카 [출처:아시아뉴스통신]

교통사고 장소에 번개같이 날아가는 사설렉카, 운전중에 종종 보시지 않으신가요??

이런 사설렉카에게 강제로 견인되어 피해를 보는 분들이 증가한다고 합니다.

실제로 제 지인이 당한 걸 들으니 이번에 저도 알아 둬야겠다는 생각이 많이 들었습니다.

현재 운전중이거나, 예비 운전자 분들도 혹시모를 사고에 대비하여 알아 두시면 좋겠습니다.

알아둬야할 변경된 법령

간단 요약

견인하는 자는 차량의 소유자 또는 운전자에게 구두 또는 서면으로 통지할 것
총 운임/요금에 대해 구난동의를 받을 것.

렉카 측에서 위의 두 사항을 지키지 않고 동의없이 견인하려 한다면 불법신고 사유로 들 수 있습니다.

동의없이 가져가서 청구서를 내밀어도 내실 필요 절대 100% X 없습니다.

(2020년 10월 1일에 국토 교통부에서 구난 형 특수자동차 운임/요금표를 정해놨습니다.)

선넘는 요구청구시 민사적으로 처리하시면 됩니다.

관련 법령 더 알고 싶으시다면 아래 사이트에 들어가서

"제21조(운송사업자의 준수사항)" , "제22조(운수종사자의 준수사항)" , "구난동의" 키워드로 찾으시기 바랍니다.

화물자동차운수사업법시행규칙

www.law.go.kr

사설렉카가 어떻게 하나요??

사설렉카에 대해 잘 모르시는 분들을 위해 사설렉카 수법에 대해 간단히 알려드립니다.

사설렉카가 사건현장에 도착한다.
사고차량에 렉카 견인고리를 걸고 여러 변명을 대면서 갓길쪽으로 빼준다며 끌고간다. (1차 피해)
명함을 건낸걸 받고, 차를 자신의 근처 공업사에 가져간다고 한다. (2차피해)
견인된 차는 견인지점에 보관되어있으며 사건이 끝나고 찾으러 갈때까지 보관비 청구 (3차 피해)

한 줄 요약하자면 "렉카가 본인의 차량을 끌고가게 냅두면 상당한 피해를 본다" 는 얘기입니다.

적게는 3~40, 많으면 8~90 +@ 까지 모르고 청구비를 납부하게 됩니다.

사설렉카한테 안당하는 방법 (일반도로)

알아두셔야 할 점 : 본인은 완강히 거부의사를 표시할 것, 명함 받지 말 것, 영상 녹화 할 것

대처법

사고 발생 시 보험 견인을 바로 부른다.
렉카가 도착했다면 보험사에 전화해 자신이 부른 렉카인지 확인합니다.
- (중요) 확인안된 렉카가 바로 견인 고리를 걸려고 하면 무조건 막으세요.
- 보험에서 왔다고 얼렁뚱땅 넘어가는 사람이 있다고 합니다.
사설렉카로 추정된다면 렉카 측에서 여러 언변으로 끌고가려고 할건데 무조건 듣지말고 막으세요.
- 간혹 여성 운전자거나 기가 약하신분을 상대로 강하게 나오는 렉카가 있는데 주눅들지 말고 영상(=녹음) 키고 하지말라고 소리치세요.
- "저희는 ㅇㅇ견인업소에서 왔습니다." 하면서 명함 건네면 받지 마세요. (암묵적 동의로 받아들일 수 있습니다.)
- "도로교통에 피해 가니까 갓길까지만 빼주겠습니다" 라는 선심같은 말에도 속지마세요. 막으십시요
★ 끌고가려고 하는 것에 동의 안하는 것이 포인트
보험 렉카가 올때까지 감시하다가 보험렉카에게 차를 견인받으시면 됩니다.

(고속도로)에서 사고가 났을 때 사설렉카 대처법

도시 시내가 아닌 고속도로에서 사고가 났을 때는 상당히 애매하실 겁니다.

차가 워낙 많은 도로 여건상 눈치보여서 빠르게 해결하고싶은 사람들이 사설렉카에게 맡겨버리는 악상황이 발생하기도 하는데요.

사설렉카? 무.조.건 막으세요

고속도로에는 이러한 상황에 대비하여 "한국도로공사" 에서 지원해주는 서비스를 시행하고있습니다.

가까운 안전지대까지 옮겨다 줍니다.

1588-2504

고속도로에서 사고발생 시 위 번호만 기억해주세요.

대처법

사설렉카는 무조건 막는다. (위의 "알아두셔야할 점" 기본 장착해야함.)
(사고발생시) 1588-2504 전화 후 >> 1번 눌러 교통사고 긴급견인을 부른다.
- 가까운 휴게소나 영업소, 졸음 쉼터 등 안전지대 까지 데려다 줍니다.
보험회사 견인 서비스를 부른다.
끝

사설렉카에게 견인 당했다면?

상황을 둘로 나누어서 설명하겠습니다. 얼떨결에 동의하여 렉카가 끌고간 경우, 동의하지 않았는데 렉카가 끌고 간 경우

1. 동의하에 렉카가 끌고간 경우 (암묵적 동의 포함)

암묵적 동의의 경우 예시

: 아무말도 안해서 렉카가 끌고가는데도 아무런 제스처를 안취할 때

: 사설렉카가 건넨 명함을 받았을 때 등등

동의(암묵적 동의 포함)하에 렉카가 끌고 간 경우 해야될 행동

렉카 측 청구서에 포커스를 두자.
청구서가 많이 나올 경우 아래의 참고 내용을 확인하여 금액이 올바른지 확인합니다.(아래 운임 요금표 참고)

운임 요금표

만일 고속도로에서 가까운 휴게소 까지 가는데 자신의 차가 소형차이고 10km 라면 견인비로 72,200원 이상 청구하면 안된다는 겁니다.

견인 장비료

또한 견인시 사용한 장비에 대한 요금 또한 위 사진과 비교하여 그 이상 나온다면 렉카측과 한 번 상의하시기 바랍니다.

(암묵적으로 동의한 것이므로 보장은 못하겠습니다. 변호사한테 상담한번..)

2. 미 동의 하에 렉카가 끌고 간 경우

자신이 동의하지 않은 증거를 수집합니다. (블박, 핸드폰영상, 녹음파일 등등)
차 찾으러 공업사에 가도 렉카 측에서 청구서를 내밀어도 민사처리하겠다고 내지마세요.
- 내도 상관없습니다. 그대로 돌려받으시면되요 ^^ 맘편히 내셔요.
(2번) 과 같이 강압적인 분위기에 일단 청구하셔도 상관없습니다. 걱정말고 내시고 민사적으로 소송 준비하시면 됩니다.

증거 수집까지 되신 분들은 위 순서대로 하시면 되구요.

혹시라도 증거수집이 불충분 하신경우는 위의 운임청구비 자료와 비교해서 적당히 합의 보시기 바랍니다.

운임요금표 자료 받아보기 ↓↓

안나오면다면 "구난형 특수 자동차 운임 요금표" 검색

공지사항

www.molit.go.kr

운전자분들에게 부탁드리는 한마디

제 지인은 교통사고 당시 기절해있었는데 사설렉카가 먼저 와서 차를 가져갔다고 하더라구요.

운전자가 구두로 동의할 상태가 아닌 경우 가동의 상태로 견인이 가능하다고는 하는데 듣는 저도 어이가 없었네요 ㅋㅋ;

한줄요약: 사설렉카 앞에서 안절부절 못하는 초보 운전자가 있다면 도와주시면 좋겠습니다..!!

글이 도움 되셨다면 공감(♥) 한 번 부탁드립니다.^3^

추석 전 1588-2504 번호로 교통상황 보는방법

곧 다가올 추석 !! 장거리 운전하실 때 꿀팁★

곧 다가오는 추석 연휴 운전할 생각에 고민 많으신분들에게 몇 가지 정보를 알려드릴려고 합니다. 네비게이션에서는 최적의 경로만 알려줄뿐 실시간 상황은 알려주지 않습니다. 1. 환기는 최소

palkong.com

카카오톡 꿀팁 & 숫자1 그대로 몰래보기 & 카톡 실명 확인하는 방법 & 모든 데이터 확인하는 방법

집이좋은 덜렁이 — Mon, 26 Sep 2022 23:11:53 +0900

카카오톡 숫자 1 사라지지 않고 몰래 내용 확인하는 법, 친구들과 주고받은 파일/영상 데이터 모아서 보기, 모르는 사람이지만 일적으로 등록해야할 때 카톡 자동친구추가 하지 않는 법. 등등 여러 카카오톡에 관한 정보를 알려드리도록 하겠습니다.

1. 그 동안 주고 받았던 파일,링크, 영상 등 모든 파일 확인하기

비행기모드

다들 한 번씩은 해보신 적 있으실 겁니다. 1 숫자는 지우고 싶진 않고, 내용 확인하고 싶을 때 "비행기 모드" 켜놓고 확인하지 않나요?

하지만 글의 내용만 확인 할 수 있을 뿐, 사진이나 동영상 같은 경우는 비행기 모드 때문에 확인이 어렵고, 클릭하면 보이지는 않지만 1 숫자만 지워지는 참사가 발생합니다.

이 때, 톡방에 들어가지 않고도 읽음표시 1이 사라지지 않고 영상이나 사진을 확인할 수 있는 방법이 있다면..? (아래로)

"비행기 모드" 없이 톡방의 파일이나 동영상 같은 내용물을 보는 방법!! (내용은 못봅니다.)

1. [내 프로필] 클릭 -> [나와의 채팅] 클릭

나와의 채팅 클릭

2. 사진과 같이 [서랍 모양의 아이콘] 클릭

서랍 아이콘 클릭

3-1. 원하는 데이터를 클릭한다. 상단의 [메뉴] 버튼을 눌러도 상관 없다.

원하는 데이터 클릭

3-2. "상단의 메뉴를 클릭한 모습" 원하는 데이터를 클릭하면 된다.

사이드 메뉴

4. 자신이 원하는 데이터를 다 불러온 모습 (돋보기를 눌러 특정 사람, 특정 기간을 추정해 확인할 수도있다.)

(어떠한 데이터들이 오고갔나 다 파악이 가능하며 한 번이라도 들어갔던 톡방이라면 다 확인이 가능합니다.)

데이터 확인

5."돋보기를 누른 화면", 오른쪽의 달력을 클릭하면 해당 날짜에 주고받은 데이터를 확인할 수 있다.

★자신이 확인하고 싶은 사람의 이름을 검색해서 그 사람이 보낸 데이터만 볼 수 도 있음.

기간으로 검색

2. 번호 추가시 카톡 자동등록 설정

모르는 사람, 택배기사, 세탁소 사장님, 배달원 등등 친하지는 않지만 번호추가를 해야되는 경우에 카톡친구가 자동으로 등록되는 경우가 종종 있으실 텐데요.

카톡 친구 등록되면 뭔가 불편한 느낌 받으실 겁니다.

아래 두 가지 방법을 알려 드릴 테니 실생활에서 바로 사용해봐요.!!

1. #을 이용한 전화번호 등록

번호 추가할 때 이름앞에 "#(샾)" 을 추가하고 등록하면 카카오톡에 친구 등록이 안됩니다.

#을 이용한 이름작성

2. 카카오톡 [설정] > [친구] > [자동 친구 추가] 해제

카카오톡 설정에 들어가서 자동 친구 추가를 해재하시면 '#'을 사용하지 않고도 자동으로 등록되지 않습니다.

(단, 친구들하고 번호 교환시 카톡에 자동으로 안떠서 불편할 수도 있음)

자동 친구 추가 설정

3. 별명으로 설정한 이름 실명이 까먹었거나 확인하고 싶을 때.

친구들을 별명으로 저장해놨다가 오랜만에 부르려니 까먹을 때
이상한 이름으로 저장된 사람들의 이름을 확인하고 싶을 때
모르는 사람의 번호를 저장하고 이름을 확인할 때

예를 들어 봅시다.

이름으로 안되있는 프로필

중고거래 시 익명을 사용하고 싶을 때나, 잠수타고 싶을 때, 이름을 보여주고 싶지 않을 때 위와 같은 이름과 기본 프로필을 사용합니다.

그러면 어떻게 확인하냐?

1. 확인하고 싶은 프로필을 누른다.

[이름 수정하기] 나 [원화] 버튼을 클릭한다. (둘 다 확인하는 것이 좋다.)

프로필 확인

2. [이름 수정하기]를 클릭했을 경우

이름 수정을 통한 확인

위 사진과 같은 경우 내가 아닌 친구 본인이 일부러 저장해 놓은 것이기 때문에 확인할 수가 없다.

(이 경우에는 [원화]버튼 을 눌러 재 확인한다.)

3.[원화]버튼 클릭했을 경우

(원화 버튼이 없다면 상대방이 당신을 친구 등록안한 겁니다 ^0^..;;)

실명 확인

오른쪽 빨간 박스에 "홍*동" 같이 가운데에 * 이 있지만 두 글자의 이름을 확인 할 수 있었다.

보통은 [이름 수정하기] 버튼으로 이름 전체를 확인할 수 있지만 그것조차 안보일 경우 [원화]버튼을 통해 일부만 확인하는 것만으로도 얼추 추측할 수 있다는 점이 다행 아닌가 싶습니다.

아예 모르는 것보단 성이라도 알고 있는게 ㅎㅎ..

이 글이 도움이 되셨다면 공감 한 번 씩만 눌러주세요~

React 설치 및 기본 사용법

집이좋은 덜렁이 — Sat, 24 Sep 2022 23:11:23 +0900

처음 리액트를 접하거나 처음 설치하시는 분들을 기준으로 글을 작성해 보았습니다.

어딘가에 빠진 부분이라던가 틀린 부분이 있으시다면 댓글 남겨주시면 감사합니다!!

설치해야 될 것 4가지

Node.js
npx
npx
git
yarn (선택에 따라 나중에)

Node.js 설치 → (node.js 설치시 npm 도 같이 설치됨.)

1. Node.js 페이지 접속

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

2. 왼쪽의 “16.17.0 LTS” 를 다운 받는다. (오른쪽의 "현재버전" 다운로드 X)

node.js 설치

3. 다운로드가 다 되었으면 “명령 프롬프트” 실행

4. " node -v “ 명령어로 설치 버전 확인

node -v

npm 설치 확인(node.js 설치시 같이 설치됨)

1. 명령 프롬프트 실행

2. “ npm -v “ 명령으로 설치 확인

npm -v

npx 설치 확인

1. “ npx -v “ 명령어로 먼저 확인

2. 버전 정보가 안뜬다면 “ npm install npx -g “ 명령어를 사용해 설치

3. “ npx -v “ 명령어로 재 확인

npx -v

npm, npx 오류메시지 및 해결 방법

버전 확인 중 아래와 같은 오류메시지가 뜨는 경우

“npm WARN config global -global, -local are deprecated. Use -location=global instead.”

해결방법

PowerShell [관리자 권한] 실행
Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force 입력 후 [Enter]
npm install --global --production 입력 후 [Enter]
npm-windows-upgrade 입력 후 [Enter]
npm -v로 확인

깃(Git) 설치

Git - Downloads

Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp

git-scm.com

1. git 홈페이지 접속하여 git 설치 후 [명령 프롬프트] 실행

2. git -v 또는 git --version 명령 입력 후 [Enter]

git -v

모든 설치가 다 끝났다면 기본적인 준비는 다 끝난 것이다.

리액트 사용해보기 (VScode 에서 설명)

create-react-app 을 사용하지 않는 경우

1. VScode 실행

2. HTML 파일 </body> 위에 아래와 같은 순서로 코드 입력

3. 컴포넌트를 작성할 js 파일을 리액트 script 보다 아래에 위치

<body>
...

<!-- DOM 컨테이너 -->
<div id="root"></div>

<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<!-- 리액트 컴포넌트 가져오기  -->
<script src="파일경로명/js파일명.js"></script>
</body>

create-react-app 사용해 react 폴더 만들기

create-react-app : react 폴더를 간단히 만들어주는 명령어 이다.

1. 작업할 “영어로 된 폴더명”을 생성한다. (예: react-study, reactApp)

(※ 주의) 생성된 폴더 까지 가는 폴더 경로에 한글이 있으면 안된다. >>오류남

잘못된 폴더 경로 예시

C:\공부\React-Study →(x)
C:\Study\리액트 공부→(x)

잘된 폴더 경로 예시

C:\Desk-top\React-Study →(O)
C:\React-Study →(O)

2. VScode 새 창 연 후 생성한 폴더 열기

3. 터미널 열고 아래 코드 입력 (cmd 창에서 입력해도 상관은 없다.)

(이 과정에서의 터미널 종류는 앞에 "$" 가 붙는 git bash 터미널을 사용하길 추천합니다.)

$ npx create-app-react 프로젝트명

4. 설치 완료 후 아래와 같이 화면이 나오면 성공 (testing = 프로젝트명)

설치 성공

생성된 파일들

5. 리액트를 실행 시켜 보자. (※참고) testing = 프로젝트명

C:\react-study> cd testing
C:\react-study\testing> npm start

6. 결과화면

리액트가 실행된 모습

프로젝트가 제대로 설치가 되었다면 위와 같은 리액트 로고가 빙글빙글 돌아가며 정상 작동할 것입니다.

새로이 create-react-app을 사용해 다른 프로젝트를 만들 경우

1. [ctrl]+C 를 입력해 일괄 작업을 끝낸 후 (끝내는 질문이 나온다면 Y 입력)

2. 아래 코드와 같이 입력 ("cd .. “ 명령으로 나오는게 Point)

<!-- "cd .." 명령을 사용해 testing 프로젝트 탈출-->
C:\react-study\testing> cd ..

<!-- 프로젝트 생성 명령어-->
C:\react-study> npx create-react-app 새 프로젝트명

cd .. 명령을 통해 react-study\프로젝트 -> react-study 로 빠져 나오는 것이 핵심이다.

리액트 파일 백업시 tip

리액트 프로젝트 설치시 아래 이미지와 같이 "node_modules" 폴더가 있을텐데 이 폴더의 용량이 약 2GB 이다.

node_module

백업 순서를 이렇게 해보시면 좋을 겁니다.

1. node_modules 폴더 삭제 (나중에 재 설치 가능합니다.)

삭제는 rm -rf node_modules 명령어 로도 가능합니다.

2. 백업

나중에 사용시 터미널을 사용해 아래 명령어로 재 설치 해주시면 됩니다.

npm install

도움 되셨다면 공감 한번 부탁드립니다 :)

css 속성 scroll-snap 간단 요약 정리

집이좋은 덜렁이 — Thu, 22 Sep 2022 23:20:59 +0900

scroll-snap

페이지 스크롤 시 사용자에게 보여주고 싶은 영역에서 멈추게 해주는 기능
큰 이미지를 사용하는 풀스크린 레이아웃이나 갤러리용 상이트에 적용 하기 좋음.

scroll-snap 시 꼭 필요한 css 속성

height:100vh;
감싸고 있는 영역의 높이와 요소의 높이를 100vh로 맞춰줘야한다.

scroll-snap-type 속성 값 종류

scroll-snap-type :	value 의미
x	가로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다.
y	세로 방향 스크롤 시 빠르게 지나가거나 멈추게 할 수 있다.
both	상하좌우 스크롤시 빠르게 지나가거나 멈추게 할 수 있다.

scroll-snap-type 위치 지정

속성 종류	의미
mandatory	현재 표시되는 영역이나 다음 영역 등 어느 한 부분이 표시된다.
proximity	경계선 근처로 움직였을 때 화면이 스크롤 되고 그렇지 않으면 중간 지점에서 멈춘다.

scroll-snap-align 멈춤 기준 설정하기

scroll-snap-align	의미
start	다음 요소의 (맨 위쪽) 시작 지점에서 멈춘다.
end	다음 요소의 (맨 아래쪽) 끝나는 지점에서 멈춘다.
center	다음 요소의 정 가운데 지점점에서 멈춘다.

scroll snap 예시

//Sass
.container{
	scroll-snap-type: y proximity;
	
	.item{
		scroll-snap-align: start;	
	}
}

item 1

위와 같은 item1 에서 ~ 아래의 item 2로 넘어갈 때

item 2

위쪽의 1item의 여백이 살짝 있다면 알아서 2의 start 라인에 맞춰주는 역할을 한다.

-> 화면상에서 다음 item의 영역이 상당 수를 차지하면 다음 item으로 넘어가게끔 유도한 것이다.

css 제작에 도움이 되셨다면 공감 한 번 부탁드려요~

반응형 웹 사이트 작성 법 & 디바이스별 규격

집이좋은 덜렁이 — Wed, 21 Sep 2022 17:54:02 +0900

반응형 웹 디자인

디바이스 화면 크기에 따라 웹 페이지가 표현되는 방법이 바뀌는 것을 의미한다.

반응형 짜는법

HTML에

<meta name="viewport" content="width=device-width, initial-scale=1">

을 입력한다. (요즘엔 기본적으로 다 들어가있음.)

viewport 는 화면크기만 디바이스에 맞추는 것 뿐 레이아웃은 최적화 되지 않는다. 따라서 레이아웃도 최적화 시키려면 미디어 쿼리를 사용해야한다.

반응형 작성하기

1.CSS 파일에 작성하는 경우

/*MOBILE SIZE
================================================ */
@media (max-width: 700px) {
    .title {
        font-size: 4rem;
    }
}

미디어쿼리는 @media (max-width: 크기) { 코드 } 를 말한다.

2.HTML파일에서 link태그로 적용하기

<link href="css/style.css" rel="stylesheet">

보통의 css는 html에서 저렇게 불러온다.

하지만

<link href="css/style.css" rel="stylesheet" media="(max-width:701px)">
<link href="css/style.css" rel="stylesheet" media="(max-width:700px)">

link 태그에 media 속성을 줘서 따로 css를 적용 시킬 수도 있다.

3.css파일에서 css 파일 불러오기(다른 방법보다 느리기 때문에 선호는 안함)

@import url(style.css) (max-width:700px);

@import를 사용하여 미디어 쿼리가 적혀있는 css를 불러올수도 있다.

미디어 특성

미디어 특성은 미디어 쿼리 작성 시 max-width 나 min-width 같읕 속성들을 말한다.

특성 종류	의미
width	화면 가로 폭, max-width, min-width 작성 가능
height	화면 세로 폭, max-height, min-height 작성 가능
aspect-ratio	화면 너비와 높이의 비율
orientation	화면방향.ortrait(세로방향),landscape(가로방향)
resolution	디바이스 해상도

미디어 쿼리 디바이스별 가로 너비 기준점

디바이스 종류	너비 (width)
와이드 스크린 데스크톱	1440 px
데스크톱	1280 px
큰 테블릿 - landscape	1024 px
스마트콘+작은 테블릿 - landscape	800 px
큰 테블릿 - portrait	768 px
작은 테블릿 - portrait	600 px
스마트폰 - landscape + portrait	480 px
스마트폰 - portrait	320 px

portrait = 세로모드

landscape = 가로모드 를 말한다.

위의 기준점은 총 8분기로 나누었습니다.

미디어 쿼리 기준점은 몇분기로 나누냐에 따라 크기가 달라집니다. 4분기, 5분기.. 처럼 적은 갯수로 나눌수록 너비 또한 달라지니 주의하시기 바랍니다.

나무젓가락 쌓아두기 NoNo. 유통기한이 있다!!

집이좋은 덜렁이 — Tue, 20 Sep 2022 23:45:35 +0900

나무젓가락을 쌓아 놓고 계시는 분들 많으실 거라고 생각합니다.

(저도 많이 있습니다 ㅎㅎ..) 혹시 나무젓가락 유통기한에 대해 알고 계신가요?

오래 지난 나무젓가락 안묵혀 두고 유용하게 쓸 수 있는 방법 몇 가지 알려드립니다.

나무젓가락

나무젓가락 유통기한

나무젓가락 유통기한은 보통 포장지에 안적혀 있는데요.

나무젓가락 유통기한은 " 약 4개월" 이라는 사실!!

나무젓가락 성분 또한 그렇게 좋지는 않으니 너무 오래된 나무젓가락이라면(5~6개월 이상) 인 것들은 사용하시는 걸 추천 드립니다.

나무젓가락 활용법

1. 창틀 같은 좁은 곳을 청소할 때 (물티슈나 매직블록) 같은 청소도구를 나무젓가락에 끼워서 청소해보자.

2. 짜기 힘든 조금 남은 치약, 나무젓가락에 끼워서 알뜰하게 더 써보자.

3. 나무젓가락을 엇갈리게 붙여서 "컵 받침" or "정리함"으로 만들어서 사용해보자.

오래된 나무젓가락들은 많이 쌓여있다 싶으면 오래된거는 "청소"나 "간단한 물건" 들로 만들어서 재활용 해봅시다.

도움되셨다면 공감 한번 부탁드립니다 ^0^

글꼴 폰트 사이트 & 아이콘 폰트 사이트 추천 및 사용법

집이좋은 덜렁이 — Sun, 18 Sep 2022 23:07:01 +0900

굴림, 돋움, 고딕 등등 이런 글씨체 말고 여러 다양한 폰트들을 직접 보고 사용하고 싶다거나, 상대방이 원하는 폰트로 적용을 해야 될 때 참고할만한 사이트 들을 소개합니다.

글꼴 폰트 사이트

아래 모든 사이트들은 모두 무료인 곳도 있고, 특정 폰트만 무료로 푼 곳이기 때문에 상업적으로 이용하실 경우 주의해서 사용하셔야 합니다. (이 글에서는 구글폰트를 추천하고 아래에 사용법을 적어놓겠습니다.)

1. 구글 폰트 (★추천)

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2. 어도비 폰트

Adobe Fonts

Adobe Fonts partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and you can use fonts from Adobe Fonts on the web or in desktop applications.

fonts.adobe.com

3. TypeSquare

TypeSquare

문자를 통해 사회에 공헌하는 모리사와코리아의 클라우드 폰트 서비스입니다. 웹폰트, 데스크톱 폰트, 인쇄, 출판, 게임용 폰트, 소프트웨어 임베딩,　일본어서체, 한글 글꼴, 중국어 폰트, 다국

typesquare.com

4. DaFont

DaFont - Download fonts

www.dafont.com

5. 눈누

눈누

상업용 무료한글폰트 사이트

noonnu.cc

6. 공유마당

공유마당

gongu.copyright.or.kr

7. 네이버 나눔 글꼴

네이버 한글한글 아름답게

6만여 명의 사용자와 만든 마루 부리 5종을 배포합니다.

hangeul.naver.com

8. 산돌 구름

산돌구름

다양한 언어와 폰트를 내가 원하는 대로! 한글, 영문, 중국어 등 19,000여종의 폰트로 더 완성도 높은 디자인을 경험해보세요.

www.sandollcloud.com:443

구글 폰트 사용법(예)

1.자신이 사용하고 싶은 글꼴 검색/클릭

2.”Styles” 항목을 찾을때까지 드래그해서 내린다.

3.원하는 글자 두께를 찾았으면 + 클릭 (기본 글자두께는 Regular 400 이다.)

4.오른쪽의 사이드바 메뉴에서 가져올 방법을 선택 ->> link 또는 @import 클릭

5. link 라면 html에다가 @import 라면 css에다가 복붙한다.

구글 폰트

link로 적용시

link로 사용할 경우 드래그 쳐진 부분에 css2?family=Noto+Sans+KR... 가 포함된 link만 복붙해도 문제가 없다.

(Noto+Sans+KR 폰트를 사용하는 예시입니다.)

@import 하는 경우에는 두 가지 경우로 나뉜다.

1.HTML파일로 @import 해오는 경우

<!-- HTML 파일로 @import 해오는 경우-->
<!-- style 태그로 묶은 후에 붙여 넣어야 한다. -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
</style>

2.css파일로 @import 하는 경우

/*css파일에서 import 해오는 경우*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

아이콘 폰트사용하기 = font-awesome

라던가 와 같이 “페이스북”,”twitter”,”youtube” 등 sns 표시할 때 자주 아이콘을 사용하게 된다.

그럴 때 Free하게 쓸수 있는 사이트가 있다.

Font-awesome

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

현재 최신버전은 6까지 나왔지만 유료로 사용해야하는 아이콘들이 많다.

아직 공부중인 사람들이라면 굳이 유료결제 하면서 사용하는건 아니라고 생각한다.

홈페이지에서 아래로 내려 [All version] 을 클릭하고 Font-awesome 4 즉, 버전 4짜리를 찾으면 무려 675개의 무료 아이콘을 사용할 수 있다.

사용 방법

1. HTML 에 <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 를 붙여 넣어준다.

(font-awesome을 다운로드 하는 것도 한 방법이다.)

font-awesome 연결

2. 주로 <i> 태그를 사용하지만 다른 태그를 사용해도 된다. 대신, class명 규칙이 있다.

폰트어썸 예시

3. 자신이 원하는 아이콘을 클릭하면 <i class="fa fa-address-book" aria-hidden="true"></i> 와 같이 쓰는 방법이 나와있으니 참고하기 바란다.

아이콘 눌렀을때 나오는 화면

위의 방법이 맘에 들지 않는 경우

vscode를 사용한다면 cdnjs 확장프로그램을 받아서 font-awesome 을 검색해서 link로 다운 받고 버전만 4.7.0으로 바꿔주면 된다.

cdnjs 확장 프로그램

cdnjs 시작하기

VScode 사용중이라면

[F1] 클릭
"cdnjs" 입력 후 search .. 클릭
"fontawersome" 검색 후 클릭
버전 선택(버전이 하나만 나올 수 있음)
fontawesome.min.css 로 끝나는 것 클릭
(URL, LINK 상관없음) copy to clipboard 클릭
HTML <head> 태그 안에 대입

폰트어썸

8. 자신이 사용하고 싶은 버전 사용시 "6.2.0" 을 수정하면 된다. (추천은 4.7.0 !!)

cdnjs와 같이 유용한 확장 프로그램을 알고 싶다면?

VScode 기본 셋팅(1) - 확장프로그램 추천

※참고 !! 제가 편하게 사용하기 위해 깔아논 것 중 뽑아서 추천해드리는 것이기 때문에 절대적으로 깔아야 되는건 아님!! 맨 아래에 글에 쓰인 확장프로그램명 이름만 따로 정리해 놨습니다. 1

palkong.com

글이 도움 되셨다면 공감 한 번 부탁 드립니다 :)

FullSize 배경 이미지 & 이미지 용량 압축하는 방법

집이좋은 덜렁이 — Sat, 17 Sep 2022 23:10:24 +0900

fullscreen website [출처: awwwards 작품]

FullSize의 이미지로 배경을 하는 사이트를 만들 때 간혹 이미지의 가로 폭을 고려하지 않고 만들다가 이미지가 깨져버리는 경우가 발생 할 수 있다.

FullSize 이미지 설정방법에 대해 간단하게알아보자

FullSize 배경 이미지 설정방법

1. 가로 폭이 1200~3000px 정도인 이미지를 준비한다.

2. 이미지가 들어갈 영역의 높이를 100vh 로 설정한다. (100vh를 쓰는 이유는 부모 태그의 높이의 관계 없이 일정 높이를 갖기 귀함이다.).

Background 속성

풀사이즈 배경을 바탕으로 여러 이미지들을 위치 시키고 싶을 때에는

background-image: url1, url2;
background-position: center, center;

와 같이 “, (쉼표)”만으로 구분하여 한번에 적용시킬 수 있다.

이미지 파일 용량 줄이기

이미지가 많이 들어가면 웹 페이지 로딩 시간이 길어진다. 따라서 용량을 줄이는 방법을 생각해야 되는데.

로딩 속도를 높이기 위해 용량을 압축해주는 사이트를 소개해보겠습니다.↓↓

1.Shrink Me (추천)

이미지를 간단히 드래그 해서 화질은 그대로 유지한채 용량 압축이 가능한 사이트 입니다. 변환 시간이 매우 빨라서 인기가 있는 사이트 이다.

Shrink Me - Compress JPG, PNG, WEBP, and SVG Images

Shrink Me enables you to easily compress JPG, PNG, WEBP, and SVG images in order to make your site / apps smaller and faster for your users.

shrinkme.app

2. Compressor.io

Shirink Me 페이지와 비슷한 사이트 이지만, 보다 압축및 다운로드에 시간이 걸린다고 생각하면 된다.

Compressor.io - optimize and compress JPEG photos and PNG images

Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.

compressor.io

통화녹음 금지 개정안 발의, 이제는 녹음도 불법?

집이좋은 덜렁이 — Fri, 16 Sep 2022 23:20:17 +0900

통신비밀보호법

지난 달 18일 윤상현 국민의힘 의원이 통신비밀보호법 일부 개정법률 안을 대표 발의하였다.

이에 대해 반대 여론이 찬성 여론보다 많지만 18세 이상 남녀 2000여명을 대상으로 한 설문조사는 상대방 동의가 없는 녹음에 반대한다는 결과가 나오면서 이상한 분위기가 흐르고 있다.

통신비밀 보호법 ↓↓

통신비밀보호법

www.law.go.kr

통신비밀보호법이 뭐야?

제1조(목적) 을 참고하면.

>> 통신 및 대화의 비밀과 자유에 대한 제한은 엄격한 법적 절차를 거쳐야하며 통신비밀을 보호하고 통신의 자유를 가져아한다.

>> 즉, 개개인의 통화 및 대화는 비밀을 보호해 주어야 한다. 라는 것이다.

지금 개정하려고 하는 법안은 뭔데?

윤상현 의원의 개정안은 '통신비밀보호법 제 3조' ,'공개되지 아니한 타인간의 대화를 녹음 또는 청취하지 못한다.' 라는 항목이다.

이 법은 뭘 말하는 것이냐면?

만일 A와 B가 통화 중에 통화에 참여하지 않는 제 3자가 그 통화내용을 녹음을 하는 것은 통신비밀보호법에 위반이 되지만, 통화에 직접적으로 참여한 A나 B가 통화녹음을 하는 것은 통신비밀보호법에 위반이 되지 않는다는 것이다.
즉, 자신이 피해자이면서, 통화 당사자인 경우, 가해자에 대한 통화내용 등을 법적 증거로 남길 수 있다.

라는 것이 통신비밀보호법 제 3조의 내용이였다.

음성 녹음 app

통신비밀보호법 제 3조를 어떻게 개정 한다는 거야?

원래의 제3조의 내용을 보시면 법적증거로 남길 수 있다는 것에 대해서 다행으로 여길 수 있다. 하지만

개정안의 내용을 살펴보자

-개정안-

대화에 참여한 당사자라도 대화를 녹음할 때에는 다른 대화 참여자 모두의 동의를 구하도록 해야하며

이를 어기고 상대방 동의 없이 녹음을 하였을 시 1년이상 10년 이하의 징역을 받게된다.

개정안의 내용을 간추려 봤는데요, 보셨을 때 무슨말인지 이해가 가시나요?

즉, 상대방의 의사를 구하지 않고 녹음을 하게 된다면 법적증거로 섣불리 채택할 수도 없고 오히려 자신이 피해자라도 법을 위반하여 징역을 받게 될 수 있다는 소리입니다.

자동 녹음 기능도 사용하면 안된다는 소리입니다.

근데 왜 개정한다는 거야?

이는 헌법 제 10조 " 모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다" .

즉, 국민 사생활에 대한 행복 추구권을 강화 하겠다는 것입니다.

몰래 녹음하여 배포로 인해 피해를 본 사례가 있겠지만 이번에 개정안이 채택되면 범죄 피해자들이 입증할 중요 녹취록 등은 이제 무쓸모가 되버린다는 것인데..

사기꾼들이 사기를 치지 못하도록 대화내용을 녹음을 할 때에도 동의를 구해야 한다는 것인데.. 그걸 동의해줄 사기꾼 가해자들이 어디에 있을까요? 신기할 따름입니다.

직접 증거를 보여줘야 하는 사회 속에서 피해자들의 강력한 증거인 녹취를 막아버리는 셈이 아닌가.. 저는 그렇게 생각됩니다.

이 법안이 어떻게 될지 지켜봐야 될 것같습니다. ^...^..

랜딩페이지(landing page) , 1단 레이아웃

집이좋은 덜렁이 — Thu, 15 Sep 2022 23:47:24 +0900

랜딩페이지가 뭔지, 예로는 무엇이 있는지, 1단 레이아웃은 또 무엇인지 간단하게 알아보도록 하겠습니다.

랜딩페이지(landing page)

세로로 길게 구성된 페이지를 말한다.
스크롤 시 아래의 컨텐츠가 표시되는 싱글페이지 형태의 웹 페이지

랜딩페이지 예시

위의 사진처럼 스크롤하면 주 메인 내용이 보여지는 페이지들을 "랜딩페이지" 라고 합니다.

랜딩페이지를 사용하는 이유

랜딩페이지를 사용하는 이유는 하나의 목표를 달성하기 위함이다.

주로 자신의 물건을 홍보하는, 마케팅을 주 목적으로 하여 만들어지는 웹 페이지라고 생각하면 된다.

랜딩페이지 이점

[할인], [바로 구매] 등 사용자가 클릭하게끔 유도하는 버튼 등 여러 방식을 사용하여 "신규 회원 할인쿠폰" 등 회원가입을 하게 만들어 홈페이지의 전환율을 올리는 데에도 큰 도움이 된다.
검섹엔진, 이메일 마케팅, sns 나 온라인 광고를 통해 랜딩페이지를 노출 시키는데, 이는 최고의 마케팅 효율을 보여주기 때문에 많이 사용한다.

홈페이지 vs 랜딩페이지

홈페이지와 랜딩페이지의 차이점은 딱 하나만 알고있으면 된다.

"홈페이지는 다양한 요소가 있는 반면, 랜딩페이지는 '마케팅','판매'를 목적으로 하기에 제일 적합하다는 것."

1단 레이아웃은 무엇일까?

단을 여러 개 사용하지 않고 하나의 단으로만 작성한 레이아웃
- ”단” : 레이아웃 구성 시 세로로 나열된 열
자신이 소개하고 싶은 요소(header,section,footer) 가 한페이지에 다 나온 것이라 생각하면 편할 것이다.

1단 레이아웃 구성 예

1단 레이아웃을 사용하는 이유?

반응형 웹을 만들기에 편하다.
사용자에게 자신이 보여주고 싶은 콘텐츠를 시선을 집중시켜 전달할 수 있다.

1단 레이아웃 사용시 주의점

자신이 표시하고 싶은 "컨텐츠가 많을 때" 는 1단 레이아웃은 어울리지 않다. 콘텐츠가 많아서 스크롤양이 많아지면

사용자들이 끝까지 내리지 않을 확률이 높기 때문이다. (스크롤하는데 양이 많다면 보고 싶겠나요?)

MySQL Workbench 간단 설정 및 Path 환경변수 설정

집이좋은 덜렁이 — Wed, 14 Sep 2022 20:52:51 +0900

MySQL Workbench 설정

1.검색창에 “mysql” 검색 후 [MySQL Workbench 8.0 CE] 클릭하여 실행

2.설치하면서 설정한 root(관리자) 클릭

MySQL Workbench

3. 설정했던 비밀번호 치고 ok 버튼 클릭

(개인 집에서 사용한다면 패스워드 저장해도 괜찮음. 밖에서 사용한다면 보안상 체크는 풉시다.)

MySQL Workbench root 계정

4. 상단 메뉴의 [Edit] > [Preferences] 클릭 후 [SQL Editor] 클릭하여 맨 아래 “Other” 부분의 [Safe Updates( 블라블라~) 체크 해제 후 ok

MySQL Workbench SQL Editor 업데이트 설정

★왜 safe updates를 하나요?

-> update나 delete 문 등 한번에 많은 쿼리들을 처리할 때 safe mode로 인해 오류가 나기 때문이다.

MySQL Path(경로) 추가하기

1.파일 탐색기로 (C:\Program Files\MySQL\MySQL Server 8.0\bin)을 찾아 주소 url을 복사한다.

※ 로컬c드라이브의 Program Files 에서 MySQL로 적힌 것을 찾던지, 못찾겠다면 파일탐색기로 “MySQL Server 8.0” 을 검색해 파일위치를 열면 된다.

MySQL Path 경로 설정1

2. Windows Powershell 을 연다.

[시작] 아이콘에 마우스 오른쪽 클릭 후 [windows powershell]을 Shift+우클릭 하여 “관리자 모드로 실행한다.
또는 검색창에 “windows powershell”을 검색 후 Shift+우클릭 하여 관리자 모드로 실행한다.

★CMD (명령 크롬프트)를 관리자 실행시켜도 상관은 없다.

3. SETX PATH “C:\Program Files\MySQL\MySQL Server 8.0\bin;%PATH%” 명령으로 path를 추가한다.

MySQL Path 경로 설정2

이 후 환경변수 저장을 위해 PC를 껏다 켜야한다.

shutdown -r -t 0명령어를 사용해 PC를 다시 실행시킨다. (실행시키던 프로그램은 꺼두는거 추천)

설정 확인은 [내 pc] -> 설정 -> [고급 시스템 설정] -> [환경변수] -> 변수의 "path" 쪽을 확인하면 된다.

환경변수 적용 확인

Workbench 실행 후 혹시라도 아래와 같은 오류가 뜬다면??

path 오류

원인

1. MYSQL 서비스가 중지 되어있는 상태(PATH랑 관련 없을수도)

2. path 가 저장이 안된 것.

3. 버전이 8.0.30 버전의 언어 번역 오류 (다운그레이드 하거나 chcp 명령어 써야함)

각각 해결해보기

1. MYSQL 서비스가 중지 되어있는 상태

★ 처음 MySQL 설치 당시 window가 켜지면 자동으로 실행되게 설정을 안해놓고 키는걸 까먹는 사람이 많다.

[서비스] 검색 후 영역 클릭 후 "MY" 를 치면 MySQL 항목 이동한다. (아래 사진과 같을꺼임)

서비스 - mysql

왼쪽의 서비스 "시작" 버튼을 눌러 실행시켜주면 된다.

2. path 가 저장이 안된 것.

위의 [windows powershell] 을 통한 방법이 안되었다면 직접적으로 변수를 써주자

[내 pc] -> 설정 -> [고급 시스템 설정] -> [환경변수] -> 사용자 변수의 "path" 클릭

C:\Program Files\MySQL\MySQL Server 8.0\bin;%PATH%

위의 경로를 한 줄로 쭉 치면 아래와 같이 ;(세미콜론) 기준으로 그 다음 줄에 등록이 된다.

★경로는 "MySQL Server8.0" 폴더가 설치되어 있는 곳이면 된다. 마지막에 "%PATH%" 만 적어주자.

환경변수 적용 확인

3. 버전이 8.0.30 버전의 언어 번역 오류

방법은 2가지가 있는데 다운그레이드로 하는 방법과 chcp 명령어를 사용하는 것이다.

다운그레이드
- 최신버전인 8.0.30이 오류가 많다고는 들었는데 아래 chcp 명령어가 귀찮다면 사용하자.
- 버전은 8.0.21(추천) ~ 8.0.26 을 사용하자.

chcp 명령어 사용

1. MySQL Workbench 8.0 파일에 들어가 경로를 복사한다. (설정 후 workbench 실행시키기 위함)

경로 복사

2. 검색창에 cmd 검색 후 “명령 프롬프트” 를 관리자 권한으로 실행한다.

3. chcp 437 명령어 입력 후 첫 줄에 “Active code page: 437” 이 나오면 mysqlworkbench 명령어를 통해 워크벤치를 열어준다.

chcp 437 실행 중

★chcp 437 | chcp 949 | chcp 65001 chcp 명령어?

chcp 는 cmd의 언어셋 설정에 사용되는 명령어 이다.

chcp 437
- 영문
chcp 949
- 한글(확장완성형)
chcp 65001
- UTF-8

★chcp 437 | chcp 949 | chcp 65001 은 언제 쓰는걸까?

영문
- chcp 437
- 한글 사용시 문제가 있는 경우
한글로 설명을 보고싶을 때
- chcp 949
- 명령어에서 지원해야 가능(보통 기본 명령어에서 지원됨)
프로그램에서 utf-8로 출력할 때
- chcp 65001
- DBMS에서는 utf-8로 설정되어있고, cmd에서 select 했을 때 한글이 ?∮?$& 와 같이 깨져보일 때 사용한다.

MySQL에서 사용할 것은 주로 chcp 65001 과 chcp 437 정도 쓰면 된다.

chcp 사용시 주의 점

1. MySQL Workbench를 사용하려 킬 때마다 cmd 창->chcp 명령어 -> mysqlworkbench 명령으로 켜야되는 불편함이 있다.

이것이 귀찮아서 싫다면 아예 다운그레이드를 하자.

"이 부분이 뭔가 이상하다", "이 설명은 틀린 설명이다 이걸로 고쳐라" 하는 의견은 댓글로 남겨주신다면 감사합니다 :)

글이 도움 되셨다면 공감 한번 부탁드려요 ^_^

MySQL 설치하기 8.0.30 Version

집이좋은 덜렁이 — Mon, 12 Sep 2022 22:32:15 +0900

Oracle에 이어 MySQL설치하는법에 대해 정리해 보겠습니다. 22년 9월 기준 최신 버전인 8.0.30 설치를 합니다.

1.홈페이지 접속 후 “Microsoft Windows’ 로 선택 후 [Go to download page] 클릭

MySQL :: Download MySQL Community Server

Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Debian Linux SUSE Linux Enterprise Server Red Hat Enterprise Linux / Oracle Linux Fedora Linux - Generic Oracle Solaris macOS Source Code Select OS Version: All Windows (x86

dev.mysql.com

2. Microsoft Windows 선택 후 아래쪽의 [Go to Download Page] 로 이동 (운영체제에 맞게 설정하시면 됩니다.)

MySQL 설치페이지

3. 64bit는 없기 때문에 32bit 용량 많은걸로 [Download] 클릭

MySQL 설치페이지2

4.로그인은 할 필요 없이 아래의 [No thanks, just start my download] 문구를 클릭해서 다운받는다.

MySQL 설치페이지3

5.다운받은 mysql 파일을 실행 후 [Custom] 선택 후 [Next >] 클릭

MySQL 설치1

6. [MySQL Server] > [MySQL Server] > [MySQL Server 8.0 ] > [MySQL Server 8.0.30-x64] 선택 후 ➡️ 버튼을 눌러 [추가]

MySQL 설치2

7.[Applications] > [MySQL Workbench] > [MySQL Workbench 8.0] > [MySQL Workbench 8.0.30-x64] 차례대로 선택 후 ➡️ 버튼을 눌러 [추가]

MySQL 설치3

8.[Documentation] > [Samples and Examples] > [Samples and Examples 8.0] >[Samples and Examples 8.0.버전 - X86] 차례대로 선택 후 ➡️ 버튼을 눌러 [추가]

MySQL 설치4

9.추가로 설치한 프로그램들이 맞는지 재 확인 후 [execute] 눌러서 실행

MySQL 설치5

10. [Complete] 설치 완료 됬으면 [next] 클릭

MySQL 설치6

11. 환경설정 할 항목을 확인 후 [next] 클릭

MySQL 설치7

12. 아래 네모 칸과 같이 기본값으로 냅둔후 [next]

config type: development computer

[TCP/IP] 체크, [Port:3306] 확인, [Open Windows Firewall ports for network access] 체크

MySQL 설치8

13.(기본값) Use Strong Password Encryption for Authentication(추천)” 체크 후 [next]

MySQL 설치9

14.데이터베이스에 쓸 root 사용자 비밀번호 설정

(나중에 바꿀 수 있으니 처음은 대충 지으셔도 됩니다.)

MySQL 설치10

15.서비스 창에 표시될 이름을 지정한다 MySQL 을 나타내는 이름이면 상관없다.

(기본값으로 MySQL로 되어 있다.)

MySQL 설치11

16.MySQL Server 설정 값 그대로 적용할 건지 한번 더 확인 후 [Execute] 클릭

MySQL 설치12

17. MySQL Server 설정 완료

MySQL 설치13

18.설정 완료된 항목 확인 및 다음 설정 항목 확인(pass 하고 next 클릭)

MySQL 설치14

19.아까 설정한 root 사용자 비밀번호를 적고 “Check” 버튼을 눌러 서버와 연결이 되는지 확인합니다.

MySQL 설치15

20. 두 항목다 Configuration complite. 가 나왔다면 [next] 클릭

MySQL 설치16

21.Start MySQL Workbench after setup 체크 해제 후 [Finish]를 눌러 마무리 해준다.

MySQL 설치17

22. 탐색창에 MySQL 검색시 아래 사진과 같이 4개의 파일이 다운로드 되었다면 정상

MySQL 설치완료 모습

Oracle에 이어 MySQL 최신버전으로 설치하는 법을 정리 해봤습니다. 다음 글은 간단한 MySQL 설치방법에 대해 설명하도록 하겠습니다.

CSS 기초 내용 요약

집이좋은 덜렁이 — Sat, 10 Sep 2022 14:24:17 +0900

본 글은 개인 공부용으로 제작되었으며 틀린 부분이 있어서 알려주시거나 글에 없는 내용을 댓글로 남겨주시면 감사하겠습니다 ' U '

CSS 코드 구분하기

예제 코드

#gnb{
	position:absolute;
}

셀렉터(선택자) : #gnb
선언 블록 : { position:absolute}
선언 : position:absolute;
속성 : position
값 : absolute

Class 명 & ID명 생성 규칙

첫 글자는 반드시 영어로 시작한다.
공백은 사용하지 않는다.
영어,숫자, -(하이픈), _(언더바) 만 사용한다.

CSS 적용 우선순위 계산

종 류	값
!important	최고 순위
#id	100
.class	10
tag	1
*	0

예시코드

div#hello -> 1+ 100 = 101 로 우선순위 1번
div.hello -> 1+ 10 = 11 로 우선순위 2번

css는 우선순위1번이 적용된다.

클래스명 정하는 방법

1. 누구 봐도 쉽게 이해할 수 있고 다시 사용하기 쉬운 이름을 붙일 수 있어야한다.

2. 클래스명이 어떤 내용이나 역할을 나타내는지 명확해야 한다.

좋은 예 나쁜 예

.gallery-title	.g-t
.page-title, .post-title	.title1 , .title2

좋은 예는 무엇을 나타내는지 파악이 쉽지만 나쁜 예는 어떤걸 나타내는지 추측을 하거나 알 수 없다.

3. 영어로 통일

영어를 한글 발음으로 옮겨 적는다던가, 한글로 적게 하자.

한글을 모르는 사람도 내 코드가 뭘 뜻하는지 알기 쉽게 적는 것이 좋다. (button -> btn)

4.올바른 철자 사용

button을 buttan으로 굳이 오타 내지말고 btn 같은 약어를 사용하도록 하자.

카카오톡 추석맞이 재밌는 이스터에그 한 번씩 쳐봐요~

집이좋은 덜렁이 — Thu, 8 Sep 2022 18:58:17 +0900

카카오톡에 이스터에그 있는거 아셨나요?

추석 관련 특정 단어를 치시면 배경이 잠깐 바뀌는 재밌는 기능이 있답니다 ㅋ.ㅋ

카카오톡 이스터 에그

1. 추석 맞이 카카오톡 이스터에그

달

추석

명절

즐추

제사

차례

송편

명절

보름달

떡방아

한가위

떡방아

배불러

달토끼

비슷한 뜻의 단어들은 같은 배경이 나오니 참고하셔요~!

2. 기간은 언제까지?

예전과 똑같이 추석 연휴가 끝나는 날 23:59분까지 사용 가능할 겁니다!!

모두 즐거운 추석 연휴 보내세요~!!

곧 다가올 추석 !! 장거리 운전하실 때 꿀팁★

집이좋은 덜렁이 — Thu, 8 Sep 2022 17:58:56 +0900

곧 다가오는 추석 연휴 운전할 생각에 고민 많으신분들에게 몇 가지 정보를 알려드릴려고 합니다.

네비게이션에서는 최적의 경로만 알려줄뿐 실시간 상황은 알려주지 않습니다.

1. 환기는 최소 30분마다 1번씩 꼭 꼭 해주기

- 이산화 탄소가 쌓이면 졸음운전의 원인이 될 수 있습니다.

2.멀미약은 속이 울렁거리기 전에 미리 섭취하자

주변에 멀미가 심하신 분이 있다면 출발하기 전에 꼭 먹이시기 바랍니다. 멀미약은 예방 효과만 있을 뿐 아예 멀미가 안나게 하는 것은 아니란 말씀!!

3. 1588 - 2504 고속도로 상황 & 무료 견인 서비스 제공!!

아직 출발하시기 전인 분들이나 차로 인해 도로가 막히고 갑갑하신분들은 얼마나 막히는지 차에 타고있을 때 알 수가없죠? 네비게이션은 추천경로만 알려줄 뿐 실시간 도로상황을 알려주지 않습니다.
이 때 1588-2504 에 자신이 현재 위치의 가까운 톨게이트 명과 도착지 근처의 톨게이트를 적어서 보내시면 실시간 교통 상황을 알 수 있습니다.
적으실 때는" (시작지)TG 도착지(TG) " 톨게이트 명으로 적으셔야 하는 불편함이 있지만 상세합니다.

예시

4. 1588 - 2504 고속도로 무료 견인 서비스

고속도로에서 알 수 없는 고장으로 견인을 불러야 할 일이 있을 때 1588 - 2504 로 전화하여
현재 상황과 위치를 말하면 "가까운 휴게소" 로 견인 해준다고 하니 돈내고 견인하지 마시고 우선 휴게소 까지 무료로 견인 하시는 것을 추천 드립니다!!

다들 즐거운 추석 명절 보내시기 바랍니다.

글이 도움 되셨다면 공감 한번 부탁 드립니다.^0^

오라클(Oracle) 최신 19 버전 설치하는 법

집이좋은 덜렁이 — Wed, 7 Sep 2022 22:18:58 +0900

1.아래 홈페이지에 접속하여 최신버전의 Microsoft Windows x64 (64-bit) 골라서 ZIP를 다운받는다.

Database Software Downloads | Oracle 대한민국

Oracle Database Express Edition Previous Database Release Software Oracle Database 10.2, 11.x, 12.x, and 18c are available as a media or FTP request for those customers who own a valid Oracle Database product license for any edition. To request access to t

www.oracle.com

2. zip 다운 받는 동안 C드라이브 or D드라이브에 oracle을 설치할 폴더를 생성한다. (예시: oracle)

(폴더명은 oracle로 설명하겠습니다.)

3.다운받은 WINDOWS.X64… .ZIP 파일을 생성한 oracle 폴더에 푼다.

4.압축해제한 파일 아래쪽의 setup.exe 파일을 실행한다. (설치 창이 뜰 것임.)

5.구성옵션 선택 [단일 인스턴스 데이터베이스 생성 및 구성] 기본값 선택하고 [다음] 클릭

구성 옵션 선택

6.개인적으로 사용할 것이므로 [데스크톱 클래스] 기본값 선택 후 [다음] 클릭

시스템 클래스 설정

7.기본세팅을 쓸 것이기 떄문에 [가상 계정 사용] 선택 후 [다음] 클릭

oracle 홈 사용자 지정

8.(중요) Oracle Base로 아래와 같은 경로가 뜨지 않았다면 [찾아보기]로 압축 해제했던 “oracle” 폴더를 찾아 클릭한다.

데이터베이스 버전: Enterprise Edition (기본 값) 클릭
문자 집합: 유니코드(AL32UTF8) (기본값)클릭
전역 데이터베이스 이름: 개인설정 가능, 예제에선 orcl로 하겠다.
비밀번호: 숫자,소문자,대문자 가 포함된 비밀번호여야 한다.
- 권장표준을 따라야 하며 지키지 않을 시 다음으로 넘어갈 수 없습니다.

[컨테이너 데이터베이스로 생성] 선택 해제

※ [다음] 클릭시 “위치에 부적절한 위치입니다.” 같은 비슷한 문제가 발생 했다면 “Oracle Base” 아래 “SO” 경로에 상위폴더가 한글로 되어있지는 않은지 확인 후 수정해준다.

잘못된 비밀번호 작성시 경고

비밀번호 잘 설정 시 아래에 경고 문구가 뜨지 않는다. ↓↓

잘 작성된 번호 예시

9.앞에서 설정한 정보들이 제대로 들어가있는지 확인 후 [설치]

-Oracle Base / 소프트웨어 위치 정도 파악하면 됨.

설정 확인

10.설치가 다 되면 [완료] 누르면 된다. 설치 시간은 다 다르지만 10~30분 정도 걸리니 쉬거나 다른 할일 하고 오면 된다.

오라클 설치

11.설치가 잘 되었다면 아래와 같이 폴더들이 생성되어있을 것이다.

오라클 설치 완료 화면

간단하게 오라클 설치하는 법에 알아봤습니다.

MS SQL 설치하는 법도 올리도록 하겠습니다.

도움이 되셨다면 공감 한번 꾸~욱 눌러주세요 ><

경기도 청년기본소득 3분기 신청 하고 25만원 받기

집이좋은 덜렁이 — Tue, 6 Sep 2022 23:18:20 +0900

97년생 7월생 ~ 98년생 7월 생이시라면 우편을 받으셨을 겁니다. 혹시라도 못받으신 분들은 아래 글들을 살펴보시면서 하시면 되겠습니다.

청년기본소득?

청년기본소득은 행복추구, 삶의 질 향상 등 청년의 사회적 기본권 보장을 지원하는 제도를 말합니다.

3분기 신청 대상자 조건

신청일 기준

최근 3년이상 또는 합해서 10년 이상 거주하는 경우에 해당하는 청년
2022년 7월 1일 기준으로 생년월일이 1997.07.02 ~ 1998.07.01 에 해당하는 청년

아래의 링크를 타서 자신이 태어난 날을 달력으로 표시하면 신청대상자 인지 알 수 있습니다.

일자리지원사업 통합접수시스템

힘내자 경기청년! 청년들의 행복라이프를 지원합니다! 경기도 청년기본소득 #경기청년 #만24세 #분기별25만원지급

apply.jobaba.net

신청 가능 대상자 확인하기

신청 방법

준비물

주민등록초본 (정부24에서 온라인으로 처리 가능) ★9월 1일 이후 발급된 초본만 인정 됩니다.
기초생활수급자 증명서(해당되는 분만)
신청 위임장 및 증빙서류 ( 대리신청일 경우)

1. 정부24로 들어가 필요한 서류(주민등록 초본)을 발급 받습니다.

(등록된 인증서가 있다면 인증서로 로그인 후 pdf로 초본을 발급 받으시면 됩니다.)

정부 24 홈페이지

2. 회원가입 후 [로그인]

신청하려면 로그인이 필요하기 때문에 미리 해둡시다.

경기도 홈페이지

잡아바

3. 신청하기 탭을 누르고 절차에 맞게 신청서를 작성하면 됩니다.

신청 절차는 [자가진단] >> [약관동의] >> [개인정보 작성] 으로 진행 됩니다.

신청 완료 화면

신청이 다 마무리 되셨으면 현황에서 결과를 확인 하실 수 있으며 위와같이 화면이 나온다면 되신겁니다.

※1994년 1월 2일부터 1997년 7월 1일생 기초생활수급자 청년에 해당되신다면 예외적 소급신청이 가능하니 신청서 작성하실 때 참고하시기 바랍니다.

태풍 "힌남노" , 대비 &대처법 알아두기

집이좋은 덜렁이 — Mon, 5 Sep 2022 01:59:55 +0900

태풍의 예측 경로[출처:기상청]

슬슬 태풍"힌남노"의 영향을 받고 있는데요. 저번의 홍수 피해처럼 큰 피해는 없었으면 합니다.

태풍올 때 참고하면 좋은 정보를 가지고 왔으니 글이 도움 되셨다면 아래 공감 한 번씩 부탁드립니다 ^0^

1.우산 쓰지 말기

태풍은 영향을 받는 지역이라면 비와 바람을 동반해서 서서히 오는데요. 이떄 비 맞기 싫어서 억지로 우산을 쓰시는 분들이 있습니다. 이것은 너무나 위험한 행위입니다.

태풍의 바람은 어느 순간 세게 불때가 있습니다. 우산은 바람의 영향을 많이 받기 때문에 갑작스런 바람으로 인해 넘어질 수 있습니다. 넘어지다가 우산 모서리에 다칠 수 있다는 얘기입니다.

아직 우산이 휘청거릴 정도로 바람이 약하게 분다면 그 때는 괜찮겠지만 혹시라도 우산 손잡이에 힘이 많이 들어간다면 신속히 실내로 들어가거나 우산을 접으시길 바랍니다.(차라리 비를 맞으세요)

혹시라도 밖에 나갈일이 있으시면 우산 말고 우비를 쓰시는걸 추천드립니다.

2. 창문에 테이프?? (X) 붙이지 마세요.

이거 잘못 알고 계시는 분들이 많으신데요. 태풍으로 인해 창문이 깨진다는 소리를 듣고 종이나 테이프 등을 창문 유리에다가 붙이시는 분들이 계십니다.

태풍이 올 때 유리가 깨지는 이유는 유리가 아닌 창틀 때문인데요. 유리에다가 테이프를 붙이거나 종이를 붙이는건 그리효과가 크지 않습니다.

제가 추천드리는 방법

창틀 사이에다가 종이를 겹쳐접어 그 사이를 메꿔주시구요 (종이 말고 메꿀 수 있는건 다 좋아요.)

그 다음에 테이프로 남은 공간들을 없애주게 붙여주는 겁니다.(창틀 사이를 꽉꽉 채워준다는 느낌)

앞서 말한 방법으로도 뭔가 찜찜하신분들은 유리에 비닐랩같은거 붙이시면 혹시 깨져도 파편들을 거의 잡아주니 붙여주시면 될 것 같습니다.

3. 수시로 태풍 경로 확인하기

기상청 날씨누리

www.weather.go.kr

네이버로 "힌남노"를 검색하시거나 기상청에 들어가셔서 수시로 확인하시면서 대비하시는걸 추천드립니다.

경로 뿐만 아니라 풍량도 보시면서 약해지는지 강해지는지 확인해보시기 바랍니다.

영국 최악의 경제적 재앙 맞이.. 보리스 존슨의 후임자의 대처는?

집이좋은 덜렁이 — Sun, 4 Sep 2022 23:30:37 +0900

노조에 참여하기 위해 깃발을 들고 기다리고 있는 시민

현재 영국 전역에서 정부의 도움 없이는 올해를 넘기기 힘들다며 정부에게 경고하고 있다.

영국은 몇 달 째 솟구치는 에너지 요금으로 경기침체와 대표직 공백을 견뎌왔다.

보리스 존슨의 7월 퇴임 선언 후 성장 전망이 약해졌고, 식품과 연료 가격이 급등하면서 연간 10%의 인플레이션이 발생했다.치솟는 생계비로 이곳저곳에서 파업에 들어가기 시작했고 영국의 파운드화는 2년여만에 미국 달러 대비 최저치를 기록하게 된다.

영국의 중소기업연합회는 현재 이 상황을 한번의 타격이라고 표현했고. 영국 은행은 10%~13%의 인플레이션이 일어날 것으로 보고있고, 시티그룹은 2023년 초 18%의 물가상승률을 예상하고 있다.

보리스 존슨의 뒤를 이을 경쟁자들은 지도자가 되는 즉시 현 상황을 해결해야 하는 상황에 직면하게 된다.

가장 먼저 에너지 비용에 관한 문제인데, 경쟁자들 중 시민들을 안심시키며 상황을 타개할 발언 을 하는 쪽이 유리한 위치를 가지지 않을까 생각 된다.

covide - 19

코로나로 인해 봉쇄 이후 이어진 소비 행렬은 빠르게 사라지고 있다. 영국은행은 경기 침체가 몇 달 안으로 빠질 것임을 경고 했다.

개인 뿐만아닌 코로나로 인해 버티고 있던 자영업자들이나 기업들, 그 이후 들어온 신생기업 들은 솟구치는 에너지 비용으로 하루하루 버티기 힘든 생활을 보내고 있다. 에너지 비용이 33000 달러였다면 비용이 오른 직후는38000달러 정도 약 1.25배 정도 올랐다.

보리스 존슨 의 경쟁자 중 세금을 줄여 경제를 활성화 시키겠다는 주장을 하지만 경제학자들은 인플레이션에 부채질하는 식이다, 되려 가장 돈이 필요한 사람들에게는 최악의 상황일 것임을 주장하며 우려하고 있다.

영국은 현재 봉쇄 기간동안 많은 돈을 빌려 부채가 쌓여만 갔고, 잉글랜드 은행은 인플링션 억제를 위해 금리를 인상함으로써 정부가 부채를 상환하는 것을 더 비싸게 만들고 있다. 영국 또한 인플레이션 연동 채권을 대거 발행해 문제를 더 키우고 있다.

현 영국의 경제 상황을 후임자는 어떻게 대처할지, 정부의 해결방안은 어떤 것들이 나올지 빠르게 생각해야 될 것같다.

HTML+CSS 메인사이트 만들기 - 총 작업 모음집

집이좋은 덜렁이 — Fri, 2 Sep 2022 23:32:30 +0900

2022.08.22 - [project-practice/HTML + CSS] - HTML + CSS 을 사용한 웹 메인사이트 만들기 - Goal, 계획

HTML + CSS 을 사용한 웹 메인사이트 만들기 - Goal, 계획

HTML 부터 시작해서 CSS.. jQuery.. Javascript 까지 공부한지 약 1달하고 조금 지났다. 기억이 가물가물해진 HTML,CSS를 복습할겸 간단한 웹사이트를 만들까 한다. 웹사이트 제작 Goal 1.잘 안써봣던 태그들

palkong.com

2022.08.24 - [project-practice/HTML + CSS] - HTML+CSS 웹 메인 사이트 만들기 - 1일차 보고서

HTML+CSS 웹 메인 사이트 만들기 - 1일차 보고서

1. 작업 시간 : 30분 남짓 2. 작업물 : vscode git 연결 및 오류 잡기 2022.08.23 - [IT/VScode] - VScode git github 연결하기 VScode git github 연결하기 간단하게 vscode와 git, github를 연결해서 편하게 코..

palkong.com

2022.08.24 - [project-practice/HTML + CSS] - HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 2일차 보고서

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 2일차 보고서

무작정 웹 메인 사이트 만들기 2일차 째 포토샵도 안깔려있고 ppt로 간단하게 레이아웃을 짜봤다. 주제를 미리 정하지 않아서 주제선정과 어떤 템플릿을 참고할지에 대해 시간이 많이 걸렸다..

palkong.com

2022.08.26 - [project-practice/HTML + CSS] - HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 3일차 보고서

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 3일차 보고서

1일차에 이어 웹사이트 만들기 2일차 째, 역시나 사전 준비가 부족했던지 HTML 작성은 시간을 얼마 잡아먹지 않았지만 어떤 레이아웃으로 짜고 어떤 태그를 넣을지 머릿속에서 바로 바로 나오지

palkong.com

2022.08.28 - [project-practice/HTML + CSS] - HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 4 일차 보고서

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 4 일차 보고서

1. 작업 시간 : 56분 2. 작업물 : 레이아웃 css를 다 짜려고 했는데 뭔가 마음에 안들어서 지우고 다시 쓰는 데 시간이 많이 들었고, 결국 header만 작성 했다. Flex 기법을 사용했던 곳에 직접 조율이

palkong.com

2022.08.29 - [project-practice/HTML + CSS] - HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 5일차 보고서

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 5일차 보고서

1. 작업 시간 : 55분 2. 작업물 : css 레이아웃 작업 밑작업을 다 끝낸 모습 "Go full page" 확장 프로그램을 사용해서 그런가 헤더와 섹션 부분쪽이 잘렸다. 다음번에는 github page를 뒤늦게 알게 됬으니

palkong.com

2022.09.01 - [project-practice/HTML + CSS] - HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 마무리

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 마무리

1. 작업 시간 :34분 2. 작업물 : css 애니메이션 적용 및 text-shadow 적용 3. 다음 계획 : 이번에 부족한 것을 바탕으로 새로이 처음부터 기획해볼 생각이다.

palkong.com

2022.09.02 - [project-practice/HTML + CSS] - HTML+CSS를 이용한 웹 메인 사이트 만들기 - 후기 & 문제점

HTML+CSS를 이용한 웹 메인 사이트 만들기 - 후기 & 문제점

1. 작업 결과물: https://pangkurr.github.io/project/ 2. 총 작업 시간 : (30분+100분+82분+56분+55분+34분) = 5시간 57분 3. 문제점 규칙적으로 코딩에 시간을 투자하지 못한 점 (흐름이 끊김) 누굴 위한 정보..

palkong.com

HTML+CSS를 이용한 웹 메인 사이트 만들기 - 후기 & 문제점

집이좋은 덜렁이 — Fri, 2 Sep 2022 22:28:57 +0900

1. 작업 결과물: https://pangkurr.github.io/project/

2. 총 작업 시간 : (30분+100분+82분+56분+55분+34분) = 5시간 57분

3. 문제점

규칙적으로 코딩에 시간을 투자하지 못한 점 (흐름이 끊김)
누굴 위한 정보인지, 어떠한 정보를 줄 것인지 생각지 않고 기획부터 짠 것.
제한된 HTML+CSS 만으로 어떤 UI를 만들지 계획을 하지 않았다.
사용할 줄은 알지만 응용면에서 퀄리티가 낮음.
이미지 크기 문제 (로딩속도가 느려짐)
1페이지 레이아웃에 대한 홈페이지 이해도가 낮음. (어떠한 ui 요소가 주로 있는지 몰랐음).

4. 후기 :

우선 나의 HTML & CSS 능력이 어느 수준인지 파악하는 시간을 가질 수 있었고, 홈페이지를 많이 안본 티가 많이 났던 프로젝트 였던 것 같다. 미완성인 채로 프로젝트를 급하게 끝낸 이유의 가장 큰 이유는 " 시간 " 때문이다.

평소 스케줄에 맞춰서 하루 최대 2시간씩 계획했지만 잘 지켜지지 않았고, 하루 투자하는 시간이 뒤죽박죽이라 할 일 다 한 후 다시 작업하려다 보니 뭘 작업해야 하는지 적어논 것도 없으니까 진행이 되질 않았다.

위의 문제점들을 개선해서 빠른 시일 안에 새로운 프로젝트를 해보겠다는 생각 뿐이다.

작업했던 흔적들 ↓↓

2022.09.02 - [project-practice/HTML + CSS] - HTML+CSS 메인사이트 만들기 - 총 작업 모음집

HTML+CSS 메인사이트 만들기 - 총 작업 모음집

2022.08.22 - [project-practice/HTML + CSS] - HTML + CSS 을 사용한 웹 메인사이트 만들기 - Goal, 계획 HTML + CSS 을 사용한 웹 메인사이트 만들기 - Goal, 계획 HTML 부터 시작해서 CSS.. jQuery.. Javascrip..

palkong.com

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 마무리

집이좋은 덜렁이 — Thu, 1 Sep 2022 23:50:05 +0900

1. 작업 시간 :34분

2. 작업물 : css 애니메이션 적용 및 text-shadow 적용

3. 다음 계획 : 이번에 부족한 것을 바탕으로 새로이 처음부터 기획해볼 생각이다.

22년 9월 부터 "맞춤형 급여 안내" 복지 서비스 실시. 신청방법은?

집이좋은 덜렁이 — Wed, 31 Aug 2022 23:56:06 +0900

우리나라의 복지 서비스는 종류가 다양하고 매년 또는 매월 새로운 복지들이 많이 나옵니다.

하지만 대부분의 사람들이 내가 받을 수 있는 정책이 뭔지 몰라서 신청도 못하고 받지도 못하는 상황이 많이 발생합니다.

이제 그런 사람들이 생기지 않도록 올해 22년 9월 6일부터 시행되는 "맞춤형 급여 안내" 서비스가 시행됩니다.

시간이 없어도 딱 이번만!! 한 번 신청해두면 내가 앞으로 받을 수 있는 복지 혜택은 무엇이 있는지 정부에서 안내 해준다고 하니 이.번.만.큼.은 불편해도 신청해두시기 바랍니다.

맞춤형 급여 안내?

간단하게 내 주변 환경에 맞춰 지원 받을 수 있는 복지 서비스들을 놓치지 않고 받을 수 있게 안내해주는 서비스를 말합니다.
기존의 서비스는 "특정 대상"을 기준으로 먼저 도입되어 시행 되었다면 올해부터는 "전 국민" 대상으로 시행 됩니다.

맞춤형 급여 안내 [출처:복지로]

그 전까지는 [정부24]-[보조금24] 를 통해 개인의 정보를 입력하고 혜택을 받을 수 있었는데요. 일일이 내가 받을 수 있는 정책들을 확인할 수 밖에 없어서 약간의 불편함이 생겼는데 이제는 안내를 해준다고 하니 얼마나 편한지 싶습니다.

현재 내 받을 수 있는 정책을 확인하고 싶다면 ↓↓

보조금24

보조금24 | 정부24

접속량이 많아 접속이 불가능합니다. 잠시 후 다시 접속해주세요

www.gov.kr

보조금24 혜택찾기 [출처:정부24]

신청 방법은 ?

1. 복지로 홈페이지에서 온라인으로 신청

22년 9월 6일까지는 복지로 급여 안내 신청이 업데이트 되지 않았으므로 6일부터 신청해 주시면 됩니다.

본인인증 등 신청 시간이 조금 걸릴 수있으니 점심시간이나 휴식시간을 이용해서 하도록 합시다,

복지로 홈페이지

복지로 홈페이지

teu/app/main/Main

www.bokjiro.go.kr

2. 주소지 행정복지센터에 방문 신청

온라인 신청이 어색하신 어른들은 자신의 주소지 근처의 행정복지센터에 방문해서 안내를 받으시면 됩니다.

★혹시라도 안내 받았는데 신청을 안하거나 못하셨다면?

->안내를 했는데도 일정시간 신청을 안했다면 복지사각지대 발굴 시스템과 연계하여 대상자를 방문하거나 전화로 신청의사를 확인하니 정말 신청 하실 생각이 없으시다면 그 때 가서 거절 의사를 보여주시면 됩니다.

"복지지갑" 도 가입해 두자.

복지지갑?

"복지 멤버쉽" 도입과 함께 "복지지갑" 기능도 추가 되었는데요. 현재 받고 있는 복지서비스와 수급현황을 확인할 수 있고, 증명서 발급 현황 등을 회우너가입 없이 본인인증을 통해 이용할 수 있습니다.

"맞춤형 급여 안내"를 신청 하셨으면은 추가로 가입해두시면 본인인증없이 확인해 볼 수 있으므로 가입 해두시면 나쁜 것은 없을 겁니다.

복지지갑 [출처:복지로]

2023년부터는 각 지자체별 사업도 추가로 안내해 준다고 하니 "맞춤형 급여 안내" 든, "복지지갑"이든 이번에 가입하시고 여러 혜택 놓치지 마시고 신청하시기 바랍니다.

글이 도움 되셨다면 공감 한 번 부탁드립니다.^0^

알약(Alyac) 랜섬웨어 차단 알림. 신고 누르지 마세요. (해결법)

집이좋은 덜렁이 — Tue, 30 Aug 2022 20:24:03 +0900

오늘 컴퓨터하다가 알약 알림이로 "랜섬웨어 차단알림. 해당 내역을 신고하시겠습니까?" 라고 떠서 신고하기 눌렀다가. 재시작 했는데요. 그 후에 컴퓨터가 무한 로딩 + 화면이 멈추더라구요.

작업하던 것들이 자동 저장 아니였으면 내용 다 날라 갔으면 정신이 어질어질 하네요.

랜섬웨어 차단 알림, 저와 같은 현상이 있으시면 바로 아래 방법을 사용해보세요.

(랜섬웨어 차단 알림 캡쳐를 못 떴네요.)

1.화면이 멈춰있다면 무조건 재시작 해라. (부팅 후 2번 바로 작업)

2. 부팅 후 자동 실행되는 알약을 종료 시켜라

숨기기 버튼 알약

숨기기 버튼을 열어서 자동 실행되는 알약을 종료해주세요.

3.프로그램 추가/제거 가서 알약을 삭제하세요

설정-프로그램 추가/제거

4.삭제 후 재부팅 메세지 뜨면 재부팅 후 알약을 재 설치 해 줍시다.

(똑같은 증상 있으면 재 설치 말고 그대로 과정 따라해주세요.)

알약 제거 후 재시작

알약에서 무슨 일 있는지는 모르겠는데 갑자기 화면이 멈춰서 당황스럽네요.

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 5일차 보고서

집이좋은 덜렁이 — Mon, 29 Aug 2022 23:37:11 +0900

1. 작업 시간 : 55분

2. 작업물 : css 레이아웃 작업

밑작업을 다 끝낸 모습 "Go full page" 확장 프로그램을 사용해서 그런가 헤더와 섹션 부분쪽이 잘렸다.

다음번에는 github page를 뒤늦게 알게 됬으니 최소한 마지막 보고서에는 url 로 대체를 하겠다.

float으로 작업할 수 있었지만 아직 익숙하지않은 display:flex 기법을 이용해서 레이아웃의 틀을 맞췄다.

익숙(?) 해지려는 연습을 하려고 일부러 사용했다.

쓰다보니까 float을 쓸 때보다 너무 편해서 이게 맞나.. 싶은 생각이 많이 들었다.

5일차 결과물

3. 다음 계획 :

css의 밑작업만 끝낸 것 뿐 사진상으로는 확인할 수가 없다.

background-color 라던가 section 마다 경계선을 긋는 다던가 다음번엔 세세한 부분을 조정할 예정이다.

그 후에 animation 이나 shadow 기능을 오랜만에 써보도록 할 예정이다.

github 주소가 필요하다거나 조언해주실 부분 있으시면 언제나 환영입니다.

마무리 정리

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 마무리

1. 작업 시간 :34분 2. 작업물 : css 애니메이션 적용 및 text-shadow 적용 3. 다음 계획 : 이번에 부족한 것을 바탕으로 새로이 처음부터 기획해볼 생각이다.

palkong.com

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 4 일차 보고서

집이좋은 덜렁이 — Sun, 28 Aug 2022 21:29:50 +0900

1. 작업 시간 : 56분

2. 작업물 :

레이아웃 css를 다 짜려고 했는데 뭔가 마음에 안들어서 지우고 다시 쓰는 데 시간이 많이 들었고, 결국 header만 작성 했다. Flex 기법을 사용했던 곳에 직접 조율이 힘들어서 float으로 바꿧다가 나중에 요소가 추가되면 수정하기 쉽게 다시 flex로 바꿧다가 겨우 그작업만 했는데 시간을 다써버렸다.

아래는 header만 작성된 결과물이다.

4일차 헤더(header)

나머지 section 과 footer는 display:none을 박아 헤더에만 집중하기 좋게 감춰둿다.

위의 검색 창은 naver쪽 검색을 참고했다.

<div class="search_box">
  <form name="네이버" action="https://search.naver.com/search.naver" method="get">
    <input name="query" type="text" />
    <button type="submit">
      <i class="fa fa-search"></i>
    </button>
  </form>
</div>

form태그의 action속성과 input 태그의 name값 query, button태그의 type=submit 을 활용해 적은 것이다.

네이버 검색 url

input태그의 name값을 query로 쓴 이유

네이버에서 직접 '1234'를 검색하면 url 맨 뒤에 query=1234가 보인다. 이는 네이버가 query라는 것에 사용자가 입력한 값을 대입해서 결과물을 가져온다는 얘기이다.

query 대신 다른 name 을 쓰면 naver 검색창은 작동이 되지만 결과물은 가져오지 못할 것이다. db에서 query로 검색을 하지 않았기 때문이다.

3. 다음 계획 :

세세한 수정은 뒤로하고 레이아웃을 다 짜놓고 하는게 나을 것 같아 css 레이아웃 작업 완료를 목표로 할 예정이다.

5일차 정리↓↓

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 5일차 보고서

palkong.com

2025년 100만 디지털 인재양성 목표.. 코딩 의무 교육 맞을까?

집이좋은 덜렁이 — Sat, 27 Aug 2022 21:21:32 +0900

지난 2022년 08월 22일 기준 교육부가 뉴스를 발표했다. 초·중·고 코딩(프로그래밍) 교육을 필수화 한다는 말에 모든 부모님들은 사교육을 시키려고 학원을 벌써부터 준비한다고 합니다.

교육부 코딩의무교육 발표[출처:donga]

"코딩"의무교육 반응은?

의무교육 발표 후 학원에서는 아이들의 진로에 영향을 끼칠까 하는 부모님들의 문의 전화가 많이 늘어 났다고 말한다.

초등학생 뿐만 아니라 유치원생을 둔 부모님들도 다수 있다고 전해진다.

보통 학원에서 코딩 교육을 들으면 월 4회 2~40만원 정도 가격이 든다고 한다.

여러 전문가들 또한 이러한 코딩교육방식에 우려하는데 간단히 말하자면 코딩교육이 사교육까지 들어가며 배워야 하는 수준까지 의무교육화 하는 것은 안되는 것이 전문가들의 주장이다.

코딩교육의 취지가 취직을 기준으로 둔게 아닌 코딩교육을 통해 얻을 수 있는 문제해결능력, 응용력을 갖추는 데에 중점을 둬야 한다는게 전문가들의 입장이다.

초·중·고 코딩 교육 방식은?

초중고 수업 방식 [출처:교육부]

현재 초등학교는 5~6학년은 17시간, 중학교는 34시간, 고등학교는 SW·AI 선택과목을 신설해 AI융합교육 중심고 운영을 하는 방식을 갖추었다.

향후 2025년부터는 초중고 전체적으로 공동교육과정을 확대한다고 한다.

초등학교는 놀이형식의 블록기반 컴퓨터 언어를 경험을 중점으로 두었다.

블록기반언어(=스크래치 등) 간단한 게임형식으로 배우는 것이 아닐까 생각한다.

중학교부터는 sw,al 등 기초원리 학습에 중점을 둔 것 같다.

코딩을 배울 때 먼저 배우게 될 c나 c++, python ,기본으로 html5, css3 까지 배우게 되는 것이 아닐까 싶다.

고등학교 때부터는 알고리즘 위주의 학습을 한다. typescript 나 java, python 대중적인 언어를 고려해

백준(baekjoon) 단계별 프로그래밍과 같은 문제를 푸는 형식으로 나아가지 않을까 생각한다.

마무리

현직 IT 개발자들이 입을 모아 하는 얘기가 있다. IT 개발자로 계속 일을 할거라면 그 일에 대한 흥미가 있다거나 새로운 것에 대해 배우는 것을 좋아해야 한다고.

나 역시 코딩을 배우는 입장이지만 저 말에 공감한다. 그렇다면 학교에서 배우는 코딩교육이 과연 IT에 대해 흥미를 일깨울 수 있을까? 생각하기 어렵다.

지금은 모르겠지만 향후 IT 교육이 과연 얼마나 높은 수준으로 올라갈지는 알 수 없다. 코딩 사교육은 한동안 계속 열풍일 것이고 IT 시험의 난이도는 점차 높아질 것은 분명하다. 그러면 학생들이 IT에 관심을 가질 수 있을까? 그냥 시험성적에 반영되는 한 과목이라고 생각하지 않을까?

코딩의무교육, 미리 IT에 접하는 것은 좋지만 그 목적이 100만 개발자 양성이 아닌 여러 능력 향상,흥미에 초점을 두었으면 한다.

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 3일차 보고서

집이좋은 덜렁이 — Fri, 26 Aug 2022 09:02:37 +0900

1일차에 이어 웹사이트 만들기 2일차 째, 역시나 사전 준비가 부족했던지 HTML 작성은 시간을 얼마 잡아먹지 않았지만 어떤 레이아웃으로 짜고 어떤 태그를 넣을지 머릿속에서 바로 바로 나오지 않아서 오래 걸렸다.

1. 작업 시간 : 1시간 22분 ( 82분)

필요한 것들을 만들거나 까먹었던 태그들을 검색하는데 소요한 시간이 60분정도 된 것 같다..

(그래도 완벽 파악 x)

2. 작업물 :

https://github.com/pangkurr/palkong/tree/master/project/animal

제 깃허브 주소입니다.. 작업물은 항상 여기에 저장해 놓을 예정입니다.

2일차는 HTML markup을 중심으로 만들어 봤는데 도중에 마음에 안들어서

몇몇 요소들을 바꾸느라 좀 오래 걸린 것 같습니다.

(오랜만에 짜는거라 헷갈림 ㅎ..)

우선 오늘 작업물입니다(안보일수 있음)

페이지 위쪽 절반 / 페이지 아래쪽 절반 이미지입니다.

페이지 위쪽

CSS 일절 없이 HTML만 작성한 모습

아이콘은 font-awesom 4.7.0 버전(무료) 를 사용함.

로고는 Text를 Logo로 만들어주는 사이트를 이용했다.

https://flamingtext.com/

Logo Design and Name Generator

FlamingText is a logo design tool that provides access to the largest selection of high quality, easily-customizable logos on the web.

flamingtext.com

공짜로 자신이 원하는 logo 글자를 새겨넣으면 여러 종류로 로고를 만들어서 보여준다.

flamingtext 사이트 예시

맘에드는 것을 하나 골라 다운로드 받으면 된다.

이미지의 배경 색을 지우는 사이트

만약 이미지를 다운 받았는데 배경색이 흰색으로 되어있어서 방해가 된다면?

https://www.remove.bg/ko/upload

이미지 업로드 – remove.bg

이미지 선택 & 무료로 – 한 번의 클릭도 없이 – 5초 안에 – 100% 자동으로 – 배경 삭제.

www.remove.bg

이곳으로 가서 이미지를 올려만 주면 요소를 제외한 배경색은 투명으로 만들어준다 (.png)

3. 다음 계획 : css 밑바탕 작업하기

잘 될지는 모르겠지만 전체적인 css 작업을 친 뒤 세세하게 애니메이션, keyframe 등을 만들어서 제작해볼 예정이다.

남은 시간안에 완성도 높은 홈페이지를 만들 수 있을까 걱정된다.

[영상리뷰]이상한 변호사 우영우 8화 - 소덕동이야기(2) (줄거리 有)

집이좋은 덜렁이 — Thu, 25 Aug 2022 20:39:56 +0900

7화에 이어서 8화도 소덕동 사건에 대한 이야기를 합니다.

스토리가 끊어지는걸 싫어해서 7화 8화 한번에 몰아서 봤습니다.

소덕동 현장검증

7화에 이어 판사들이 현장검증을 하기 위해 소덕동으로 찾아왔는데요.

사진에서 보다시피 안타깝게도 날씨가 따라주지 않습니다.

(위의 사진은 이번 사건의 중요한 해결마리입니다.)

이미 작업 친 태산

판사들과 변호사들은 일제히 소덕동 주민들이 어떤 생각을 가지고 있나에 대해 의견을 물어보려고 마을을 돌아다니는데요. 대사에서 볼 수 있듯이 태산과 공사 주최측인 경해도가 이미 한발 나서서 주민들에게 보상금을 많이 올려줄테니 도로 공사하는 것을 찬성하라고 이미 세뇌 시켜놨습니다.

한바다와 이장님은 같이 반대하던 사람들이 돈에 현혹되어 찬성을 하자 당황한 모습을 보여줍니다.

급한 이장님은 소덕동의 명물인 팽나무를 보여주기 위해 절벽을 오르는데요. 마치 악순환인 듯 비가 내린 절벽 때문에 판사가 넘어지게 되며 현장검증을 통해 판사의 마음을 움직이려던 한바다의 계획은 물거품이 되는 듯 합니다.

더 볼 것이 없는 것 같아 판사는 다음 재판 까지 소덕동 주민들의 과반수 투표로 재판의 승/패를 가린다고 말한 후 돌아가게 되며 본격적인 한바다와 태산의 정치(?) 대결이 나타납니다.

알바를 푸는 태산

다음 날 이런식으로 일이 풀어질 것이라는 걸 알았는지 태산은 알바를 고용해 마을 주민들에게 동의서를 받으러 다닙니다.

한편 대응이 느린 한바다는 일일이 겨우 5명이서 일일이 돌아다니지만 역부족임을 알고 이장님에게 도움을 요청을 하게 되고 도로건설 반대에 동의하던 부녀회장님이 힘을 실어 주게 됩니다.

부녀회장님의 힘

부녀회장님의 영향 덕인지 마을회관에 주민들을 불러모아 설득을 시도하는 한바다 로펌.

하지만 어르신들도 그냥은 안된다며 노래나 한 곡 불러보라는 요구를 듣게되고 마을 회관은 춤판이 벌어지며 한바다는 다수의 주민들의 동의서를 받게 됩니다.

이 후 각자 동의서를 받으러 다니는 도중 권민수는 태수미와 같이 있는 우영우를 보고 위장취업이라고 혼자 확신을 하게 되고 내려오는 우영우를 붙잡고 위장취업해서 좋으냐? 라는 식의 어투로 우영우를 쏘아 붙이게 됩니다.

저녁에 집으로 들어온 우영우는 아버지가 자신을 한바다에 취업시킨 줄 알고 배신감을 느껴 집을 나오게 되는데, 이 때 아버지가 태수미가 엄마라고 밝히자 충격을 먹은 우영우는 계단에 발을 헛디뎌 굴러 떨어지게 되며 입원을 하게 됩니다.

그 뒤로 아버지의 옛날 기억을 보여주는데 아버지에 대한 책임감을 보면서 대단하다고 느낍니다.

옛날 우영우 아버지의 모습

대학시절 실수로 태수미는 우영우를 임신하게 되는데요. 집 안에서의 위치 때문에 태수미는 원래 낙태하려고 했습니다.

하지만 우영우의 아버지는 책임감? 죄책감? 이랄까요. 아기를 낳아만 주면 혼자 키우겠다고 합니다.

태수미도 그의 진심을 알았는지 아기를 낳고 난 뒤 고용인을 통해 우영우를 아버지에게 건네주며 앞으로 얼씬거리지 말라는 조건과 함께 이후로 아버지는 혼자 지금까지 우영우를 키운 것이였습니다.

(자세한 내용은 영상으로 !!)

영감이 떠오른 우영우

아버지와의 진지한 대화를 하던 도중에 우영우는 대화 속에서 무언가 번뜩였는지 대화하다 말고 자고있을 새벽시간에 정명석 변호사에게 전화해 소덕동의 팽나무에 대해서 의심을 품게 됩니다.

그 다음날 이장과 위원장을 보러 간 우영우와 이준호는 문화재청에 대신 문의를 넣으러 갔다는 한 주민에 대해 의심을 품고 해당 주민을 찾아가게 됩니다.

도망치는 소덕동 주민(박유진)

문화재청을 찾아가 당시 문의를 넣었다는 박유진씨를 찾아갔고 해당 자료를 보여준다는 이유로 자리를 뜬 박유진 씨는 짐을 챙겨 도망을 갑니다. 우영우가 이것을 발견하고 이준호가 쫒아가서 박유진씨를 잡는데 성공하게 됨으로 서 사건의 전말을 알게 됩니다.

전문가들이 와서 팽나무를 살펴보고 간 것 또한 박유진씨의 소행이였고 집값이 오른다는 말에 천연기념물이 될 수 있었던

팽나무를 무시한 채로 넘긴 것이였죠.

재판부 기피 신청을 한 정명석

마지막 재판 당일 정명석은 판사를 거부하는 재판부 기피 신청을 하게 되는데요. 이는 맨 첫사진에 나오는 판사가 쓰고 있던 우산 때문이였습니다. 해당 우산은는 소덕동 근처의 아파트를 방문하면 사은품으로 받게 되는 우산이였는데요.

우산에 그려져있는 돌고래 로고가 현재 소덕동에 공사하고 있는 건설사의 로고와 같다는 주장을 하게됩니다.

이에 판사는 자신의 집값이 오르는 것이 막히게 되는 걸 막기 위해 편견적인 시선을 가질 수 있다고 정명석 변호사가 주장함으로 인해 재판은 마무리가 됩니다.

천연기념물이 된 소덕동 팽나무

재판 이후 문화재청에서 소덕동의 팽나무를 조사한 결과 천연기념물로 지정이 되면서 팽나무를 없애면서 하려는 도로공사는 취소되게 되며 해피 엔딩으로 끝이 납니다.

이번 사건은 결국 팽나무가 천연기념물로 지정되면서 끝나는 사건 이였는데요. 마을에 대한 자부심이 크다고 해야할까..

소덕동은 그린벨트 지역이라 땅값이 싸다는 설정이였는데 만약에 그린벨트 지역이 아니였으면 어땠을까? 하는 생각이 듭니다. 주민의 입장이 아니여서 그런지 도로가 개설됬다면 땅값 상승으로 인한 이익 뿐만 아니라 도로가 들어서면서 상권들이 발전하진 않을까? 하는 생각도 듭니다. 그래도 해피엔딩으로 끝났으니 좋습니다^^

글이 도움 되셨다면 공감 한번씩 부탁드립니다 :)

이전 7화 리뷰를 보고싶다면??

[영상리뷰] 이상한 변호사 우영우 7화 - 소덕동이야기(1)( 줄거리有 )

오랜만에 이상한 변호사 우영우 7화를 가져왔습니다!! 7화하고 8화가 스토리가 이어져 있길래 2화 다 보는데까지 시간이 너무 오래걸렸네요.ㅠㅠ 보면서 시청률을 보니 7화가 11% 8화가 13%로 10%대

palkong.com

이상한변호사우영우 등장인물을 보고 싶다면??

이상한 변호사 우영우 - 1화 리뷰 (+ 인물정보)

안녕하세요. 오늘은 "이상한 변호사 우영우" 를 가지고 왔습니다 !! (짱추 강추) 오랜만에 재밌는 드라마를 발견해서 뒤늦게 보기 시작했지만 빠르게 몰아서 보고있습니다 ㅋㅋ 긴 말 필요 없이 1

palkong.com

★이번화 공부

1.재판부 기피 신청?? (=법관 기피 신청)

->형사소송법 제18조에 따라 법관이 불공정한 재판을 할 우려가 있을 때 검사 또는 피고인 등이 제기할 수 있는 행위로 법률에 규정되어 있는 사유에 해당하는 때 그 법관을 직무집행에서 배제시킬 것을 신청하는 제도를 말합니다.

-> ※정당한 사유 없이는 기분따라 바꿀 수 없음.(마음에 안드는 사람이라고 바꿀 수 없다는 것)

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 2일차 보고서

집이좋은 덜렁이 — Wed, 24 Aug 2022 22:28:44 +0900

무작정 웹 메인 사이트 만들기 2일차 째

포토샵도 안깔려있고 ppt로 간단하게 레이아웃을 짜봤다.

주제를 미리 정하지 않아서 주제선정과 어떤 템플릿을 참고할지에 대해 시간이 많이 걸렸다..

주제 머할까 하다가 개를 키우고 있어서 겸사겸사 개 관련 페이지를 만들기로 했다.

1. 작업 시간 : 1시간 40분 (100분)

2. 작업물 : 주제선정, 템플릿 둘러보기 ,레이아웃 짜기

템플릿은 핀터레스트(pinterest)에서 레이아웃을 참고하였다. 여러 사이트에서 각가지의 템플릿들이 모여있는 사이트이다.

참고한 레이아웃을 바탕으로 틀을 만들어 보았다. 프로그램은 PowerPoint 를 사용했다.

페이지 틀

작업에 쓰일 사진을 고르는데에도 시간이 많이 들은 것 같다. (선택장애 ㅠㅠ)

pixels

pexels 의 사진을 참고하여 위의 틀에다가 간단하게 넣어보았다.

pet site 기본 틀

작업 하다보면 바뀔 것 같긴 한데 저기서 크게 변하지는 않을 것같다.

3. 다음 계획 : HTML 마크업을 끝내기

이번에는 복습겸 만드는 것이라 최대한 다양한 태그들을 사용해 볼 것같다.

<div class=header> 같이 <div>로 영역구분 말고 <header>,<section> 등 영역 태그들을 써볼까 한다.

이미지들도 최대한 css의 background로 넣지 않을 생각이다.

3일차 보고서 보러가기

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 3일차 보고서

palkong.com

개인 메모/필기용으로 쓰기 좋은 Notion 사용법

집이좋은 덜렁이 — Wed, 24 Aug 2022 18:07:09 +0900

메모장, 에버노트, 트렐로 등등 메모를 하기 위해 각자 자신만의 쓰는 도구들이 있을껍니다.

오늘 소개할 것은 'Notion' 인데요. 깔끔하게 정리가 가능하고 여러 부가적인 기능까지 개인 이용자라면 '무료로' 사용 가능한데요. 좀 더 자세히 알아보도록 하겠습니다.

노션(Notion)

노션(Notion)은 기존의 메모, 노트필기, 일정, 투두리스트(해야할일), 데이터베이스 등의 관리를 단 하나의 앱으로 쓸 수 있는 기록/메모 관리 소프트 웨어입니다.

Notion (노션) – 모든 팀을 위한 하나의 워크스페이스

Notion은 단순한 워드프로세서가 아닙니다. 내 스타일에 맞게 커스텀해서 사용하세요.

www.notion.so

노션을 사용하기 전 까지는 pc로는 폴더-메모장.. 핸드폰으로는 note 앱을 사용했었는데요. 노션을 알고 나서부터

아이콘도 다양하고 템플릿도 이쁜게 많고, '/(슬래쉬)'를 치면 자동완성으로 표,To do list 등을 삽입 할 수 있어서 좋은 것 같습니다.

노션(Notion) 사용하기

1. 회원가입/로그인

노션 메인페이지

오른쪽 상단에 로그인을 눌러 회원가입을 진행합니다.

2. 첫 설정 후 용도 선택

용도 선택

팀용 : 여러 사람과 동시에 작업할 일이 많다면 팀용으로 선택해 주세요 (history기능으로 누가 작업했는지 알 수 있어서 농땡이 부리는 사람 검거 가능)

개인용 : 메모,필기용으로 주로 사용하실 분들이 선택하시면 되는데요 팀용과 달리 개인용은 무료!!

3. 본격적인 시작

로그인 후 첫 화면

자주 사용하시는 것만 알아두시면 될 것 같습니다.

1. "/" 슬래쉬 : 자동완성 기능으로 추가 가능한 콘텐츠들을 볼 수 있다.

2. + 는 "/" 를 사용한 것처럼 블록을 추가할 수 있다.

3. 박스 왼쪽에 점자로 된걸로 블록을 움직일 수 있다.

4. 왼쪽 사이드바에서 +새 페이지 버튼을 클릭해 폴더or파일을 만들 수 있다.

폴더와 파일

4. 언어를 바꾸고 싶을땐?

사이드바 메뉴 [설정] - [언어와 지역] 클릭 해서 들어가셔서 바꾸시면 됩니다.

언어 선택

5. 폴더 형식으로 만들고 싶을 때

사이드 바의 [+새 페이지] 를 활용해 만들면 된다.

폴더/파일 만들기

기준으로 잡을 [새 페이지]를 만들고 + 버튼으로 원하는 만큼의 파일을 만들면 된다.

6. 템플릿?

사이드바 메뉴 아래쪽을 보면 [템플릿] 이란 메뉴가 있는데 다른 사람들이 만들어논 귀염 뽀짝한 템플릿들이 많이 있으니 자기가 직접 꾸미는게 귀찮다면 참고하시면 좋습니다.

메인 페이지에서 [다운로드] 를 통해 프로그램으로 다운 받으시는게 편하니 각자의 운영체제 맞게 설치하도록합시다.

글이 도움이 되셨다면 공감 한번 씩 부탁드려요~

HTML+CSS 웹 메인 사이트 만들기 - 1일차 보고서

집이좋은 덜렁이 — Wed, 24 Aug 2022 09:25:32 +0900

1. 작업 시간 : 30분 남짓

2. 작업물 : vscode git 연결 및 오류 잡기

2022.08.23 - [IT/VScode] - VScode git github 연결하기

VScode git github 연결하기

간단하게 vscode와 git, github를 연결해서 편하게 코드 작성하시기 바랍니다. (저도 이번에 처음 연결한 거라 틀린 부분이 있을 수도 있습니다 ㅎㅎ.. 피드백은 환영) 연결하기 전에 준비물이 필요합

palkong.com

터미널에서 "git push origin master" 명령어를 사용하여 github에 있는 repositories 에 작업한 것을 등록하려고 했다.

repository 오류

위와 같이 오류메세지가 나왔지만 git을 잘 몰랐던 나머지 등록된줄 알고

repositories 에 들어가봤지만 내용이 들어가 있지 않아 멘붕이 와버렸다..

몇 분간 구글링 한 결과 원인을 알게 되었는데...

git remote add 명령어 오타

origin 으로 썼어야했는데 o'p'rigin 으로 별칭을 지정해 놓고 없는 별칭으로 뻘짓 거리를 하고 있던 것이였다.

(git remote add <별칭> <원격주소>)

잘못 만든 별칭을 삭제하고 origin으로 연결해주니 정상 작동 했다..

삭제: git remote remove <별칭>

origin 재 연결

별것도 아닌거로 시간을 빼앗기고 잠시 쉴겸 침대에 누웠다가 그만 잠들었더니 새벽..

2일차 때는 참고할 레이아웃과 디자인까지 하는 것으로 목표를 해야겠다.

HTML+CSS 웹사이트 2회차 보고서는 ↓↓

HTML+CSS 를 이용한 웹 메인 사이트 만들기 - 2 일차 보고서

palkong.com

VScode git github 연결하기

집이좋은 덜렁이 — Tue, 23 Aug 2022 20:19:22 +0900

간단하게 vscode와 git, github를 연결해서 편하게 코드 작성하시기 바랍니다.

(저도 이번에 처음 연결한 거라 틀린 부분이 있을 수도 있습니다 ㅎㅎ.. 피드백은 환영)

연결하기 전에 준비물이 필요합니다 (vscode,git,github) 다 되셨다면 아래로 !!

1.vscode 설치하기 (홈페이지 링크)

vscode 메인페이지

자신이 쓰고있는 운영체제에 맞게 설치해줍시다.

vscode 확장프로그램 추천은?

VScode 기본 셋팅(1) - 확장프로그램 추천

palkong.com

2. git 설치 (홈페이지 링크)

git 홈페이지

역시 운영체제에 맞게 다운을 받아줍니다.

설치하실 때

Which editor would you like Git to use?

에디터 뭐쓸꺼냐는 질문인데 > visual studio code 클릭

SSL/TLS library ~ 질문은 OpenSSL library 체크하시고 설치하시면 됩니다.

3. github 회원가입 하기 (회원가입 하신 후 로그인하고 다음 단계로)

https://github.com/

GitHub: Where the world builds software

GitHub is where over 83 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

github.com

미리 회원가입까지 마치시면 다음 단계로 넘어가시면 됩니다.

1. github에 작업을 등록할 repository 만들기

오른쪽 위의 프로필 누르고 [your repositories] - 초록색 [new] 버튼을 눌러 생성해 줍니다.

github 레파지토리 만든 후

빨간색 박스로 된 것이 repositories 의 github 주소 입니다. 조금 있다 사용할 거니 keep

2. github에 등록할 폴더 지정하기/ 새로만들기

저는 바탕화면에 따로 작업할 폴더('palkong')를 만들어 놨습니다.

폴더 생성

3.vscode를 열고 [폴더열기]or [file]메뉴->open folder 를 통해 만들어논 폴더를 열어줍니다.

폴더열기

4. 테스트해볼 파일을 만들어줍니다.(html, css, js, py 등 상관없어요).

저는 palkong.html 을 만들어줬습니다.

파일 만들기

5.레파지토리 초기화 하기

파일에 내용을 추가 또는 삭제 같은 내용을 변경했다면 사진 왼쪽의 아이콘에 변화가 있을겁니다.

클릭후 리포지토리 초기화를 눌러줍시다.

레포지토리 초기화

6. 터미널을 열어줍시다.

[터미널] ->[새 터미널] 또는 ctrl+shift+ ` (틸드) 1번 옆에있는 아이콘을 같이 눌러줘도 열립니다.

터미널 열기

7.github의 repositories(레파지토리) 연결 및 확인

위에서 아까 레파지토리 주소를 ctrl+c 로 복사해옵니다.

터미널에 "git remote add origin 주소.git" 을 입력하고 "git remote -v" 를 통해 잘 적용됬는지 확인합니다.

(사진과 똑같이 나왔다면 성공)

결과 화면

8. commit 할 변경사항이 있는 파일들을 골라 '+'를 눌러 스테이징 후 commit 하기

commit 하실 때 위에 "제목" 써주셔야 commit 되니 주의~

커밋하기

만약에 commit(커밋)을 누르셨을 때 아래와 같이 오류 뜨신 분은 user 정보를 입력하시면 됩니다.

커밋 오류

git config --global user.name "사용자이름"
git config --global user.email "github에 가입한 이메일"

오류 해결

오류 해결한뒤 다시 commit을 해보면...

commit 후 왼쪽 화면

사진과 같이 오류없이 완료가 되실겁니다.

9.commit이 완료되었다면 push로 github에 등록까지 !!

터미널에 아래 명령어를 입력
git push origin master

위의 명령어가 불편하다면?

직접 푸시 하기

명령어를 쓰거나 직접 푸쉬하거나 편한걸로 하시면 됩니다.

10. 확인하기

완료

이번에 처음연결해본 거라 제가 잘못 알고 있는 부분이 있다면 피드백 해주시면 감사합니다.

글이 도움되셧다면 공감 한 번씩 부탁드려요~!!

HTML + CSS 을 사용한 웹 메인사이트 만들기 - Goal, 계획

집이좋은 덜렁이 — Mon, 22 Aug 2022 23:54:51 +0900

HTML 부터 시작해서 CSS.. jQuery.. Javascript 까지 공부한지 약 1달하고 조금 지났다.

기억이 가물가물해진 HTML,CSS를 복습할겸 간단한 웹사이트를 만들까 한다.

웹사이트 제작 Goal

1.잘 안써봣던 태그들로 만들기

예) iframe, picture, form, table 등등

2. 거의 사용안해본 css 적용하기

예) box-shadow, text-shadow, @keyframe, animation 등등

3. 반응형은 간단하게

4. 제작 기간 지키기 - 하루 최대 2시간, 총합 12시간 이내로(최소 6일)

계획

git(+github) 과 vscode 연결 --> vscode에 과정 포스팅 예정
- 하루 작업물을 commit 하기 위해 연동먼저 시켜줘야 할 것같다.
어떤 아이디어로 어떤 레이아웃을 짤 것인지 구상하기
- pinterest, Behance 같은 템플릿 웹사이트를 보며 영감 떠오르기
- (아이디어가 떠오르지 않으니 생각해볼 생각)
이 웹사이트에 써보고 싶은 태그와 css 적어보기
하루 최소 30분 ~ 최대 2시간까지만 작업하기

우선 생각하는 구상도이다.

구상도

이번이 처음 계획해보는 거라 부실한 면이 있지만 공부해서 다른 웹사이트 만들때 참고해보겠습니다.

잘 계획하는 팁 있으면 로그인 불편하시겠지만 댓글 주시면 감사합니다.

1회차 보고서↓↓

HTML+CSS 웹 메인 사이트 만들기 - 1일차 보고서

palkong.com

[영상리뷰] 이상한 변호사 우영우 7화 - 소덕동이야기(1)( 줄거리有 )

집이좋은 덜렁이 — Sun, 21 Aug 2022 13:10:49 +0900

오랜만에 이상한 변호사 우영우 7화를 가져왔습니다!!

7화하고 8화가 스토리가 이어져 있길래 2화 다 보는데까지 시간이 너무 오래걸렸네요.ㅠㅠ

보면서 시청률을 보니 7화가 11% 8화가 13%로 10%대를 넘어섰네요. 오르는 추세가 대단하단 생각이..

7화&8화는 소덕동 마을에서 발생하는 고속도로건설에 관한 사건을 다룬 내용입니다.

이어서 포스팅 하려했으나 너무 글양이 길면은 지루할 까봐 7화 ,8화 나눠서 내용을 작성했으니

둘 다 좋게 봐주시면 감사합니다.!!

혹시 등장인물이 궁금하시다면?? 아래 링크로 보시고 오시면 될 것같습니다 !!

2022.07.28 - [영상리뷰/드라마] - 이상한 변호사 우영우 - 1화 리뷰 (+ 인물정보)

이상한 변호사 우영우 - 1화 리뷰 (+ 인물정보)

palkong.com

사건의 시작점

사건:행복로 도로 건설

사진에서의 지도를 보여준 곳은 소덕동 마을입니다.

마을 중앙에 빨간 선으로 된 곳이 바로 도로를 건설할 경로 인데요.

여러 효율성을 고려한 경로이지만 소덕동 주민들은 자신들의 터전이 절반으로 갈라지기 때문에 도로 건설에 대해 반대 하고 있습니다.

줄거리

한바다를 찾아온 이장님

소덕동 마을 주민 대표로 이장님이 '행복로 도로 구역 결정 취소 청구 소송'을 위해 한바다를 찾아왔습니다.

한바다 측에서도 힘든 재판이라 소송 건을 접수 안하려 합니다. 그러자 옆에 있던 위원장이 마을을 직접 와보고

결정 하는게 어떻냐며 반강제적으로 변호사들을 끌고 소덕동으로 향합니다.

소덕동 팽나무

소덕동에는 명물로 큰 팽나무가 하나 있는데요. 별명으로 부르는 개성적인 마을 뿐만 아니라 팽나무, 전체적인 마을 분위기를 보고 한바다 사람들의 마음이 움직였는지 소송을 접수 하게 됩니다. 하지만 실제로 도로 건설 공사를 막기에는 명분이 없기 때문에 한바다에 돌아가서 회의를 하게 됩니다.

최수연과 우영우 대화

회의 도중 이준호가 남은 추가자료를 주면서 우영우의 눈치를 살피자 이를 캐치한 최수연이 우영우와 단 둘이 남게 되었을 때 '이준호씨가 너 좋아하는거 아니냐?' 라고 하자 우영우는 자신이 자폐인이라는 인식 때문인지 최수연에게 부정을 합니다. 그러자 최수연은 자신은 좋아해도 상대방이 안좋아하는 자신을 보고 우영우가 한 말에 대해서 열이 받아 강하게 한 마디 하고 자리를 떠나게 됩니다. (내용 궁금하신 분은 영상으로!!)

상대측 태산의 변호

태산의 변호인으로 나온 사람은 다름아닌 전 대표였던 태수미 변호사이다.

재판에 나오게 될 판사에 맞춰 영상을 제작해 왔는데요.

소덕동을 우회할 수 있는 경로가 가로지르는 경로 포함 3가지 경로가 있는데

우회하여 도로 공사를 할시 발생하는 상황과 발생하는 추가 공사비, 소덕동 주민들만 편하면 되냐라는 식의 지역 이기주의를 들먹이며 변호를 하게됩니다. 우회를 하게 되면 너네들이 책임질 수 있느냐? 라는 식으로 말이죠.

직접 영상을 본 사람으로서 태수미 변호사의 변론만 따져본다면은 패소할 수가 없을 것같은 논리였습니다.

이에 한바다는 환경영향평가의 절차 위반을 들이내밀며 반론을 했고 거기에 대한 민원접수의 증거를 가지고 있게 되면서 태수미 변호사의 반박이 없게됩니다.

이후 분위기를 가져오기 위해 정명석 변호사는 소덕동에 대한 '현장검증'을 제시하며 재판이 끝나게 됩니다.

태수미 변호사를 검색하는 우영우

1차 재판 이후 태수미 변호사의 실력에 반한 우영우는 집으로 돌아오자마자 태수미에 대해 검색을 합니다.

간식을 가져다 주던 아버지가 그것을 봐버리고 태수미 변호사를 왜 검색하냐며 캐묻고 넘어갑니다.

도로 건설공사는 계속 되자 한바다 측에서는 자신들이 현장에 가서 마음이 변한 것처럼 판사들도 현장검증을 통해 마음을 한번 움직이려고 시도하게 됩니다. 그렇게 2차 재판이 끝납니다.

한바다 한선영 대표와 우영우의 아버지 면담

태수미를 검색하는 걸 본 우영우의 아버지는 한바다의 한선영 대표가 태수미의 딸인걸 알고 우영우를 자신의 회사로 채용했다는 의심을 하게 됩니다. 즉, 나쁜 의도로 우영우를 이용하기 위해 채용을 한 것이라고 믿은 것이죠.

한선영은 태수미의 딸인건 알고는 있는듯한 태도를 보였으나 이용하기 위해 채용시킨건 아닌듯한 느낌이 듭니다.

우영우의 아버지는 이 사회에서 자폐를 가진 사람이 어떤 취급을 받는지 잘 알기 때문에 한선영에 대한 의심은

대화가 끝날 때 까지 없애지 못하고 우영우 변호사를 이용할 경우에는 직접 데리고 나온다고 반협박까지 하고 나오게 됩니다.

이 때, 권민수가 한선영 대표실에서 나오는 우영우의 아버지를 보고 빽, 즉 우영우가 학연에 의한 부정취업한 사람이라고 의심하게 되며 우영우를 혐오하며 공익신고까지 합니다. (우영우의 아버지는 한선영 대표의 대학 선배였다.)

우영우와 이준호

이런 심각한 와중에도 늦은 저녁 우영우와 이준호가 우연찮게 둘이 한공간에 있는데요. 우영우가 이준호에게 자신이 이준호를 좋아하는지 알고 싶다며 만져보게 해달라하자 이준호가 우영우한테 바짝 붙는데...

다음 상황에 대해서는 영상으로 확인해보시는게 좋을 것 같습니다 ㅎㅎ..

★마무리

이것으로 [이상한 변호사 우영우 7화 - 소덕동이야기(1)] 이였구요.

우영우를 7화까지 본 시점에서 느낀점이 러브한 느낌의 씬은 한 화에 한 번씩 나오는 것 같다는 느낌..?이 들었던 것같아요.

요즘 볼 시간은 없는데 벌써 14화가 넘어가다니.. 쉬는 시간 틈틈이 봐야겠습니다 ㅋㅋ;

★오늘의 공부

1.환경영향평가법 이란?

-환경에 영향을 미치는 계획 또는 사업을 수립/시행할 때에 해당 계획과 사업이 환경에 미치는 영향을 미리 예측ㆍ평가하고 환경보전방안 등을 마련하도록 하여 친환경적이고 지속가능한 발전과 건강하고 쾌적한 국민생활을 도모함을 목적으로 한다.

2.전략환경영향 평가 절차

-환경영향평가 법에 따라 전략환경평가는 환경에 영향을 미치는 계획을 수립할 때 해야한다.

2023년 최저 임금/시급 확정, 더 오를까?

집이좋은 덜렁이 — Sat, 20 Aug 2022 19:58:20 +0900

2023년 최저임금이 22년 8월 05일에 확정됐다고 합니다!!

일하시는 분이나 고용하는 분이나 돈을 벌고 계신 분들이라면 관심이 갈 수밖에 없는데요.

물가가 오르면서 동시에 최저임금도 오르게 된 것 같습니다.

간단하게 최저 임금제와 최저 임금/시급, 향후 최저임금 전망에 대해서 얘기해 보겠습니다.

★최저임금제도

최저임금제도란 국가가 노/사간의 임금결정 과정에 개입하여 임금의 최저 수준을 정하고, 사용자에게 이 수준 이상의 임금을 지급하도록 법으로 강제함으로써 저임금 근로자를 보호하는 제도이다.

한마디로 법을 통해 고용주는 근로자에게 일정이상의 금액을 지불해야 한다는 얘기입니다.

최저임금제도 [출처:최저임금위원회]

★2023년 최저 임금/시급은?

2023년 최저시급은 9,620원으로 하루 8시간 주 5일 기준으로 월급은 2,010,580원이 됩니다.

올해인 2022년 최저시급인 9160원보다 5% 인상 되었으며 월급의 차이는 10만 원 정도가 납니다.

아래 사진은 월 환금액 및 그동안 연도별로 정리된 최저임금 그래프 입니다.

월 환금액[출처:최저임금위원회]

연도별 최저임금/시급[출처:최저임금위원회]

2011년부터 쭈~욱 올라왔던 최저임금 현황인데요. 앞으로도 최저임금이 올랐으면..^^하는 희망적인 얘기..

★향후 최저임금은..?

2023년 최저임금이 결정되는 과정을 보면서 노/사 양측의 제시안을 보게 되었는데요.

양 측 둘 다 4차 제시안까지 제출을 했지만 도저히 입장 차이를 좁히지 않자 위원장 측에서

논의의 진전을 위해 공익위원이 제시한 심의촉진 구간 내에서 양측에 추가 수정안을 요구했지만 두 쪽 다 제출하지 않았다고 합니다.

노/사 제출했던 제시안[출처:최저임금위원회]

표로 알 수 있듯이 확실히 근로자와 사용자 간의 입장이 얼마나 좁혀지지 않았는지 알 수 있는데요.

결국 공익위원에게 단일안을 제시하게 되고 그것이 지금의 9,620원이 된 것입니다.

노총 소속이 다 기권처리가 되면서 확정이 된 것이죠.

향후 2024년~202n년 까지 지금까지의 흐름을 본다면 최저임금이 오를 것은 분명하지만 이것이 마냥 좋지만은 아닐 것 같습니다.

최저임금이 오른다는 건 결국엔 서비스나 물가가 더 오른다는 것을 뜻하니까요..

★마무리

물가가 오르면서 최저임금 오르는 것이 좋은 현상이라고 생각을 하는데, 한편으로는 최저임금이 오름으로써 그동안 사용하던 서비스나 물가들이 더 오르지 않을까.. 하는 걱정도 듭니다.

고용주 측 입장으로 봤을때 상황이 언제 좋아질지도 모르는 마당에 시급이 올라버렸으니 걱정도 클 것 같습니다.

양 측 노/사 사이에서 합리적인 방안이 나오면 좋겠네요.

글이 도움 되셨다면 공감 한 번씩 부탁드립니다

2022국가무료건강검진, 시간내서 내 몸 상태 살펴보자.

집이좋은 덜렁이 — Fri, 19 Aug 2022 23:56:33 +0900

2022년국가무료건강검진 대상자 및 검사항목, 주의사항 및 빠르게 받는 방법에 대해 소개하겠습니다.

안받으신분들이 있다면 늦지 않게 검진 받도록 해봅시다.

2022년 건강검진 대상자는?

20세 이상이면서 짝수연도 출생자인 성인이라면 전부 대상자 이십니다.

(의료급여 수급자인 경우 20세~64세 짝수연도 의료급여수급권자만 해당)

2023년도 대상자는??

당연하게도 짝수연도 출생자 이십니다.

정확하게 알고 싶다면?

[국민건강보험 홈페이지 <--링크] - [건강검진 대상조회] - 본인 인증 후 확인

국민건강보험 홈페이지

가서 받아야하는 항목은?

공통 검사항목 (아픈 증상이 없는 대부분은 공통 검사만 받습니다.)

비만 : 진찰, 상담, 신장, 체중, 허리둘레, 체질량지수
시각,청각이상 : 시력, 청력
고혈압 : 혈압측정
간장질환 :AST(SGOT), ALT(SGPT), 감마지티피
당뇨병 :공복혈당
신장질환 : 요단백, 혈청 크레아티닌, 혈색소, 신사구체여과율(e-GFR)
폐결핵/흉부질환 : 흉부방사선촬영
구강질환 : 구강검진

- 참고 -

운전면허 적성검사 간소화 서비스

- 운전면허 신청일 이전 2년 내 국가건강검진을 받은 사람은 운전면허 발급·갱신 시 신체검사(시력·청력) 면제가 가능합니다. 단, 검진기관에서 검진청구하여 정산완료된 자료에 한함

성·연령별 검사 항목 (안보이시는 분들을 위해 사진 첨부)

이상지질혈증(총콜레스테롤, HDL콜레스테롤, LDL콜레스테롤, 트리글리세라이드)남자 24세↑↑, 여자 40세↑↑, 4년 주기(남자 24세+4n, 여자 40세+4n만 해당)
B형간염검사 : 40세, 보균자 및 면역자는 제외
치면세균막검사 : 40세
골다공증 : 54세 및 66세 여성
정신건강(우울증) : [20~70세, 10세 간격] 해당 연령을 시작으로 10년동안 1회
생활습관평가 : [40~70세, 10세 간격]
노인신체기능검사 : 66세/70세/80세
인지기능장애검사 : 66세 이상, 2년 주기(2년마다 한 번만 !)

[사진출처:국민건강보험]

필수사항 및 알아두면 좋은 사항

건강검진 전 주의사항

1.검진 전날 저녁 9시 이후에는 무.조.건 금식하기

2.검진 당일 아침 식사는 물론 물, 담배, 껌 등 일체의 음식을 삼가야 합니다. (씹거나 마시는 행위 자체 금지)

3.되도록 오전 중에 검진을 받되, 오후에 검진받으실 분은 검사 전 최소 8시간 이상의 공복상태를 유지해야함.

(공복이 아닌 상태에서 검진 시 검사결과가 다르게 나타날 수 있다고 합니다.)

검진기간 안내 : 매년 1.1. ~ 12.31. (확진검사는 다음연도 1.31까지)

1.일반건강검진의 검진기간은 매년 12.31.로 종료되며 검진기간 연장은 없습니다.

(단, 전년도 미수검자가 공단에 요청 시 금년도 검진대상으로 추가등록은 가능!!)

2. 성, 연령별 검사항목은 해당하는 자에 한하여 당해 연도만 검사할 수 있습니다.(3번 성/연령별 검사항목 참조)

★검진시간 줄이는 방법

예약 후 방문 하기 (예약이 조기에 마감될수 있으니 사전 확인 및 예약 후 검진하면 도움이 된다.)
웹 문진표 작성하기 (현장가서 작성가능) 작성법↓↓↓
1. 국민건강보험공단 홈페이지 및 모바일앱(The건강보험) 깔기
2. [건강iN] - [나의 검진대상 조회] - 본인인증
3. 웹 문진표 작성
4. 등록번호 신청 후 휴대폰(4자리)으로 전송
5. 검진기관 내방 후 검진
6. 문의는 1577-1000

기타 주의사항

●수면 내시경 받는 분은 검진 후 자가운전은 위험하니 대중교통 타고 오시길 추천합니다.

(보호자 동반이 가능하다면 혼자말고 둘이 오시는거 추천)

●도난,분실의 염려가 있으니 귀중품은 가지고 오지말기

(이것 또한 보호자 동반이 있다면 편하겠죠?)

나도 모르게 질병이 있을 수 있으니 너무 미루지 마시고 검진한번 받아보시기 바랍니다.

도움 되셨다면 공감♥ 한번씩 부탁드려요!!

CSS 좋은 습관으로 깔끔하게 작성하기

집이좋은 덜렁이 — Thu, 18 Aug 2022 23:37:18 +0900

HTML은 물론 CSS 조차 몇 백줄이 나오고.. 클래스는 못찾겠고.. 뒤죽박죽인 나의 코드들..

해결점을 찾기 위해 뒤적거리다 나도 모르게 안좋은 습관을 가지고 있었다..!

CSS 안좋은 습관, 본인한테 해당되는지 한 번 확인해 보는 것도 괜찮을 듯 합니다.

1.HTML 기본 속성 무시하지 말기

HTML 에는 인라인 태그, 블록 태그 등 여러 태그들이 존재한다. 하지만 그 태그들의 본연의 성질을 무시하고 인라인태그에 block 요소를 주어서 굳이 크기를 주는 경우가 있는데 이것은 잘못 사용하는 예이다.

예를 들어 <span>태그는 인라인 태그 이다. 굳이 인라인 태그에다 display:block;을 준 뒤 크기를 주는 경우가 있는데 이것은 잘못 된 습관이니 고치도록 하자.

2. !important 난사하지 말기.

!important 는 최우선 순위로 css를 부여해주는 역할을 해준다. css의 우선 선택자 규칙을 다 무시해버리는 !important를 난사하게 되면 나중에는 !important를 계속 추가해야 되고 나중에는 충돌을 일으키게 된다.

진짜 진짜 급한 상황 아니면 사용하지 말도록 하자.

**3. 와일드카드(*)에 의존하지 말기.**

작성 초반에 와일드카드(*)를 쓰고 미리 초기화 하는 사람들이 있을 것이다. (바로 내가 그랬다.)

개인 프로젝트라면 모르겠지만 각 회사마다 가지고 있는 css 파일이 있을 수 있고, HTML 의 양이 많아지면 질수록 CSS 수정을 해야될 경우가 많은데 와일드카드(*)에 미리 초기화 다 해두고 작업을 한다면 나중에 수정하는데 시간이 오래 걸린다. 최소한의 공통 항목만 와일드 카드에 정리하고 막 사용하지 말도록 하자.

4. z-index 불규칙하게 사용하지 말기

예를 들어 header에는 z-index를 10주고 section에다 z-index를 5로 footer는 8로 사용하는 사람이 있을 수 있다.

z-index로 인한 문제가 발생했을 때 일일이 수정하는데 시간이 오래 걸리게 되고 일의 효율 또한 떨어지게 된다.

구분이 되는 태그 마다 주석으로 z-index의 범위를 주도록 하자.

/* header 는 1~10 까지*/
.header{
	z-index:1;
}

/* section 는 11~20 까지*/
.section{
	z-index:11;
}

5.인라인 방식으로 스타일링 넣기

굳이 CSS에 말고 HTML 에 style을 주는 사람이 간혹 있을 수 있다.

유지 보수 하는데에 있어서 하나하나 인라인 방식의 스타일을 고쳐주는 일은 쉬운일이 아니다.

어지간한 경우가 아닌 이상 css파일안에다가 스타일을 넣어주도록 하자.

<!-- 적절치 못한 예 -->
<div class="" style="width=100px; height100px;">
	...
</div>

/* 적절한 예*/
div {
	width:100px;
	height:100px;
}

6.선택자 길이는 되도록 짧게 쓰자.

해당 선택자로 가는 경로를 다 써주는 것 어떻게 가는지 보이니 좋긴하다.

다만 양이 많아진다면 이것또한 불필요한 과정에 불구하다.

따라서 해당 선택자로 가는 경로는 그전 경로 까지만 축약해서 쓰도록 하자.

/*나쁜 예*/
.header > .gnb > .sub > ul > li > a{ ... }

/*좋은 예*/
.sub > ul > li > a{ ... }

7. id 속성은 어지간하면 사용하지 말자.

무조건 쓰지말라는 것은 아니다. 한 번쓰고 말 css 속성이라면 상관이 없다.

id 속성은 css 우선순위 규칙에 의해 class 속성보다 한참 우선순위가 커서 먼저 적용된다.

id 속성을 css로 꾸밀 경우에는 재사용성이 떨어지기 때문에 곤란할 수도 있다.

따라서 재사용성이 좋은 class를 사용하도록 하자.

도움이 되셨다면 공감 한 번씩 부탁드려요!!

웹 공부하시는 분들 존경 존경..!!

HTML 안좋은 습관↓↓

HTML 나쁜 습관, 나도 무의식적으로 쓰고 있다.

HTML 작업이 끝나고 며칠 후에 내 코드들을 보면은 너무 복잡하고 지저분하게 되어있어서 뭐가 뭔지 모를 때가 많았다. 그래서 HTML을 어떻게 깔끔하게 짤 수 있을까.. 찾던 도중 나에게 안좋은 습

palkong.com

HTML 나쁜 습관, 나도 무의식적으로 쓰고 있다.

집이좋은 덜렁이 — Wed, 17 Aug 2022 23:54:37 +0900

HTML 작업이 끝나고 며칠 후에 내 코드들을 보면은 너무 복잡하고 지저분하게 되어있어서 뭐가 뭔지 모를 때가 많았다.

그래서 HTML을 어떻게 깔끔하게 짤 수 있을까.. 찾던 도중 나에게 안좋은 습관들이 많았던 것이다.

내가 알아본 것들을 정리해 볼려고 한다.

완전 초보 개발자 수준이니 어느정도 마스터 하신 분들은 눈요기로 봐주시면 감사합니다.

1. 다양한 태그를 사용해라

보통 박스를 구분할 때 <div> 태그를 자주 사용했는데, 나중에 수정하려고 보면 어디가 어디 부분인지 헷갈린다.

<header>나 <nav> 와 같이 구분이 되는 태그들을 다양하게 사용해주도록 하자.

<!--잘못된 예 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="section">...</div>

<!--좋은 예 -->
<header>...</header>
<nav>...</nav>
<section>...</section>

2.script 문서는 하단에 적자.

script문서를 무조건 하단에 적으라는 것은 아니다.

단, 상단에 적게 되면 onload 되었을 때 사용해야 하는 script 도 따로 window.onload 를 따로 써줘야 하니 차라리 문서 하단에 배치해서 편하게 작성하자.

<!-- 나쁜 예 -->
<head>
<script src="경로"></script>
</head>
<body>
  ...
</body>

<!-- 좋은 예 -->
<head>
</head>
<body>
  ...
  <script src="경로"></script>
</body>

3.이벤트는 인라인 방식으로 사용 NoNo

onclick 같은 이벤트를 태그 안에다 사용하는 인라인 방식은 사용하지 않는 것이 좋다.

다른 사람들이 나중에 봤을 때 혼동이 올수도 있고 양이 방대해지면 일일이 찾아서 수정하기도 버겁다.

<!-- 나쁜 예 -->
<button onlick="clicked()"> ... </button>

<!-- 좋은 예 -->
<script>
	function clicked() {... }
</script>
<button> ... </button>

4. 종료태그가 없는 요소에도 닫는 기호 사용하기

★본문-중단

XHTML 같은 경우 닫는 기호는 필수 지만 현 HTML5 는 필수가 아니다.

하지만. 안전한 구조를 위해 몇몇 분들은 사용한다고 한다. / 하나만 체크해주면 되니 알아두면 좋을 것 같다.

<!-- 일반적인 사용 -->
<img src="경로" alt=""   >

<!-- 권장 사용 ('/'사용)-->
<img src="경로" alt=""  />

5.id는 소문자 카멜 표기법으로 사용하자.

id 속성은 스타일 지정을 위해 잘 사용하지 않고 주로 DOM 조작을 위해 사용해야 한다고 한다.

카멜 표기법이란?

-> 단어를 붙여 사용하되 맨 앞에 쓰이는 첫 글자를 제외한 단어의 첫글자는 대문자로 사용한다.

<!-- 카멜 표기법 -->
<!-- caramel + pick -->
<div id = "caramelPick">...</div>

6.이미지 태그 <a href="#" ....> <img ...>만들 때 # 쓰지 말기.

보통 href="#" 을 사용하는 경우는 이 이미지는 클릭이 가능하다. 라는 의미로 많이 쓰인다.

단. 이런경우 클릭하게 되면 # 이 맨 위 상단으로 올려주기 때문에 불편하다.

클릭만 가능하다고 보여주고 싶다면 css 속성의 cursor: pointer 를 사용하도록 하자.

(링크를 걸어줄 생각이면 상관없다.)

<!-- 나쁜 예 -->
<a href="#"> <img ... /> </a>

<!-- 좋은 예 --> 
<style>
	img {
    cursor:pointer;
    }
</style>

<img ... >

7. 외부 리소스 사용시 url 직접 사용하지 않기.

배포 도중 경로가 바뀌는 사고가 있을 수 있기 떄문에 jQuery나 bootstrap 플러그인을 사용할 경우

CDN 말고 다운로드를 해서 사용하도록 하자.

<!--나쁜예 -->
<head>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<!-- 좋은 예 -->
<head>
	<script src="../jquery-1.12.4.min.js"></script>
</head>

8. 이미지는 CSS -background-image 보다 그냥 img 태그로 넣자.

무조건 img태그로만 쓰라는 것은 아니다. 하지만 구글 seo에 좋지 않을 뿐더러 성능에 좋지 않다고 하기 때문에

중요한 이미지를 제외한건 img 태그로 사용하도록 하자.

<!-- 보통 사용 예 -->
<style>
	img{
    	background-image: url('...');
        background-repeat: no-repeat;
        ...
    }
</style>

<!-- 권장 사용 예1 -->
<img src="경로".. />

<!-- 권장 사용 예2 -->
<picture>
	<img src ...>
</picture>

공부하면서 좀 더 수정해 나가도록 하겠습니다.

만약 이 방법은 좋지 않다! 거나 조언 답글은 감사히 받겠습니다.

도움이 되셨다면 공감 한번 부탁드릴게요 ^0^!!

참고 사이트 :

https://kyung-a.tistory.com/search/html

jQuery Dropdown menu 만들기 - 초심자용 .toggle() .not() 등등

집이좋은 덜렁이 — Tue, 16 Aug 2022 09:08:25 +0900

개인적으로 서브메뉴 만들 때 참고하려고 만든 정리 글이니 부족해보일 수 있습니다!

Tip 이나 틀린 점은 댓글로 남겨주시면 감사합니다!!!!!!!!!!!!!!

기본적으로 ul li ul 형태의 서브메뉴를 예로 들어서 하겠습니다.

jQuery 버전은 1.12.4 버전을 사용했습니다.

실습결과

DropDown Menu

HTML 코드

<div class="dropdown_menu">
	<!-- 메인메뉴 #gnb -->
    <ul id="gnb">
      <li>
        <a href="#">slide1 <b>▼</b></a>
        <!--서브메뉴↓↓ -->
        <ul class="sub_menu">
          <li><a href="#">sub_slide1</a></li>
          <li><a href="#">sub_slide2</a></li>
        </ul>
      </li>
      <li>
        <!-- slide2 -->
      </li>
      <li>
        <!-- slide3 -->
      </li>
    </ul>
</div>

HTML은 다들 비슷비슷 하실 꺼라고 생각합니다. 더 추가 내용 없이 넘어가겠습니다.

CSS 코드

/* display는 굳이 안적어줘도 됨. */
#gnb li ul{
  display:block;
  border: 1px solid black;
  border-top:none;
}

/* hover 이벤트로 border 효과를 택스트가 포함된 a 태그에 적용 */
#gnb>li:hover>a {
  border-bottom: 2px solid black;
}

.sub_menu li:hover a {
  border-bottom:2px solid black;}

jQuery_1 : .not( ) 메소드 활용

$(document).ready(function(){

  //서브메뉴 우선 숨기기
  $('.sub_menu').hide();

  //메인메뉴의 <li> 태그를 클릭할때마다 이벤트 함수 발생
  $('#gnb>li').click(function(e){

    //click 시 <li> 태그의 a 태그 href(하이퍼링크) 타는 것을 막아주기
    e.preventDefault();

    // 클릭한 메인메뉴 <li>태그의 .sub_menu 를 제외한 모든 서브메뉴는 hide()로 숨기기
    $('.sub_menu').not($(this).find('.sub_menu').toggle()).hide();
  });

});

만약 메인메뉴 <li> 태그 안에 <a> 태그의 하이퍼링크를 달지 않았거나 쓰지 않았다면

e.prevenDefault(); 는 쓰지 않아도 된다.

.sub_menu 가 길다면 변수를 선언해서 사용하자. 예) var sm = $('.sub_menu');

.not()이 사용된 문장에서 바뀌면 안되는 것.

$('.sub_menu') => this(x)
- this는 #gnb>li 를 가르키기 때문에 메인메뉴가 사라지는 마술을 보고 싶지 않으면 바꾸지 말자.
.not($(this).find('.sub_menu) ...)
- this 는 자신이 클릭한 <li> 태그 안의 서브메뉴를 클릭해주기 때문에 바뀌면 안된다.
- .sub_menu 대신에 서브메뉴를 가르키는 "#gnb > li > ul" 이런 방식이라면 바꿔줘도 된다.

.not()이 사용된 문장에서 바뀌어도 되는 부분

바로 위에서 언급한 .sub_menu
- 서브메뉴를 가르키는 선택자라면 아무거나 상관없다.
.toggle()
- toggle 종류는 아무거나 사용해도 상관이 없다.
- 예) slideToggle() | fadeToggle()

jQuery_2 : addClass(), removeClass()

class를 사용한 방법이다. click이벤트 발생시 적어뒀던 class를 넣다 뺏다 한다.

약간의 작업을 쳐주기로 한다.

css 수정

/* #gnb li ul 대신 .sub_menu 로 전환 */
.sub_menu{
  display:none;
  border: 1px solid black;
  border-top:none;
}

/* 추가할 class */
.show{
  display:block;
}

#gnb li ul 을 .sub_menu로 바꿔준다.

: CSS 우선순위 적용으로 인해 뒤에 .show를 추가해줘봤자 적용이 안되기 때문이다.

: 추가로 display:none을 적용시켜준다 (감춰두기)

추가할 클래스를 작성한다

: display:none을 한 상황이기 때문에 보여주기 위한 block값을 가진 클래스 show를 작성한다

jQuery

$(document).ready(function(){
  
  $('#gnb>li').click(function(){
    //.sub_menu가 display:none 되어있는지 확인한다
    if($(this).find('.sub_menu').css("display")=="none"){
      //다른 서브메뉴의 show 클래스를 삭제
      $('.sub_menu').removeClass('show');
      //클릭한 서브메뉴만 show 클래스 추가
      $(this).find('.sub_menu').addClass('show');
    }else{
      //다른 서브메뉴가 display:block; 처리 되어있다면 show 제거
      $(this).find('.sub_menu').removeClass('show');
    }
  });
});

click 이벤트만으로는 addClass와 remove 클래스를 사용할 경우 서브 메뉴를 클릭했을때 선택되지 않은 서브메뉴가 꺼지지 않고 켜져있을 확률이 높다.

간단하게 작성을 위해 if-else 문을 사용해 다른 서브메뉴가 켜져있을 때 꺼주게 적용을 하였다. (else문)

jQuery_3 : 다른 서브메뉴가 켜져도 상관없다면?

다른 서브메뉴가 켜져있어도 상관이 없다면 toggle이나 slideToggle, fadeToggle 을 사용해서 간단하게 만들어보자.

$('#gnb>li').click(function(){
	//toggle()
	$(this).find('.sub_menu').toggle();
    
    //slideToggle()
	$(this).find('.sub_menu').slideToggle();
    
    //fadeToggle()
	$(this).find('.sub_menu').slideToggle();
});

개인적으로 이런식으로 쓸꺼면 맨 위의 .not() 메소드와 함께 써서 다른 서브메뉴도 감출 수 있도록 하는 걸 추천한다.

CSS Dropdown menu 만들기 :hover 효과 이용하기

집이좋은 덜렁이 — Mon, 15 Aug 2022 19:52:58 +0900

JavaScript를 쓰지않고 CSS 로만 Dropdown 메뉴를 만들어 보도록 하겠습니다.

핵심은 :hover 효과와 display:none; 속성을 잘 활용하는 것.

:hover = mouse를 올렸을 때 라는 경우의 수

display = 요소를 어떻게 보여줄지 결정하는 css 속성

1. dropdown menu를 ul li ul 로 html 짠 경우

결과 화면

html 코드 (일부)

<!--메뉴 영역-->
<div class="dropdown_menu">
	<!-- hover 될 메인 메뉴 -->
    <ul id="gnb">
      <li>
        <a href="#">slide1 <b>▼</b></a>
        <!--서브메뉴↓↓-->
        <ul class="sub_menu">
          <li><a href="#">sub_slide1</a></li>
          <li><a href="#">sub_slide2</a></li>
        </ul>
      </li>
      <li>
        <!-- slide 2 -->
      </li>
      <li>
        <!-- slide 3 -->
      </li>
    </ul>
  </div>

css 적용 (일부)

/* 서브메뉴 숨기기 */
#gnb li ul{
  display:none;
}

/*메인메뉴 <li> 마우스가 올라가면 텍스트 아래 검은 테두리 만들기 */
#gnb > li:hover > a{
  border-bottom:3px solid black;
}

/* 메인메뉴 <li> 마우스 올리면 서브메뉴 보이기 이 때 테두리도 검정색으로 만들기*/
#gnb li:hover ul{
  display:block;
  border:1px solid black;
}

/* 서브메뉴 <li> 태그에 마우스 올리면 텍스트 아래쪽 테두리를 검정색으로 만들기*/
#gnb li ul li:hover a{
  border-bottom:3px solid black;
}

1. 서브메뉴를 숨긴다.

2. 기준이 되는 (#gnb li)에다가 이벤트(:hover)를 발생시켜 서브메뉴 보이기

※display는 보통 block으로 사용되지만 inline-block으로 처리해도 상관은 없다. css style에 따라 다름.

서브메뉴 가로 길이가 화면 꽉 채워져 있다면?

서브메뉴 width:100%;

위 사진과 같이 서브메뉴가 화면 꽉채워져 있다면 아래와 같이 짜면 된다.

그 안의 내용물은 float 또는 display:flex 배치 정렬을 해주기로 하자.

#gnb li ul{
  display:none;
  width:100%;
  left:0;
}