이미지 가득 채우기

단순하게 생각하면 그냥 가로 100% 짜리 이미지를 브라우저에 넣으면 된다. 그런데 조금 더 생각해 보면 고려해야 할 것들이 많다.

시작하며

로직을 조금씩 기록해 두어 향후 있을 개발에 불필요한 시간을 사용하지 않는데 목적이 있다.
엘리먼트가 화면에 표시되는 순간부터 사라질때 까지를 확인 할 수 있는 방법이다.

Math.PI

• 원주율 : 3.141592653589793 (무리수)
• 원의 둘레
  • 반지름 : r
  • 둘레 = r*2*π

모바일에서 iframe ?

iframe 은 현재 화면에서 도메인에 상관 없이 다른 페이지를 보여주어야 할때 유용하다. 이점은 인정… 하지만 모바일에서는 조금 다르다. 나는 최근에 내가 겪어야만 했던 모바일 브라우저에서의 iframe 문제에 대해 몇가지 예를 들어 정리 해 보겠다.

##yeoman 권한 에러

IOS safari 브라우저의 버그

상단이든 하단이든 혹은 촤측이든… 어디든 아직까지 모든 모바일 브라우저가 안정적이지 않다.
지난 포스팅에 이어 이번에도 mobile safari 의 문제이다. 상황도 비슷한 것이 상단, 하단에 각각 고정되는 element 가 있고 화면 중앙에 컨텐츠 영역이 있다.

<style>
	#topNav{
		min-width: 320px;
		width:100%;
		height:60px;
		position: fixed;
		left: 0;
		top: 0;
	}
	#contents{
		min-width: 320px;
		width:100%;
		padding:60px 0 100px;
	}
	#footNav{
		min-width: 320px;
		width:100%;
		height: 100px;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>
<!-- 생략... -->
<div id="topNav">상단 고정영역</div>
<div id="contents">컨텐츠 영역</div>
<div id="footNav">하단 고정영역</div>

하단 고정 레이아웃

• 아래와 같이 html, css 를 작성하면 해당 영역은 하단에 고정된다.

<div id="wrap">
	<div class="contents">컨텐츠 영역</div>
	<div class="fixed">
		<input type="text">
	</div>
</div>

##호기심에서 시작. - 모바일 브라우저는 몇개의 이미지와 css 를 동시에 다운로드 할까? - 중간에 js 파일이 들어가 있다면 과연 javascript blocking 이 정말 발생할까? 그것이 미치는 영향은 어느정도 일까?