본문 중간에 삽입하는 링크에 대한 세번째 스타일 입니다. 이번 디자인은 완전 90년대 메트로 스타일로 만들었습니다. 완전 고전 스타일의 버튼 형식 입니다. 거두절미하고 바로 예제를 살펴보겠습니다. 짧은 제목의 링크 글 중간 사이즈 정도 되는 텍스트가 살짝 있는 제목의 링크 글 이것은 정말로 상상을 초월하는 가장 긴 사이즈를 자랑하는 제목의 링크 글이 되려고 열심히 발악하는 규모의 글! 반드시 두 줄로 만들었어야만 하는 그 링크 글! 이런 스타일의 본문 중간 링크 입니다. 특징이라면 마우스를 올려도 아무 변화가 없습니다. 하지만 버튼 스타일이기 때문에 클릭을 할 때 스타일이 순간 바뀝니다. 마치 실제로 버튼이 눌리는 것 처럼 말입니다. 클래식한 버튼을 좋아하시거나 특별한 스타일의 링크글을 연출하고 싶다면 ..
친효스킨 2.0 버전에서는 사이드바에 스티키(STICKY) 모드를 적용시켰습니다. 스티키는 매소드로 CSS position에서 사용할 수 있는 옵션 중 하나 입니다. 하지만 아직까지 다양한 브라우저에서 지원하는 매소드는 아닙니다. 특히 익스플로러는 헬이라고 할 수 있습니다. 이래서 익스플로러는 사랑받을 수 없는 것 입니다! 그러니까 마소가 자꾸 엣지 브라우저를 개발하고 내세우는 거겠죠? 포지션에 sticky가 적용되면 어떻게 움직일까요? 사이드바에서 자주 쓰일 수 있는 이 기능은 평상시에는 그냥 position: static 과 같은 기능을 합니다. 즉 별다른 변화가 없습니다. 하지만 특정 한계점에 다다르면 Fixed (고정) 됩니다. 스티키 사례는 아니지만, 네이버 PC 해상도에서의 메인화면을 살펴보시..
친효스킨 모바일(스마트폰) 해상도에서 애드센스를 노출 안 되게, 그러니까 감추는 방법에 대해서 문의를 주셨습니다. 좀 더 깔끔하게 보이게 하기 위함과 로딩 속도를 조금이라도 올리는데 도움이 될 것 같기 때문 입니다. 이 문제를 해결하기 위해서는 사이드바에 애드센스 삽입 시, 약간의 HTML 코드 수정을 해야 합니다. 또한 CSS 반응형 미디어쿼리도 추가해야 합니다. CSS 미디어쿼리 세팅 아래의 CSS 코드를 친효스킨의 CSS 항목에 빈 공간을 확보 후 추가합니다. 아래에 첨부파일도 있습니다. div.rgy-sidebar-adss { display: none; } @media (min-width: 1000px) { div.rgy-sidebar-adss { display: block; } } 첨부파일을 열..
본문 목차에 대한 리스트 모듈 입니다. 말 그대로 본문 분량이 많아지는 경우에 요긴하게 사용할 수 있는 모듈 입니다. 이 방법은 현재 널리 알려져있는 TOC 제이쿼리 스크립트를 이용한 방법이 아닙니다. 비록 자동은 아니지만 수동으로 넣음으로서 불필요한 스크립트를 최대한 줄여 속도를 개선했습니다. 어차피 목차라는게 본문 내용이 길어질 때 필요한 경우이고, 티스토리의 모든 문서에 대해서 목차화를 할 필요가 전혀 없다고 판단되어지기 때문에 이렇게 따로 친효애드온으로 모듈을 만들었습니다. 현재 친효스킨 다운로드 페이지와 티스토리 사용법 페이지에 해당 목차 모듈이 적용되어 있으니 한번 직접 방문하셔서 확인해 보시기 바라겠습니다. 친효스킨 다운로드 / 사용법 / 업데이트 일지 티스토리 블로그 사용법 수동으로 넣는 ..
친효스킨 커스텀 강좌 입니다. 이번 내용은 본문의 소제목으로서 역할을 하는 머리글에 대해서 수정하는 내용 입니다. 친효스킨에는 최대한 사용자가 수정을 용이하게 할 수 있도록 주석을 꼼꼼히 입력했습니다. 따라서 해당 내용에 대해서 대략적으로 검색하면 금방 찾을 수 있을 겁니다. "본문 소제목" 이라고 CSS에서 검색하시면 아래의 부분을 찾을 수 있습니다. 친효스킨 선택자 /* 본문 소제목 */ #contents .article h1, #contents .article h2, #contents .article h3, #contents .article h4, #contents .article h5, #contents .article h6 { padding: 2px 5px 4px; margin: 20px 0; ..
오늘은 특정 영역에서 텍스트 정렬에 도움을 줄 수 있는 white-space 매소드에 대한 속성을 알아봅니다. 지난번 시간에 이어서 겹치는 부분도 있으니 혹시 어제의 강의를 놓치신 분들이 계시면 한 번 읽어보시는것도 괜찮을 것 입니다. 티스토리의 CSS를 수정하거나 개인만의 스타일로 꾸미는데 아는 것 만큼 더 발전할테니까요. CSS! 말줄임표 생략기호 text-overflow 속성 사용 방법 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 다운로드가 완료되었다면 한번 실행해 보시기 바랍니다. 그러면 빨강, 초록, 파랑, 보라, 검정 DIV 박스가 있고 그 안에 텍스트가 들어 있을 겁니다. 또한 DIV 박스를 삐져나온 텍스트들도 보일 것 이고, 띄어쓰기가 이상하게 되어 있는 것들도 살펴보실 수 있을..
어떤 블록 요소에 들어가는 텍스트가 다소 많아서 이것을 생략기호(말줄임표)로 표현하고자 할 때, 우리는 CSS에서 text-overflow 매소드를 사용할 수 있습니다. 어떤 식으로 표현 되는지 간략하게 알아보겠습니다. See the Pen CSS! text-overflow 속성 by rgy0409 (@rgy0409) on CodePen. 보시면 두 개의 DIV 영역 안에 텍스트가 들어가 있습니다. DIV 영역의 가로값은 모두 300px 로 동일 합니다. 세로값이 auto로 되어 있으므로 텍스트가 300px 이상의 사이즈라면 적색 div 처럼 한 줄 아래로 내려오게 되어 있습니다. 하지만 푸른색 div 박스의 경우는 보시는 것 처럼 텍스트가 생략이 되어 있습니다. CSS 탭을 눌러서 매소드를 살펴 보시기..
친효스킨 1.16 버전 이상부터는 본문에 "리디바탕체"가 기본 글꼴 입니다. 1.17 버전에서는 "이롭게 바탕체"로 변경될 예정 입니다. 둘 다 큰 차이는 없습니다. 모바일에서도 두 글꼴 모두 가독성이 뛰어납니다. 하지만 윈도우에서는 리디바탕체가 다소 두껍게 보이는 듯 합니다. 이 부분의 단점을 해결하기 위해서 이롭게 바탕체로 변경을 진행 합니다. 1.17 버전에서는 기본으로 적용되어 있지만 수동으로 사용해보고자 하시는 분들은 아래의 방법대로 진행하시면 됩니다. 이롭게 바탕체 다운받기 아래의 홈페이지에 방문하시어 "이롭게 바탕체"를 다운로드 받으시기 바랍니다. 이롭게바탕체 배포 공식 웹페이지 다운로드 완료 후 압축을 풀면 폰트파일이 총 4개가 있을 것 입니다. 이 네개의 파일 중, IropkeBatang..
현재 친효스킨의 본문의 경우는 word-break 매소드에 의해서 어디를 끊어서 다음줄로 넘길지에 대한 설정이 적용되어 있습니다. 친효스킨에 적용된 옵션은 break-all 로서, 글자 단위로 끊어서 다음 줄로 넘어가도록 설정되어 있습니다. 이 설정의 장점은 텍스트가 전체를 놓고 보면 가지런해서 보기가 좋다는 장점이 있습니다. 한글은 읽는데 큰 불편함은 없습니다. 단 영어의 경우는 다릅니다. 예를 들어서 apple 사과를 입력하면 보편적으로 이것을 한 글자로 인식하기 때문에 apple가 전체 다음줄로 내려가야 하지만, 그 줄에 딱 맞는 글자수를 체우고나서 나머지를 다음줄로 내려보내게 됩니다. 즉 ap까지하여 그 줄이 꽉 채워진 상태라면 ple는 다음줄로 넘어가게 되어 영어를 읽는데 상당히 어려워지는 문제..
친효스킨의 메인화면은 인덱스 페이지로 구성되어 있습니다. 글 목록이 최신 순으로 정리되어 출력됩니다. 맨 위의 글이 가장 최신 글 입니다. 그리고 목록 내용은 가장 왼쪽에 썸네일 이미지가 출력됩니다. 그리고 오른쪽으로는 제목, 본문 시작 부분의 텍스트 내용, 카테고리, 글 작성날짜와 시간이 나타나게 되어 있습니다. 여기에서 우리가 수정하고자 하는 부분은 본문의 텍스트 내용에 대한 줄 개수를 수정하는 방법 입니다. 친효스킨의 기준 해상도는 모바일 (스마트폰) 입니다. 즉 스마트폰으로 봤을 때 인덱스 페이지를 살펴보시면 본문에 대한 텍스트의 미리보기가 출력되지 않고 있음을 확인 할 수 있습니다. 썸네일과 제목, 카테고리, 발행일 및 날짜는 나오지만 본문 내용의 텍스트는 나오지 않습니다. 결국 이 의미는 특정..
현재 친효스킨에는 PC 해상도를 기준으로 스크롤을 조금 내리면 오른쪽 하단에 TOP버튼 외 3개의 버튼이 나타나도록 설계가 되어 있습니다. 이 버튼은 모바일 해상도에서는 크기가 약 30% 작아집니다. 하지만 모바일에서 볼 때 다소 눈에 거슬리시는 분들도 계실 수 있습니다. 따라서 모바일 해상도에서는 아예 보이지 않도록 설정하는 방법에 대해 알아보겠습니다. 먼저 친효스킨의 CSS에서 아래의 부분을 검색합니다. "TOP버튼" 이라고 찾으면 됩니다. /* 친효애드온 : TOP버튼 시작 */ #topBtn { display: none; position: fixed; right: 0; bottom: 80px; transform: scale(0.7); -webkit-transform: scale(0.7); tran..
친효스킨의 글꼴을 변경하는 방법 입니다. 그런데 전체가 아닌 본문에 대해서만 안내해드리는 이유는 스킨이 깨질 수 있기 때문 입니다. 현재 친효스킨의 기본 폰트는 "나눔고딕" 폰트 입니다. 사이드바에도 나눔고딕폰트가 적용되어 있습니다. 하지만 이 글꼴이 바뀌면 사이드바의 형태도 변화가 생길 수 있기 때문에 비추천 합니다. 친효스킨을 아름답고 오류가 없이 사용하시려면 본문에 대해서만 변경하시는것을 추천합니다. 이 외의 개인 욕심에 의해 오류가 발생하는 부분은 도와드리지 않습니다. 폰트 변경에 대한 자세한 방법을 예전에 작성한 바 있습니다. 여기에서는 별도의 폰트 파일이 아닌 구글 웹폰트를 기준으로 설명을 드립니다. 아래의 글을 참고해 주시기 바랍니다. 구글폰트를 이용한 티스토리 글씨체(글꼴) 스타일 변경 방..
친효스킨 커스터마이징에 대한 카테고리 입니다. 보통 요청에 의해 작성됩니다. 본문의 텍스트 줄 간격이 다소 좁다고 생각되시면 아래의 방법으로 조절이 가능합니다. 친효스킨의 CSS에서 아래의 코드를 검색하시기 바랍니다. "진짜본문" 이라고 검색하면 쉽게 찾을 수 있습니다. /* 진짜본문 (article_rep_desc) */ #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: 1px solid var(--subColor); font-family: "RIDIBatang", "Nanum Gothic" serif; font-size: 17px..
친효스킨에는 이미지 테두리가 적용되어 있습니다. 본문에 이미지를 삽입하면 자동으로 테두리가 적용됩니다. 제가 강좌글을 많이 작성하는데 스크린샷 이미지를 많이 사용합니다. 화면의 일부만을 캡쳐하는 일이 많다보니 흰색 배경의 경우는 본문의 영역과 구별이 잘 안 되는 부분이 있을때가 많습니다. 그래서 이미지에 #CCC 색상의 밝은 회색계열의 테두리가 얇게 들어갑니다. 이 스타일을 해제하는 방법은 다음과 같습니다. 친효스킨의 CSS에서 아래의 영역을 검색합니다. /* 티스토리 본문 이미지 (새로운 글쓰기 에디터) */ .tt_article_useless_p_margin > figure.imageblock { margin: 25px auto 20px !important; outline: 1px solid #ccc..
안녕하세요, 친절한효자손 입니다. 오늘 확인해보니 친효스킨 1.16 버전에서 새로운 글쓰기 에디터를 사용하시는 분들에게 해당되는 문제 입니다. 첨부파일을 올리면 파일명이 짧은건 상관 없는데 긴 경우, 본문의 가로 사이즈를 초과해 버리는 문제가 발생합니다. 해당 오류는 아주 간단하게 해결 할 수 있습니다. 친효스킨의 CSS에서 아래의 부분을 검색합니다. .tt_article_useless_p_margin > figure.fileblock a div.desc div.filename span.name { display: inline-block !important; max-width: 100% !important; height: 100% !important; padding: 5px 20px 7px !import..
친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다. #contents .article { word-break: break-all; -webkit-word-break: break-all; padding: 20px; border: 1px solid #E5E5E5; border: ..
포스트잇 스타일로 연출해 보았습니다. 구글링을 통해서 참고하여 그대로 응용했습니다. 본문 중간 링크 모듈과 팁박스 모듈 대신 포스트잇 모듈로 대처할 수 있을 것으로 기대합니다. 사용 범위가 꽤 넓을 것 같습니다. 친효스킨에서 가장 정상작동하며 타스킨에서는 스타일에 오류가 발생할 수 있습니다. 참고하시기 바랍니다. 먼저 아래는 예시 입니다. 이것은 아주 간단한 예시의 글 제목 입니다. 이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 있는데, 고정 크기로 할지... 그냥 길게 늘어나게 할지 고민이 많습니다. 이것은 아주 간단한 예시의 글 제목 입니다.이렇게 텍스트가 다소 긴 제목의 글이 있다고 하더라도 아무 문제 없이 다음 줄로 넘어가도록 설계가 되어 ..
안녕하세요, 친절한효자손 입니다. 댓글로 일부 문제에 대한 제보를 받았습니다. 현재 1.16버전에서 알려진 문제는 다음과 같습니다. 1. 새로운 글쓰기 에디터에서 본문보다 가로폭이 작은 이미지를 삽입하고 해당 이미지에 텍스트 자막(캡션)을 매우 긴 내용으로 입력 시, 이미지가 자동으로 좌측정렬이 되는 문제 2. 구버전 및 새로운 글쓰기 에디터에서 리스트 스타일로 목록 입력 시, 일부 리스트 스타일이 정상적으로 출력되지 않는 문제 이 두가지 문제 입니다. 해당 문제는 육안으로 확인 했으며, 두가지 모두 1.17 버전에서는 수정이 완료 된 상태 입니다. 하지만 지금 당장 친효스킨을 사용해야 하므로 CSS에서 위의 문제를 해결하는 방법에 대해 설명드리고자 합니다. 이미지 좌측 정렬 문제 해결 방법 친효스킨 C..
이 글은 HTML에 대한 기초 지식이 전혀 없으신 분들께서 티스토리의 HTML 편집 부분을 어떤 식으로 접근해야 하는지에 대한 가이드 목적으로 작성되었습니다. 애드센스 승인 이후 스크립트 코드를 어디에 넣어야 하는지, 또 간단한 HTML 구조에 대해서 파악하는 목적도 가지고 있습니다. 친효스킨을 기준으로 설명이 되어 있습니다. 티스토리 내에서의 HTML 구조HTML은 사람으로 비유하자면 뼈대라고 생각하시면 됩니다. 사람도 뼈가 정위치에 와야 생활할 수 있듯 HTML도 각 뼈대의 역할이라는게 있습니다. 크게 헤더 사이드바 본문 푸터 잘 보시면 뭔가 공통점이 보일 겁니다. HTML의 구조는 마치 러시아 전통 인형인 마트로시카와 비슷합니다. 인형을 열어보면 또 인형이 있고, 또 그 인형을 열면 또 인형이 안에..
안녕하세요, 친절한효자손 입니다. 현재 새로운(신규) 글쓰기 에디터로 글을 작성할 때 이미지를 삽입하면 화면을 초과하여 잘리는 문제가 발생하고 있습니다. 확인해보니 이미지에 강제로 가로 사이즈가 적용되는 문제였습니다. max-width: 860px; 으로 860픽셀로 고정이 되기 때문에 모바일에서 볼 때는 화면이 잘려 보이게 되고 가로 스크롤바가 생깁니다. 따라서 해당 매소드만 제거하면 되지만, 문서를 일일히 다 수정 할 수는 없는 노릇이므로 CSS를 수정해야 합니다. 앞으로 배포될 친효스킨 1.17 버전에서는 이 문제가 해결되긴 했지만, 아직 배포는 멀었으니 다음의 방법대로 친효스킨의 CSS를 수정해 주시기 바랍니다. 먼저 아래의 영역을 찾습니다. "새로운 글쓰기" 라고 검색하면 빠르게 찾을 수 있을 ..
가끔씩 댓글로 CSS 설정 완료 후 적용이 잘 안된다는분이 계십니다. 그럴때는 간단하게 크롬에서 직접 비교해서 테스트 할 수 있는 방법이 있습니다. 당연히 크롬을 이용해서 해야 합니다. 물론 다른 브라우저에서도 해당 기능을 지원하겠지만 개인적으로는 크롬이 더 편하더군요. 이렇게 font-weight: bold; 를 입력해도 글씨가 두꺼워지지 않는다는 의견이 있었습니다. 과연 실제로 적용이 안 되는 건지 확인해 보는 방법은 직접 테스트해보는 방법일 겁니다. 티스토리 스킨의 CSS 편집을 통해 비교할 수 있지만 더 확실한 방법은 방금도 말씀드렸듯 크롬에서 검사기능을 활용하는 것 입니다. 해당 댓글의 본문을 확인했습니다. 현재 친효스킨에서는 B기능이 형광펜처럼 표시가 되는 기능으로 업데이트 되어 있습니다. 여..
친효스킨에도 기본적으로 있는 티스토리 카테고리 글 개수 표시 기능! 이것을 없애려면 다음의 CSS 스타일을 추가로 삽입하면 됩니다. 티스토리의 카테고리 구조는 치환자를 대신해서 사용되고 있습니다. 치환자란 티스토리 내에서 제공하는 스크립트를 기반으로, 일종의 아이디와 비슷합니다. 티스토리 카테고리라는 아이디를 A라고 할 때, 티스토리를 구성하는 서버 파일 중에서 A에 대한 구조를 스크립트에 의해 불러오게 됩니다. 이 과정에서 HTML 및 CSS의 기본 뼈대가 구성됩니다. 일반적으로 스킨의 HTML 구조에서는 카테고리의 뼈대를 살펴볼 수 없습니다. 크롬이나 파이어폭스같은 브라우저에서 제공하는 소스 검사 기능을 사용해서 살펴볼 수 있습니다. 티스토리가 업데이트됨에 따라 기본 뼈대의 구성은 바뀔 수 있으며, ..
새로운 글쓰기 에디터 전용으로 제작해본 첨부파일 디자인 입니다. 친효스킨에서 가장 완벽하게 적용됩니다. 타 스킨에서는 약간의 변형이 일어날 수 있습니다. 이점 유의해 주시기 바랍니다. TIP 2019년 12월 9일 티스토리 모바일앱이 업데이트 되면서 CSS 첨부파일 스타일도 일부 변경이 되었습니다. 친효스킨 1.15 버전에서 오류가 있으니 여기에 있는 첨부파일로 업데이트를 진행해 주시기 바랍니다. CSS에서 새로운 글쓰기 에디터용 첨부파일 부분을 몽땅 변경해 주시면 해결 됩니다. HTML 세팅 기존 첨부파일의 태그명, 클래스명을 그대로 사용하기 때문에 HTML에서 따로 편집할 부분은 없습니다. CSS 세팅 먼저 아래의 첨부파일을 한번 살펴봐 주시기 바랍니다. 이런 스타일로 출력됩니다. 그리고 다운로드 받..
CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..
실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..
코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다. 선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다. See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodeP..
지난 시간에 이어서 그라디언트 관련 내용입니다. 이전 내용에서는 div의 내부에 그라데이션 효과를 만들었다면, 오늘은 div의 border 속성인 테두리에 그라데이션을 적용하는 방법입니다. 방법은 지난시간에 했던것과 큰 차이는 없습니다. 그럼 바로 알아보도록 하겠습니다. See the Pen CSS3 : border gradient by rgy0409 (@rgy0409) on CodePen. 위의 예제를 살펴보세요. HTML과 CSS 부분의 코딩 상태도 보실 수 있습니다. 중요한 부분은 CSS 이므로 아래에 한번 더 마크업 해두도록 하겠습니다. div { float: left; width: 100px; height: 100px; margin: 10px; font-size: 30px; line-height..
이전에 전체메뉴에 대해서 한번 글을 작성한 바 있습니다. 그것보다 좀 더 간단하게 꾸밀 수 있는 방식 입니다. 스크립트 필요없이 CSS만으로도 아코디언 스타일의 메뉴를 구현할 수 있습니다. 선택자만 조금 주의해서 생각하면 생각보다 코딩을 짜는데 큰 어려움은 없습니다. MENU-1 MENU-2 MENU-3 MENU-4 MENU-5 SubMENU-1 SubMENU-2 SubMENU-3 SubMENU-4 SubMENU-5 SubMENU-6 SubMENU-7 SubMENU-8 SubMENU-9 SubMENU-10 SubMENU-11 SubMENU-12 SubMENU-13 SubMENU-14 SubMENU-15 SubMENU-16 SubMENU-17 SubMENU-18 SubMENU-19 SubMENU-20 HT..
CSS3에서 스타일 만으로도 다양한 그림자 효과를 연출할 수 있습니다. 각 요소에 대한 마크업 방법과 결과값을 한번 살펴보겠습니다. See the Pen CSS : text-shadow / box-shadow by rgy0409 (@rgy0409) on CodePen. 먼저 HTML 태그 상태 입니다. p태그와 div, button 세 개의 요소만 사용하고 있고 각각 글씨, 상자, 버튼 속성을 가진 요소 입니다. 이 모든 요소에 그림자 효과가 사용 가능합니다. 다음은 CSS 스타일 입니다. 글씨에 그림자를 만드려면 text-shadow를, 박스나 버튼에 그림자 효과를 연출하려면 box-shadow 요소를 사용하시면 됩니다. 그 뒤에 오는 숫자와 색상을 지정하시면 되며 box-shadow의 경우는 숫자가 ..