본문 바로가기

It66

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.
[css3] overflow-x / overflow-y 속성 [css3] overflow-x / overflow-y 속성 아주 오래 전에 overflow 속성에 대해 다루었죠. overflow는 내용이 넘칠 때 어떻게 보일지 선택할 수 있는 속성이라고 했습니다.(아래 글 참조) overflow 속성 (overflow: visible, hidden, scroll, auto 차이) overflow-x 속성은 x축, 즉 왼쪽과 오른쪽의 내용이 넘칠 때, overflow-y 속성은 y축, 즉 위에 아래의 내용이 넘칠 때 어떻게 보여줄지 지정합니다. ▶브라우저 지원 ie9.0+, chrome 4.0+, firefox 3.5+, safari 3.0+, opera 9.5+ ▷overflow-x 속성값 visible|hidden|scroll|auto|initial|inherit.. 2015. 3. 5.
[html] mark 태그 [html] mark 태그 mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다. ▶브라우저 지원 ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ ▶mark 요소 사용 예 1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게 찾을 수 있도록 함. 2. 인용할 때 특정 텍스트를 강조하게 위해 strong, em, mark 태그 차이 텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다 em. 강세를 둔 강조. emphasized text 약자로 이탤릭체로 표시함. 강조의 위치는 문장의 의미를 바꿈 Cats are cute animals. '고양이'에 강조 Cats are cute an.. 2015. 3. 3.
[html] abbr 태그 [html] abbr 태그 abbr 태그는 두문자어(acronym)와, 약어(abbreviation )에 사용하는 요소로, 브라우저나 검색엔진에 유용한 정보를 줍니다. 넷스케이프가 abbr 요소를 만들고, 마이크로소프트가 acronym을 만들어 두 요소 다 html4까지 사용하고 있었지만, 두 정의가 혼동스럽고 브라우저 지원도 저마다 달라, html5부터 acronym은 퇴화 요소로 규정합니다. html5부터는 두문자어와, 약어에 모두 abbr 태그를 사용합니다. 참고 acronym: 단어의 머리글자를 딴 말. NATO는 North Atlantic Treaty Organization의 두문자어임 '나토'라고 읽음. abbreviation: 쉽게 알아들을 수 있도록 줄인 말. BBC는 British Bro.. 2015. 3. 2.
HTML5 퇴화 요소(deprecated, obsolete 차이) HTML5 퇴화 요소(deprecated, obsolete 차이) 예전에 table에서 퇴화 속성에 대해 적은 적이 있는데, 어떤 분이 퇴화 속성인데 왜 여전히 정상적으로 작동하는지 질문하신 분이 계셨습니다. table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 저도 궁금하던 차였는데, 마침 글을 읽다가 deprecated, obsolete 차이에 대해 나온 글이 있어서 정리해 보았어요. 더불어 html5에서 퇴화로 규정된 태그를 살펴볼까 합니다. 우선 용어 정의부터.... 제 블로그엔 '퇴화 요소' '퇴화 속성'이란 단어가 많이 등장하는데 deprecated와 obsolete를 저는 통일해서 '퇴화'라고 설명해 놓았습니다. 하지만 두 단어엔 차이가 있습니다. deprecated .. 2015. 2. 27.
css로 반응형 메뉴 만들기 off canvas (left) css로 반응형 메뉴 만들기 off canvas (left) 지난 시간엔 select 요소로 드롭다운 메뉴를 만들었어요. 반응형 메뉴 만들기(select 태그를 이용) 오늘은 반응형 메뉴 중 off canvas 메뉴를 배워보겠습니다. 캔버스란 화폭을 말하죠. off canvas란 화폭 밖으로 분리된 것이라 보면 되겠습니다. 화면이 축소될 때 메뉴 아이콘이 등장히고, 아이콘을 클릭하면 메뉴바가 나타나며 본문을 밀어내는 형식입니다. 아래 이미지를 보고 A화면→B화면→C화면 순으로 코드 작성을 해 보세요 A 화면 B 화면 C 화면 전체 html ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home Guest Notice 본문 /*본문*/ 접이식 메뉴를 만들 때 label와 체크박스를 이용하는 법을 배웠.. 2015. 2. 13.