html10 티스토리 블로그에 드롭다운 메뉴 만드는 방법 깃허브(GitHub)에 올라온 James Johnson의 짧은 코드를 사용해 간단하게 티스토리 블로그에 드롭다운 메뉴를 넣을 수 있다. 1. HTML 코드 수정 티스토리 블로그 관리에서 스킨 편집 > html 편집 > html로 들어가서 블로그메뉴() 부분 코드를 다음 코드로 변경한다. 블로그메뉴가 없는 스킨이라면 적당한 자리( 앞에 추가하면 된다. 끝. 수동 방식으로 드롭다운 메뉴가 완성된다. 열린노트/IT·SW·디자인 마우스를 올리면 이미지 확대되게 하기(CSS) 본문 이미지나 썸네일 이미지에 마우스를 올렸을 때 이미지가 확대되어 보이게 하는 효과를 간단한 CSS로 구현할 수 있다. 이미지에 생동감을 줄 수 있고 페이지 로딩 속도에 큰 영향도 주지 않아서 가볍게 쓸 수 있다. HTML 코드 이미지에 클래스네임(thumb)을 주고, 이걸 img-wrap이라는 div와 box라는 div로 감싼 형태이다. CSS 코드 이미지를 가로 300px으로 출력하되 이미지에 마우스오버하면 가로세로 각각 1.2배 확대가 0.5초에 걸쳐 일어나고, 마우스를 떼면 0.3초에 걸쳐 다시 원래 크기로 돌아가게 되도록 설정한 것이다. 샘플 예제 코드 다운로드 열린노트/IT·SW·디자인 티스토리 북클럽 스킨 슬라이더 자동으로 넘어가게 하기 티스토리 북클럽 스킨에서 메인 프로모션 배너, 커버 슬라이더(갤러리 1, 갤러리 2)는 기본 옵션이 멈춤이고, 좌우 등 버튼을 눌러야만 다음 배너나 썸네일로 넘어간다. 스킨 HTML에서 간단한 스크립트 코드를 추가하면 이 슬라이더들이 일정 시간마다 자동으로 넘어가게 할 수 있다. 지정한 시간마다 '다음' 버튼을 누른 것처럼 구현하는 방법이다. 마지막 배너나 썸네일까지 가면 자동으로 멈춘다. 아래 코드 중 원하는 것을 스킨 HTML 코드의 앞에 삽입하면 된다. 숫자는 넘어가는 시간 간격이다. 예컨대 '2500'이면 2.5초마다, '5000'이면 5초마다, '3000'이면 3초마다 넘어간다. 메인 프로모션 배너 슬라이더 자동으로 넘기는 코드 커버 - 갤러리1 슬라이더 자동으로 넘기는 코드 커버 - 갤러리.. 열린노트/IT·SW·디자인 티스토리 코드문법강조(코드입력기) 플러그인 글씨크기 조절하는 법 티스토리 블로그는 Syntax Highlight를 지원하기 때문에, 플러그인 중 '코드 문법 강조'를 사용하도록 설정하면 아래와 같이, 본문 입력 시 '코드블럭'을 선택해 html, css, java 등 다양한 코드를 쉽게 입력할 수 있다. 예전엔 prism 같은 별도의 코드입력기를 따로 썼어야 했는데, 오 뭔가 좋아졌다. 그런데 글씨가 너무 작고, 여백도 마음에 안 든다ㅠㅠ... 이럴 땐 간단하게 '스킨 편집'의 'CSS'에 코드를 추가해서 글씨 크기나 테두리, 여백 등을 조절할 수 있다. 아래와 같이 .hljs 클래스를 만들어 옵션을 설정하면 된다. .hljs { font-size:1.15em !important; line-height:1.4em !important; padding:10px 12px .. 열린노트/IT·SW·디자인 CSS Colors 속성을 색상 이름으로 간편하게 입력하기 여섯 자리의 복잡한 코드값 대신 색상값으로 간단하게 색을 사용할 수 있다. 가령 다음과 같이 배경색읕 'darkorange', 글자색을 'oldlace'로 해서 코드를 입력하면, 테스트입니다. 이렇게 나온다. 테스트입니다. 아래는 웹표준 140개 색상이름이다. 내가 쓰기 편하려고 올려두는 건 함정. 색상명 HEX 코드 색상 AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 C.. 열린노트/IT·SW·디자인 스크롤을 내리면 나타나는 '맨 위로 가기' 버튼 적용하기 PC나 태블릿 환경에서 가로로 나열돼 있는 구성요소들이, 모바일 환경에서는 세로로 쭉 이어지기 때문에 스크롤이 길어지기 일쑤이다. 그래서 '맨 위로 가기' 버튼을 만들어 넣기도 하고, 스크롤을 내려도 상단에 고정되는 기본 메뉴바를 마련하기도 한다. 여기서는 우선 티스토리 블로그를 기준으로, 가장 간단한 방법의 '맨 위로 가기' 버튼 적용 방법을 소개한다. 적용 소스 HTML(skin) 마크업 티스토리 블로그 관리자 모드로 접속해 skin.html에 다음 두 가지 소스를 넣어주어야 한다. 먼저 아래 코드를 와 사이에 삽입한다. 바로 앞에 넣는 것도 괜찮다. 이 코드는 'images/up-arrow-icon.png'라는 가로 55픽셀, 세로 55픽셀의 이미지를 '맨위로' 버튼으로 사용하겠다는 뜻이다. 그 다.. 열린노트/IT·SW·디자인 html의 기본 표(table) 코드 공유 지난번에 Table Generator를 소개한 적이 있다. 간단한 클릭 몇 번만으로 원하는 모양의 예쁜 테이블 코드를 자동으로 생성해 주는 사이트이다. http://www.tablesgenerator.com/ 그런데 막상 다양하고 예쁜 모양의 표를 만들어 쓰려니, 매번 포스팅할 때마다 코드를 가져오기가 너무 번거로웠다. 여러 가지 테이블을 미리 구비해 놓으면 좋겠지만, 너무 개수가 많아지면 나중에 너무 골치아파질 것 같다. 그래서 아주 단순한 모양의 표를 짜서 코드를 공유한다. 1px의 회색 테두리가 있고 셀 배경이 흰색인, 그냥 기본 표 코드이다. CSS에는 다음 코드를 추가해 준다. 혹시 제목줄을 쓸까 싶어서 th(첫째 줄) 속성에는 배경색과 별도의 테두리를 설정해 두었다. 개별 속성은 임의로 수정해.. 열린노트/IT·SW·디자인 다양한 형식의 예쁜 표(테이블)를 자동으로 만들어주는 사이트 CSS에 익숙해지면 페이지를 코딩하거나 블로그 게시물을 쓸 때 별로 막히지 않는데, 유독 테이블만 작성하려고 하면 굉장히 골치 아프다. 틀을 좀 정해 놓고 싶어도 하드 코딩만으로는 적당하고 예쁜 테이블 속성을 완성하는 데 시간이 많이 걸리고 디자인 감각도 여간 필요한 게 아니다. 그래서 찾은 곳이 바로 Table Genetrator. 간단하게 예쁜 html(CSS) 테이블(table) 만들기 먼저 아래 사이트에 접속한다. http://www.tablesgenerator.com/ 가면 이렇게 쭉 종류별 테이블들이 구분돼 있다. LaTeX, HTML, Text, Markdown 등등... 원하는 형식을 찾아가자. 대부분은 HTML이 필요할 것 같고, Text Table도 경우에 따라 아주 쓸모가 많을 것 같.. 열린노트/IT·SW·디자인 티스토리나 웹사이트에 Font Awesome 글리프 아이콘 CSS 활용하기 지난 포스트에서 Font Awesome 4.3.0 설치와 사용법을 간단하게 소개했다. Font Awesome 설치 및 사용법 포스트 바로가기 위에서 설명한 방법은 HTML 등에서 마크업하는, 그러니까 일일이 입력해 주는 방법이다. 실제로 Font Awesome 홈페이지에 있는 'Examples'에서는 거의 이 방법들만을 위주로 소개하고 있다. 그런데 글리피콘의 진가는 개별 마크업에서 오는 게 아니라, CSS에서 온다. 일정한 class 네임을 가진 요소들의 앞이나 뒤에 이 글리프 아이콘들을 넣도록 설정함으로서 웹사이트와 블로그의 디자인을 더욱 깔끔하고 예쁘게 꾸밀 수 있는 것. 그 기본적인 원리와 방법을 소개한다. Font Awesome을 CSS에 활용해 보자 리스트 앞에 사용하기 Font Awesome.. 열린노트/IT·SW·디자인 엔티티 코드(Entity Code) 사용하기 : HTML에서 특수문자 코드 입력하는 방법 웹페이지상에서 다음과 같은 문자들을 본 적이 있을 것이다. 이런 문자를 '엔티티 코드(Entity Code)'라고 한다. & " HTML이나 XHTML 문서를 코딩할 때 특수 문자(참조 문자)를 써야 하는 경우에는 이러한 엔티티 코드 또는 엔티티 넘버로 변환해서 입력해야 한다. 변환하지 않고 특수 문자를 그대로 입력해 버리면 컴퓨터가 문서를 읽을 때 실제 문서 내용(contents)과 코드를 구분하기 못하는 문제가 발생하기 때문이다. 가령, 어떤 문서 내용에 꺽쇠 괄호 ' < '가 포함돼 있다면, 컴퓨터는 이 문서를 읽어들일 때 꺽쇠 괄호를 HTML 태그의 시작 기호로 받아들여 버린다. 또 큰따옴표 ' " '는 HTML 속성 값으로 인식될 수 있고, ' & '은 엔티티 기호의 시작으로 인식될 수 있다. .. 열린노트/IT·SW·디자인 이전 1 다음
