친절한효자손 취미생활

WEB&SNS (469)

HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법

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

HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다.video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요. 속성 설명  src  동영상 경로 지정  poster  동영상이 깨졌거나 재생 불가 시,..

더 읽기

HTML5에 추가된 새로운 태그 figure figcaption 요소 정의와 사용법

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

HTML5에서 새롭게 추가된 태그 중 figure 그리고 figcaption 요소가 있습니다. 한국어로 굳이 표기하자면 "피규어"가 되겠군요. 이 태그는 어떤 의미이며 어떻게 사용하는지 간략하게 알아보겠습니다.figure : 삽화, 다이어그램, 사진, 동영상, 음원 등 해당 콘텐츠에 대한 설명을 입력할 때 사용함figcaption : figure 요소 안에서의 콘텐츠에 대한 제목 출력 이렇게 쓰인다고 하는데 아무래도 예제가 없으면 무슨 뜻인지 잘 모..

더 읽기

친효스킨 완성! 현재 테스트 중! 보시고 많은 피드백 부탁드립니다

WEB&SNS/친효스킨 친절한효자손 2019.02.14 10:40

안녕하세요! 친절한효자손 입니다. 반갑습니다. 오늘은 기쁜 소식을 여러분들에게 전달하고자 다시한번 키보드를 두드리게 되었습니다.드디어! 친효스킨이 완성 되었습니다. 저의 첫 코딩! 순수 100% 제가 가지고 있는 모든 지식과 검색을 통한 정보를 통하여 완성된 친효스킨 초기 모델 입니다. 현재 핸드메이드 블로그에 임시로 설치해서 테스트 중 입니다. 확인해 보고 싶으시다면 아래의 블로그로 들어가셔서 직접 브라우저 창 크기도 줄여보시고, 스마트폰으로도 접..

더 읽기

브라우저 창의 크기에 따라 폰트 크기가 변하는 vw vh 단위 px 계산 방법

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

반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 vw, 그리고 vh가 있습니다. 각 단위의 뜻은 vw (Viewport Width) 이고, vh (Viewport Height) 입니다. 즉 vw는 가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기 입니다.해상도는 윈도우 해상도가 아닌 현재 브라우저 창의 크기를 기준으로 합니다. 예를 들자면 1vw의 크기를 px로 계산하려고 합니다. 현재 창 크기의 가로 폭이 1..

더 읽기

친효스킨 개발 업데이트 소식을 전합니다 (Ver 0.2)

WEB&SNS/친효스킨 친절한효자손 2019.02.11 18:39

안녕하세요! 친절한효자손이 다시 인사올립니다. 언제나 스타트를 끊는게 어색하기만 합니다. 이 인사법좀 바꾸고 싶은데... 이보다 더 괜찮은 인사 방법이 막상 떠오르지가 않습니다. 양해 부탁드립니다. (웃음)현재 친효스킨을 약 70~80% 정도 완성시켰습니다. 아마 학원 수료 전 까지는 완성이 될 것 같아요. 학원측에도 제출해야하는 포트폴리오가 필요한데 이 녀석으로 대체하기로 하였습니다. 거의 완성이 되어가니 재법 형태가 드러나기 시작합니다. 사실 형..

더 읽기

CSS3 border-radius 박스 둥근 모서리 속성 스타일 종류와 사용법

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

이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다.See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습..

더 읽기

크롬 즐겨찾기 북마크 내보내기 가져오기 하는 방법

WEB&SNS/인터넷관련 친절한효자손 2019.02.06 00:05

크롬에 여러가지 자주가는 사이트 및 자료 홈페이지들이 많이 북마크(즐겨찾기) 되어 있습니다. 동기화가 되어 있어서 어떤 PC나 노트북에서든지 로그인을 하면 북마크들이 그대로 복원이 됩니다. 하지만 기계라고 실수를 하지 않을까요? 합니다. 언제 하냐고요? 오류났을 때 그럽니다. 그러니 백업은 필수입니다.크롬에서도 이런 알 수 없는 오류들로 인해서 소중한 즐겨찾기 북마크가 삭제가 되는걸 방지하고자 백업 기능을 넣어놨습니다. 오늘은 바로 이 북마크 내보내..

더 읽기

CSS3: fiex 요소를 사용하여 div 가로정렬 및 분배하는 레이아웃 방법

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

div를 중앙정렬을 하기 위해서는 가로 크기 값을 가지고 있어야 합니다. 그리고 margin: 0 auto; 를 하게 되면 해당 div는 중앙정렬이 가능합니다. 그러나 여러개의 div를 가로로 베치하고 이것들을 균등 분배하여 배치하려면 float 요소를 사용하고, 반드시 float 해제를 해줘야 합니다. 그러면 태그들이 늘어날 수 밖에 없습니다.오늘은 flex 라는것을 배웠습니다. 완전 신세계더군요. 그 복잡했던 div 정렬 부분을 이걸 사용하니 한..

더 읽기

친효스킨 근황! 여러 난관에 부딪히고 있지만 근근히 해내고 있습니다

WEB&SNS/친효스킨 친절한효자손 2019.01.24 10:19

안녕하세요! 친절한효자손 인사드립니다. 스킨 소식입니다. 열심히 만들고는 있는데, 아직은 지식이 많이 부족한 관계로 거의 맨땅에 헤딩을 해가면서 배우고 있습니다. 스킨 제작에 대한 커리큘럼을 정확히 제시해주는 블로그는 찾아볼 수 없군요.이번 스킨을 제작하면서 또 하나 콘텐츠를 만들어야겠다는 생각을 하게 되었습니다. 스킨을 어떤식으로 만드는지에 대해서 제대로 커리큘럼을 구성할 계획입니다. HTML과 CSS에 대한 기초 지식만 있으시다면 누구라도 만들 ..

더 읽기

CSS 태그,직접,아이디,클래스,하위,자식,형제,인접 선택자를 알아보자

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

HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다.선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고..

더 읽기

친효애드온 : 티스토리 본문에 들어가는 이미지 테두리 자동 적용 (마크1)

WEB&SNS/친효애드온 친절한효자손 2019.01.20 00:04

본문에 이미지들 많이 넣으시죠? 혹시 넣으실때마다 테두리를 적용하시나요? 티스토리의 포토에디터에서는 다양한 테두리 스타일을 제공하고 있습니다. 하지만 저의 경우는 이 중에서 검정 테두리만 주로 사용을 하는 편 이며, 이따금씩 까먹고 그냥 삽입하고는 합니다. 일반적으로 촬영한 사진들은 괜찮은데 강좌를 위한 스크린샷 화면의 경우는 배경이 흰색인 이미지들이 있을때면 테두리를 만들어주지 않으면 본문과 햇갈려서 어디까지가 이미지고 어디가 본문의 백그라운드인..

더 읽기

CSS3 border-width,style,color (테두리, 스타일, 색상) 속성 사용법

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

예전에 한번 border의 속성에 대해서 설명을 드린적이 있습니다. 뭔가 설명이 미흡했던 관계로 다시한번 정리해서 올리려고 합니다. 이번에는 이해하기가 좀 더 수월할 것 입니다. 먼저 아래의 결과화면을 보시기를 바랍니다. See the Pen CSS3 : border-width, border-style, border-color by rgy0409 (@rgy0409) on CodePen. div 박스마다 약간씩 다른 스타일의 테두리가 적용되어..

더 읽기

자바스크립트 제이쿼리 없이 CSS 만으로 클릭 이벤트 연출하기

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

CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트..

더 읽기

네이버 메인화면 관심주제 설정 방법 (보고싶은것만 나오게 하기)

WEB&SNS/인터넷관련 친절한효자손 2019.01.06 00:07

PC버전의 네이버 메인화면에는 관심주제라는것이 있습니다. 이 부분을 자신이 원하는 카테고리만 나오게 할 수 있습니다. 보통은 로그인 후 관심주제를 설정하면 어떠한 곳에서 로그인을 해도 동기화 되어 관심 카테고리가 자동으로 바뀔 줄 알았는데, 그게 아니더라구요. PC마다 새롭게 설정을 다시 해줘야 하는 불편함이 있습니다. 이 점을 참고하시어 자주 사용하시는 PC (집이나 회사 등) 에서만 설정해놓으시면 될 것 같습니다.방법은 아래와 같습니다.네이버 관..

더 읽기

CSS3 border 테두리 속성에 그라디언트 그라데이션 (gradient) 적용시키기

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

지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 div의 내부에 그라데이션 효과를 만들었다면, 오늘은 div의 border 속성인 테두리에 그라데이션을 적용하는 방법입니다. 방법은 지난시간에 했던것과 큰 차이는 없습니다. 그럼 바로 알아보도록 하겠습니다.See the Pen CSS3 : border gradient by rgy0409 (@rgy0409) on CodePen. 위의 예제를 살펴보세요. HTML과 CSS 부분의 코딩 상태..

더 읽기

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

Designed by JB FACTORY