@media screen and (max-width: 480px) {/*모바일 스마트폰 */} @media screen and (min-width: 481px) and (max-width: 768px) {/ipad,타블렛pc/} @media only screen and (-webkit-min-device-pixel-ratio : 1.5) {/* 고해상도 모바일 */}
HTML/CSS
CSS 미디어쿼리
HTML 이미지맵 쉽게 생성하기(map tag)
여기서 rectangle로 찍고 찍어서 preview로 보면 간단하게 태그제작가능http://summerstyle.github.io/summer/ 모바일은 js쓰지 않은 한 어렵다. 태그 안쓰는 걸 추천하지만 네이버쇼핑에서 a링크가 막혀있어서 굳이 쓰고 싶다면..
CSS list-style-type
순서없는 목록에서 사용하는 블릿 disc : ● circle : ○ square : ■ 순서있는 목록에서 사용하는 번호유형 decimal : 1부터 시작하는 숫자 decimal-leading-zero : 0을 앞에 붙인 숫자 (1부터 시작) lower-roman : 소문자 로마숫자 upper-roman : 대문자 로마숫자 lower-greek : 소문자 그리스 문자 lower-alpha : 소문자 알파벳 lower-latin : 소문자 더 읽기
CSS keyframe 예제
css만으로 슬라이드 배너효과 내기 배경 변화, 반복 움직임
HTML video 태그 샘플
loop 무한반복autoplay 자동재생muted 자동재생하려면 뮤트가 필요playsinline 아이폰에서 자동재생 하려면 꼭 넣어야됨controls 적으면 밑에 컨트롤바가 생긴다
HTML datalist, input[number]
input태그인데 밑에 보기가 나온다. 숫자입력 태그 최저 15부터 맥스 50까지
CSS 밑줄
밑줄을 border로 만들면 제어하기가 힘들다.그래서 after요소를 이용한다. 밑줄의 길이는 width속성으로 정하고,요소와 밑줄 사이의 간격을 조정하고 싶으면 padding이나 margin 속성을 추가하면 된다.
CSS 웹폰트
@charset “utf-8”; @font-face { font-family: ‘NanumGothic’; src: url(‘font/NanumGothic.eot’); src: url(‘font/NanumGothic.eot?#iefix’) format(’embedded-opentype’), /* ie 6,7,8 적용 embedded-opentype ie 8,9 적용 */ url(‘font/NanumGothic.woff’) format(‘woff’), /* ie 제외한 나머지 */ url(‘font/NanumGothic.ttf’) format(‘truetype’), url(‘font/NanumGothic.svg#NanumGothic’) format(‘svg’); /모바일브라우져를 위해서*/ font-weight: normal; font-style: normal; } //노토산스 Noto Sans KR @import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); //나눔고딕 NanumGothic @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); //나눔펜글씨 font-family: 더 읽기
CSS 게시판 배치
★text-overflow-visibile : 기본값-scroll : 벗어난 영역을 스크롤 처리-hidden : 벗어난 영역을 숨김 처리-auto : 벗어나는 영역을 스크롤처리, 없는경우 스크롤 숨김-ellipsis 벗어난 텍스트부분 말줄임 ★table-layout-fixed: 테이블을 구조적으로 고정시킬 때 쓴다. ★white-space-nowrap : 자동 줄바꿈이 없이 한줄로-pre : 자동 줄바꿈이 없이 한줄로 &스페이스바 사용한만큼 화면에 나타남 ★word-break-keep-all: 잘 호환이 안되지만 글자가 디스플레이될 더 읽기