친절한효자손 취미생활

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

백그라운드 CSS 이미지 넣는 방법 및 반복속성에 대한 설정

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

이번에는 HTML에서 백그라운드 (배경) 에 이미지를 넣는 방법입니다. 색을 부여하는 방법은 background : #원하는 16진수 색상코드 ; 를 CSS에서 부여하면 간단히 해결 됩니다. 이미지는 과연 어떻게 넣을까요? 알아보겠습니다.먼저 백그라운드 색상을 지정하는 방법입니다. 보시는 것 처럼 원하는 선택자를 입력하시고, 속성 요소에 화살표가 가리키는대로 마크업 하시면 됩니다. 16진수로 색상을 입력하거나 이미 지정된 색 명칭으로 넣으시면 됩니다..

더 읽기

border 테두리 속성에 대한 CSS 태그 및 요소 사용법

WEB&SNS/CSS 친절한효자손 2018.10.22 00:05

오늘은 CSS 스타일 중 border 태두리 속성에 대해서 배웠습니다. 사용법은 간단합니다. 테두리가 어떤 형태로 나타나는지, 그리고 해당 요소는 무엇인지만 기억해 주시고, 적절한 문장을 강조하고자 할때, 한 문단을 감싸고자 할 때 적시적소에 쓰시면 되겠습니다.우선 마크업 상태를 확인해 주시기 바랍니다. 그리고 본문 body 안쪽에는 단락 요소인 p태그를 사용했고 짧은 문장을 몇 개 적었습니다. 그리고 p태그는 class 값을 부여했습니다. 각 클래..

더 읽기

문장의 줄 간격을 조절하는 line-height 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.21 00:04

HTML 문서 내의 텍스트 문장의 줄 간격을 조절하는 CSS 요소가 있습니다. line-height 를 사용하시면 됩니다. 단위는 px, %, em을 사용하시면 됩니다. 참고로 1em은 100%를 의미합니다. 0.5em은 50%를 뜻하게 되는 샘 입니다. 역시 말로는 이해하기가 어려우므로 바로 사용 방법을 배워보겠습니다.본문 전체에 적용하도록 내부스타일로 저렇게 마크업을 해두었습니다. 근데 살펴보시면 수치에 대한 단위를 표시하지 않았습니다. 이 경우..

더 읽기

포토샵 벌집(정육각형) 패턴 만들고 적용시키는 방법

Programs/Photoshop 친절한효자손 2018.10.20 00:07

오늘 정말 유용한 기술을 배웠습니다. 포토샵에서 패턴을 만드는 방법입니다. 패턴 등록과 적용 방법은 무척이나 쉽습니다. 여러가지 패턴 중 가장 어려웠던게 바로 벌집 (정육각형) 패턴을 만드는 방법이었습니다.이 방법도 안 되고, 저 방법도 통하지 않아서 결국 구글링을 통해 살짝 힌트를 엿봤는데, 생각보다 간단했습니다. 패턴이 어디부터 어디까지인건지를 파악해야 하는데 그게 한 눈에 잘 안 들어오네요. 아직 익숙하지 않아서 그런것이라고 생각하겠습니다. 거..

더 읽기

CSS 스타일 요소 : 글자 자간(간격)을 조절하는 letter-spacing 사용 방법

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

글씨 사이를 자간이라고 합니다. HTML 텍스트도 CSS 스타일을 사용해서 자간 조절이 가능합니다. 촘촘하게 만들수도 있으며, 넓게 넓게 떨어뜨릴수도 있습니다. 제목에 나온 letter-spacing 요소를 사용하시면 가능합니다. 바로 본론으로 들어가겠습니다.내부스타일 방식을 사용했습니다. 본문의 p태그에 클래스값을 부여했습니다. 만약 수치값을 0으로 입력하면 어떤 변화가 생길까요?아무런 변화가 없습니다. 해당 글꼴에 대한 기본 자간 스타일로 출력됩..

더 읽기

아이허브 신규고객 10% 추가 할인 소식 (2018년 10월 프로모션 할인 코드)

아이허브/할인소식 친절한효자손 2018.10.18 16:51

아이허브 소식을 접하자마자 바로 글을 씁니다. 혹시 제 블로그에 자주 오시는 분들 중에서 아이허브를 아직 한번도 이용하시지 않으셨거나, 검색을 통해서 이곳으로 들어오셨다면 아주 좋은 기회가 될 수 있습니다. 이번달인 10월까지 아이허브에서 신규고객을 대상으로 10% 추가 할인 행사를 진행하고 있습니다. 기존 할인 코드인 5%까지 더해서 15% 저렴하게 구매할 수 있게 된 샘이죠.저는 아이허브 마니아 입니다. 너무 과한 것 아닌가... 싶을 정도로 지..

더 읽기

텍스트를 꾸미는 text-decoration 태그 요소 사용 방법

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

오늘은 텍스트 데코레이션 요소들에 대해서 다시한번 짚고 넘어가는 시간 입니다. 전 시간에 아마 한번 언급했던 부분이 있을 수 있겠는데요 복습한다는 마음으로 다시한번 봐주시면 감사하겠습니다.a링크에 대해서 말씀 드릴 때 나왔을수도 있는 부분입니다. 복습겸 다시한번 살펴보도록 하겠고, 여기에 오늘의 주제인 text-decoration 태그 스타일에 대해서 다양하게 다뤄보도록 하겠습니다. 태그라는게 알수록 신기하고 재밌네요. 이런 맛에 코딩을 하는 것 같..

더 읽기

CSS 태그 간격 늘리는 padding 그리고 margin 차이점 그리고 사용 방법

WEB&SNS/CSS 친절한효자손 2018.10.17 00:04

오늘 수업은 매우 알찼습니다. padding (패딩) 그리고 margin (마진) 에 대해서 다시한번 그 개념을 짚는 시간이었습니다. 또한 다양한 쓰임새를 파악할 수 있었습니다. 예전에 이게 너무 햇갈려서 사용하는데, 그리고 수정하는데 어려움이 많았지만 지금은 입맛대로 꾸밀 수 있을 것 같습니다.티스토리를 입문하시고, 조금 용기내어 스킨을 수정하려고 하면 도무지 알 수 없는 코딩들 때문에 어떻게 손을 대야 좋을지 몰랐다면, 지금은 이제 어떤 부분을 ..

더 읽기

카렉스 빌보드 블루투스 스피커 RH-01 사용 후기 (with 서브우퍼)

IT는내친구/Hardware[지름신] 친절한효자손 2018.10.16 17:13

요즘 블루투스 스피커에 꽂혀 있습니다. 최근 리뷰했던 샤오미 블루투스 스피커에 꽤 만족스러웠는데 더욱 괜찮은 녀석을 알게 되었습니다. 바로 이 제품 입니다. 카렉스사에서 출시한 빌보드 블루투스 스피커 입니다. 모델명은 RH-01 이라고 되어 있습니다.빌보드는 아마 음악을 좋아하시면 한번쯤은 들어보셨을 겁니다. 네. 맞습니다. 빌보드차트의 그것입니다. 빌보드 음악을 즐겨 들으시는 분들을 겨냥해서 출시한 제품인만큼 음질의 퀄리티에 많이 신경을 쓴 제품입..

더 읽기

HMTL 텍스트 왼쪽 가운데 오른쪽 위 중앙 아래 정렬 방법

WEB&SNS/HTML 친절한효자손 2018.10.16 00:04

오늘은 텍스트를 자유롭게 위치시키는 방법을 배워보았습니다. 생각보다 어렵지는 않습니다. 크게 세가지 정도만 기억하고 있으면 될 것 같습니다. 먼저 좌/우에 대한 요소는 text-align 으로 진행하시면 되며, 상/하 위치의 요소는 vertical-align 으로 진행하시면 됩니다. 태그 구성을 먼저 살펴보시면 다음과 같이 구성할 수 있겠습니다.이번에는 스타일을 인라인 방식으로 마크업을 했습니다. 헤드안의 스타일 안쪽에서 주는 내부 방식은 생략했습니..

더 읽기

CSS font 폰트 태그 요소 다양한 스타일 적용시키는 방법

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

오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다.지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다.font-family → 글꼴을 지..

더 읽기

일러스트레이터 클리핑 마스크 사용 방법

Programs/Illustrator 친절한효자손 2018.10.14 00:04

까먹기전에 어서 이 방법을 적어놔야 할 것 같습니다. 일러스트레이터를 다룬다면 꼭 알아두면 요긴하게 쓰일 기술! 바로 클리핑 마스크 입니다. 포토샵에서도 클리핑 마스크 기능이 있듯 일러스트레이터에서도 있습니다. 다만 포토샵과 반대 입니다. 포토샵에서는 레이어 두개 중 제일 위에 있는 레이어가 보여지게 되지만, 일러스트레이터에서는 아래의 레이어가 최종적으로 남게 됩니다. 말로는 설명하기가 어려우니 직접 살펴보시면서 이해 해보는 시간을 갖겠습니다.먼저 ..

더 읽기

윈도우10 고급 배율 설정으로 데스크톱 앱 글씨를 선명하게 만들기

IT는내친구/Windows 친절한효자손 2018.10.13 00:04

왜 안나오나 했는데 드디어 나왔습니다. 사실 진작에 있었는데 모르고 있었을지도 모르는 기능 입니다. 윈도우에는 해상도 뿐만 아니라 배율이라는게 있습니다. 이 배율은 윈도우7때부터 본격적으로 가속화 되었습니다. 고해상도를 지원하는 디스플레이에서 최고의 해상도로 맞출 경우, 아이콘이 엄청나게 작아집니다. 모든게 작아지죠. 그래서 나온것이 배율 입니다.만약 4K를 지원하는 모니터나 TV에서 최고 해상도로 맞추면 아이콘은 엄청 작아사 불편할지도 모릅니다. ..

더 읽기

또 네이버 검색엔진 업데이트인가? 방문자 급감!

WEB&SNS/블로그연구 친절한효자손 2018.10.12 15:50

네이버로 유입되는 방문자수가 급감했습니다. 유입 경로를 살펴보니 네이버가 현저히 줄어들었습니다. 뭔가 또 업데이트를 한 모양입니다. 이번 일로 더욱 콘텐츠 개발이 절실해졌습니다.아시다시피 제 블로그에서 메인 콘텐츠는 티스토리에 대한 노하우를 공유하는 부분입니다. 애드센스 승인 방법이라던지 어디에 넣으면 좋은지에 대한 부분들이죠. 하지만 이건 저만의 노하우는 아닐 것입니다. 누구나 다 마음만 먹으면 할 수 있는 부분들 입니다. 오히려 더 잘하시는 분들..

더 읽기

HTML 가상 클래스 선택자 a 링크 다양한 스타일 변경 방법

WEB&SNS/HTML 친절한효자손 2018.10.12 00:05

오늘은 가상 클래스 선택자에 대해 배웠습니다. 보통 링크 태그인 a 요소에서 많이 볼 수 있습니다. 우리가 흔히 알고 있는 텍스트 기본 링크 색상은 파란색이며, 밑줄이 그어져 있습니다. 그리고 한번 방문한 링크는 보라색으로 바뀌어 있습니다. 이 부분을 설정할 수 있는데, 가상 클래스 선택자를 통해서 수정이 가능합니다.태그를 먼저 살펴보겠습니다. 위의 스크린샷처럼 작성하시면 됩니다. 각 부분의 설명은 다음과 같습니다.a:link → 링크가 걸린 텍스트..

더 읽기

HTML 내부스타일 CSS 선택자의 그룹화 방법

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

오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다.내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부..

더 읽기

브라켓(Brackets) 웹에디터 설치해두면 유용한 추천 플러그인 모음

Programs/Brackets 친절한효자손 2018.10.10 00:04

열심히 브라켓 (Brackets) 으로 웹코딩을 배우고 있습니다. 아직까지는 쉬운 부분만 나와서 그런지 이해를 못하고 있는건 없습니다. 그리고 직접 태그 요소들을 하나하나 배워가면서 작성하고, 그 결과값을 확인하는 재미가 무척이나 쏠쏠합니다. 과연 이 재미가 언제까지 지속될지는 저도 모르겠지만, 확실한건 이해할때까지 무조건 배운다는 마음 입니다.브라켓을 이용하면 여러가지 추천 플러그인이 많은데, 그 중에서 제가 사용하는 플러그인을 좀 나열해 보려고 ..

더 읽기

네이버 블로그 카페 검색이 모바일 VIEW(뷰) 카테고리로 통합되다

WEB&SNS/인터넷관련 친절한효자손 2018.10.09 02:06

언젠가는 이런일이 벌어질 줄 알았는데 생각보다 빨리 적용되었습니다. 네이버 검색 결과는 늘 블로그와 카페가 따로 있었는데 업데이트 되면서 이 부분이 이제 하나로 합쳐졌습니다. PC 버전에서는 해당되지 않고 모바일 검색에서만 적용되었습니다. 만약 VIEW 검색이 어느정도 안정권에 접어들고 이제 활성화가 된다면 PC버전으로도 적용되지 않을까 싶습니다.네이버측에서 말하는 VIEW는 한 마디로 더욱 정확하면서 실제 경험담을 바탕으로 된 문서임과 동시에, 사..

더 읽기

CSS 기초 : 스타일을 지정하는 선택자 사용 방법

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

이 부분은 정말 중요합니다. 여러분들께서 홈페이지를 만드시려 한다거나, 저처럼 티스토리 스킨을 제작해보려 하신다면 꼭 알고 있어야 하는 부분입니다. 꼭 스킨을 만들지 않더라도, 현재 사용하는 스킨이 편집 수정이 가능한 것이라면 원하시는대로 입맛대로 스타일을 바꾸거나 추가해서 사용할수도 있을 것입니다. 그러기 위해서는 꼭 오늘 이 글에서 다루는 부분을 이해하고 넘어가야 합니다.타입(태그) 선택자 / 아이디 선택자여기에서는 내부스타일 방식으로 진행합니다..

더 읽기

HTML div span 태그 요소 활용하여 메인화면 레이아웃 나누기

WEB&SNS/HTML 친절한효자손 2018.10.08 00:07

오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다.메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이..

더 읽기

CSS 인라인 / 내부 / 외부 스타일 개념 및 적용 방법

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

예전에 한번 CSS 스타일에 대해서 언급한적이 있는데, 저도 언제 그랬는지 까먹었으니 다시한번 개념을 정리하고자 합니다. HTML에서 스타일을 적용하는 방법은 통상적으로 3개가 있습니다. 하나는 태그에 직접 스타일을 주는 인라인 방식, 두번째는, head 요소 안에 style을 지정하는 내부스타일 방식, 마지막은 아예 CSS 만 따로 모아둔 파일을 만들어서 외부에서 불러와서 적용하는 외부스타일 방식 입니다.지금 보시는 마크업 중 빨간색 표시가 된 부..

더 읽기

HTML 기본 폼 요소 태그들 사용 방법 (input type 에 따른 변화)

WEB&SNS/HTML 친절한효자손 2018.10.06 00:03

오늘은 홈페이지를 만들 때, 가장 기본이 되는 여러가지 폼에 대해서 배웠습니다. 어떤 종류의 폼이 있는지 알아보고, 어떻게 태그를 사용하는지, 어떻게 적용시키는지에 대해서 간단히 알아볼 것입니다.먼저 아이디를 입력해야 한다면, 빈 칸을 구성하는 네모 상자가 필요하겠습니다. 그리고 비밀번호 입력 항목도 있어야 합니다. 성별을 선택하는 메뉴도 필요할 것 같고, 주민번호를 요구하기도 하겠죠? 그리고 비밀번호 분실 시 질문을 선택하는 항목도 있는 경우를 종..

더 읽기

HTML table 테이블 음성인식을 위한 headers, id 개념 및 사용법

WEB&SNS/HTML 친절한효자손 2018.10.05 00:02

지난시간까지 테이블 사용법에 대해서 계속 배워가고 있습니다. 오늘 시간도 그 연장선 입니다. 접근성을 위한 테이블 사용 방법에 대해서 알아가고 있는데, 오늘은 id와 header 요소에 대해서 배웠습니다.사실 지금까지 접근성만을 고려해봤을때, 제일 이해가 쉬운 요소가 오늘 배운 id와 header 였습니다. 뭔가 체계적이라고 해야 할까요? 이해가 쉬웠습니다. 이 부분은 마치 요소에 class 혹은 id를 별도로 부여해서 스타일이나 스크립트를 주는 방..

더 읽기

포토샵 머리카락 누끼따기 방법 (Refine Edge 리파인 엣지 사용법)

Programs/Photoshop 친절한효자손 2018.10.04 00:04

포토샵에서 가장 따기가 어렵다고 하는 머리카락 혹은 동물의 털 부분을 아주 손 쉽게 딸 수 있는 방법입니다. 흔히 이 방법을 "누끼" 따기라고들 많이들 말씀하십니다. 누끼라는 키워드는 일본말로, "제외한다", "빼낸다" 라는 의미의 워딩 입니다. 따라서 누끼라는 말 보다는 우리나라 말을 많이 사용해서 바꿔야 할 것 같습니다. 거두절미하고 바로 본론으로 들어가겠습니다.먼저 원하는 이미지를 하나 포토샵으로 불러옵니다. 저는 그냥 사자 하나를 불러왔습니다..

더 읽기

티스토리 http 에서 https 보안연결(접속)로 업데이트하면서 변화된 점

WEB&SNS/블로그연구 친절한효자손 2018.10.03 22:16

티스토리가 http 일반 연결에서 이번에 https 보안연결로 업데이트가 된건 다들 아실 것입니다. 업데이트가 진행되면서 변화된점이 있습니다. 특히 구글 검색에 있어서 두드러진 특징이 있는데 구글에서도 직접 밝힌바가 있지만, "https (보안) 연결 시에 검색엔진에서 노출이 더욱 잘 된다" 라는 이야기가 있었습니다. 과연 이게 진실일까 싶었습니다. 그래서 https로 시작하는 새 티스토리 주소를 구글서치콘솔에 새로 등록시켰고 보름 정도 지난후에 결..

더 읽기

HDD 속도를 올려라! 인텔 옵테인 메모리 (Optane Memory) 32GB 사용 후기

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

지난번에 옵테인 메모리에 대한 나름 평가를 내리면서 "왠지 써보고 싶다" 라는 생각을 강하게 했다고 말씀드렸죠? 그리고 아무래도 직접 사용해보고 후기로 찾아뵙겠다고도 말씀 드렸을 겁니다. 오늘은 그 약속을 지키는 날 입니다. 그렇습니다. 구매했어요! 비록 벌크지만 말이죠.옵테인 메모리를 중고나라에서 구매하려고 가격대를 살펴보니까 허 참 기가막힐 가격입니다. 새 상품이 오늘 기준으로 32GB가 5만원이 좀 넘습니다. 근데 이걸 단지 미개봉이라고 5만원..

더 읽기

HTML colgroup thead tbody tfoot scope 개념 정리 및 사용 방법

WEB&SNS/HTML 친절한효자손 2018.10.03 00:02

이번 수업을 이해하는데 좀 시간이 걸렸습니다. 그리고 반드시 코딩을 함에 있어서 알아야 하는 건 아니지만, 그래도 알아두시면 좋은 것 같습니다. 뭐든지 많이 알면 좋은 것 같아요. 제목에서도 써놨듯 colgroup에 대한 내용, 그리고 thead, tbody, tfoot 에 대한 내용인데 우리가 다양한 태그를 구사하는 이유는 접속한 사용자를 위한 것 보다는 사실 웹 언어를 이해해야하는 검색엔진 때문이라고 말씀 드렸을 것입니다.사실 표 테이블을 작성함..

더 읽기

샤오미 PC용 블루투스 스피커 XMYX04YM 사용 후기

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

지금까지 스피커는 그냥 소리만 잘 들리면 되는거 아니겠어? 라고 생각해오던 수준이었습니다. 그러나 저는 이 스피커의 사운드를 경험하고나서 그만 엄청난 충격에 몸서리 치고 말았습니다. 이게 만약 4채널짜리였다면...? 과연 내 귀는 지금쯤 어떻게 되었을까 싶을 정도로 크나큰 사건이었습니다. 지금까지 나는 대체 무슨 스피커를 사용해왔던가 싶을 정도입니다. 이것은 그냥 한마디로 최고입니다.저는 스피커의 명가, 야마하 혹은 브릿지, 사운드블라스터 등등의 제..

더 읽기

HTML 정의형 목록 태그 dl dt dd 사용 방법

WEB&SNS/HTML 친절한효자손 2018.10.02 00:03

오늘 배운 내용은 정의형 목록 태그에 대해서 입니다. 사실 이 부분은 쓰임새가 크게 많지는 않지만, 그래도 알아두면 유용하게 사용할 수 있을 것 같습니다. 출력되는 텍스트는 비슷해도, 안에 쓰이는 태그가 다른데, 그 이유는 바로 검색엔진 때문이라고 예전 시간에 말씀드린바 있습니다. 그러므로 겉으로 보여지는게 아닌, 태그가 어떻게 쓰여지는지에 대해 알아두시면 무척이나 요긴할 것입니다.지금까지 배운 내용 중, 목록형 요소 (태그) 는 ol과 ul 이 있..

더 읽기

최강 가성비! 샤오미 오클린 에어 (Oclean Air) 전동칫솔 사용 후기

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

샤오미가 유통하고 오클린에서 만드는 전동칫솔 시리즈 중 하나인 오클린 에어를 사용해 보았습니다. 오클린 중 최고 성능인 오클린원과 성능에서 크게 차이가 나지 않는 반면, 가격은 상당히 슬림해졌습니다. 인간의 치아를 다룸에 있어서 이 정도의 성능도 다 쓰지 못한다고 판단을 한 오클린은, 좀 더 슬림한 모델이 절실했고, 그 결과는 이렇게 훌륭한 전동칫솔로 우리곁에 다가오게 된 것입니다.전 모델에 비해 더욱 가벼워졌고, 더욱 크기가 줄었습니다. 여기에 가..

더 읽기

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

Designed by JB FACTORY