WEB (49) [jQuery] 간단한 이미지 갤러리 단순한 이미지 갤러리를 만드는 방법입니다. 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 3. CSS * { margin: 0; padding: 0; } .gallery { width: 100%; max-width: 600px; margin: 0 auto; } .thumb { width: 100%; margin-bottom: 3px; list-style: none; overflow: hidden; } .thumb li { width: 25%; float: left; text-align: center; } .thumb li img { width: 98%; } .main { width: 100%; text-align: center; } .main img { width: 99.5%; } 4. jQuery [CSS] 마우스 드래그 영역 색상 변경하기 마우스로 어떤 요소를 드래그했을 때, 드래그된 영역의 배경색은 대부분 파란색이지만 ::selection 선택자를 이용하면 아래 이미지처럼 원하는 배경색이나 텍스트 색상 등으로 변경할 수 있습니다. ::selection 선택자는 background , color , cursor , outline 과 같은 몇 가지 속성만 적용할 수 있습니다. 또한, IE9 이상의 브라우저에서 지원됩니다. ::-moz-selection { background: red; color: #fff; text-shadow: none; } /* Firefox */ ::selection { background: red; color: #fff; text-shadow: none; } 특정 요소에만 적용하고자 할 때에는 앞에 해당 요소의 클래.. [HTML] 모바일에서 자동 전화걸기 링크 제거 및 방지 모바일에서 숫자들이 나열되어 있으면 전화번호로 인식하여 자동으로 전화걸기 링크가 생성되는 것을 볼 수 있습니다. 이를 방지하려면 아래 코드를 태그 안에 삽입하면 됩니다. [HTML] 반응형 웹 - 메타 태그 Viewport(뷰포트) 설정 Viewport(뷰포트)는 데스크톱이나 모바일 기기 등 다양한 디바이스의 화면 크기에 맞게 웹 페이지의 크기를 조정할 때 사용합니다. 뷰포트를 설정하는 메타 태그는 태그 안에 추가하면 됩니다. width : 뷰포트 너비로, device-width는 디바이스 화면 너비에 맞게 페이지 너비가 자동 설정됨을 의미합니다. initial-scale : 페이지가 처음 로딩될 때의 확대/축소 수준을 설정합니다. 기본값은 1.0이며, 0~10.0의 값을 설정할 수 있습니다. maximum-scale : 페이지의 최대 확대/축소 수준을 설정합니다. 0~10.0의 값을 설정할 수 있습니다. (1.0로 설정하면 확대/축소 불가능하며, 2.0으로 설정하면 2배 확대/축소됩니다.) minimum-scale : 페이지의 최소 확.. [CSS] overflow(overflow-x, overflow-y) 속성 overflow 속성은 요소의 내용이 길어서 지정된 콘텐츠 영역을 넘어가는 경우, 내용을 자르거나 스크롤을 추가하는 등의 제어를 위해 사용됩니다. 이 속성은 height 가 지정된 요소에서만 작동합니다. overflow: visible; /* 기본값, 내용이 길어도 잘리지 않고 지정된 영역 밖으로 표시됨 */ overflow: hidden; /* 내용이 길면 지정된 영역 밖의 내용은 잘리고 표시되지 않음 */ overflow: scroll; /* 내용을 보여주기 위해 스크롤바가 추가되며, 내용 길이에 관계없이 스크롤바가 항상 표시됨 */ overflow: auto; /* 스크롤과 비슷하나 내용 길이에 따라 스크롤바 유무가 결정됨 */ overflow: initial; /* 이 속성을 기본값으로 설정함 *.. [CSS] Radio Button(라디오 버튼) 커스텀, 스타일 변경하기 라디오 버튼 스타일을 커스텀하는 방법입니다. 커스텀 동의 미동의 브라우저 기본 동의 미동의 1. HTML 동의 미동의 2. CSS .radio_box { display: inline-block; *display: inline; *zoom: 1; position: relative; padding-left: 25px; margin-right: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 기본 라디오 버튼 숨기기 */ .radio_box input[type="radio"] { display: none; } /*.. [CSS] Checkbox(체크박스) 커스텀, 스타일 변경하기 체크박스 스타일을 커스텀하는 방법입니다. 커스텀 이용약관에 동의합니다. 브라우저 기본 이용약관에 동의합니다. 1. HTML 이용약관에 동의합니다. 2. CSS .chk_box { display: block; position: relative; padding-left: 25px; margin-bottom: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 기본 체크박스 숨기기 */ .chk_box input[type="checkbox"] { display: none; } /* 선택되지 않은 체크박스 스타일 꾸미기.. [CSS] box-sizing 속성 box-sizing 속성을 통해 요소의 전체 width 와 height 에 padding 과 border 를 포함할 수 있습니다. 이 속성은 IE8 이상의 브라우저에서 지원됩니다. box-sizing: content-box; /* 기본값, width와 height에 content만 포함되며 padding과 border는 포함되지 않음 */ box-sizing: border-box; /* width와 height에 content와 더불어 padding과 border가 포함됨 */ box-sizing: initial; /* 이 속성을 기본값으로 설정함 */ box-sizing: inherit; /* 부모의 속성 값을 상속 받음 */ content-box(default) border-box 어떤 요소의 wid.. 이전 1 2 3 4 5 6 7 다음
