친절한효자손 취미생활

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

WEB&SNS (439)

친효애드온: 티스토리 본문에 오류없는 표 넣는 방법 (엑셀표 마크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 파일을 별도로 만들어서 외부 스타일로 불러들이는 경우는 유효성 검사는 정상적으로 출력이..

더 읽기

티스토리에 코딩 코드를 올리는 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의 설치과정을 거쳐야 합니다. 하지만 설치라고해서 뭐 프로그램을 설치하는 과..

더 읽기

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 입니다..

더 읽기

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 ..

더 읽기

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

Designed by JB FACTORY