소소한 Web창고

안녕하세요. 뜨란입니다. Poster 스킨 자체가 심플함을 살리면서 깔끔하게 잘 만들어진 스킨이라 뭔가 복잡한 기능을 추가하거나 대대적으로 뜯어고치는 일이 없는 듯 해요. 그래서 조금씩 아쉬운 부분을 손 본다고 하는것 마저 HTML 태그를 몇 가지 추가하거나 CSS를 조금 수정하는 정도의 간단한 작업이 다였습니다. 지금까지 수정한 내용들도 대부분 위의 수정작업 범위 내에서 이루어졌지요. 2019/02/21 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 2 (사이드 메뉴 버튼 고정)2019/02/20 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-2 (고정 배경 이미지 추가)2019/02/19 - [Web 이야기/HTML&CSS] - 티스토리 P..

앞서서 고정된 이미지를 각각 왼쪽과 오른쪽에 하나씩 추가하는 내용을 다뤄봤습니다. 2019/02/19 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-1 (고정 배경 이미지 넣기)2019/02/20 - [Web 이야기/HTML&CSS] - 티스토리 Poster 스킨 꾸미기 1-2 (고정 배경 이미지 추가) 이번에는 가장 아쉬웠던 헤더 부분의 메뉴 버튼을 고정하는 과정을 정리해보겠습니다. 비슷한 방법이지만 이번에는 웹에서 테스트 후 실제 코드를 바꾸는 과정까지 같이 포함시켜 봅니다. 주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다. * * * * * * 크롬 브라우저에서 태그 확인 및 변경 테스트 후 티스토리 코드 수정하기 지금 소개..

이전에 HTML 틀고정하기 관련 포스팅을 한 적이 있었습니다. 이전글 링크:테이블 틀고정 CSS로 깔끔하게 고정하기 - HTML TABLE HEAD Fixed 이번 포스팅을 하기 위해 이전에 만들었던 소스를 편집해서 직접 iframe으로 호출해서 확인 해보았습니다. 세로방향은 깔끔하게 고정이 된 것을 확인할 수 있었습니다. 하지만 가로 방향으로 스크롤 하면 어떨까요? 아랫테이블이 쇼를 하던 말던 홀로 고고하게 멈춰 있는 헤더를 볼 수 있었습니다. 실제 작업할 때도 이 때문에 당시 테이블 고정 작업을 다시 진행했었는데요. 지금부터 어떻게 만들었는지 설명하겠습니다. * * * * * * 가로·세로 방향 스크롤 할때 깔끔하게 테이블 틀 고정하기 깔끔하게 테이블 헤더의 틀고정을 하기 위해서는 iframe을 통한..

왼쪽에 고정 이미지를 하나 추가했었습니다만 왼쪽만 추가하는 것은 뭔가 아쉬워서 오른쪽에도 이미지를 하나더 추가해봤습니다. 이전글 링크:티스토리 Poster 스킨 꾸미기 1-1 (고정 배경 이미지 넣기) * * * * * * 메인화면에 고정된 이미지 하나 더 추가하기 추가하는 방법은 앞선 포스팅과 거의 동일합니다. 마지막에 CSS 수정할 때만 조금 다르게 진행되니 그 부분만 보셔도 될 것 같아요. 주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다. 1) 이미지 업로드 꾸미기 - 스킨편집 - HTML편집 - 파일업로드 순으로 찾아가서 자신이 올리고 싶은 이미지를 업로드 합니다. 2번째 이미지를 올리기 전에 이거저거 테스트하느라 파일 구성이 조금 바뀌었네요. 크게 의미..

방치해뒀던 블로그를 다시 끄적거리며 깔끔한 분위기의 Poster 스킨으로 교체해봤습니다. 바꾸고 보니 조금씩 아쉬운 부분이 있어 코드를 살짝 수정하는 중 입니다. 우선은 그 첫 번째 이야기 입니다. 메인화면에 고정된 이미지 추가하기 심플한게 마음에 들기도 하지만 저는 뭔가 허전해서 작은 캐릭터를 넣어봤습니다. PC버전에서 좌측 하단에 보이는 캐릭터 이미지입니다. 그럼 어떻게 추가했는지 설명 드릴게요. 주의!!! 실수로 코드가 꼬일수도 있으므로 태그 작업 전에 항상 백업부터 해두시길 권합니다. 1) 이미지 업로드 꾸미기 - 스킨편집 - HTML편집 - 파일업로드 순으로 찾아가서 자신이 올리고 싶은 이미지를 업로드 합니다. (용량이 크면 그만큼 무거워지므로 이미지는 가급적 저용량의 이미지를 사용하는 것을 권..

현재 사용 중인 스킨은 Readiz님의 패스트부트 (FastBoot 1.6.2) 스킨입니다.레이아웃을 비롯한 여러가지 요소들이 꽤 마음에 들어서 사용중인데요. 무심결에 블로그 최상단의 헤더 영역 블로그 이름을 눌렀다가 홈바로가기 기능이 없길래 기능을 추가해봤습니다.텍스트로고라고 표현하면 될까요?아무튼 이게 스크롤을 조금 내려서 플로팅 상태가 되면 링크 기능이 활성화되는데 기본상태에서는 없더군요. 그래서 텍스트로고를 클릭하면 홈화면으로 가도록 하고자 소스를 조금 수정해봤습니다. ◇ ◇ ◇ ◇ ◇ ◇ ◇ 블로그관리 → 꾸미기 → 스킨편집 → HTML편집 → HTML로 가서 를 찾아줍니다. 변수로 선언되어 여러 위치에서 사용되기 때문에 주변의 클래스와 요소들을 잘 확인해야 합니다. 위치를 확인했다면 아래와 같..

일전에 PDF viewer를 찾다가 PDF.js를 찾은 적이 있다. 브라우저에서 PDF 보기를 지원하지 않거나 통일된 UI로 쓰기에 좋겠다고 했었다. 바로가기: PDF.js 간단한 사용법 - web상에서 pdf파일 보기 여기에서 PDF파일을 하나만 사용한다면 그럭저럭 쓸만은 했는데 조금 더 욕심을 부려 복수 이상의 파일을 선택해서 보는 기능을 추가하고 싶었다. 정확히는 드롭다운 리스트를 만들어서 선택한 PDF를 출력해주는 기능이었는데 혹시나 하고 찾아보니 역시나 있었다. PDFObject라는 것으로 jQuery, JavaScript등 각각의 언어와 연계하여 PDF viewer를 제어할 수 있게 해주는 스크립트 파일이다. PDF를 특정 페이지부터 열리도록 하거나 브라우저에서 PDF view를 지원하는지 여..

본 포스트는 틀고정 작업을 하기 위해 시행착오를 겪으며 만들었던 포스트입니다. 보다 깔끔하게 만들 수 있도록 새로운 글을 작성하였으니 깔끔하게 동작하는 틀고정을 원하신다면 아래 링크의 글을 확인하시기 바랍니다. 다음글 링크:HTML 테이블 헤더 틀고정 - 가로 스크롤 고정 (HTML TABLE HEAD Fixed) * * * * * * DB에서 불러오는 데이터 테이블의 메뉴 필드를 고정시켜 달라는 요청이 있어 고정을 시도해봤는데 생각처럼 잘 되지 않았다. 정확히는 필드가 고정은 되는데 고정되어 있는 부분과 본문의 너비가 틀어지면서 원하는대로 깔끔한 고정이 이루어지지 않았다. 수 차례 시도 끝에 CSS만으로 깔끔하게 메뉴바를 틀고정하는 소스를 짜낼 수 있었다. 해결 과정을 및 이해를 돕고자 간단한 테이블을..

티스토리에 포스팅을 하기로 하면서 우선적으로 신경 쓴 것은 본문에 나타나는 소스코드를 얼마나 깔끔하고, 보기좋게 표현하는가였다. 초보 개발자로서 소스코드 검색을 할 때 조금만 더 깔끔하고 보기 좋았으면 하는 아쉬움이 컸기 때문이다. 다짐한대로 깔끔하게 표현하기 위해 검색을 통해 처음 접한 것은 SyntaxHighlighter(바로가기 클릭) 이라는 플러그인이었다. 티스토리 내에 적용하기 위해서 별도의 소스파일들을 업로드하고, 작성해서 올리긴 했는데 뭔가 살짝 아쉬운 마음이 들었다. 모바일 어플내에서는 소스코드가 깔끔하게 표현되지 않고, html효과가 적용되어버리는 이슈도 있고해서 다시 찾아다녔다. 그렇게 해서 Color Scripter이라는 사이트를 알게 되었다. 별도의 플러그인 없이 깔끔하게 꾸밀 수 ..

PDF파일을 웹상에서 볼 수 있도록 만들기 위해 pdf 뷰어를 찾아다녔다. 각 브라우저별로 PDF 뷰어를 지원하기 때문에 그냥 띄워도 되긴 하지만 뭐랄까 공통된 UI와 조금 더 다양한 기능들을 지원하는 걸 필요로 해서... 찾게 되었다. 찾다보니 PHP기반의 뷰어도 있고, 뭔가 여러가지 뷰어들이 있었는데 개인적으로 그나마 적용하기 가장 깔끔하고 쉬워보이는 PDF.js 를 사용하기로 했다. (무언가 이름부터도 이보다 더 직관적일 수 없을 것 같은 느낌.) 주소는: https://mozilla.github.io/pdf.js/ 파일을 다운받아서 보면 아래와 같이 구성되어 있다. web폴더로 들어가면 실제 호출하게될 viewer.html파일 및 기타 파일들을 볼 수 있다. 사용법을 찾아보니 굳이 커스터마이징할 ..