친절한효자손 취미생활

대부분 블로거 분들의 고질적인 문제 중 하나입니다. 열심히 글은 작성하시는데 카테고리가 다 거기서 거기입니다. 방송, 연예인, 영화, 스포츠, 음악, 책(도서), 맛집, 먹거리, 네이버 실시간 검색어를 의식한 글들 카테고리를 크게 벗어나지 않습니다. 특히 먹거리는 꼭 들어갑니다. 하긴 오죽하면 요즘 TV에 필수적으로 들어가는 부분 중 하나가 바로 먹방이죠? 방송이란게 참 우습죠. 유튜브가 많이 활성화되고 1인 방송 시대에 접어들며 먹방계의 대통령이라 할 수 있는 밴쯔님 덕분에 "먹방" 이라는 키워드도 본격 가속화 되었습니다. 이제 먹거리는 필수로 들어가는 콘텐츠가 되었어요. 너도 나도 먹거리를 작성하다보니 이제 식상해졌습니다. 반드시 "나만 할 수 있는 콘텐츠" 가 필요한 시대가 왔다. 그렇습니다. 티스..

이 글을 작성 안 한 것 같더군요. 그래서 최신 버전으로 다시 업데이트 합니다. 티스토리 사용자 분들이라면 애드센스는 거의 필수 코스로 설치를 하실 것 입니다. 이 때 기본 스크립트 코드로 넣으셔도 문제는 없겠지만 좀 더 실적을 올리기 위해서 커다란 직사각형 형태의 디스플레이 광고 두개를 넣는 분들도 계실 것 입니다. 어떻게 삽입하는지 알아보겠습니다. 이 코드는 친효스킨에 최적화된 애드센스 광고 코드 입니다. 특정 해상도에서 크기를 임의로 변경했습니다. 일반 다른 반응형 스킨에서 사용하셔도 특별히 문제가 되지는 않습니다. 최대한 특정 해상도에서 최적의 크기로 나타나게 하기 위해서 친효스킨에 맞춘 코드입니다. 참고하시기 바랍니다. 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 여기 첨부파일을 받으..

주기적으로 받는 질문 중 하나가 바로 이것입니다. "효자손님, 저는 모바일에서 접속하면 상단 애드센스가 나오지 않아요!" 하고 말입니다. 그러면 저는 또 바로 역질문을 하게 되지요. "혹시 티스토리 전용 어플리케이션으로 접속하신건 아니신지요?" 그렇습니다. 보통 스마트폰을 모바일이라고 하는데 여기에서 말하는 모바일이란 정확히는 모바일 해상도를 일컫는 말 입니다. 아시다시피 대부분의 티스토리 유저분들은 반응형 스킨을 사용합니다. 때문에 PC 컴퓨터에서 접속했을 때 블로그 스킨과 스마트폰에서 접속했을 때 스킨의 테마는 일치하게 되어 있습니다. 이때 모바일에서 접속하는 두가지 방법이 있습니다. 바로 티스토리 전용 앱으로 실행하는것, 나머지 하나는 브라우저 전용 어플리케이션으로 실행하는 것 입니다. 티스토리 전..

국내의 블로그 플랫폼 중 네이버가 가장 사용자가 많지만, 티스토리도 재법 많은 분들께서 이용해주고 계십니다. 둘 다 이용하시는 분들도 계실 겁니다. 티스토리를 사용하시는 이유 중 하나는 바로 "애드센스" 일 거에요. 저 역시 애드센스 광고를 걸고 싶어서 시작했으니까요. 하지만 결코 착각을 해서는 안 되겠습니다. 저도 검색을 많이 해봅니다. 특히나 티스토리 태그라던지 HTML 구조를 파악할 때 많이 들락날락 합니다. 아직까지도 티스토리 생태계가 많이 더럽습니다. 뭣 때문에 더러울까요? 광고쟁이들 때문에 그렇습니다. 이런 미꾸라지들 때문에 블로거가 똑같이 욕을 먹고 있는 실정입니다. 광고가 나쁘다는게 아닙니다. 광고 위주로 블로그를 운영해서 그게 눈살을 찌뿌리게 만든다는 겁니다. 식당에서 호객행위만 열심히 ..

온라인으로 세무서에 들르지 않고, 간편하게 집에서도 PC를 통해서 홈택스에 접속 후, 사업자등록에 대한 정정을 진행할 수 있습니다. 업종을 새롭게 추가하고 삭제도 할 수 있습니다. 단 새롭게 수정된 사업자 등록증 출력은 집에서는 안 되고 반드시 오프라인 세무서로 가셔야 합니다. 그러면 홈택스를 통한 사업자등록 업종 추가 방법은 어떻게 진행하는지 과정을 살펴보겠습니다. 먼저 홈택스 홈페이지로 접속합니다. 그리고 신청/제출 항목으로 들어갑니다. 다음으로 사업자등록 신청/정정 등 카테고리로 들어갑니다. 사업자등록정정(개인) 이라는 항목으로 들어갑니다. 이제부터 본격적인 수정 과정입니다. 먼저 수정하고자 하는 사업자등록번호를 선택해 주세요. 그리고 조회하기 버튼을 누릅니다. 제목에서도 말씀드렸듯 업종을 새롭게 ..

예전에 티스토리 글쓰기에서 구글 지도를 넣는 방법에 대해서 알아봤습니다. 하지만 구글 지도에 등록이 되지 않은 장소도 있을 수 있습니다. 이럴때는 우리나라에서 많이 이용하고 있는 네이버 지도를 통해서도 지도를 첨부할 수 있습니다. 어떻게 진행하는지 그 과정을 알아보도록 합니다. 네이버 지도 첨부하기먼저 첨부하고자 하는 장소를 찾습니다. 저는 "서울대학교" 를 예시로 진행 하겠습니다. 네이버 지도 링크는 여기를 누르시면 바로 이동하실 수 있습니다. 네이버 지도에서 서울대학교를 검색했습니다. 저는 관악캠퍼스를 타깃으로 정했습니다. 브라우저의 맨 오른쪽에 보시면 이렇게 링크 아이콘이 있을겁니다. 클릭합니다. 그러면 작은 창이 하나 더 뜹니다. 여기에서 HTML 태그 복사 부분에 있는 HTML 태그 편집기 및 ..

CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..

실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..

과외를 할 때, 또는 보통 다른 분들이 댓글이나 메일, 방명록에 질문을 남길 때 공통으로 들어가는 부분은 바로 "글쓰기" 부분입니다. 또한 자신의 블로그에서 뭐가 부족한건지 문의 주시는 분들도 적잖은데 들어가서 확인해보면 바로 파악되는 부분이 "글쓰기" 부분입니다. 여기에서 말하는 글쓰기는 단순히 필력 문제만은 아닙니다. 솔직히 저는 필력이 그렇게 중요할까? 라고 생각하고 있습니다. 왜냐하면 사람마다 읽고 해석하는 방식이 다르다고 생각합니다. 어떤 분들은 초단순한 글귀와 문구가 맞는 분들도 계시고 어떤 분들은 뭔가 고급진 문장들을 좋아하는 분들도 계실겁니다. 또 어떤 분들은 비유나 은유를 좋아하는 분들이 계시듯 다양한 패턴의 글들이 있으니 여기에서 뭐 하나가 정답이라고 쉽게 호언장담 할 수는 없습니다. ..

CSS3 에서 처음이나 마지막 리스트에는 밑줄을 빼고 싶다면? 아니면 첫번째 리스트를 제외하고 나머지에 적용하고 싶다면, 보통은 두번에 걸쳐서 나눠서 마크업을 하는 경우가 많습니다. 이번에 괜찮은 방법을 알게 되었기 때문에 반드시 까먹기전에 복습겸 이곳에 포스팅을 해두도록 하겠습니다. 이번에 만든 친효스킨에서도 이 방법을 써먹었습니다. 선택자:not(선택자) 사용 방법 영어 not 은 "~이 아니다" 라는 뜻을 가지고 있습니다. 태그에서도 그대로 이 뜻이 적용됩니다. 즉 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다는 의미로 해석하시면 되는데 말이 좀 어려우므로 간단한 예제를 통해서 개념을 알아보겠습니다. See the Pen CSS3 :not(:first-child), :not(:last..

코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..

그렇습니다. 드디어 바라던대로 변화하고 있습니다. 늘 변화무쌍인 네이버 검색보다는 저는 비교적 안정적인데다 덜 광고스러운(?) 구글 검색을 더 많이 하는데, 슬슬 블로그 유입쪽도 변화하기 시작했습니다. 블로그에 자주 오시는 분들은 가끔씩 제가 티스토리 운영에 대한 이런저런 얼토당토 않는 이야기를 늘어놓은 글들을 보셨을 겁니다. 그 중에서 구글 유입이 늘어나야 한다고 늘 외치던 저였습니다. 그런데 그것이 그만 실제로 일어나고 있습니다. 비록 과거의 유입경로에 대한 자료이미지가 없어서 객관적인 비교를 직접적으로 못해드리고 있지만 확실하게 말씀드릴 수 있는것은 구글 유입이 점점 늘어나고 있다는 것 입니다. 오늘 날짜 기준으로 오전 9시 35분에 스크린샷을 진행한 이미지 입니다. 네이버 검색유입이 작년까지 압도..

친효스킨을 열심히 제작하면서 티스토리의 HTML 구성에 대해서 많은 것들을 알게 되었습니다. 그 중에서 인덱스 페이지에 대해 늘 궁금했었는데 어떻게 적용시켜야 하며, 어디에서 나타나게 되는지를 알아냈습니다. 그리고 바로 애드센스를 적용시켜봤는데 성공했습니다. 다만, 인피드 광고 스타일도 현재의 인피드 스타일에 맞게 재설정을 해줘야 하는데 100% 완벽하게 똑같이 구현하기는 좀 어렵네요. 스크립트를 제대로 사용할 줄 안다면 가능할 듯 한데, 지금은 그냥 흉내내기 정도로 만들고 있습니다. 여기에서는 이미 인덱스 페이지가 구성되어 있는 CCZ-CROSS 반응형 스킨에 인피드 광고를 적용하는 방법에 대해 알아보겠습니다. 차후에 #1 같은 인덱스 페이지가 없는 반응형 스킨에는 어떤 식으로 인덱스 페이지를 만드는지..

지극히 사적인 이야기를 한번 해볼까 합니다. 예전에 아주 잠깐 만났던 여성이 한 분 있었습니다. 사귄게 맞나 싶을 정도로 진짜 어설프게 썸만 탔던 사람이었죠. 저는 진심으로 좋아했는데 그 사람은 그게 아니었나봅니다. 아무튼 잘 되지 않아서 정말 한 3일정도 잠도 못 자고 설치면서 괴로워했습니다. 주변 사람들에게 미친듯 연락하면서 내 이야기를 좀 들어줬으면 하는 바램이었고 애석하게도 저는 친구도 많이 없었습니다. 그나마 활동하던 모 동아리 모임장에게 이 일을 알리고 좀 얘기좀 들어줬으면 했는데 이 미친놈이 지얘기만 하는 겁니다. "형, 그냥 오늘은 내 얘기만 좀 들어주면 안되겠어?" 라고 말을 했을 정도니까요. 결국 속앓이는 계속됩니다. 도저히 안되겠어서 글을 쓰기 시작했습니다. 블로그에 말입니다. 내 현..

스트레스를 받으면서 글을 작성하는 것 만큼 곤욕스러운일이 있을까요? 괴롭습니다. 아주 아주요! 저 역시 이와같은 경험을 많이 해봤기에 블로그 글을 작성함에 있어서 상당히 쉽지가 않다는것을 잘 알고 있습니다. 이런 과정을 매일매일 겪어야 한다는 것 또한 쉬운게 아니죠. 글을 작성하기가 상당히 괴로운 이유는 두 가지 경우였습니다. 첫번째는 억지로 작성할 때, 두번째는 돈 받고 글을 작성할 때 입니다. 어떻게 보면 이 두가지가 결국 하나로 묶일수도 있겠군요. 억지로 작성한다는 뜻은 여러 경우가 있겠지만 하루하루 글을 써야 된다는 강박관념에 마치 기계처럼 텍스트를 생산하는 행위일 수 있겠습니다. 말 그대로 지금 그냥 이런 저런 얘기를 두서없이 손이 가는대로 찍어내는 것 입니다. 당연히 글 퀄리티가 높아지겠습니까..

몰랐던 사실을 또 하나 배우게 됩니다. 저는 폰트어썸을 꼭 사용해서 늘 CDN 링크 주소를 넣습니다. 수업시간에 sr-only 라고 하는 클래스값을 h1에 넣었더니, 해당 h1 태그 요소가 사라지는 것 입니다. 분명 따로 스타일을 부여하지 않았는데도 클래스값의 유무에 따라 화면상 나타나고 사라지는것을 확인할 수 있었습니다. 단순히 사라지는게 아닌, 완전 그 자리가 없어져서 뒤에 오는 요소들이 빈 공백을 매꿔서 자리를 차지하게 됩니다. 나중에 알고보니, 이것은 "접근성" 을 위한 처리 방식이었습니다. 웹접근성이란 말 그대로 사용자의 블로그 (티스토리 등), 홈페이지에서 원하는 문구를 넣고 싶은데, 단순히 화면에서 보이지 않게 하고 싶을 때 사용됩니다. 예를 들어서 자신의 이름 석자를 넣고 싶은데, 보이게 ..

폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..

드디어 친효스킨을 적용시켰습니다. 테스트 블로그에서 여러가지 공지사항 관련글과 검색 결과도 정상적으로 반영하는지에 대한 테스트를 해본결과, 이상없이 노출이 되고 있습니다. 그래서 바로 메인 블로그에도 적용을 시켰구요, 이번달인 2월까지는 좀 더 지켜보고 3월 초에 정식 배포를 진행하도록 하겠습니다. 정말 빠릅니다. 역시 제 예상대로 쓸데없는 태그들은 과감히 삭제하고, 최대한으로 간결하게 표현할 수 있는 방식을 취했더니 로딩 속도도 빠릅니다. 특히 스크립트가 많이 들어갈수록 로딩이 오래 걸리는데 친효스킨은 개인적으로 별도로 사용한 스킨이 딱 하나 뿐 입니다. 그것도 모바일에서만 동작하는 부분으로, 데스크탑 모드에서는 전혀 느려질 요소가 없습니다. 또한 모바일에서의 스킨은 썸네일 이미지를 생략하기 때문에 그..

웹코딩에서 폰트 크기를 정의할 때, 가장 많이 쓰이는 단위는 단연코 px 입니다. 절대값으로 브라우저의 창 크기라던지, 브라우저의 종류라던지에 상관 없이 어떤 상황에서든지 px로 값을 넣어주면 늘 고정된 크기를 갖습니다. 지금은 반응형 브라우저가 거의 자리를 잡았고, 창 크기 혹은 해상도의 크기에 따라서 폰트 크기가 적절하게 가독성을 해치지 않도록 사이즈가 변화합니다. 여기에서 쓰이는 단위가 em과 rem 입니다. 이 둘의 차이점과 뜻을 알아보도록 하겠습니다. em 그리고 rem 의 뜻 배수를 의미합니다. 그렇다면 배수 자체가 기준이 될 수 없고, 부모요소에 반드시 폰트 크기가 정의되어야 합니다. 그러면 자식 요소에 em 혹은 rem을 폰트 사이즈로 지정하여 크기를 결정할 수 있습니다. 다음 아래의 예제..

지난 시간에 flex 정렬에 대해서 설명을 드렸는데, 아무래도 내용이 조금 부족한 듯 하여 다시한번 표현할 수 있는 모든 정렬 방법에 대해서 서술하려고 합니다. 개인적으로 무척이나 좋다고 생각하는 div 정렬 방법이기 때문에, 모든 브라우저에서 지원만 확실히 되면 앞으로는 float 정렬 방법은 거의 안 쓰지 않을까 싶습니다. 익스플로러 10버전 이상이어야 이 기능이 먹힌다고 하니 국내에서 flex를 사용하기에는 아직은 갈 길이 먼 듯 합니다. 우선 아래의 예제를 봐주시기 바랍니다. 스타일을 세분화하여 적용시켰습니다. 클래스명을 보시고 어떤 스타일이 적용되었는지도 세심하게 봐주시면 도움이 될 것입니다. See the Pen CSS3: div flex align by rgy0409 (@rgy0409) on..

드디어 반응 속도가 빠른 반응형 스킨을 만들었습니다. 또한 사용자가 원하는대로 스타일을 꾸며서 커스텀하기 쉬운 스킨이기도 합니다. 여기에 애드센스는 더할나위없이 완벽하게 적용됩니다. 모바일이든 PC에서든 태블릿에서든 어떤 디바이스에서 접속하셔도 최적화되어 있습니다. 친효스킨의 장점은 다음과 같습니다. 1. 로딩 속도가 빠름. (최소한의 스크립트만 사용)2. 본문 내용과 사이드바의 위치 조절이 가능. (기본값 : 사이드바-왼쪽 / 본문-오른쪽)3. 콘텐츠를 브라우저의 중앙 및 왼쪽에 배치가 가능. (기본값 : 중앙 정렬)4. 본문 가로 사이즈를 원하는 크기만큼 늘릴 수 있음.5. 반응형 애드센스 완벽 적용.6. 메인화면 인피드 광고 적용.7. 대표 색상을 원하는대로 쉽게 변경 가능.8. 친효애드온 쉽게 적..

브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..

이번 친효애드온은 본문 중간에 삽입하는 링크 입니다. 수동으로 넣는 경우가 종종 있습니다. 예를 들어서 CSS 코딩 관련해서 글을 작성했다고 한다면, 해당 글과 관련된 HTML 내용이라던지, 아니면 유용한 사이트라던지 바로가기를 넣어야 하는 경우 입니다. 지금까지 작성했던 글 중에서도 관련된 문서가 있을 수 있습니다. 이럴 때 요긴하게 사용되게 될 것입니다. 방법은 두가지인데, 어떤 포지션이냐에 따라서 다릅니다. 첫번째는 말 그대로 수동으로 넣는 경우입니다. 두번째는 티스토리 플러그인 중 하나인 "이전 글 넣기"를 사용할 때 입니다. 하나하나 사용법을 안내해 드리겠습니다. CSS 세팅하기 먼저 이 모듈을 적용시키기 위한 스타일을 세팅해야 합니다. 방법은 스킨편집으로 들어가셔서 CSS 탭으로 이동합니다. ..

반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다. 백그라운드 반응형 본문의 body 안에는 아무것도 없는 상태 입니다. 스타일에서 body 영역에 백그라운드를 넣었습니다. 백그라운드 스타일의 마크업 상태를 봐주세요. height: 100vh;background-image: url("이미지경로");background-repeat: no-repeat;background-position: center;background-size: cover;background: url("이미지경로") no-repeat..

HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 이 모든것을 퉁치게 되었습니다. video 태그에서 사용할 수 있는 여러 속성들이 있습니다. 아래를 참고해 주세요. 속성 설명 src 동영상 경로 지정 poster 동영상이 깨졌거나 재생 불가 시, 대신 표시할 이미지 경로 지정 preload 동영상 백그라운드 다운로드 후 재생 단추를 눌렀을 때 재생됨 autoplay 자동 재생 loop 무한 반복 (loop="숫자" 의 형태는 무한반복 횟수) controls 동영상에 컨트롤 UI 생성 width 동영상 가로 화면 넓이 height 동영상 세로 화..

HTML5에서 새롭게 추가된 태그 중 figure 그리고 figcaption 요소가 있습니다. 한국어로 굳이 표기하자면 "피규어"가 되겠군요. 이 태그는 어떤 의미이며 어떻게 사용하는지 간략하게 알아보겠습니다. figure : 삽화, 다이어그램, 사진, 동영상, 음원 등 해당 콘텐츠에 대한 설명을 입력할 때 사용함figcaption : figure 요소 안에서의 콘텐츠에 대한 제목 출력 이렇게 쓰인다고 하는데 아무래도 예제가 없으면 무슨 뜻인지 잘 모르겠네요. figure 대신 우리는 보통 div 요소를 사용해서 여러가지 요소들을 묶곤 합니다. 이미지 파일들을 묶는다던지, p태그로 구성된 문장 꾸러기를 묶는다던지 할 때 사용됩니다. figure도 이와 비슷한 의미라고 생각하시면 됩니다. 단지 figure..

안녕하세요! 친절한효자손 입니다. 반갑습니다. 오늘은 기쁜 소식을 여러분들에게 전달하고자 다시한번 키보드를 두드리게 되었습니다. 드디어! 친효스킨이 완성 되었습니다. 저의 첫 코딩! 순수 100% 제가 가지고 있는 모든 지식과 검색을 통한 정보를 통하여 완성된 친효스킨 초기 모델 입니다. 현재 핸드메이드 블로그에 임시로 설치해서 테스트 중 입니다. 확인해 보고 싶으시다면 아래의 블로그로 들어가셔서 직접 브라우저 창 크기도 줄여보시고, 스마트폰으로도 접속하셔서 어떤 모양새를 하고 있고 속도는 어떤지, 콘텐츠는 눈에 잘 들어오는지 등등에 대해서 확인해 주시기 바랍니다. 친효스킨 구경하러 가기 이제부터 여러분들의 피드백이 절실합니다. 크롬과 익스플로러 등에서는 테스트해본 결과 큰 문제없이 정상 작동함을 확인했..

반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 vw, 그리고 vh가 있습니다. 각 단위의 뜻은 vw (Viewport Width) 이고, vh (Viewport Height) 입니다. 즉 vw는 가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기 입니다. 해상도는 윈도우 해상도가 아닌 현재 브라우저 창의 크기를 기준으로 합니다. 예를 들자면 1vw의 크기를 px로 계산하려고 합니다. 현재 창 크기의 가로 폭이 1000px 이라고 가정 했을 때, 1vw는 현재 브라우저 가로 폭의 100분의 1이 됩니다. 즉 10px이 1000px 가로폭에서의 폰트 크기가 됩니다. 이론만으로는 좀 어렵고 햇갈릴 수 있으니 아래의 예제를 살펴보도록 하겠습니다. See the Pen CS..

안녕하세요! 친절한효자손이 다시 인사올립니다. 언제나 스타트를 끊는게 어색하기만 합니다. 이 인사법좀 바꾸고 싶은데... 이보다 더 괜찮은 인사 방법이 막상 떠오르지가 않습니다. 양해 부탁드립니다. (웃음) 현재 친효스킨을 약 70~80% 정도 완성시켰습니다. 아마 학원 수료 전 까지는 완성이 될 것 같아요. 학원측에도 제출해야하는 포트폴리오가 필요한데 이 녀석으로 대체하기로 하였습니다. 거의 완성이 되어가니 재법 형태가 드러나기 시작합니다. 사실 형태라고 할것도 없어요. 진짜 초간단하게 만들고 있거든요. 완전 훨훨 날아다닐 정도의 가벼움을 자랑합니다. 스타일 부분들은 위의 이미지만 보시면 대충 감이 오실 수 있겠는데요, 말 그대로 초단순이 메인 컨샙 입니다. 더 이상 여러 스크립트를 사용하지 않고, 딱..