Kang-ji

stackoverrun.com/ko/q/7854107

big-blog.tistory.com/4357

www.html5rocks.com/en/mobile/touchandmouse/

m.blog.naver.com/PostView.nhn?blogId=b_feather&logNo=50117082290&proxyReferer=https:%2F%2Fwww.google.co.kr%2F%20%EC%B6%9C%EC%B2%98:%20https:%2F%2F202psj.tistory.com%2F1158%20%5B%EC%95%8C%EB%A0%88%ED%8F%B0%EB%93%9C%EC%9D%98%20IT%20%EC%9D%B4%EB%AA%A8%EC%A0%80%EB%AA%A8%5D

enterkey.tistory.com/364

모바일 사파리에서 터치를 시도하면 아래와 같은 이벤트가 순서대로 발생한다.

  touchstart - touchend - mouseover - mousemove - mousedown - mouseup - click

마우스가 존재하진 않지만, 내부적으로는 터치 이벤트 뿐만 아니라 마우스 이벤트도 발생하는 것을 볼 수 있다.
중요한 건, mouseover 시점에서 화면이 변경될 경우, 이벤트가 멈춘다는 것이다.
(이벤트 발생 프로세스의 자세한 내용은 Safari Developer Library의 Handling Events 챕터를 참고.)

위 문서에는 '화면이 변경(if the contents of page changes)'되는 것에 대한 명확한 정의는 없다.
테스트 해본 결과, '화면이 변경'된다는 것은 정확하게는 '레이아웃이 변경(reflow)'되는 것에 가까운 것 같다.
백그라운드가 변경된다거나, 레이아웃에 영향을 끼치지 않는 정도의 margin/padding이 변경되는 경우(repaint)에는 이벤트가 종료되지 않는다.

따라서, 두 번 클릭해야 실행되는 문제를 해결하기 위해서는,
터치 인터페이스에서는 mouseover 이벤트가 발생했을 때 화면 변경이 되지 않도록 해야 한다.

ohgyun.com/350

마우스를 시뮬레이션하기 위해 Webkit 모바일과 같은 브라우저는 사용자가 터치 스크린 (예 : iPad)에서 손가락을 뗀 경우 다음 이벤트를 발생시킵니다 (출처 : html5rocks.com의 Touch And Mouse ).

1. touchstart
2. touchmove
3. touchend
4. 300ms 지연, 브라우저는 이것이 두 번 탭이 아니라 한 번 탭인지 확인합니다.
5. mouseover
6. mouseenter
   • 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
7. mousemove
8. mousedown
9. mouseup
10. click

단순히 웹 브라우저에 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능 해 보입니다.

더 나쁜 것은 마우스 오버 이벤트가 페이지 콘텐츠를 변경하는 경우 Safari 웹 콘텐츠 가이드-이벤트 처리 , 특히 One-Finger 이벤트의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않는다는 것 입니다. 정확히 "컨텐츠 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경은 콘텐츠 변경이 아닙니다 (또는 더 이상 변경되지 않습니까?).

qastack.kr/programming/8291517/disable-hover-effects-on-mobile-browsers

1920x1080

Edge 브라우저 높이값 77px (상단 32px / 주소창 45px)

Firefox 브라우저 높이값 74px (상단 33px / 주소창 41px)

IE 브라우저 높이값 78px (상단 27px / 주소창 + 탭영역 51px)

Opera 브라우저 높이값 70px (상단 31px / 주소탕 49px)

Safari 브라우저 높이값 60px (상단 23 / 주소창 37

Chrome 브라우저 높이값 71px (상단 34px / 주소창 37px)

윈도우 10 기본 하단바 : 40px

1080px 높이값에서 55~77px 가려짐

결론 : 대략적으로 970~980 정도의 높이값을 웹디자인을 위해 사용가능

-------------------------------------------------------------------------------------

1600x900 

윈10 기본 하단바 40px

Chrome 상단바 103px

1366x768

윈10 기본 하단바 40px

Chrome 상단바 103px

아이폰 11 

해상도 414x896

사이즈: 828x1792 

DPR: 2.0

웹브라우저 컨텐츠 heigth : 896 - (92 + 82) = 722px

브라우저 (크롬)상단바 heigth : 92 px

하단 버튼바 heigth : 82px

폴더블 폰 모바일웹 브라우저 해상도 정보

18:9(2:1)

• 2160 x 1080
  • LG Q6, LG Q7
  • 구글 픽셀 3
• 2880 x 1440 
  • LG G6
  • 구글 픽셀 2 XL,
  • LG V30, LG V35

18.5:9

• FHD 1080 x 2220 (360 x 740)
  • Galaxy A8(2018)
  • Galaxy A8+(2018)
  • Galaxy A8 Star
  • Galaxy A9(2018)
• QHD 1440 x 2960
  • Galaxy S8  (360 x 740)
  • Galaxy S8+
  • Galaxy S9  (360 x 740)
  • Galaxy S9+
  • Galaxy 노트8
  • Galaxy 노트9  (360 x 740)

19:9

• HD 720 x 1520 (360 x 760)
  • Galaxy A10e 
• FHD 1080 x 2280 (360 x 760)
  • Galaxy S10e
  • Galaxy 노트10
•  QHD 1440 x 3040
  • Galaxy S10
  • Galaxy S10+
  • Galaxy S10 5G
  • Galaxy 노트10+

19.3:9

• QHD 1440 x 3088
  • Galaxy 노트20 Ultra

20:9

• FHD 1080 x 2400 (360 x 800)
  • Galaxy A70
  • Galaxy A80
  • Galaxy A90
  • Galaxy A21
  • Galaxy A31
  • Galaxy A41
  • Galaxy A51
  • Galaxy A71
  • Galaxy 노트20
• QHD  1440 x 3200
  • Galaxy S20
  • Galaxy S20+
  • Galaxy S20 Ultra

19.5:9 (13:6)

• 5.8 inch (2436 x 1125) - HDR AMOLED
  • iPhone X
  • iPhone XS
  • iPhone 11 Pro
• 5.9 inch 1080 x 2340
  • 갤럭시 A40
• 6.1 inch 3120 x 1440
  • LG G7 ThinQ - HDR IPS LCD
  • LG G8 ThinQ - HDR AMOLED
• 6.4 inch - HDR AMOLED
  • LG V50S ThinQ (1080 x 2340)
  • LG V40 ThinQ (1440 x 3120)
  • LG V50 ThinQ (1440 x 3120)
• 6.5 inch (2688 x 1242) - HDR AMOLED
  • Phone XS Max
  • iPhone 11 Pro Max

• 6.1 inch (1792 x 828) - IPS TFT-LCD
  • iPhone XR
  • iPhone 11
• 6.4 inch 1080 x 2340
  • 갤럭시 A9 Pro
  • 갤럭시 A30
  • 갤럭시 A50

20.5:9

• FHD (2460 x 1080)
  • LG V60 ThinQ
  • LG VELVET

<button class="btn draw-outline">Draw button</button>

/* scss */
@mixin btn-border-outline($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $direction: horizontal, $duration: 0.25s) {
  $h-side: if($horizontal == 'left', 'right', 'left');
  $v-side: if($vertical == 'top', 'bottom', 'top');

  $dir-1: 'height';
  $dir-2: 'width';
  $pseudo-1: 'after';
  $pseudo-2: 'before';
  
  @if($direction == 'horizontal') {
    $dir-1: 'width';
    $dir-2: 'height';
    $pseudo-1: 'before';
    $pseudo-2: 'after';
  }
  
  box-shadow: inset 0 0 0 $width $color;
  color: $color;
  transition: color $duration $duration/2;
  position: relative;

  &::before,
  &::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
  }

  &::before {
    #{$vertical}: 0; 
    #{$horizontal}: 0;
  }
  
  &::after {
    #{$h-side}: 0;
    #{$v-side}: 0;
  }

  &::#{$pseudo-1} {
    border-#{$vertical}-width: $width;
    border-#{$h-side}-width: $width;
  }

  &::#{$pseudo-2} {
    border-#{$v-side}-width: $width;
    border-#{$horizontal}-width: $width;
  }
  
  &:hover {
    color: $hover;
    
    &::before,
    &::after {
      border-color: $hover;
      transition: border-color 0s, unquote($dir-1) $duration,  unquote($dir-2) $duration;
      width: 100%;
      height: 100%;
    }
    
    &::before { transition-delay: 0s, 0s, $duration; }
    &::after { transition-delay: $duration * 2, $duration * 2, $duration * 3; }
  }
}


.draw-outline {
  @include btn-border-outline(#c994bd, #90f183, 4px, top, right, vertical);
}

//=== Button styling, semi-ignore
.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  padding: 1em 2em;
  letter-spacing: 0.05rem;
  
  &:focus { outline: 2px dotted #55d7dc; }
}

//=== Pen styling, ignore
body { 
  background: #1a1f25;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

https://codepen.io/giana/pen/yYBpVY

http://rwdb.kr/scroll_plugin_jquery/

Swiper

https://swiperjs.com/

- 타이틀에도 써있듯이 가장 모던한 모바일 터치슬라이더를 표방하는 플러그인입니다.

- 장점은 굉장히 많은 옵션이 있다는 점이고, 단점 역시 굉장히 많은 옵션이 있다는 점입니다. 

- 모바일사이트에서만 사용하는 것이 아니라 PC웹, 반응형웹 어디서든 사용하기 편하게 만들어져 있습니다.

- 그리고 2020년부터는 React, Svelte, VueJs, Angular등까지 지원하면서 프론트엔드개발에 엄청난 도움이 되는 사이트

bxSlider

https://bxslider.com/install/

TouchSlider

TouchSwipe

TouchSlider jQuery Plugin

http://rwdb.kr/ratio_calc/

width:1000px; height:300px; 을 기준으로 하며, 종횡비를 유지해야하는 컨텐츠

.background {
	width : 100 %;
	height : 0;
	padding-top : calc (300 / 1000 * 100 %); / * calc (이미지 높이 ÷ 이미지 가로 × 100 %) * /
	background : url (bg.jpg) center center / cover no-repeat;
}

padding-top 또는 padding-bottom 의 값은 “이미지 높이 ÷ 이미지 가로 × 100″

checkbox

html

<form>
  <fieldset>
    
    <legend>
      <h3>What type of accessibilty issues do you see most often?</h3>
    </legend>

    <div class="wrapper">
      <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues">
      <label for="a11y-issue-1">There are no issues.</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-2" name="a11y-issues" type="checkbox" value="no-focus-styles">
      <label for="a11y-issue-2">Focus styles are not present.</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-3" name="a11y-issues" type="checkbox" value="html-markup">
      <label for="a11y-issue-3">HTML markup is used in a bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
    </div>
    
  </fieldset>
</form>

css

html {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*create check symbol with pseudo element*/
.wrapper input + label::after {
  content: "";
  border: 4px solid;
  border-left: 0;
  border-top: 0;
  height: 20px;
  left: 14px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: rotate(45deg);
  transition: opacity 0.2s ease-in-out;
  width: 12px;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles—commented out for the tutorial, but you’ll need to add them for proper use
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;  
  outline: 3px solid transparent;
}*/

https://codepen.io/tutsplus/pen/rqrpqw

Custom Radio Button Styles

<form>
  <fieldset>
    
    <legend>
      <h3>What type of accessibilty issues do you see most often?</h3>
    </legend>

    <div class="wrapper">
      <input id="a11y-issue-1" name="a11y-issues" type="radio" value="no-issues">
      <label for="a11y-issue-1">There are no issues</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-2" name="a11y-issues" type="radio" value="no-focus-styles">
      <label for="a11y-issue-2">Focus styles are not present</label>
    </div>

    <div class="wrapper">
      <input id="a11y-issue-3" name="a11y-issues" type="radio" value="html-markup">
      <label for="a11y-issue-3">HTML markup is used in bizarre way. Also, what happens if the label text is very looooooooong, like this one?</label>
    </div>
    
  </fieldset>
</form>

html {
  box-sizing: border-box;
  background: #f2f2f2;
  padding: 20px 50px
}

/* Inherit box-sizing to make it easier to change the property
 * for components that leverage other behavior.*/
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*style form to limit width and highlight the long label*/
form {
    margin: 1rem auto;
    max-width: 750px;
}

/*style wrapper to give some space*/
.wrapper {
    position: relative;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/*style label to give some more space*/
.wrapper label {
    display: block;
    padding: 12px 0 12px 48px;
}

/*style and hide original checkbox*/
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/*position new box*/
.wrapper input + label::before {
  border: 2px solid;
  content: "";
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 40px;
  border-radius: 50%;
}

/*radio pseudo element styles*/
.wrapper input + label::after {
  content: "";
  opacity: 0;
  border: 10px solid;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  top: 10px;
  transition: opacity 0.2s ease-in-out;
}

/*reveal check for 'on' state*/
.wrapper input:checked + label::after {
  opacity: 1;
}

/*focus styles*/
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 3px #ffbf47;  
  outline: 3px solid transparent; /* For Windows high contrast mode. */
}

https://codepen.io/tutsplus/pen/XxBqwz

https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074

https://codepen.io/mpeace/pen/EKZqJP

https://m.blog.naver.com/PostView.nhn?blogId=qkrchgml4&logNo=220869883245&proxyReferer=https%3A%2F%2Fwww.google.com%2F

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/js/radio.js

https://tldrdevnotes.com/css-sass/vh-full-height-mobile-phones/

사이드바 토글메뉴 예제

html

<html>
<head>
	<title></title>
	<link href="https://fonts.googleapis.com/css?family=Quattrocento" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    
</head>
<body>
	<div id="menu-icon">
		<div id="hamburger"></div>
	</div>
	<div id="sidebar">
		
		<nav>
			<ul>
				<li>Home</li>
				<li>About Us</li>
				<li>Gallery</li>
				<li>Work</li>
				<li>Contact</li>
			</ul>
		</nav>
	</div>
	<script type="text/javascript" src="js/main.js"> </script>
</body>
</html>

css

* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #FAFAFA;
	color: #22313F;
	font-family: 'Quattrocento', serif;
}

#menu-icon {
	position: fixed;
	right: 60px;
	top: 40px;
	height: 50px;
	width: 60px;
}
#menu-icon:hover {
	cursor: pointer;
}
#menu-icon #hamburger {
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 4px;
	width: 50px;
	background-color: #22313F;
	transition: all .3s;
}
#menu-icon #hamburger:before {
	position:absolute;
	content: '';
	height: 4px;
	width: 40px;
	top: -10px;
	background-color: #22313F;
	transition: all .4s;
}
#menu-icon #hamburger:after {
	position:absolute;
	content: '';
	height: 4px;
	width: 40px;
	top: 10px;
	background-color: #22313F;
	transition: all .3s;
}
#menu-icon:hover #hamburger::after,#menu-icon:hover #hamburger::before {
	width: 50px;
}
#menu-icon:hover #hamburger{
	width: 40px;
}

#menu-icon #hamburger.active{
	background-color: rgba(0,0,0,0);
}
#menu-icon #hamburger.active:before{
	transform: rotate(45deg);
	top:0px;
	width: 40px;
}
#menu-icon #hamburger.active:after{
	transform: rotate(135deg);
	top:0px;
	width: 40px;
}

#sidebar {
	position:fixed;
	width: 300px;
	left: -300px;
	height: 100vh;
	background-color:#22313F;
	color:#FAFAFA;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
	transition: all .5s;
}
#sidebar nav ul {
	position: absolute;
	top: 50%;
	left: 50%;
	list-style:none;
	transform:translate(-50%, -50%);
	text-align:center;

}
#sidebar nav ul li {
	font-weight: 590;
	font-size: 1.1em;
	margin: 24px;
} 
#sidebar nav ul li:hover {
	cursor:pointer;
} 



#sidebar.show-sidebar {
	left: 0px;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
	transition: all .5s;
}
/*
#sidebar.hide-sidebar {
	left: -300px;
	-webkit-clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);
	transition: all .5s;
}

#sidebar.original-sidebar {
	position:fixed;
	width: 300px;
	left: -300px;
	height: 100vh;
	background-color:#22313F;
	color:#FAFAFA;
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
	transition: all .5s;
}
*/

jquery

$(document).ready(function() {
	$("#menu-icon").click(function(){
			$("#hamburger").toggleClass('active');
			$("#sidebar").toggleClass('show-sidebar');
	});
});

https://codepen.io/anon/pen/PeWERy

6

iPhone 11

/* 1792x828px at 326ppi */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { 
}

This media query is also for: iPhone XR

iPhone 11 Pro

/* 2436x1125px at 458ppi */ 
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
}

This media query is also for: iPhone X and iPhone Xs

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */ 
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) { 
}

This media query is also for: iPhone Xs Max

Device orientation

To add landscape or portrait orientation, use the following code:

For portrait:

and (orientation : portrait)

For landscape:

and (orientation : landscape)