더블터치시 자동확대 막는법오늘은 모바일 브라우저에서 확대/축소 기능을 끄는 방법에 대해서 알아보겠습니다. 1. HTML 메타태그 방식 태그에 user-scalable=no 속성을 추가하면, 사용자가 페이지를 확대/축소할 수 없게 됩니다 width=device-width : 화면 너비에 맞춰 페이지를 설정합니다.initial-scale=1 : 페이지 로드시 기본 확대 비율을 1로 설정합니다.maximum-scale=1 : 최대 확대 비율을 1로 설정하여 확대를 제한합니다.user-scalable=no : 사용자가 확대/축소할 수 없게 만듭니다.2. JS방식저는 meta 방식이 안먹혀서 js방식을 사용했더니 바로 됐습니다!document.documentElement.addEventListener('tou..
죽어라 저장해도 적용안될때 해결법분명 크롬 소스상에도 뜨는데 요소에 스타일에는 뜨지도 않고 적용도 안됨 뭘까하고 봤더니 세미콜론이 있었음제거하니 정상적으로 적용됨
1. 페이지 외부 폰트 설정 //무료 폰트사이트 https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 웹폰트로 사용 내에 소스복사 css에 그대로 복붙 css body 태그에 font-family:에 위에 폰트명 적어주고 , sns-serif 는 만약 못 불러올시 sns-serif 체를 불러오겠다 2.CSS :root 변수 선언 --(하이픈2개)적고 속성 이름을 적은 후 :(클론) 뒤에 속성값 넣어줌 :root{ --color-white: #ffffff; --color-black: #000000; --color-blue: #6b8bad; --color-gray: #707C7E; --font-large: 48px; --font-medium: 28px; --font-regula..
CSS 2D transform // can i use 에서 보면 거의 대부분 호환됨. 2차원 좌표에서 요소를 변형시키는 속성 이동, 확대, 축소, 회전, 경사 등을 만들 수 있음 // 움직이는 걸 보여주지는 않음 trnaslate: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사 // 비틀림 [01_transform.html]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ✔ 벤더 프리픽스(vendor prefix) // caniuse에서 노란색으로 나오는 부분은 이걸 붙여줘야 됨(빨강은 붙여도 안됨) - 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사 - W3C..
다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count: 단의 갯수를 설정 - column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap: 단과 단사이의 여백을 설정 - column-span: 단과 안의 포함된 요소를 다단편집에서 해제 Flex 레이아웃 - 가로정렬: 테이블, float, flex, grid - css3에 새롭게 추가되었음 - display: flex flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap:기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 wrap: 플렉스 요소의..
박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 내용(content) 텍스트나 이미지가 들어있는 박스의 실질적이 내용 부분 패딩(padding) 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 20px(위아래좌우 다 20px) - padding: 20px 20px(위아래20px 좌우 다 20px) - padding: 20px 20px 20px(위20px 좌우20px 아래쪽20px) - padding: 20px 20px 20px 20px(위20px 오른쪽20px 아래20px 왼쪽20px =시계방향) 테두리(bo..
