본문 바로가기
반응형

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.
반응형 메뉴 만들기(select 태그를 이용) 반응형 메뉴 만들기(select 태그를 이용) 어제는 체크박스와 :checked 선택자를 이용하여 토글 메뉴 만드는 법을 배웠습니다. 오늘은 select 요소를 이용하여, 반응형 메뉴를 만들어 보겠습니다. select 요소는 드롭다운 목록 만들 때 사용하며, 각 선택 항목은 option을 사용합니다. [html] select 태그 [html] option 태그 ▶전체 html Home Guest Notice Home Guest Notice 본문 우선 메뉴 목록을 만드는 것은 지난 시간에 배운 것과 동일합니다. 그리고, 화면 너비가 25em 이하에서는 드롭다운 목록이 나올 수 있도록 select를 이용하여 새로운 목록을 구성합니다. Home Guest Notice onchange="if (this.valu.. 2015. 2. 12.
[css] :checked 선택자를 이용한 토글 버튼 [css] :checked 선택자를 이용한 토글 메뉴 버튼 어제는 기본적인 토글 메뉴를 만들어 보았어요. css로 토글 메뉴 만들기(메뉴 열고 닫기) label 요소와, 체크박스, checked 선택자를 이용하여 메뉴 아이콘을 클릭하면 메뉴가 생성되고, 다시 클릭하면 메뉴가 사라지는 방식을 배웠습니다. 이번에는 토글 메뉴 버튼을 만들고, 전체적인 레이아웃까지 만들어 볼게요. A 화면 B 화면 C 화면 ▶전체 html ≡ Home ❘ Guest ❘ Noitce 본문 오른쪽 사이드바 footer 모두 지난 시간 배운 것을 응용했기 때문에 지난 강좌를 먼저 읽고 오셔야 이해하기 쉽습니다~ css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 지난 시간과.. 2015. 2. 11.
css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 토글 메뉴 만들기(메뉴 열고 닫기) 미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다. 지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요... CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면 사라지는 방식을 배워볼게요. 영어로 toggle menu(토글 메뉴)라고도 하며 자바스크립트나 jquery를 이용한 방법도 있는데, 오늘은 css로만 만들어 보겠습니다. html 소스 ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home ❘ Guest ❘ Noitce .. 2015. 2. 10.
css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요. 미디어 쿼리, @media query 이해하기 반응형 웹사이트(소스) 만들기 연습 CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 이번 시간엔 1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고 2. 메뉴 아이콘이 새로 등장하며 3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법 을 배워 볼게요. A 화면 B 화면 C 화면 A화면 만들기 전체 html 소스 ↺ /*메뉴 아이콘*/ /*메뉴*/ Home ❘ Guest ❘ Notice 본문 /*본문 영역*/ 오른쪽 사이드바 /*사이드바 영역*/ footer /*푸터 영역*/ 그럼 하나씩 살펴.. 2015. 2. 6.
반응형

티스토리툴바