ETC

[이슈노트] iOS 이슈 모음 #5 (가로모드 여백, 확대)

1. 사파리에서 가로모드일 때, 사이트 양쪽에 여백이 생기는 이슈 이거 뭐람..? 사파리는 왜 자꾸 혼자 놀지..?? 해결 방법은 생각보다 간단하다. 위와 같이 뷰포트에 viewport-fit=cover 를 추가해주면 된다. 참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/ Designing Websites for iPhone X The section below about safe area insets was updated on Oct 31, 2017 to reflect changes in the iOS 11.2 beta. webkit.org 2. 사파리에서 확대되는 이슈 ios 에서는 더이상 뷰포트 user-scalable=no 를 ..

[이슈노트] iOS 이슈 모음 #4 (tel)

ios 사파리에서010-1234-5678 걸지 않은 넘버 텍스트에 자동으로 전화 연결이 걸린다.그러면서 내가 적용하지 않은 스타일이 먹히면서 스타일이 어긋날때가 있다. ios 사파리에서는 자기가 봤을 때 전화번호 같으면 바로 스타일과 기능을 강제로 추가하나보다.어쩔때는 좋지만 어쩔때는 필요없는 기능. 그래서 그때는 메타태그에 아래를 추가해주면 된다.

[이슈노트] iOS 이슈 모음 #3 (overflow : scroll, border-radius)

1. overflow : scroll 이 안먹히거나, 이상하게 먹히는 이슈 개인 정보 체크 부분에 있는 상세 부분에 높이값 지정하고 overflow 스크롤 줬는데, 이게 한개일때는 괜찮은데 두개일때 아래에 있는 부분이 이상하다. 처음에 이게 뭔가 싶었는데 사파리에서만 있는 이슈인걸 확인하고 구글에 검색했더니 ... 이게 ios는 touch 값을 지정해 주지 않으면 overflow : scroll의 동작이 자연스럽지 않다고 한다. ios 때문이라도 앞으로 overflow:scroll 사용시 overflow-scrolling : touch를 꼭 사용해야겠다. overflow:scroll; -webkit-overflow-scrolling:touch; 참고 : https://developer.mozilla.or..

[이슈노트] aOS 이슈 모음 #2 (노트10 크롬브라우저 내 가상선택자 이슈)

알 수 없는 이슈가 생겼다. 노트10에서 크롬 브라우저에서 체크박스가 선택이 안되는것이다.. 선택이 안될때도 있고, 선택이 됐는데도 불구하고 체크박스 이미지가 바뀌지 않고... 정말 알 수 없다.. 어렵다... 기존에 check됐을 때 가상선택자에 background를 넣어서 체크할때 none/block 을 시켰는데, 삼성 브라우저에서 가상선택자 block이 됐다가 사라지면 아예 가상 선택자가 사라져버리는 이슈가 발생했다.... 사내 폰에서는 없고 하필 광고주 폰에서 발견된 이슈여서 매우매우 당황ㅠㅠ 가상선택자를 none/block이 아닌 sprite 이미지로 변경 후, background-position 을 수정하는걸로 해결했다. 휴...

[이슈노트] iOS 이슈 모음 #2 (img display:none)

작업 중 마지막 단계인 기기별 확인하기! 메인 컨텐츠를 화면 정 중앙에 맞추고 싶다는 기획자의 요청에 의해 높이를 100vh로 맞추고 컨텐츠는 absolute로 띄었다. 다른 폰에서는 괜찮았는데, 갤럭시 폴드 앞 화면에서 이슈가 생겼다. 메인 컨텐츠에 텍스트 입력 부분이 있었는데, 이 부분에 텍스트를 입력하려고 하자 자판이 올라오면서 자판을 뺀 높이가 100vh로 먹히면서 컨텐츠 위치가 엉망이 되어버렸다. 그래서 어쩔 수 없이 뒤에 투명 이미지를 놓고 컨텐츠를 올렸다. 하지만 탭에서는 컨텐츠에 absolute를 뺀 상태였어서 img를 display:none 시켜야 했었는데, 이게 다른 기기에서는 괜찮은데 아이패드 6세대에서 이미지에 display:none이 안먹는거다... 도대체 이해가 안되서 아이디도 ..

[이슈노트] aOS 이슈 모음 #1 (삼성 브라우저 overflow 이슈)

모바일! html / body에 이벤트를 overflow:hidden을 주고, overflow:inherit를 써서 그 이벤트를 상쇄시킬때 다른 모든 기계와 브라우저에서는 괜찮은데 삼성 브라우저에서는 overflow:inherit가 안먹는다. 아마도 상속받을 속성이 없어서 그런걸까?? 삼성 브라우저 왜구래... 여튼 그래서 overflow:inherit를 overflow:auto로 수정했더니 잘된다~! 해결~

[이슈노트] iOS 이슈 모음 #1 (a link)

iOS 12에서는 p태그에 onclick 걸어도 이벤트가 실행되지 않는다. button이나 a태그로 바꾸거나 cursor: pointrt 속성을 줘야한다.

[자바스크립트] 공부2

기초1var = 데이터를 저장하는 공간var a = '' //문자열var b = 0; //숫자var c = false; //불린 var d = null; //널 var e = undefined //언디파인드 둘 다 빈 값인데 차이가 있다. undefined는 변수를 만들어 놓았는데 아무 값도 집어 넣지 않았을 때 자동으로 undefined(정해지지 않음)이 되고, null은 빈 값을 변수에 의도적으로 넣는것이다. null은 그냥 넣는게 아니라 기존에 있는 값을 지울 때 사용한다. var f = []; //배열var g = {}; //객체var h = function(){}; //함수프로그래밍에서 ==은 같다이고 =은 대입한다는 뜻

[자바스크립트] 공부1

2018.05.17 생활코딩 자바스크립트 - 숫자와 문자 123456Math.pow(3,2); // 9, 3의 2승 Math.round(10.6); // 11, 10.6을 반올림Math.ceil(10.2); // 11, 10.2를 올림Math.floor(10.6); // 10, 10.6을 내림Math.sqrt(9); // 3, 3의 제곱근Math.random(); // 0부터 1.0 사이의 랜덤한 숫자 Math.round( 100 * Math.random() ); // 0~100 랜덤 생활코딩 자바스크립트 - 비교 == 동등 연산자. 좌항과 우항을 비교해서 서로 값이 같다면 true, 다르다면 false 1234alert(1==2) //falsealert(1==1) //truealert("one"=="t..

[스터디] 자바스크립트 스터디_20170904

자바스크립트 공부 생활코딩 : - 숫자와 문자- 변수 * 변수의 사용법 *변수의 효용- 비교 * 연산자 *비교연산자(==과 ===) 웹동네 책 : # 변수란?- 데이터를 저장하는 장소- 데이터를 읽고 쓰고 하는 장소- 데이터를 저장했다가 필요할 때 사용할 수 있는 장소 # 변수 만드는 법- var 변수이름 = 값;- var 변수이름 = 데이터, 변수이름2 = 데이터2; # 변수 이름 만들 때 주의사항- 숫자로 시작하면 안된다- 대소문자 구분 # 데이터 종류- 숫자(number), 논리(boolean), 문자(string), 함수(function), 클래스(class), 클래스인스턴스(class instance), undefined, null # 변숫값 변경- var 변수이름 = 데이터; 변수이름 = 신규..