소소한 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로 가서 를 찾아줍니다. 변수로 선언되어 여러 위치에서 사용되기 때문에 주변의 클래스와 요소들을 잘 확인해야 합니다. 위치를 확인했다면 아래와 같..

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

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

지금 하고 있는 일, 배우고 있는 것들을 조금 더 즐겨가며 하고 싶다는 마음에 블로그를 기웃거렸다. 네이버와 티스토리 중에 고민을 하다가 티스토리를 선택하고 기세좋게 회원가입 버튼을 눌렀건만... 나를 처음 반겨준 것은 초대장 시스템이었다. 이건 뭐 아무나 받아주지 않더라. 마치 같이 학원 수업을 듣던 이성에게 고백하려고 마음 먹었는데 하필 그날부로 학원을 안나와서 시도조차 못해봤을 때와 같은... 아무튼 시작부터 김빠지는 상황. 하지만 마음 먹은거 뭐라도 해봐야겠다 싶어 무작정 찾아갔다. 초대장을 가지고 있다고 표시되는 블로거 몇몇분에게 찾아가서는... (그중에서도 활동일이 최신인 분들 위주로) 방명록에 이러저러해서 티스토리를 너무나 하고싶습니다. 초대장좀 주시면 감사하겠다는 정성어린 글을 남겨댔다. ..