반응형 CSS8 fontawesome 아이콘 넣기 1. 자바스크립트 CDN을 이용하는 방법 head 태그에 추가 합니다. 5.x 버전 2. CSS CDN을 이용하는 방법 4.x 버전 5.x 버전 사용예 체크박스에 적용예 # CSS label.bb:before { content: "\f0c8"; font-family: "Font Awesome 5 Free"; margin-right: 10px; color: #cccccc; font-size: 24px; } input#aa:checked + label.bb:before { content: "\f14a"; color: #000000; } input#aa { display: none; } # HTML Lorem Ipsum Dolor 2021. 4. 6. 한글 구글웹폰트 구글웹폰트 정리 나눔바른고딕 Noto Sans KR @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'); font-family: 'Noto Sans KR', sans-serif; 나눔고딕 Nanum Gothic @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap'); font-family: 'Nanum Gothic', sans-serif; 나눔명조 Nanum Myeongjo @import url('https://fonts.googleapis.. 2021. 2. 5. CSS 익스플로러 IE만 적용 익스플로러 IE만 CSS적용하기 첫번째 방법 /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { selector { property:value; } } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { selector { property:value; } } /* IE6,7 */ @media screen\9 { selector { property:value; } } /* IE8 */ @media \0screen { selector { property:value; } } /* IE6,7,8 */ @media \0screen\,screen\.. 2020. 9. 4. 이미지 마우스오버 안쪽테두리 주기 html css img {vertical-align: top;} /*4px gab을 위한 처리*/ .innerborder {float: left; overflow: hidden;} .innerborder:hover img {margin:-5px;} .innerborder:hover {border:5px solid blue;} 1. img요소만큼 공간값을 가지기위해 float 지정. 2. img에 margin을 -5px을 줌으로써 img를 감싼 a요소의 크기가 상하좌우 -5px씩 줄어듬 3. a요소에 overflow:hidden을 주어 img 넘치는 부분을 가림. 4. 줄어든 5px만큼 border값을 지정 출처: https://fmafma0182.tistory.com/34 [름름] 2019. 7. 5. Multi-Level Accordion Menu 멀티레벨 아코디언 메뉴 세로메뉴 Multi-Level Accordion Menu https://codyhouse.co/gem/css-multi-level-accordion-menu/ 그룹 / 하위 항목을 지원하는 편리한 아코디언 메뉴입니다. checkboxes 입력 요소에 : checked checked-class selector를 사용하여 CSS에서만 작동합니다. 그러나 인스턴트 기본 효과와 비교하여 미묘한 애니메이션을 선호하는 경우에 대비하여 jQuery 버전도 포함 시켰습니다. 구조 만들기 HTML 구조는 매우 간단합니다. 아코디언은 정렬되지 않은 목록입니다. 목록 항목에 하위 항목이 있으면 input [type = checkbox] 및 해당 레이블을 삽입합니다. 또한, .has-children 클래스를 목록 항목에 추가합니다. .. 2017. 8. 8. 셀렉트박스 CSS 예제 select box HTML Volvo Saab Mercedes Audi CSS .select-style { border: 1px solid #ccc; width: 120px; border-radius: 3px; overflow: hidden; background: #fafafa url("img/icon-select.png") no-repeat 90% 50%; } .select-style select { padding: 5px 8px; width: 130%; border: none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; } .select-style select:focus { outline: non.. 2017. 3. 25. 특수문자표 출처: 네이버 웹표준스터디 카페 참고: WIKI 문자참조 | W3SCHOOLS HTML Symbol Entities Reference HTML / XHTML 상의 특수기호가 그대로 표시되도록 기술하거나 키보드로 직접 입력할 수 없는 문자를 기술하기 위한 방법을 문자 참조 (character referendes) 라고 합니다. 문자 참조에는 1)문자 실제 참조 (character entity references) 2) 수치 문자 참조 (numerical character references)의 두가지 방식이 있다. 예를들어 " 2016. 8. 22. css 반응형웹 모바일 기기에만 반응하게, 미디어마다 다르게 표시 해상도에 따라 판단하는 방법 반응형 사이트를 만들기 위해서는 매우 많은 것들이 조합되어야 합니다. 웹표준 구조의 코딩, 스타일시트의 적용, HTML5에 맞는 기획, 거기에 해상도별 디자인까지.... 그 중에서도 @media를 이용한 해상도별 디자인 표현에 대해 알아보겠습니다. @media는 CSS에서 다룰 수 있는 것입니다. CSS는 스타일을 지정해서 블로그, 홈페이지의 모양을 담당하는 부분입니다. 먼저 알아두어야 할 기본 구조는 이렇습니다. @media(최소나 최대에 대한 기준) { 그 때의 명령 내용 } 그럼 기본 구조를 이용하여 응용해 보도록 하겠습니다. 아래 코드는 해상도 720px 이상에만 어떤 모양을 만들라는 코드입니다. @media(min-width:720px) { color:#cccccc .. 2016. 8. 19. 이전 1 다음 반응형
