전체 글

[CSS] 뷰포트

뷰포트는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문젝 발생할 수 있다.이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 한다. ※뷰포트 속성 - width device-width, 양수 뷰포트의 너비를 지정한다.- height device-height, 양수 뷰포트의 높이를 지정한다.- initial-scale 양수 뷰포트의 초기 배율을 지정. 기본값은 1이다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대되..

[CSS] 미디어쿼리

미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. (IE9 이상) @media [only 또는 not] [미디어유형] [and또는 ,콤마] (조건문) {실행문} @media (min-width:320px) {실행문} => width값이 320px 이상일 때 실행문을 실행 @media (min-width:320px) and (max-width:768px) {실행문} => width값이 320px 이상이고 768px 이하일 때 실행문을 실해 min/max(접두사 구문): min은 최소, 즉 이상이라는 의미고 있고, max는 최대, 즉 이하라는 의미 ※주의사항 - 띄어쓰기 주의. ~and (min-width:320px) {}- mi..

[CSS] reset.css와 normailize.css

브라우저마다 설정되어 있는 기본 스타일의 차이를 없애고 사이트 제작 스타일 설정을 효율적으로 할 수 있도록 리셋 CSS 나 노멀라이즈 CSS를 사용합니다. 리셋 CSS는 모든 스타일을 완전히 초기화하는 것이고, 노멀라이즈 CSS는 유용한 스타일을 보유하고 일부 스타일을 리셋하여모든 브라우저에 기본 스타일을 동일하게 하고 있습니다. 리셋CSS 계열 1. Reset CSS(Eric Meyer's CSS reset) : http://meyerweb.com/eric/tools/css/reset/2. HTML5 Reset Stylesheet : http://html5doctor.com/html-5-reset-stylesheet/3. Tinyreset-tiny CSS reset for the modern web :..

[CSS] font-smoothing

-webkit-font-smoothing: subpixel-antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;

[CSS] 컨텐츠 요소를 가운데 오게 하는 방법

컨텐츠 요소를 가운데 오게 하는 방법?반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다. 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게) - 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다. - 부모요소 : display:table; - 자식요소 : display:table-cell, text-align:center;..