친절한효자손 취미생활

  • 친절한효자손 트위터
  • 친절한효자손 인스타그램 바로가기
  • RSS 피드

욕실을 따뜻하게! 화장실 라디에이터 난방기 바툼 BT-3000PHF 사용 후기

개인공간/생활정보 친절한효자손 2018.12.16 02:44

올 겨울도 유난히 추울것으로 예상됩니다. 빌라가 옛날에 지어진거라 화장실이 외벽에 붙어있어서 겨울에는 완전 춥습니다. 샤워하려면 큰맘먹고 도전해야 합니다. 너무 추우니까요. 그래서 이번에 화장실용 난방기! 라디에이터를 구매해서 설치했습니다.라디에이터도 종류가 많고 가격대도 다양합니다. 방식도 두가지 타입입니다. 빨갛게 달아오르는 적외선 방식과 뜨거운 바람이 나오는 히터 방식 이렇게 두가지가 대표적인데, 아무래도 화장실이고 습기들도 많고 해서 적외선 ..

더 읽기

CSS3 transform translate 트랜스폼 위치값을 활용한 스플릿 메뉴 만들기

WEB&SNS/CSS 친절한효자손 2018.12.16 00:02

수업 시간에 이미지를 활용해서 스플릿 이미지 메뉴 만드는 방법에 대해 배웠습니다. 이 메뉴 구현의 최대 단점은 이미지를 써야 한다는 것이죠. 꼭 이미지를 써야 할까요? 아닙니다. CSS3 스타일로도 얼마든지 구현이 가능합니다. 이미지 없이 태그 요소만으로도 스플릿 메뉴를 만들 수 있습니다.See the Pen CSS3 : Split Menu by rgy0409 (@rgy0409) on CodePen. 먼저 완성된 nav 메뉴 형태를 살펴보시기 바랍니..

더 읽기

메인보드 20핀 USB3.0 확장가이드 백패널 추가 장착 후기 (USB단자 늘리기)

IT는내친구/Hardware[지름신] 친절한효자손 2018.12.15 00:02

USB 3.0포트를 더 사용해야해서 추가적으로 별도 브라켓을 구매했습니다. 근데 생각보다 물건이 얼마 없더군요. 끈질긴 검색 끝에 결국 11번가에서 판매하는 OT847 이라고 하는 USB 3.0 전용 20핀 확장가이드를 찾았습니다.대부분의 메인보드에는 USB3.0 확장핀이 있습니다. 총 20개로 이루어진 이 핀에 맞는 USB 확장가이드를 장착하게되면 총 두개의 USB 3.0 단자를 만들 수 있습니다. 조금 고급진 케이스의 경우는 알아서 두개의 USB..

더 읽기

인강사이트제작 믿고 맡길 수 있는 곳

개인공간/광고글 친절한효자손 2018.12.14 16:39

지금은 개인이 온라인으로 활동영역을 넓혀가는 세상입니다. 누구라도 인기 BJ가 되어 수익을 올릴 수 있으며 이렇게 블로그를 운영해서 개인 커리어를 만들수도 있습니다. 자신의 주특기 분야만 있다면 얼마든지 개인기를 발산하여 그에 합당한 수익으로 바꿀 수 있는 샘 입니다. 콘텐츠는 청소년에게 악영향을 미치는 것, 법을 어기는 것만 아니라면 그 어떤것을 해도 상관 없을 것 입니다. 먹방이든, 게임방송이든, 노래든, 웃기..

더 읽기

포토샵 GTQ 1급 자격증 시험 합격 방법 노하우

Programs/Photoshop 친절한효자손 2018.12.14 12:17

오늘 국제공인시험 중 하나인 GTQ (지티큐) 1급 합격자를 발표하는 날 입니다. 학원에 도착 후 오전 10시 이후에 발표가 나온다는것을 확인하고, 10시 이후에 바로 KPC 사이트에 들어가서 확인을 했습니다. 결과는요?!당연히(?) 합격입니다. 원래 자신있던 시험이기도 해서 당연히 붙겠지라는 안일한 생각을 갖고 있었지면 혹시나가 역시나였나 봅니다. 떡하니 합격했습니다. 그래서 이 글을 지금 기분좋게 작성하고 있습니다. 이 기쁜마음을 만천하에 알리고..

더 읽기

GTQ 연습용 수험자 프로그램 설치 및 사용 방법

Programs/Photoshop 친절한효자손 2018.12.14 11:21

2018년도 11월 24일에 진행한 제 11회 GTQ 1급 시험에 합격했습니다. 직업전문학교 다니면서 뭔가 하나는 기록으로 남기고 싶어서 한번 시험을 봤는데 다행히 잘 붙었습니다. 선생님이 잘 가르쳐주신 덕 입니다.합격한 노하우라면 노하우겠지만, 이 부분은 다음 포스팅 때 다시한번 자세히 다루도록 하겠고 여기에서는 GTQ 연습용 프로그램에 대한 사용 방법에 대해 먼저 말씀드리도록 하겠습니다. 합격의 성공여부는 이 프로그램을 잘 다룰 수 있는데에도 조..

더 읽기

샤오미 지오메트릭 스플라이싱 패션 백팩 후기

기어베스트/사용후기 친절한효자손 2018.12.14 00:07

간만에 또 좋은 리뷰 상품을 얻었습니다. 샤오미는 진짜 사람 빼고는 다 만들 생각인 것 같아요. 이번에는 백팩입니다. 마침 가방이 하나 필요했는데 너무 잘된거죠. 이 가방은 무척이나 간지납니다. 아무나 가지고 다니지 않기 때문에 유니크하죠. 여성 남성 할 것 없이 다 잘 어울릴 것입니다. 정장에도 잘 어울리고 당연히 캐쥬얼 복장에도 굿입니다. 메고 다녀도 좋고, 들고 다녀도 이쁩니다. 말로 설명해서 뭐하겠습니까? 직접 보시겠습니다.가방은 이렇게 생겼..

더 읽기

알파스캔 AOC CQ32G1 32인치 144Hz 커브드 게이밍 모니터 사용 후기

IT는내친구/Hardware[지름신] 친절한효자손 2018.12.13 00:08

드디어 게이밍 모니터를 구매했습니다. 듀얼모니터 중 하나가 이제 수명이 다 했는지 오락가락해서 어쩔 수 없이 바꾸게 되었습니다. 이제 나도 144프레임으로 게임을 즐길 수 있는 것인가! 라는 기대를 안고 수소문하여 엄선한 제품! 알파스캔 AOC CQ32G1 게이밍 모니터로 선택하게 되었습니다.일단 모니터에는 주사율이라는게 있습니다. 보통 60Hz 짜리가 대부분 입니다. 이 뜻은 1초에 60장을 뿌린다는 뜻 입니다. 결국 게이밍 모니터의 표준인 144..

더 읽기

친효애드온: 티스토리 본문에 오류없는 표 넣는 방법 (엑셀표 마크1)

WEB&SNS/친효애드온 친절한효자손 2018.12.12 00:03

새롭게 선보이는 카테고리 입니다. 여기에는 티스토리 스타일을 꾸며주고 사용 편의성을 높이는 모듈들을 만들어 올리는 콘텐츠 입니다. 어떤 스킨에서든지 다 통합니다. 단! 티스토리 전용 어플리케이션에서는 비정상으로 보여집니다. 하지만 상관 없습니다. 티스토리 앱을 이용하시는 분들은 거의 적을 뿐더러 원래 기존에 사용하던 표도 정상적으로 보여지진 않았으니까요.적용 방법은 간단합니다. CSS 스타일에 코드를 추가해주시고, 사용하실 때, HTML 태그 요소들..

더 읽기

자바스크립트(JavaScript) 기초: 산술(이항) 연산자를 알아보자

WEB&SNS/JavaScript 친절한효자손 2018.12.11 00:03

오늘은 산술연산자에 대해서 배웠습니다. 이항 연산자라고도 하는데, 쉽게 말씀드리면 수학의 덧샘, 뺄샘, 곱샘, 나눗샘 이라고 생각하시면 됩니다. 다만 수학적 기호가 자바스크립트에서는 일부 다르게 사용됩니다. 한번 알아보겠습니다. 보시는 것 처럼 각 산술 연산자에 의해서 정의된 변수의 값이 계산되어 출력됩니다. 위의 코딩 중 </script> 다음에 나오는 숫자들이 현재의 결과값 입니다. 각 산술 연산자에 대한 뜻은 아래와 같습니다. ..

더 읽기

브라우저 유효성 검사 오류를 막는 CDATA 선언 방법

WEB&SNS/JavaScript 친절한효자손 2018.12.10 00:02

자바스크립트에서 사용하는 산술 연산자라던지 기타 선언에 대한 결과화면이 정상적으로 나와도 오류를 띄우는 경우가 간혹 있습니다. 보통 유효성 검사 오류를 출력하는데, 원인은 스크립트 안에 포함된 HTML 태그 때문인 경우가 가장 흔합니다. 그래서 이와 같은 경우에는 CDATA (C데이터) 선언을 해줘야 합니다. 참고로 내부 스타일에서만 해당되는 방법이며, 만약 js 파일을 별도로 만들어서 외부 스타일로 불러들이는 경우는 유효성 검사는 정상적으로 출력이..

더 읽기

데스티니 가디언즈 매주 토요일 바뀌는 암상인 위치 실시간 확인 방법

IT는내친구/GAME 친절한효자손 2018.12.09 20:04

요즘 재밌게 플레이하고 있는 데스티니 가디언즈 게임 입니다. 데스티니 가디언즈는 번지(Bungi) 라고 하는 회사에서 만들고 액티비전에서 발매, 이 배급을 블리자드가 하고 있죠. 아무튼 데스티니 가디언즈가 재미있는 개인적인 이유는, 콘텐츠가 간단하지만 어려우면서도 쉽다(?) 라고 말씀 드릴 수 있습니다. 앞뒤가 안 맞는 말이긴 한데, 어렵지만, 이 퀘스트를 깨는 방법은 생각보다 단순하기 때문에 이 단순함이 곧 쉽다라는 뜻이 될 수 있겠습니다.데스티니..

더 읽기

티스토리에 코딩 코드를 올리는 Synax Highlighter 적용법 및 사용법

WEB&SNS/블로그연구 친절한효자손 2018.12.09 00:03

티스토리 강좌를 운영하면서 이따금씩 html 혹은 CSS와 관련된 코딩을 올리곤 합니다. 그동안 사용해왔던 방법은 그냥 스크린샷해서 이미지로 올리는 방식을 사용했습니다. 가장 빠르고 확실한 방법이긴 하지만 가독성이 떨어집니다. 특히나 저해상도의 모바일에서는 이 방법은 치명적입니다. 이미지가 극도로 작아져서 코딩을 보이지 않거나, 티스토리 오류 발생 시 이미지가 깨지면 낭패를 겪게 됩니다.그래서 이 방법을 알게 되었습니다. 코딩 그대로를 가독성을 높인..

더 읽기

jQuery 제이쿼리 이미지 슬라이드 : bxslider 사용 방법

WEB&SNS/jQuery 친절한효자손 2018.12.08 00:06

제이쿼리(jQuery)를 활용한 이미지 슬라이드 방법입니다. 엄청 쉽습니다. 자바스크립트를 잘 몰라도 됩니다. 저도 편리하게 이용하고 있습니다. 제이쿼리는 일종의 자바스크립트 꾸러미라고 생각하시면 좋을 것 같습니다. 그리고 수많은 능력자분들이 만든 제이쿼리 꾸러미 중 하나가 바로 오늘 소개해드릴 bxSlider 입니다.▲https://bxslider.com먼저 bxslider의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과..

더 읽기

동영상강의사이트제작 월 임대비 걱정 없는 플랫폼을 선택하라!

개인공간/광고글 친절한효자손 2018.12.07 18:51

다른 나라도 그렇겠지만, 교육 열풍은 정말 끝이 없는 것 같습니다. 저 역시도 지금 30대 후반을 바라보고 있음에도 불구하고 코딩을 배우기 위해 평일에는 국비수업을, 또 시간이 있으면 모르는 분야를 검색을 통해서 알아보고 있습니다.티스토리 관련 스킨을 만들기 위해서 노력하는데, 참 한편으로는 답답한것이 이것과 관련된 콘텐츠가 정말 턱없이 부족하다는 사실입니다. 누군가가 스킨 제작 과정에 대해서 자세히 좀 포스팅좀 해줬으면 하는데 아무도 없군요. 그래..

더 읽기

CSS3 background-clip, background-origin 사용법과 속성과 차이점 알아보기

WEB&SNS/CSS 친절한효자손 2018.12.07 00:07

지난시간에 이어서 계속 백그라운드 속성에 대한 방법을 설명드리고 있습니다. 이번에는 백그라운드에 색상을 입력한 상황과, 이미지로 설정한 상황에서의 적용 위치에 대한 설명입니다. 큰 차이는 없지만 미묘한 차이점은 있습니다. 한번 잘 봐주시면 감사하겠습니다.background-clip 을 알아보자만약 백그라운드를 이미지를 사용하지 않고, 16진수의 색상코드를 사용해서 지정하셨다면 background-clip을 사용해서 적용 범위를 설정할 수 있..

더 읽기

[친효스킨] 티스토리 스킨 제작자 여러분들께 도움을 요청합니다!

WEB&SNS/친효스킨 친절한효자손 2018.12.06 15:19

스킨 소식을 전합니다. 현재 진도를 못나가고 있습니다. 카테고리랑 본문에 대한 스타일은 어느정도 꾸며졌는데, 문제는 메인 홈 화면과 다른 여러가지 것들을 현재 못 만들고 있습니다. 정말 코딩의 세계는 난이도가 너무 높은 것 같습니다. 현재 직업전문학교를 다니면서 HTML과 CSS, 그리고 자바스크립트와 jQuery의 기초를 막 벗어나려는 단계입니다. 하지만 이 정도의 이해도로는 티스토리 스킨 제작의 진입 장벽이 상당히 높은 것 같아서 좌절을 느끼고 ..

더 읽기

CSS3 Multi Background 멀티백그라운드 두가지 사용법

WEB&SNS/CSS 친절한효자손 2018.12.06 00:06

CSS 속성에서 백그라운드를 지정할 수 있다는것은 알고 계실 것입니다. 만약 이미지를 사용한 백그라운드를 만들 때, 하나가 아닌 여러개의 이미지를 써서 멀티 형식으로 구현도 가능하다는것을 오늘 배웠습니다. 어떻게 사용되는지 한번 살펴보겠습니다.방법은 크게 두가지가 있습니다. 백그라운드별 다른 매서드를 사용하는 방법, 하나의 백그라운드 스타일에 몽땅 마크업 하는 방법 이렇게 두가지죠. 각각 하나씩 보시면 이해가 될 것입니다. 먼저 이미지 소스부터 이곳..

더 읽기

CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여

WEB&SNS/CSS 친절한효자손 2018.12.05 00:03

CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다..

더 읽기

포토샵에서 연속 촬영한 사진을 파노라마 이미지로 만드는 방법

Programs/Photoshop 친절한효자손 2018.12.04 00:02

어차피 스마트폰에서 연속적으로 주변 풍경을 연달아 찍을일은 이제 없을 것입니다. 왜냐하면 파노라마 촬영 방법이 있으니까요. 따라서 이 기능은 어쩌면 쓸모 없을지도 모르겠습니다. 그러나! 아는만큼 답이 보이듯, 포토샵에서 연속되는 하나하나의 이미지를 연이어 합치기보다는 이 기능 하나만으로 한방에 여러장을 옆으로 자연스럽게 붙여서 파노라마로 만들 수 있습니다. 또한 좀더 오버해서 말씀 드리자면, 오늘날 사용하고 있는 360도 뷰 같은 VR 기술에도 써먹..

더 읽기

CSS3 문장 들여쓰기 효과를 적용하는 text-indent 속성 사용법

WEB&SNS/CSS 친절한효자손 2018.12.03 00:02

오늘은 가독성을 올릴 수 있을 것 같은 첫 문장의 들여쓰기에 대해서 알아보고, 티스토리에서 어떻게 적용시키는지에 대해서도 알아보겠습니다. 먼저 들여쓰기란 무엇인지에 대해서 살펴보도록 하겠습니다.  지금 이 문장을 주목해 주시기 바랍니다. 첫 시작을 스페이스바를 두번 눌러서 두칸 떨어진 상태에서 문장이 시작되고 있습니다. 이런 형태가 "들여쓰기" 입니다. 이렇게 결과물로만 놓고 보면 일반적인 들여쓰기 상태지만, HTML 코딩 상태를 보면 상황..

더 읽기

CSS3 transform 사용법 (matrix 포함)

WEB&SNS/CSS 친절한효자손 2018.12.02 00:02

CSS3의 2D 및 3D 변형 효과를 표현할 수 있는 Transform 매소드에 대한 내용입니다. 포토샵에서도 transform 메뉴가 있는데, 이미지를 기울일수도 있고 회전시킬수도 있습니다. 특정 부위를 휠 수도 있고 3D효과처럼 기울어진 효과도 가능합니다. 먼저 transform의 스타일 요소를 살펴보도록 하겠습니다.scale - 크기를 변형함skew - 기울어짐을 변형함rotate - 회전을 줌translate - 위치를 이동함perspecti..

더 읽기

CSS3 마우스 올렸을 때 움직이는 애니메이션 배너 만들기

WEB&SNS/CSS 친절한효자손 2018.12.01 00:03

이번 시간에는 움직이는 배너를 만드는 방법에 대해 배웠습니다. CSS3의 Transition, Transform을 활용해서 움직이기 전 위치와 마우스를 hover 했을 때, 최종적 위치만 입력해두면 되는 간단한 방법입니다.먼저 포토샵에서 대략적으로 위치를 한번 지정하시거나 임시로 한번 그려보세요. 마우스 올리기 전, 마우스 올린 후로 나뉘어 작업하시면 더 좋습니다. 그리고 배너에 들어가는 모든 이미지는 png 형식의 투명 이미지로 작업해 주시고 빈 ..

더 읽기

티스토리에 코드펜 CodePen 소스코드 올리는 방법

WEB&SNS/블로그연구 친절한효자손 2018.11.30 00:03

열심히 짜놓은 코딩을 티스토리에 직접 업로드 하려니까 일반적인 스타일의 CSS의 경우는 그냥 스크린샷을 해서 이미지 통째로 올려도 상관은 없지만 움직이는 애니메이션, 자바스크립트의 경우는 결과 화면을 보여주기가 쉽지가 않습니다. 이럴때 필요한것이 코드펜 (Codepen) 입니다.코드펜은 HTML, CSS, JS 등을 직접 입력해서 결과화면을 얻고, 이것을 다른 사람들과 공유함으로서 코딩 노하우를 공유하는 외국 사이트 입니다. 더불어 자신이 짜놓은 소..

더 읽기

CSS text-shadow box-shadow 요소 그림자 효과 사용법

WEB&SNS/CSS 친절한효자손 2018.11.29 00:06

CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다. 그림자 속성 이것은 텍스트 그림자 입니다. 이것은 텍스트 그림자 입니다. 이것은 텍스트 그림자 입니다. 이것은 텍스트 그림자 입니다. 이것은 박스 그림자 입니다. 바로가기 먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있..

더 읽기

jQuery 자바스크립트로 아코디언 스타일 드롭다운 메뉴 만들기

WEB&SNS/jQuery 친절한효자손 2018.11.28 00:05

오늘도 유익한 자바스크립트를 하나 배웠습니다. CSS로 메뉴 스타일을 꾸미는 방법들은 앞서 2단 및 3단 드롭다운 메뉴를 만드는 부분에서 충분히 설명을 드렸습니다. 이번에는 자연스럽게 아래로 쓸려 내려오는 아코디언 스타일의 2단 메뉴 입니다. Accordion Dropdown nav Menu MAIN 01 ..

더 읽기

transition CSS 속성 전환에 대한 태그 요소 (cubic-bezier 사용법)

WEB&SNS/CSS 친절한효자손 2018.11.27 00:03

지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다.transition : property duration timeingfunction;그리고 각 요소에 대한 설명은 아래와 같습니다.property : 애니메이션을 적용할 태그 요소를 지정duration : 애니메이션 재생 시간timeingfunc..

더 읽기

키보드 103/106키 그리고 101키 종류1,종류2,종류3 한영전환 안될 때 해결 방법

IT는내친구/Hardware[지름신] 친절한효자손 2018.11.26 00:03

키보드의 배열에 대한 내용입니다. 보통 PC를 포맷하고나서 윈도우를 설치하는 과정에서 키보드에 대한 선택 화면이 나옵니다. 여기에서는 연결된 키보드의 종류에 따라 자동으로 윈도우에서 알맞는 배열로 골라서 선택되게 됩니다. 과연 이 배열은 어떤 차이가 있는지 알아보겠습니다. 103/106키 키보드 이 키보드는 한영전환 키가 키보드에 독립적으로 따로 배치된 키보드를 말합니다. 소프트웨어적으로 나뉜게 아닌, 완전 물리적으로 떨어진 단 하나의 키를 의미..

더 읽기

윈도우10 한영전환(한글입력) 안될때 하드웨어 키보드 레이아웃 변경 방법

IT는내친구/Windows 친절한효자손 2018.11.25 15:44

게임을 하다가, 혹은 저처럼 블로그 글을 작성하려 하다가, 기타 여러 문서들을 작성하려 할 때 어느날 갑자기 한글 입력이 되지 않는 경우를 체험하신 분들이 생각보다 많습니다. 원인이 무엇인지 정확하게는 답변드리기가 어렵겠으나, 가장 흔한 경우는 최근 설치한 프로그램이 원인일수도 있습니다. 다음으로는 흔하디 흔한 악성코드나 바이러스로 인한 윈도우 레지스트리 손상입니다. 어찌되었듯 지금은 결과인 한영전환이 안 되는 문제를 해결하는게 급하니 바로 방법을 ..

더 읽기

CSS + Script 조합으로 버튼 클릭 시 전체 팝업창 나타났다 사라지게 하기

WEB&SNS/CSS 친절한효자손 2018.11.25 00:07

오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보도록 하겠습니다. 안녕하세요! 닫기 여기를 누르면 전체 팝업이 뜹니다. 본문의 내용을 보시면 크게 두 가지의 div가 존재..

더 읽기

Copyright © 친절한효자손 취미생활 All Rights Reserved

Designed by JB FACTORY