최근 과외를 한 분과 진행했습니다. 애드센스 승인 이후에 광고 코드를 어떤 식으로 수정해서 배치해야 하는지 어려움을 겪고 있는 분이었고 이 부분만 깔끔하게 도와드렸습니다. 물론 블로그 운영을 하면서 도움이 될 만한 내용들도 알려드렸습니다. 하지만 비보가 날아왔습니다. 애드센스가 정지 되었다는 슬픈 소식입니다. 상의했던 내용과 콘텐츠 방향이 엇나간것도 문제였지만, 애드센스 바로 근처에 "클릭유도" 문구를 삽입한게 아주 큰 실수였던 것 같습니다. 물론 그 분께서는 절대 클릭 유도를 할 생각은 없었다 하더라도 구글 알고리즘은 절대 자비가 없습니다. 의심적은 것들은 모조리 다 캐치해 냅니다. 이제 막 승인이 되어서 시작하신지 얼마 안 되었는데... 매우 안타까울 따름입니다. 절대 애드센스 근처는 얼씬도 하지 말..
친효스킨 최상단 및 최하단에는 반응형 구글 애드센스 코드를 삽입하여 광고를 게시할 수 있습니다. 원래는 세로로 긴 형태인 수평형 광고가 노출되었다가 최근에 엄청나게 큰 형태의 대형 광고로 바뀌면서 보기가 안 좋아졌습니다. 너무 지나치게 큰 광고는 오히려 독이죠. 인라인 방식으로 스타일을 수정해보고 CSS에서도 강제로 세로 사이즈를 조절해도 잘 되지 않았습니다. 그리고 마침내 오늘 구글 애드센스 도움말을 통해서 이 문제를 해결했습니다. 생각보다 너무 쉬웠습니다. 반응형 광고도 원하는 형태로 변경 가능그렇습니다. 반응형 광고도 어쨌든 크게 세가지 형태에서 벗어나지 않습니다. 가장 흔한 직사각형 형태의 광고, 가로로 긴 수평형 광고, 세로로 긴 수직형 광고 이렇게 세 가지 입니다. 그럼 이 셋 중 원하는 형태..
애드센스로부터 메일이 도착했습니다. 이 글은 지금 받자마자 내용을 확인해보고 요약해서 여러분들에게 알리는 글이 될 것입니다. 바라고 바라던 정책이었는데 드디어 적용되네요. 적용 날짜는 2019년 9월부터 시작됩니다. 그럼 어떤 내용들이 변경된 것인지 알아봅시다. 변경되는 내용 크게 세가지 부분입니다. 아래는 이메일로 도착한 본문을 그대로 복사해서 다시 붙여놓은 내용 입니다. 아직 못 읽으셨다면 혹은 이제 막 애드센스를 시작하시려는 분들이라면 필히 읽어보시기 바랍니다. •Google의 게시자 제품을 통해 수익을 창출할 수 없는 콘텐츠의 유형을 설명하는 Google 게시자 정책. 불법 콘텐츠, 아동 성적 학대 및 소아성애물, 음란한 콘텐츠, 가족 콘텐츠에 포함된 성인 대상 주제의 내용, 지적 재산권 남용, ..
티스토리가 시간이 갈 수록 업그레이드가 되어가고 있습니다. 이제는 티스토리는 서비스 종료가 된다는 걸 반증하는 아주 대표적인 사례가 되었습니다. 티스토리 전용 어플리케이션도 최근에 업데이트를 진행한 것 같은데, 그 증거가 바로 "애드센스" 입니다. 과거에는 티스토리 어플리케이션에 애드센스가 아예 나오지 않았었습니다. 그러다가 작년쯤에는 애드센스가 노출이 되었었는데, 다름아닌 플러그인을 통해서 노출이 되기 시작했습니다. 하지만 반응형으로 넣으면 나오지 않고, 티스토리 전용 앱은 어차피 모바일 전용이므로 모바일 해상도일 때, 고정형 크기의 일반 애드센스 광고를 사용하면 어플리케이션에서도 광고가 나타났었어요. 그럼 플러그인에 있던 기존 애드센스는 티스토리 앱에서 노출이 되었을까요? 티스토리 어플리케이션에서는 ..
최근 한 분의 사례를 통해서 확실히 알게 되었습니다. 티스토리를 활용하여 애드센스 승인을 진행함에 있어서 가장 확실한 것은 바로 이것이었습니다. 이것은 무엇일까요? 거두절미하고 본론으로 바로 들어가자면 "페이지뷰" 입니다. 지금까지는 텍스트 양에 대해서 중요하게 여겼었는데 그것이 아니었습니다. 사실상 텍스트양은 전혀 신경쓰지 않아도 되는 부분이었습니다. 페이지뷰가 무조건 1순위 입니다. 주변에 만화 웹툰을 그리는 형이 한 분 있습니다. 이 분에게 애드센스에 대한 지식을 전파했고 승인을 위해서 한번 뛰어보자 했죠. 하지만 그 형은 그림에는 특화되어 있어도 글 쓰는것에는 아직은 많이 부족했습니다. 대사같은건 잘 작성하지만 이렇게 문단형식으로 묶음으로 작성하는 것에는 익숙하지 않았던 것 입니다. 그래서 승부를..
저작권 관련 문제로 인해서 구글 검색에서 자신이 작성한 문서를 삭제 요청할 때가 생길 수 있습니다. 그럴 때에는 어떻게 해야 하는지 안내해 드리겠습니다. 방법은 어렵지 않은데, 삭제 요청을 했다고 해서 바로 적용이 되지는 않습니다. 넉넉하게 하루 정도 시간을 두고 결과를 기다리셔야 합니다. 타인의 사이트에 있는 자신의 저작물에 대한 삭제 요청에 대해서는 다소 시간과 준비가 걸릴 수 있습니다. 먼저 해당 게시물의 이미지나 텍스트가 자신의 것임을 증명해야 하는데, 이게 생각보다 쉬운게 아니기 때문입니다. 여기에서의 설명은 내가 작성한 내 사이트의 검색 결과에 대한 삭제의 경우 입니다. 먼저 조건이 있습니다. 삭제하고자 하는 페이지를 먼저 비공개나 완전 삭제를 선 진행 하신 다음, 페이지나 이미지 삭제 요청을..
방금 이런 메일을 받았습니다. "서버의 긴급 메세지!" 라고 하는 제목의 메일이네요. 들어가보니 제 계정이 블랙리스트에 올랐다고 합니다. 뭔 소린지...? 이럴때 보통 당황하실수도 있는데, 절대 당황하지 마시고 무조건 침착하게 하나하나 살펴볼 필요가 있습니다. 출처 URL, 보낸사람 메일 주소를 반드시 파악하자! 이게 도착한 메일 제목 입니다. 보낸사람이 Naver-Support 라고 되어 있네요. 네이버 고객센터라는 소리죠. 진짠가 의심부터 해봅니다. 이럴때는 답장을 해보는 방법이 있습니다. 바로 해당 메일을 눌러 답장을 해보니까 어럽쇼?! tycera@hanmail.net 이라고 되어 있습니다. 네이버 고객센터 직원이 한메일을 쓴다고?! 바로 여기서 들통났습니다. 이 메일은 네이버 고객센터에서 보낸 ..
온라인으로 세무서에 들르지 않고, 간편하게 집에서도 PC를 통해서 홈택스에 접속 후, 사업자등록에 대한 정정을 진행할 수 있습니다. 업종을 새롭게 추가하고 삭제도 할 수 있습니다. 단 새롭게 수정된 사업자 등록증 출력은 집에서는 안 되고 반드시 오프라인 세무서로 가셔야 합니다. 그러면 홈택스를 통한 사업자등록 업종 추가 방법은 어떻게 진행하는지 과정을 살펴보겠습니다. https://www.hometax.go.kr/ 국세청 홈택스 www.hometax.go.kr 편리하게 이동하시도록 홈택스 홈페이지를 링크해 두었습니다. 접속해 주세요. 참고로 홈페이지는 계속해서 리뉴얼 됩니다. 본문에 올린 스크린샷 이미지와 맞지 않을 수 있습니다. 허나 반드시 해당 항목이 보일 겁니다. 그대로 찾아가시면 크게 어렵지 않을..
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..
HTML5 에서는 방식이 조금 바뀌었다고 합니다. 예전 HTML4 시절에는 인라인 방식으로 size를 사용해서 직접 값을 입력하여 두께를 조절하는 방식을 취했는데, HTML5에 넘어오면서 height 로 두께를 조절할 수 있게 되었습니다. 사용 방법은 아래와 같습니다. See the Pen HTML5 border Settings by rgy0409 (@rgy0409) on CodePen. 첫번째 의 경우가 가장 기본 형태입니다. 두번째 의 경우는 HTML4 에서 사용된 방식입니다. 하지만 지금은 HTML5 를 쓰기 때문에 이상하게 적용되고 있는 모습을 보실 수 있습니다. 세번째 부터는 클래스값을 각각 사용해서 height의 값에 따른 두께의 변화를 살펴보실 수 있습니다. height의 값에 따라서 두께가..
친효스킨을 열심히 제작하면서 티스토리의 HTML 구성에 대해서 많은 것들을 알게 되었습니다. 그 중에서 인덱스 페이지에 대해 늘 궁금했었는데 어떻게 적용시켜야 하며, 어디에서 나타나게 되는지를 알아냈습니다. 그리고 바로 애드센스를 적용시켜봤는데 성공했습니다. 다만, 인피드 광고 스타일도 현재의 인피드 스타일에 맞게 재설정을 해줘야 하는데 100% 완벽하게 똑같이 구현하기는 좀 어렵네요. 스크립트를 제대로 사용할 줄 안다면 가능할 듯 한데, 지금은 그냥 흉내내기 정도로 만들고 있습니다. 여기에서는 이미 인덱스 페이지가 구성되어 있는 CCZ-CROSS 반응형 스킨에 인피드 광고를 적용하는 방법에 대해 알아보겠습니다. 차후에 #1 같은 인덱스 페이지가 없는 반응형 스킨에는 어떤 식으로 인덱스 페이지를 만드는지..
몰랐던 사실을 또 하나 배우게 됩니다. 저는 폰트어썸을 꼭 사용해서 늘 CDN 링크 주소를 넣습니다. 수업시간에 sr-only 라고 하는 클래스값을 h1에 넣었더니, 해당 h1 태그 요소가 사라지는 것 입니다. 분명 따로 스타일을 부여하지 않았는데도 클래스값의 유무에 따라 화면상 나타나고 사라지는것을 확인할 수 있었습니다. 단순히 사라지는게 아닌, 완전 그 자리가 없어져서 뒤에 오는 요소들이 빈 공백을 매꿔서 자리를 차지하게 됩니다. 나중에 알고보니, 이것은 "접근성" 을 위한 처리 방식이었습니다. 웹접근성이란 말 그대로 사용자의 블로그 (티스토리 등), 홈페이지에서 원하는 문구를 넣고 싶은데, 단순히 화면에서 보이지 않게 하고 싶을 때 사용됩니다. 예를 들어서 자신의 이름 석자를 넣고 싶은데, 보이게 ..
폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..
웹코딩에서 폰트 크기를 정의할 때, 가장 많이 쓰이는 단위는 단연코 px 입니다. 절대값으로 브라우저의 창 크기라던지, 브라우저의 종류라던지에 상관 없이 어떤 상황에서든지 px로 값을 넣어주면 늘 고정된 크기를 갖습니다. 지금은 반응형 브라우저가 거의 자리를 잡았고, 창 크기 혹은 해상도의 크기에 따라서 폰트 크기가 적절하게 가독성을 해치지 않도록 사이즈가 변화합니다. 여기에서 쓰이는 단위가 em과 rem 입니다. 이 둘의 차이점과 뜻을 알아보도록 하겠습니다. em 그리고 rem 의 뜻 배수를 의미합니다. 그렇다면 배수 자체가 기준이 될 수 없고, 부모요소에 반드시 폰트 크기가 정의되어야 합니다. 그러면 자식 요소에 em 혹은 rem을 폰트 사이즈로 지정하여 크기를 결정할 수 있습니다. 다음 아래의 예제..
지난 시간에 flex 정렬에 대해서 설명을 드렸는데, 아무래도 내용이 조금 부족한 듯 하여 다시한번 표현할 수 있는 모든 정렬 방법에 대해서 서술하려고 합니다. 개인적으로 무척이나 좋다고 생각하는 div 정렬 방법이기 때문에, 모든 브라우저에서 지원만 확실히 되면 앞으로는 float 정렬 방법은 거의 안 쓰지 않을까 싶습니다. 익스플로러 10버전 이상이어야 이 기능이 먹힌다고 하니 국내에서 flex를 사용하기에는 아직은 갈 길이 먼 듯 합니다. 우선 아래의 예제를 봐주시기 바랍니다. 스타일을 세분화하여 적용시켰습니다. 클래스명을 보시고 어떤 스타일이 적용되었는지도 세심하게 봐주시면 도움이 될 것입니다. See the Pen CSS3: div flex align by rgy0409 (@rgy0409) on..
브라켓은 대표적인 웹에디터 프로그램 중 하나입니다. 제가 자주 사용하는 기능 중 하나가 바로 "일괄변경" 입니다. 예를 들자면, #555 어두운 회색 계열인 16진수 색상코드가 적용된 모든곳을 다른 색으로 일괄 변경하고자 할 때, 해당 색상 부분을 드래그해서 선택 후, Ctrl + H 를 누르면 원하는 색상코드를 넣어 모두 변경이 가능합니다. 만약 브라켓에 오류가 발생한다거나 하필 급하게 메모장으로 수정을 해야 하는 경우라면 어떻게 해야 할까요? 한두개 적용이 된 상태라면 하나하나 수동으로 수정할 수 있지만, 생각보다 많은곳을 동시 수정해야 한다면 시간이 상당히 소요가 될 것입니다. 또한 빼먹고 미처 수정을 못하는 부분도 생길 수 있습니다. 그래서 :root 를 사용하게 됩니다. 이것은 변수를 만들어서 ..
반응형 웹을 배우고 있습니다. 오늘은 궁금했던 한 부분이 해결되었습니다. 백그라운드에 이미지를 넣는데, 이것을 브라우저의 크기에 따라 자연스럽게 변하는 것을 표현해보고 싶었습니다. 해결 방법은 생각보다 간단했습니다. 먼저 아래의 코딩 상태를 봐주시기 바랍니다. 백그라운드 반응형 본문의 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..
반응형 웹에서 사용되어지는 폰트 크기의 단위 중 하나가 vw, 그리고 vh가 있습니다. 각 단위의 뜻은 vw (Viewport Width) 이고, vh (Viewport Height) 입니다. 즉 vw는 가로 사이즈에 대응하여 변화하는 크기이고, vh는 세로 사이즈의 변화에 따른 크기 입니다. 해상도는 윈도우 해상도가 아닌 현재 브라우저 창의 크기를 기준으로 합니다. 예를 들자면 1vw의 크기를 px로 계산하려고 합니다. 현재 창 크기의 가로 폭이 1000px 이라고 가정 했을 때, 1vw는 현재 브라우저 가로 폭의 100분의 1이 됩니다. 즉 10px이 1000px 가로폭에서의 폰트 크기가 됩니다. 이론만으로는 좀 어렵고 햇갈릴 수 있으니 아래의 예제를 살펴보도록 하겠습니다. See the Pen CS..
이번에는 div로 박스를 만들고, 테두리의 값을 입력하여 모양일 변경하는 방법입니다. 모서리 부분이 둥근 테두리 형태의 박스를 표현하고자 할 때, CSS3 에서는 border-radius 속성을 이용해서 스타일을 만들어 줍니다. 아래는 예시 입니다. 참고하시기 바랍니다. See the Pen CSS3 : border-radius by rgy0409 (@rgy0409) on CodePen. HTML과 CSS 버튼을 누르시면 코딩 상태를 확인하실 수 있습니다. 특히 CSS 부분을 유심히 살펴보시기 바랍니다. 가장 기본 형태는 다음과 같습니다. border-radius 값에 따른 적용 위치border-radius: 픽셀 혹은 %단위의 값 입력; 이렇게 하시면 사각형의 각 모서리에 입력한 값 만큼 영향을 받게됩..
크롬에 여러가지 자주가는 사이트 및 자료 홈페이지들이 많이 북마크(즐겨찾기) 되어 있습니다. 동기화가 되어 있어서 어떤 PC나 노트북에서든지 로그인을 하면 북마크들이 그대로 복원이 됩니다. 하지만 기계라고 실수를 하지 않을까요? 합니다. 언제 하냐고요? 오류났을 때 그럽니다. 그러니 백업은 필수입니다. 크롬에서도 이런 알 수 없는 오류들로 인해서 소중한 즐겨찾기 북마크가 삭제가 되는걸 방지하고자 백업 기능을 넣어놨습니다. 오늘은 바로 이 북마크 내보내기와 가져오기에 대한 방법입니다. 먼저 크롬을 실행합니다. 그러면 맨 오른쪽 상단에 보시면 저렇게 메뉴버튼이 있을 것입니다. 눌러보시면 북마크라고 표시된 메뉴를 찾으실 수 있으실 겁니다. 그쪽으로 마우스를 올려놓으면 또다시 소메뉴가 나옵니다. 바로 여기에 북..
div를 중앙정렬을 하기 위해서는 가로 크기 값을 가지고 있어야 합니다. 그리고 margin: 0 auto; 를 하게 되면 해당 div는 중앙정렬이 가능합니다. 그러나 여러개의 div를 가로로 베치하고 이것들을 균등 분배하여 배치하려면 float 요소를 사용하고, 반드시 float 해제를 해줘야 합니다. 그러면 태그들이 늘어날 수 밖에 없습니다. 오늘은 flex 라는것을 배웠습니다. 완전 신세계더군요. 그 복잡했던 div 정렬 부분을 이걸 사용하니 한방에 해결이 됩니다. 특히나 반응형에서 늘 가로사이즈를 얼마나 줘야 할지 고심했는데, 이 flex 속성을 사용해서 바로 해결할 수 있습니다. 단, 아직까지 널리 쓰이는 속성은 아닙니다. 현재는 익스플로러 (IE) 10 이상이어야 하며, 나머지 브라우저마다 지..
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다. 선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다. See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodeP..
예전에 한번 border의 속성에 대해서 설명을 드린적이 있습니다. 뭔가 설명이 미흡했던 관계로 다시한번 정리해서 올리려고 합니다. 이번에는 이해하기가 좀 더 수월할 것 입니다. 먼저 아래의 결과화면을 보시기를 바랍니다. See the Pen CSS3 : border-width, border-style, border-color by rgy0409 (@rgy0409) on CodePen. div 박스마다 약간씩 다른 스타일의 테두리가 적용되어 있습니다. 통상적으로 가장 많이 사용되어지는 방법은 가장 마지막인 BOX13 의 형태 입니다. border 의 속성에는 크게 두께, 스타일, 색상이 들어가는데, 이것을 따로 마크업 할 때도 있고, 한번에 마크업 할 때도 있습니다. 결과는 같지만 쓰임이 달라서 적시적소..
CSS에서는 마우스를 올렸을 경우에 애니메이션을 변경한다던지, CSS3 애니메이션을 사용하여 반복적인 움직임을 만들 수 있습니다. 왜 CSS에서는 클릭 이벤트를 만들지 않았을까요! 정말 너무 아쉬운 순간입니다. 버전이 올라가면서 부디 클릭 속성에 대한 설정 부분도 추가되었으면 좋겠습니다. 자바스크립트가 늘어날수록 웹페이지의 로딩 시간은 그만큼 길어지는데다 오류의 주요 원인이 될 수 있기 때문에 저는 CSS를 좋아할 수 밖에 없습니다. (사실 스크립트를 잘 몰라서...) 구글에서 CSS 관련 클릭 이벤트에 대해 검색해보니 역시 해결하신분들의 경험담을 확인할 수 있었습니다. 단 이 방법은 공식적이지 않으며 지극히 개인적인 방법이라는 것을 염려해 두셨으면 좋겠습니다. 개인적으로는 무척 마음에 들었던 방법입니다..
PC버전의 네이버 메인화면에는 관심주제라는것이 있습니다. 이 부분을 자신이 원하는 카테고리만 나오게 할 수 있습니다. 보통은 로그인 후 관심주제를 설정하면 어떠한 곳에서 로그인을 해도 동기화 되어 관심 카테고리가 자동으로 바뀔 줄 알았는데, 그게 아니더라구요. PC마다 새롭게 설정을 다시 해줘야 하는 불편함이 있습니다. 이 점을 참고하시어 자주 사용하시는 PC (집이나 회사 등) 에서만 설정해놓으시면 될 것 같습니다. 방법은 아래와 같습니다. 네이버 관심주제설정, 어렵지 않습니다. 먼저 네이버 메인화면의 모습입니다. 위의 스크린샷 날짜는 2018년 12월 14일 오전 9:30 입니다. 보시면 다양한 카테고리가 노출되는 모습입니다. 이제 나만의 관심사 설정을 통해 보고싶은 카테고리만 나오게 할 것입니다. ..