IT

티스토리 북클럽 스킨 태그 잘림 수정하기

FastBoot 스킨에서 북클럽(Book Club) 스킨으로 변경을 하고 구글 서치콘솔에서 모바일 편리성 오류가 발생했습니다. 오류는 2가지로클릭할 수 있는 요소가 서로 너무 가까움과콘텐츠 폭이 화면 폭보다 넓음입니다. 먼저 의심이 가는 것으로는 태그 부분이 짤려서 보이는 경우가 발생하더군요. 스마트폰 환경으로 보면 아래처럼 태그가 잘리는 부분이 발생합니다. 아무래도 짤려서 보이다 보니 클릭하기 어려울 수도 있고 폭이 콘텐츠를 넘어가기도 합니다. 그래서 CSS를 수정했습니다. 수정 방법을 보면 스킨 편집 -> html편집->CSS로...

엑셀 VBA CSV파일 출력 UTF-8설정 BOM 지정 안하기 소스 코드

엑셀 VBA 매크로로 CSV파일을 출력할때 문자 설정을 하지 않아 글자가 깨지는 경우가 있습니다. 이러한 경우 CSV파일을 저장할 때에 문자 코드를 UTF-8로 지정해줘야 합니다. 그리고 BOM은 지정하지 않도록 하겠습니다. 출력 형식 ・구분자 콤마(,) ・문자 코드 UTF-8 ・BOM 지정 안함 Sub CSV_UTF8() Dim fileDate As String Dim maxRow As Long Dim maxCol As Long Dim iCount As Long Dim jCount As Long Dim stream Dim stre...

엑셀 VBA CSV파일 출력 매크로 만들기 소스 코드

엑셀 VBA 매크로로 CSV파일을 출력하는 방법을 알아보겠습니다. 소스 코드에 간단하게 주석을 달아놨습니다. 따로 소스 코드 설명은하지 않도록 하겠습니다. 출력 형식의 구분자는 콤마(,)로 지정하였습니다. 문자 코드는 따로 지정하지 않았습니다. 문자 코드를 UTF-8로 지정한 소스 코드는 다른 포스팅에 올리도록 하겠습니다. Sub CSV() Dim fileDate As String Dim maxRow As Long Dim maxCol As Long Dim iCount As Long Dim jCount As Long Dim strea...

Datatables 옵션 항목 위치 변경 하기

데이터테이블즈는 간편하게 표를 만들 수 있어 많이 이용합니다. 다양한 옵션 기능도 지원하기 때문에 편리하기도 하지만, 위치를 변경하고 싶은 경우 원하는대로 되지 않는 경우가 있습니다. 스크립트에dom과css를 설정해서 옵션 항목 위치를 변경하는 방법을 보겠습니다. 샘플 데이터를 먼저 준비하겠습니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=" <script src=" <script> jQuery(function...

Datatables 금액 단위 표시 설정 방법

데이터테이블즈를 사용해 표를 작성하는 경우 숫자 데이터를 표시하는 경우가 있습니다. 단순한 숫자가 아닌 금액일 경우 3자리 콤마나 금액 단위를 표시하고 싶은 경우도 있습니다. currency 플러그인을 사용해서도 가능하지만 Datatables에 있는 number를 사용해서 기능을 추가하는 방법을 보겠습니다. 먼저 샘플 데이터를 준비하겠습니다. <!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href=" <...

DataTables 사용법 및 예제 jQuery JSON

DataTables는 HTML의 <table>을 데이터 그리드 형식으로 사용하기 위한 라이브러리입니다. 장점은 다음과 같습니다. ○표 <table>에 다음과 같은 기능을 빠르게 구현·추가할 수 있다. 표시 건수 제어 기능 페이징 기능 정렬 기능 필터 기능 스크롤 기능 ○서버에서 테이터(JSON)를 받아 표시할 수 있다. ○표 디자인이 깔끔하다.(Bootstrap 디자인에도 맞출 수 있음) 라이센스는 MIT이고, 사용하기 위해서는 jQuery가 필요합니다. DataTables의 기본적인 사용방법을 설명하겠습니다. 설명 환경 DataT...

CSS3 animation 속성과 @keyframes 애니메이션 효과

animation 속성과 @keyframes를 사용하여 CSS 만으로 애니메이션 효과를 만들 수 있습니다. 애니메이션 효과란 움직이는 이미지라고 생각하면 됩니다. 먼저@keyframes를 살펴보겠습니다. @keyframes @keyframes는 애니메이션의 시작부터 종료 부분까지 어떠한 동작을 할 것인지 지정할 수 있는CSS문법입니다. @keyframes는 작성방법은 아래와 같습니다. @keyframes 이름 { 0% { CSS 속성: 값; } 100% { CSS 속성: 값; } } @keyframes뒤에 사용할 애니메이션 이름을 ...

HTML CSS 여백 설정 margin, padding, border 사용 방법

HTML에서 여백을 설정하는 방법을 알아보겠습니다. 여백을 설정하기 위해서는 margin, padding 또는 border를 사용해 여백을 지정할 수 있습니다. margin, padding, border 살펴보기 CSS에 입문해 막히는 부분 중 하나가 margin과 pdding의 차이입니다. magring은 요소의 외부 여백이고, padding은 요소의 내부 여백입니다. border는 이름대로 요소를 감싸는 틀입니다. <p> 요소에 class를 부여하고 배경색을 변경해서 확인해 보도록 하겠습니다. <!DOCTYPE html> <ht...

HTML CSS 문자열 떨어뜨리기 float clearfix 설명 예제

HTML에서 문자열을 작성하다보면 문자열이 붙는 경우가 생깁니다. 의도하지 않게 문자열이 붙는 경우 대응 하는 방법을 알아보겠습니다. float 뒤의 요소가 붙어 버렸다? CSS 작성을 inline과 float를 사용한 방법으로 준비를 합니다. @charset="UTF-8"; h1 { color : #cc0033; font-size : 24px; text-align : center; } p { color: #666; font-size : 18px; line-height : 26px; text-align : left; } a { te...

다음 페이지로

1 … 8 9 10 … 56