본문 바로가기
반응형

2018/12

CSS 텍스트 첫글, 첫줄 강조하기 블로그나 사이트를 운영하면서 제목이나 본문의 첫 글자 또는 첫 줄에 별도의 속성을 부여하여 강조나 디자인적인 효과를 낼 수 있는데요. 웹문서를 작성하면서 해당 문서의 글 색상, 크기 등의 설정을 변경하여 문서 특성을 살릴 수도 있지만 CSS 적용하여 일괄적으로 효과 적용이 가능합니다. :first-line { 속성값 } 글 중에서 첫 글에 별도로 속성을 부여할 수 있습니다. 티스토리의 경우 본문 첫 글자를 강조한 싶으면 스킨마다 다르지만 본문 내용 치환자를 감싸는 태그 클래스가 article일 경우 CSS에 .article:first-line { 속성값 }을 적용하여 첫 글을 강조할 수 있습니다. 첫글 강조하기 첫글 강조하기 보통 제목이나 본문 첫 글에 강조를 위한 폰트 크기와 색상을 변경하는 방식으로 .. 2018. 12. 31.
티스토리 공유 버튼 만들기 티스토리에서 제공하는 포트폴리오 스킨에 SNS 글 보내기 코드를 이용하여 사용 중인 스킨에 적용해 봤습니다. 이미지 처럼 페이스북, 트위터, 카카오 스토리, 카카오톡 공유버튼 만들기가 가능합니다. 공유 버튼 기능에 필수적으로 들어가는 코드들인듯한 것만 추려 봤는데, 적용하는 방법으로는 두 가지가 있는데 기본적으로 스킨의 각 위치에 삽입하는 방법과 티스토리 플러그인을 이용하는 방법입니다. 스킨을 수정하여 적용하는 방법 외부 문서를 불러오는 링크 태그는 HTML 사이에 넣어줍니다. icomoon.css의 역할은 각각의 아이콘을 만들어 주는데 신기하게 아이콘 이미지가 아닌 코드를 이용하여 만들어 표현합니다. 페이스북 트위터 카카오스토리 카카오톡 본문을 공유 버튼을 노출할 코드로 HTML 문서 내에 치환자를 찾.. 2018. 12. 30.
티스토리 Portfolio 스킨 SNS 공유버튼 만들기 티스토리가 제공하는 방응형 포트폴리오 스킨 본문 하단에 SNS 공유 버튼을 타 사이트나 블로그의 등에서 소스코드를 받아 복사할 필요 없이 HTML 편집만 조금 해주면 생성할 수 있습니다. 관리 > 꾸미기 > 스킨 편집 모드에서 상단 오른쪽 프리뷰 이미지 아래 'HTML 편집'을 눌러 코드를 수정할 수 있습니다. HTML 편집 모드에서 'Ctrl + F' 기능으로 'list_share' 문구를 이용하여 찾을 수 있으며 449 라인부터 454 라인까지 공유 코드로 주석 처리되어 있어 기본적으로는 노출이 되지 않습니다. 페이스북 트위터 카카오스토리 카카오톡 처리가 되면 코드가 노출이 되지 않기 때문에 웹상에 노출을 위해서는 제거를 해줘야 합니다. 붙은 것도 지워 주면 코드가 활성화되면서 속성 고유의 색으로 바.. 2018. 12. 28.
텍스트 세로 중앙 정렬하는 방법 CSS DIV, SPAN 태그 등의 텍스트를 수직 가운데로 정열 하는 다양한 방법이 있는데요. 텍스트는 기본적으로 왼쪽 상단에 위치하게 되고 가로 정열의 경우에는 text-align 을 이용하여 중앙이든 오른쪽 정열이든 간편하게 가능하지만 세로의 경우에는 이와 다른 방법으로 적용하게 됩니다. TEXT 이미지 옆에 문구를 이미지 세로 크기 기준으로 중앙 정렬을 할 때는 이미지 높이 맞는 line-height 값을 주거나 padding 값 지정하면 어렵지 않게 적용할 수이지만, 텍스트가 한 줄이나 두 줄 등으로 지정되어 있지 않고 상황에 따라 변경되는 경우에는 vertical-align: middle로 유동성이 있는 요소에도 중앙에 오게 정열이 가능합니다. line-height: value TEXT TEXT pad.. 2018. 12. 24.
티스토리 사이드바 인기글 목록 추가하기 티스토리 블로그 사이드바에 조회 수 높은 순으로 글 목록을 적용할 수 있는 치환자가 추가되었습니다. 적용 방식은 최신 글 목록과 동일한 방식으로 전용 치환자를 사용하여 줍니다. : 인기글을 반복 출력합니다 : 글 주소 : 글 제목 : 글 댓글 갯수 : 작성자 이름 (*팀블로그용 치환자) : 글 발행시간 : 대표 이미지가 있는 경우 치환 : 대표 이미지 : 카테고리 이름 : 카테고리 리스트 url 인기글에 사용할 수 있는 치환자 목록입니다. 썸네일 치환자가 추가되면서 인기글에서도 썸네일 노출이 가능합니다. 이 블로그 인기글 기본 제공되는 샘플 코드로 ... 태그 사이에 추가하여 주면 사이드바에 인기글 목록이 추가 되게 됩니다. 스타일 코드 샘플은 제공을 하지 않기 때문에 직접 짜야 하는데 사용중인 최신 글.. 2018. 12. 21.
티스토리 블로그 사이드바 썸네일 치환자 적용 티스토리가 개편을 하면서 다양한 스킨과 추가적으로 사용가는 한 치환자들이 많이 추가되었는데요. 요즘은 사이드바를 사용하지 않는 1단 형 모바일 최적화된 신규 스킨들이 많이 사용하는데 개인적으로 PC 환경에서는 사이드바를 추구하는 편이라 고수하고 있는데 치환자를 지원하지 않을 때에도 스크립트를 추가하는 방법 등으로 적용은 가능하였지만 자체적으로 최근 글 목록에 섬네일을 사용할 수 있는 치환자가 추가되어 간편하게 적용을 할 수 있게 되었네요. 최근에 올라온 글 [##_rctps_rep_title_##] [##_rctps_rep_rp_cnt_##] [##_rctps_rep_category_##] 매뉴얼에 있는 기본 적용 HTML 코드로 사이드바에서 최근 등록된 글 목록을 보여주는 기능을 하는 기존 코드에 10.. 2018. 12. 14.
윈도우 10 인터넷 익스플로러 11 사용하기 윈도우 10을 사용하면 기본 프로그램으로 마이크로 엣지가 설정되어있으며 바로가기등의 아이콘도 엣지 브라우저만을 노출하고 있지만 인터넷 익스플로러 11버전도 기본 포함하기 있기 때문에 사용이 가능합니다. 검색기능을 이용하는 방법으로 작업표시줄의 돋보기 아이콘을 선택하면 검색 기능을 사용하여 응용프로그램 등을 찾을 수 있는데 'internet explorer' 프로그램명을 영어로 입력하면 ie 11 브라우저가 검색되어 이를 선택하여 사용이 가능해집니다. 이름 전체를 입력하지 않고 일부만 입력하여도 검색이 되며 검색 아이콘이 없을 땐 'win + S' 단축키를 이용하여 검색이 가능합니다. 사용이 편하도록 바탕화면 등에 바로 가기를 등록해놓지는 않았지만 숨겨놓지는 않았지 때문에 시작 메뉴에서 설치된 그룹을 직접.. 2018. 12. 12.
아이폰 벨소리 넣는법 - 아이튠즈 안드로이드 폰에 비해서 아이폰은 벨 소리 바꾸기가 다소 번거로운 면이 있는데요. 여타 프로그램 등을 사용하지 않고 아이튠즈 만을 이용하여 아이폰에 벨 소리를 만들어 넣는 방법입니다. 벨소리로 사용한 싶은 MP3 파일을 우 클릭하여 iTunes에 추가하여 줍니다. 아이튠즈가 실행되면 추가된 "음악 > 노래" 탭에서 음원을 확인할 수 있고 목록에 추가되어 있는 곡일 경우에는 추가 과정 없이 다음 과정으로 넘어가면 됩니다. 사용하고 싶은 파일을 선택하고 우 클릭하여 메뉴에서 중간 부분의 '노래 정보'를 선택하여 줍니다. 정보창 항목 중에 '옵션'을 선택하고 벨 소리로 사용할 구간을 지정해 줍니다. 제가 알기로는 40초 이하로 만 사용 가능한 걸로 알고 있는데 시작 지점과 중단 지점을 재생시간을 40초 내로 설.. 2018. 12. 3.
물병을 사용하는 마모스 usb 미니 가습기 겨울철이 되면 건조한 날씨 탓에 가습기를 많이들 사용하는데 생수병을 이용하여 간편하게 사용할 수 있는 작고 저렴한 MMS-MH300V 가습기입니다 인터넷으로 2만원 내외로 부담없이 구입할 수가 있고 화이트/핑크/블랙 3가지 색상이 있으며 본 제품은 검은색 제품입니다. 구성품으로는 원뿔형 가습기 본체와 마이크로 5핀 케이블, 설명가 있으며 설명서에는 사용법이 상세하게 잘 설명이 되어있습니다. 색상을 지정하지 않고 기본으로 주문하였는데 검은색이라 지문 엄청 묻어납니다. 분사구 반대쪽에 케이블 연결단자에 있는데 전용 케이블이 아닌 마이크로 5핀을 사용하기 때문에 기존 스마트폰에 케이블을 공유가 가능하고 PC에 연결하거나 충전기 등의 USB 단자에 연결하여 간편하게 사용할 수 있습니다. 본체 물어 부어 사용하는.. 2018. 12. 2.
반응형