모바일 CSS 소스
모바일 css
모바일 CSS를 설정하는 데 사용되는 일반적인 속성과 값에 대해 알려드리겠습니다. 모바일 기기에서 웹 페이지를 최적화하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다:
- 미디어 쿼리(Media Queries):
@media: 특정 미디어 유형 또는 장치에 대한 스타일을 정의합니다.max-width: 최대 화면 너비를 지정하여 특정 화면 크기 이하에서 스타일을 적용합니다.min-width: 최소 화면 너비를 지정하여 특정 화면 크기 이상에서 스타일을 적용합니다.
- 반응형 단위(Responsive Units):
rem: 루트 요소의 폰트 크기에 상대적인 크기를 지정합니다.em: 현재 요소의 폰트 크기에 상대적인 크기를 지정합니다.%: 부모 요소의 크기에 상대적인 크기를 지정합니다.vw: 뷰포트 너비의 비율로 크기를 지정합니다.vh: 뷰포트 높이의 비율로 크기를 지정합니다.
- 뷰포트 설정(Viewport Settings):
width: 뷰포트의 너비를 지정합니다.initial-scale: 초기 확대/축소 비율을 지정합니다.maximum-scale: 최대 확대 비율을 지정합니다.minimum-scale: 최소 축소 비율을 지정합니다.
- 터치 이벤트(Touch Events):
touch-action: 터치 이벤트의 동작을 지정합니다.scroll-snap-type: 스크롤 스냅 동작을 지정합니다.
- 이미지 및 미디어(Media):
object-fit: 이미지나 비디오의 크기를 조정합니다.object-position: 이미지나 비디오의 위치를 조정합니다.
- 애니메이션(Animation):
animation: 애니메이션 효과를 지정합니다.transition: 요소의 상태 변화를 부드럽게 처리합니다.
위의 속성과 값은 모바일 기기에서 웹 페이지를 더욱 사용자 친화적으로 만들기 위해 자주 사용되는 것들입니다. 웹 페이지의 요구사항과 디자인에 따라 적절한 속성과 값을 선택하여 사용하시면 됩니다.
@charset "UTF-8";
/* mobile style */
*{
-webkit-text-size-adjust:none;
}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{
margin:0;
padding:0;
font-family:'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
font-weight:normal;
}
body{
-webkit-user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
li{
list-style:none;
}
a{
text-decoration:none;
}
a[href^="tel"]{
font-style:normal;
}
address, caption, em, var{
font-style:normal;
font-weight:normal;
}
input, textarea, select{
letter-spacing:normal;
}
ol, ul, dl{
list-style:none;
}
fieldset, img{
border:0;
}
legend, caption{
display:none;
}
img{
border:0;
vertical-align:top;
}
hr{
display:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
br{
letter-spacing:normal;
}
p{
letter-spacing:normal;
}
input{
vertical-align:middle;
}
input[type="text"], input[type="password"]{
-webkit-appearance:none;
}
input[type="checkbox"]{
-webkit-appearance:none;
-webkit-border-radius:0;
}
input:checked[type="checkbox"]{
-webkit-appearance:checkbox;
}
input[type="radio"]{
border:none;
-webkit-appearance:none;
}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{
-webkit-appearance:button;
border-radius:0;
}
textarea{
-webkit-appearance:none;
}
select{
-webkit-appearance:menulist-text;
}
