@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) {/* 고해상도 모바일 */}
CSS
CSS 미디어쿼리
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만으로 슬라이드 배너효과 내기 배경 변화, 반복 움직임
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: 잘 호환이 안되지만 글자가 디스플레이될 더 읽기
CSS 화면배치 float, position
★float:left -float를 주면 div의 블록이 해제. 그 자리에서 붕 뜨므로 밑에 요소들이 들어 갈 수 있게 됨. -float는 센터정렬이 없다. -부모요소에 :after{content:””; display:block; clear:both} 추가하면 아래 요소들이 따라 올라오지 않는다. -크기가 바뀌는 홈페이지에 쓴다. 고정되는 홈페이지라면 position:absolute.을 쓴다. ★position:absolute - 부모요소에는 넓이와 높이를 지정해줘야하고 position:relative 적용해야한다. - position은 되도록 사용하지 더 읽기
CSS 가운데정렬
★margin: 0 auto;-width랑 같이 해줘야 가운데 정렬 적용됨. 가끔씩 익스8에서 안될 때가 있는데 그 땐 text-align:center도 같이 써준다. ★길이가 정해져있는 div 가운데 정렬-position:absolute; left:50%; top:50%; margin-left: -width/2 px; margin-top: -height/2 px;-margin-right를 하면 원래 마진이 없는 경우 안 먹힐 수도 있다. ★header나 input에서 수직가운데정렬시키는 방법. (verticla-align안먹힐 때)-line-height를 height와 같은 값을 준다.-두 더 읽기
CSS inline, block 요소
★inline Tag에 마진주면 안 변한다. 높이도 넓이도 안 먹음. 패딩은 먹는다. ★<text-align>-블럭요소 속에 있는 요소들이 가운데로 간다. 인라인요소 속에 있는 태그에는 적용안됨. ★<vertical-align>-인라인요소들에게 적용된다. 블럭요소 태그에는 적용안됨.-vertical-align:sub; 테이블에서 가운데 정렬이 된다.-브라우저마다 달라서 가장 안쓰고 싶은 존재.