제 블로그 상단을 대충 손보았는데 아무래도 블로그 제목부분이 뭔가 허전하고 부조화스럽습니다. 이번 포스팅에서는 검정색인 블로그 이름을 상단바의 색과 동일하게 맞춰보도록 하겠습니다. 먼저 티스토리 관리자 화면의 스킨편집을 누른뒤 HTML편집창이 열리게 한뒤 CSS 탭으로 갑니다. 이과정은 우리가 FastBoot 스킨 상단부분을 수정하면서 항상 해왔던 과정이라 어렵지 않을 것입니다. 예상하시는 대로 다음 과정은 열린 CSS창에서 Ctrl + F를 눌러 검색창을 엽니다. 검색창에 #desktopNav 라고 칩니다. 블로그 제목색상을 바꾸기전에 주위의 글씨색들도 어차피 바꾸어야 하니 우측의 아이콘있는 메뉴들 먼저 바꾸어 보겠습니다. 첫번째 네모는블로그 제목이 들어가는 부분의 바탕색 설정이고, 두번째 네모는 블로..
티스토리 블로그를 시작한지 얼마 되지 않으신 분들이 겪는 문제중의 하나가 카테고리 한개에 여러개의 페이지들이 축적되었는데 막상 사이드 바에서 클릭하면 그냥 해당카테고리의 글들이 쭉 붙어 나온다는거죠. 일일이 스크롤해서 페이지를 다 봐야 내가 원하는페이지가 어디 있는지 보이는데다 페이지들 로딩과정에서 버벅임이 발생하고 화면출력도 미세하게 느려지는 느낌이 듭니다. 그이유는 FastBoot스킨 티에디션의 경우 기본설정이 글목록형태가 내용만 보게 되어 있어서 블로그 사용자가 설정을 직접 바꾸기 전까진 이런형태가 계속되는 것입니다. 이제 이 문제를 해결해 보도록 하겠습니다. 스킨편집을 누르면 나오는 우측 HTML편집창의 하단에 보면 기본설정이 있는데 여기서 바꾸어 주어야 합니다. 시스템 리소스를 잡아먹는거나 구독..
예전 포스팅에서 FastBoot스킨 사이드바에 구글 검색창을 넣어본적이 있습니다. 구글검색창 넣기 http://itfix.tistory.com/21 이번시간에는 구글검색창과 나란히 위치할 구글 번역창을 사이드바에 넣어보도록 하겠습니다. 아래의 구글번역기 설치 사이트로 이동합니다. https://translate.google.com/manager/website/ 100개 이상의 언어로 웹사이트 바로 번역할수 있는 Google의 강력한 자동 번역 기능을 웹사이트에 추가하세요. 무료 웹사이트 번역기 플러그인을 사용하면 쉽고 빠르게 전 세계 사용자와 만날 수 있습니다. 라고 자랑질하고 있는 구글 사이트를 만나실 수 있는데 좌측하단의 웹사이트에 지금추가 버튼을 눌러 주세요. 그럼 위와 같은 화면의 페이지가 나오는..
작업을 하다보니 밑에서 부터 위로 올라가게 되네요. 본문 글씨크기를 키우다보니 본문제목크기도 키우고, 제목색상을 바꾸다 보니 상단바 색상도 바꿔야 할것같아서 여기까지 오게 되네요. 위의 제 블로그 상단부 빨간박스부분이 뭔가 좀 부조화스럽습니다. 색상이라도 바꿔줘야 할것 같습니다. 방법은 역시나 추측하시는 대로 본문수정할때와 같습니다. 티스토리 HTML편집에서 CSS탭으로 가서 Ctrl F 찿기를 눌러줍니다. 검색창에 #SecondNavWrap 라고 치고 엔터를 칩니다. 대략 1000에서 1100대줄 사이쯤에 있습니다. 코드를 보시면 감이 오겠지만 밑줄이 배경색상이고, 나버지 부분들은 상단 고정바의 넓이 등을 설정하는 부분입니다. 상단바의 두께까지 손대보실 분들은 여기서 설정을 바꾸어 주시면 되겠습니다. ..
이전 포스팅에서 본문내용의 글꼴크기를 키우고, 본문 포스팅 제목 글꼴의 크기도 키워봤습니다. 두가지 모두 함께 작업하셨다면 아마도 본문 포스팅 제목바의 컬러나 제목글꼴 색상 등을 어떻게 바꿀지 대충 감이 오실것입니댜. FastBoot스킨 본문 글꼴 키우기 https://itfix.tistory.com/31 FastBoot스킨 본문 제목 키우기 https://itfix.tistory.com/32 두번의 포스팅에서 모두 우리는 CSS탭으로 찿아가서 h.title을 찿아낸뒤 그부분에서 작업을 했습니다. 이번포스팅의 작업도 마찬가지입니다. 먼저 티스토리 HTML편집페이지로 가서 CSS탭을 누른 다음 Ctrl + F를 하여 h.title를 검색한뒤 그위치로 찿아갑니다. 그러면 title color와 backgro..
FastBoot스킨의 본문제목 폰트크기 바꾸기는 바로 전에 포스팅했던 본문내용 글꼴키우기랑 방법이 똑갑습니다. 당연한 이야기겠지만 단지 css태그에서 설정하는 부분이 각각 서로 다른 곳에 있기 때문에 변경하는 위치만 다를 뿐입니다. FastBoot스킨 본문 내용 폰트크기 바꾸기 -> http://itfix.tistory.com/31 자 이제 본문 글꼴크기 수정시에 했던 것처럼 HTML편집창으로 간뒤 CSS탭을 눌러줍니다. 그런다음 Ctrl + F를 이용해 검색창을 열어 h3.title 라고 입력한뒤 엔터키를 누릅니다. 기본이 20px로 설정되어 있는 것이 보이는데 본문 폰트 크기를 키우셨다면 본문제목의 크기도 미관상 어울리게 적당히 키워줘야 하겠습니다. 적당한 숫자를 더해가며 실제 보여지는 페이지를 새로..
FastBoot 반응형 스킨의 기본 본문 폰트는 12px로 요즘 블로그들의 추세에 비하면 다소 작고 답답한 감이 없지 않아 있습니다. 물론 모바일에서는 좋아보이는 편입니다. 단지 pc버전의 경우 너무 작아보여서 가독성이 떨어진다는 지적이 있습니다. 오늘은 FastBoot 스킨의 폰트크기를 일괄 적용하여 크게 키워보는 작업을 하겠습니다. 티스토리 블로그 관리창의 HTML 편집 페이지로 가십시요. 그다음 CSS탭을 클릭한뒤 Ctrl + F 를 눌러 검색창을 띠우고 post-body-font-size 라고 입력합니다. 주의해야 할 점은 HTML탭이 아니라 CSS탭이라는 점입니다. 메모장에 붙여넣기 해놓고 드래그한뒤 찿기창에 Ctrl + V 하시면 좀 쉽습니다. 그러면 해당 소스코드가 있는 곳이 찿아지는데 기본..
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어입니다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있습니다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있습니다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었습니다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문(syntax)이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에 바탕을 뒀기 때문이고, ..
CSS (Cascading Style Sheets) 는 마크 업 언어로 작성된 문서의 표현 의미 (설명 및 형식)를 설명하는 데 사용되는 스타일 시트 언어입니다. 가장 일반적인 응용 프로그램은 HTML 및 XHTML로 작성된 웹 페이지를 스타일링하는 것이지만 일반 XML, SVG 및 XUL을 비롯한 모든 종류의 XML 문서에도 적용 할 수 있습니다. CSS는 레이아웃, 색상 및 글꼴과 같은 요소를 비롯하여 문서 프리젠 테이션에서 HTML 또는 유사한 마크 업 언어로 작성된 문서 컨텐트를 분리 할 수 있도록 주로 설계되었습니다. 이러한 분리는 컨텐츠 접근성을 향상시키고, 프리젠 테이션 특성의 사양을보다 융통성있게 제어하고, 여러 페이지가 포맷을 공유 할 수 있도록하며, 테이블없는 웹 디자인을 허용함으로..
font 태그는 이사이의 폰트들이 적용받게 됨 로 나타내며 글꼴의 크기, 색깔, 글자체등을 지정할때 font의 앞태그 에 옵션을 추가하여 사용합니다. 는 폰트의 색상, 는 폰트의 크기를 그리고 는 폰트의 글꼴종류를 지정한 글꼴로 바꾸라는 소스명령어 입니다. 1. font color font color는 직접 white, black, green, yellow, blue 등등의 이름을 쌍따옴표 부분에 입력하여 나타낼수 있습니다. 또한 직접 입력하지 않고 색상팔레트의 색상코드표를 참조하여 그 코드를 직접입력하여 지정할 수도 있습니다. 16진수의 색상팔레트 코드표를 참조하여 입력할 경우 그 형식은 #000000 과 같이 샵뒤에 6자리가 16진수 코드가 들어가게됨으로써 색상을 표현합니다. 아래는 네이버에 있는 색..
오늘은 마키(marquee)태그에 대해서 배워보겠습니다. 마키태그는 다양한 칼러의 바탕색에 역시 다양한 칼러의 글씨가 지나가게 만드는 다이내믹한 태그입니다. 먼저 당양하게 중간에 마키소스만 직접 넣어서 저장은 htm파일로 바꿔서 확인해볼수 있게 텍스트 문서를 첨부하였습니다. 다운로드 받아서 가운데 마키태그만 다양하게 삽입해보고 저장후 htm문서 새로고침을 통해 변화를 확인해 보시기 바랍니다. 마키태그 속성 명령어들 bgcolor=[색상] // 배경색상을 설정 합니다 width=400 height=300 // 가로, 세로 크기를 설정 합니다 direction="left[right|up|down]" // 스크롤 방향을 설정 합니다 behavior=scroll[slide|alternate] // 움직임 속성을..
보통 집에는 서랍이 부착되어 있는 물건들이 서너개 이상씩은 어느집이나 다 있게 마련입니다. 그런데 서랍이 달려있는 가구들의 가장 취약한 부분이 바로 서랍의 하단부, 얇은 베니어 합판입니다. 처음 1-2년은 보통 잘 버텨주다 시간이 흐를수록 무게를 이기지 못하고 조금씩 휘어지다 결국은 너덜너덜해 지지요. 여러분은 이럴때 어떻게 하시나요? 버리자니 아깝고 피스나 나사못 또는 보통 원래 구입할때처럼 타카를 박아보려해도 잘 안되기 십상입니다. 그래서 저도 여러가지 시도를 하다 가장 괜찮고 나름 확실하게 오래가는 방법을 공유해 보고자 합니다. 문제를 일으키는 대부분의 가구들은 아래와 같은 서랍이 달린 물건들이죠. 서랍이 오래 사용하다보면 아래부분이 휘어져 결국 홈에서 빠진 밑부분 합판이 문제를 일으킵니다. 서랍 ..
이번 포스팅은 HTML 문서내에서 흔히 또는 필수적으로 쓰이는 기본적인 태그 명령어들을 알아보도록 하겠습니다. 전시간에 인터넷 문서의 기본구조에 대해서 배웠습니다. 요렇게 배웠습니다. 그때 추가적으로 배운것이 줄바꿈 명령어와 와 같이 글자색을 바꾸는 명령어에 대해 알아봤었습니다. 태그는 모두 같은 의미를 가진것으로 가 있는데 어떤것을 쓰더라도 상관 없습니다. 단 그럴 일은 드물지만 아주 오래된 구형 브라우저로 웹서핑을 하실 분들을 위해 구형 브라우저와의 호환성까지 염두에 두셔야 할 분이라면 태그를 쓰시라고 권해드립니다. 참조 페이지 : https://code.i-harness.com/ko/q/1db33a 제 블로그 HTML소스를 들여다 보면 시작부분이 다음과 같습니다. 자 이제 기본적인 다른 태그 명령어..
HTML 파일은 메모장과 같은 텍스트 에디터로 만들 수 있고 나모 웹에디터나 드림위버, RedActor, Ckeditor 등과 같은 위지윅(WYSIWYG) 에디터로도 만들 수 있습니다. 텍스트 에디터는 HTML 태그를 입력하면서 편집을 해야 하는 반면 위지윅 에디터는 웹브라우저상에서 보여지는 형태로 편집이 가능하기에 보다 직관적인 작업이 가능합니다. 즉 텍스트 에디터는 메모장을 이용해 직접 소스코드를 수정해가며 결과물을 봐가면서 제작하는것과 같은 방식을 말합니다. 텍스트 에디터로는 에디트 플러스, 아크로 에디터, 크림슨 에디터, 노트패드 ++, 비주얼 스튜디오 코드 등이 있습니다. “위지위그(WYSIWYG: What You See Is What You Get, “보는 대로 얻는다”)는 문서 편집 과정에서..