반응형 티스토리 툭탁툭탁43 fontawesome 다운받아 이용하는 법 Font Awesome 다운받아 이용하는 법 지난 시간에는 font awesome을 인터넷 링크로 내려받아 사용하는 법을 알아보았어요. font awesome 사용법(웹 아이콘 이용하기) 오늘은 직접 다운 받아 서버에 올려 사용하는 방법을 알아보겠습니다. 1. 다음 페이지로 이동하여, Download 버튼을 누릅니다. http://fortawesome.github.io/Font-Awesome/ 2. 압축 파일을 풀면 font-awesome-4.3.0 폴더가 생깁니다. 하위 폴더는 다음과 같습니다. css- font-awesome font-awesome.min fonts-FontAwesome fontawesome-webfont fontawesome-webfont.eot fontawesome-webfont... 2015. 4. 9. font awesome 사용법(웹 아이콘 이용하기) Font awesome 사용법(웹 아이콘 이용하기) 지난 시간엔 부트스트랩을 이용하여 아이콘 넣는 법을 배워 보았어요. 부트스트랩 사용법 (glyphicons 아이콘 넣기) 오늘은 font awesome 을 이용할 텐데 font awesome은 아이콘으로 사용되는 웹폰트 중에서 가장 잘 알려져 있고, 특히 부트스트랩과도 함께 사용할 수 있습니다. 원래 부트스트랩 2.0 버전에서 아이콘(Glyphyicons)은 이미지 형식이었기에, 크기 조절이나, 색상 혹은 배경색 바꾸기가 되지 않았습니다. 이때 font awesome은 font 형식으로 제공했기에, 크기 조절, 색상, 배경색 바꾸기가 자유로웠습니다. 하지만 부트스트랩 3.0 버전부터는 아이콘을 font 형식으로 제공합니다. Font Awesome과 Gl.. 2015. 3. 20. 부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 사용법 (glyphicons 아이콘 넣기) 부트스트랩 참 많이도 들어보았는데, 정확히 무엇이고 어떻게 사용해야 할까요? 읽기만 하고는 도저히 이해가 가지 않아 직접 부트스트랩을 사용해 보기로 했어요. 그래서 오늘은 부트스트랩을 이용하여 메뉴 아이콘을 넣기를 해 볼 생각합니다. 이렇게 먼저 간단한 활용법을 배운 후에, 자세한 사용법을 이후 강좌에서 차차 살펴 볼까 해요. 일단 그래도 한 가지 알아두어야 할 것은... 부트스트랩(bootstrap)이란? 웹사이트를 만들 때 html, css, 자바스크립트 언어를 아는 사람은 직접 만들기도하고, 드림위버 같은 저작도구를 사용하기도 합니다. 부트스트랩도 일종의 웹사이트 저작 도구로(특히 반응형에 최적) htm과, css에 기반한 템플릿을 제공합니다. .. 2015. 3. 18. 웹사이트 운영자라면 알아야할 html, css 상식 웹사이트 운영자라면 알아야할 html, css 상식 크리스마스는 잘 보내셨나요? 저는 25일에 광명 이케아 갔다가 엄청 고생하고 왔습니다 ㅎㅎ 생각보다 가는 대중 교통 편이 너무 복잡하더라구요. 결국 택시 타고 갔는데, 입구에서 30~40분을 기다리고, 레스토랑에서 20분 정도 기다리고 나오면서 길 못찾아 헤매고, 건물 안은 사람들이 미어 터집니다. 그럼에도 가볼만은 했다고 생각은 하지만.... 다음엔 사람 없을 때 가고 싶네요. 며칠 남지 않은 12월, 사람들 많은 데 가서 고생하지 마시고, 조용하고 한적한 곳에서 지난 일을 관조하는 것도 좋을 것 같습니다. 오늘은 연말 결산으로, 지금까지 써온 글 중에 사이트(티스토리, 블로그, 까페 포함) 운영자라면 알아두어야 할 html, css 상식을 다루어 볼.. 2014. 12. 26. 블로그 개설 1주년을 맞이하여 블로그 개설 1주년을 맞이하여 (부제: 네이버 오픈캐스트 메인과 저품질 현상) 다음 주 25일이면 블로그 개설 1주년이 되는 날이네요. 작년 12월 25일에 왜 갑자기 블로그를 만들었는지 지금 생각하면 갸우뚱 한데...^^ 만들어 놓고 본격적으로 글을 쓴 것은 2개월 정도 지나서인 것 같아요. 그래도 개설일에 의미가 있으므로 이 날을 기념한 기록을 남겨두고 싶습니다. 티스토리 제목 변경사 제 블로그는 처음에 책이나 도서관 등 책 관련 리뷰와 정보를 전달할 목적으로 만들었습니다. 그래서 처음 제 티스토리 이름은 '고요한 책 한 권' 이었습니다. 아직도 오른쪽 사이드바에는 책 관련 메뉴가 맨 앞에 차지하고 있습니다. 지금은 이 메뉴에 들어가는 글의 수가 손에 꼽을 정도라 무슨 잔해 같은 느낌이 들기도 하지만.. 2014. 12. 15. [css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포) [css3] 디자인이 예쁜 드롭다운 메뉴(6가지 배포) 지금까지 드롭다운 메뉴 만들기를 3단까지 모두 배웠습니다. [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 드롭다운 메뉴 만들기 (3단 수평 메뉴편) 오늘은 CSS3의 속성들을 이용해서 디자인까지 고려하여 드롭다운 메뉴를 만들어 보겠습니다. 우선 드롭다운 메뉴를 만드는 html/css 작성법이 여러가지가 있겠지만 이 사람은 이렇게 만드는구나 정도로 생각해주시면 고맙겠습니다.^^ 이 소스들을 다운 받아서 자유롭게 편집해서 사용하실 수 있습니다. (단, 이 소스를 그대로 다운받아 배포하는 것은 금지) 모든 브라우저를 확인해 보진 못했고, ie7, chrome 39.0, Firefox 33.1 에서 정상 작동하는 것을 확인했.. 2014. 12. 5. 드롭다운 메뉴 만들기 (3단 수평 메뉴편) 드롭다운 메뉴 만들기 (3단 수평 메뉴편) 드롭다운 메뉴 만들기 기초편부터 2단 메뉴 만들기까지 배워보았는데요 [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 오늘은 응용편 정도가 되겠네요. 3단 수직 메뉴는 비교적 쉬운 것 같아 여기서는 3단 수평 메뉴 만들기를 배워보겠습니다. 우선, 3단 메뉴 만들기 html menu1 menu2 sub1 sub2 sub3 sub3-1 sub3-2 sub3-3 menu3 menu4 menu5 파란색이 1단, 초록색이 2단, 빨간색이 3단 입니다. div에 메뉴를 넣어 완성시키면 대략 이런 형태가 나옵니다 html 위의 메뉴 본문 목록 관련 css ul{list-style:none; margin:.. 2014. 12. 5. 드롭다운 메뉴 만들기(2단 수평 메뉴편) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 지난 시간엔 비교적 쉬운 2단 수직 메뉴 만들기를 배웠습니다. 수평 메뉴는 좀 더 복잡하므로, 앞 강좌를 미리 공부하시고 오면 좋을 것 같아요 [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 수평 메뉴 만드는 방법은 수직 메뉴편에서 본 것과 동일합니다. 1. 2단 메뉴 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 지난 시간과 달라진 점이 있다면 1단 메뉴에 클래스명이 붙었다는 것인데요, 3단, 4단 메뉴 등 계층구조가 좀 더 복잡해질수록 id나 class명을 붙여 이용하는 것이 좋습니다. css ul{list-style:none; margin:0px; padding:0px;}.. 2014. 12. 3. 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 지난 시간엔 단순한 메뉴 만들기를 배웠습니다. [css]드롭다운 메뉴 만들기(기초) [링크를 가진 단순 메뉴] menu1 menu2 menu3 이것을 1단 메뉴라고 한다면, 주 메뉴를 클릭했을 때 부 메뉴가 나오는 2단 메뉴를 만들면 다음과 같습니다. [2단 메뉴 만들기] 1. 2단 목록 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 파란색이 1단 메뉴라면 빨간색 부분이 2단 메뉴에 해당 ▶실행화면 우선 2단 메뉴를 숨겨 놓고, 1단 메뉴에 마우스 오버했을 때 부 메뉴를 드러내야 되겠지요. 2. 부 메뉴를 숨겨 놓기 ul ul {display:none;} 3. 주 메뉴에 마우스 오버했을 때 부 메뉴 표시하기.. 2014. 12. 2. [css]드롭다운 메뉴 만들기(기초) [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 dropdown menu란, 상단이나 좌측 또는 우측의 메뉴를 클릭했을 때 하위 메뉴로 늘어지는 계층화된 형태의 메뉴를 말합니다. 오늘은 가장 기초적인 메뉴 만들기를 배워 보고 다음 시간엔 주 메뉴를 클릭했을 때 부 메뉴가 나오는 방식을 배워 보겠습니다. 수직 메뉴 만들기 각각의 메뉴를 만들 때는 목록 태그를 이용 합니다. 1. 목록 만들기 html 홈페이지 방명록 전체 글 목록 실행 화면 홈페이지 방명록 전체 글 목록 목록을 만드는 ul, ol, li 태그 2. 머리 기호 없애기 메뉴 앞에 머리 기호를 없애려면 list-style:none을 사용합니다. css ul{list-style:none;} 실행화면 홈페이지 방명록 전체 글 목록 list-sty.. 2014. 11. 28. 이전 1 2 3 4 5 다음 반응형
