모바일 CSS 소스

모바일 css 

모바일 CSS를 설정하는 데 사용되는 일반적인 속성과 값에 대해 알려드리겠습니다. 모바일 기기에서 웹 페이지를 최적화하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다:

  1. 미디어 쿼리(Media Queries):
    • @media: 특정 미디어 유형 또는 장치에 대한 스타일을 정의합니다.
    • max-width: 최대 화면 너비를 지정하여 특정 화면 크기 이하에서 스타일을 적용합니다.
    • min-width: 최소 화면 너비를 지정하여 특정 화면 크기 이상에서 스타일을 적용합니다.
  2. 반응형 단위(Responsive Units):
    • rem: 루트 요소의 폰트 크기에 상대적인 크기를 지정합니다.
    • em: 현재 요소의 폰트 크기에 상대적인 크기를 지정합니다.
    • %: 부모 요소의 크기에 상대적인 크기를 지정합니다.
    • vw: 뷰포트 너비의 비율로 크기를 지정합니다.
    • vh: 뷰포트 높이의 비율로 크기를 지정합니다.
  3. 뷰포트 설정(Viewport Settings):
    • width: 뷰포트의 너비를 지정합니다.
    • initial-scale: 초기 확대/축소 비율을 지정합니다.
    • maximum-scale: 최대 확대 비율을 지정합니다.
    • minimum-scale: 최소 축소 비율을 지정합니다.
  4. 터치 이벤트(Touch Events):
    • touch-action: 터치 이벤트의 동작을 지정합니다.
    • scroll-snap-type: 스크롤 스냅 동작을 지정합니다.
  5. 이미지 및 미디어(Media):
    • object-fit: 이미지나 비디오의 크기를 조정합니다.
    • object-position: 이미지나 비디오의 위치를 조정합니다.
  6. 애니메이션(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;
}