이미지(썸네일) 크기조정 및 가운데 정렬, 자르기 이미지(썸네일)의 크기를 조정하거나 노출하고 싶은 부분만을 잘라내어(Crop) 출력하는 방법들에 대한 이야기입니다. 서버단에서 넘겨받은 이미지를 재가공할때 생각해볼 만한 기법들을 소개합니다. 이미지 크기조정에 대한 고려사항 많은 경우, 서버단에서 출력할 이미지를 여러 라이브러리등을 통해 일정한 크기로 재조정(resizing)해서 넘겨주고 이를 그대로 출력해왔다. 최근에 이르러서는 유동적인 웹 디자인으로 인해 다양한 이미지 크기에 대한 대응을 요구하기.. 웹개발론/크로스브라우징 2018.12.01 11:00
여러가지 기기의 중단점(breakpoint) 반응형 웹디자인을 만들때 특정 중단점을 기준으로 디자인을 구상하는 것은 현명하지 못한 결과를 초래한다. 수많은 기기의 뷰포트들을 각각의 중단점에 맞게 디자인을 구상하지 말고 전체를 아우르는 유동성있는 디자인이 작업의 노고를 줄이는 지름길이다. 다만 경우에 따라 특정 기기들의 뷰포트가 필요한 경우가 있기에 이를 조사해봤다. 스마트폰(Smartphone) 아이폰(iphones) /* ----------- iPhone 4 and 4S ---------.. 웹개발론/반응형웹디자인 2016.11.07 11:00
인터넷 익스플로우 구버전 지원 종료(IE8,IE9,IE10) MS(마이크로소프트)는 지난 1월 13일부로 IE(인터넷 익스플로우) 구버전에 대한 정기 보안 업데이트를 지원 종료하였습니다. 이후 발생할 수 있는 보안 취약점에 대해 브라우저를 업데이트(IE11, Edge)하거나 크롬이나 파이어폭스같은 다른 브라우저 사용을 권고합니다. IE 지원 종료 브라우저를 사용하고 있다면? 지원 종료된 브라우저는 더 이상 보안 업데이트, 비보안 업데이트, 무료나 유료 지원 옵션 또는 온라인 기술 콘텐츠 업데이트에.. 웹개발론/웹표준, 접근성 2016.01.14 18:57
IE7에서 :before, :after 선택자와 content 속성 대체방안 IE7을 고려해야하는 페이지를 제작하는 경우, :before 나 :after 와 같은 가상 선택자를 지원하지 않아 애를 먹곤 합니다. 설상가상으로 content 속성까지 지원하지 않지요. 이에 대한 대체방안을 모색해봅니다. :before, :after 선택자 대체방안 IE7에서는 :before 와 :after 가상 선택자를 대체하기 위해서 새로운 요소를 생성하고 이에 클래스명을 부여하는 방법이 사용된다. 아래의 예시와 같이, 이 표현식은 자바스.. 웹개발론/크로스브라우징 2015.10.26 11:00
안드로이드 브라우저 테스트의 난해함 안드로이드 브라우저들의 파편화에 대한 이야기입니다. 원문은 THE ANDROID BROWSER입니다. 서문 데스크탑의 브라우저 테스트가 어렵다고 생각되는가? 안드로이드 기기의 브라우저를 테스트한다면 지옥을 경험하게 될지어다~ 모든 브라우저들은 다르게 작동하고 이는 다른 결과를 렌더링하게 된다. 안드로이드에는 많은 브라우저가 존재하며, 동일한 브라우저라도 많은 변경점이 있다. 웹뷰(WebView) 안드로이드는 웹킷(WebKit) 기반의 웹뷰도 .. 웹개발론/크로스브라우징 2015.10.02 11:00
즐겨찾기(Bookmark) 버튼 크로스브라우징 즐겨찾기 버튼을 평소에는 잘 추가하지 않는 편입니다만, 요청에 의해 구현된 모델을 찾아보니 역시나 브라우저별로 다른 접근방법이 필요했습니다. 국내 검색 결과들에서는 오래전에 작성된 자료들이라 최근에 사용하기에 부적합해 관련된 사항을 정리해서 공유합니다. 즐겨찾기 크로스 브라우징 북마크(즐겨찾기로 알려진)는 웹페이지를 브라우저에 저장해두고 바로가기하는 기능이다. 필요에 따라 사용자가 언제든지 페이지를 즐겨찾기에 추가할 수 있지만, 이를 구현하는 .. 웹개발론/크로스브라우징 2015.09.02 11:00
poly-checked - :checked 의사 클래스 크로스브라우징 :checked 속성은 폼 필드요소들인 checkbox 나 radio 의 선택 상태를 나타내는 속성입니다. 이는 마치 자바스크립트의 클릭 이벤트를 흉내내는 것과 같아서, CSS만을 이용해서 이벤트를 수신하는 효과를 구현할 수 있습니다. 가령 메뉴나 탭등과 같이 전과 후의 디자인을 변경하는 경우가 있습니다. poly-checked 소개 IE8과 그 이하에서 :checked 의사 클래스를 추가하는 폴리필로서, IE8과 IE7에서 테스트되었다. .. 웹개발론/크로스브라우징 2015.08.03 11:00
폼 필드(input type="file") 디자인 #4 폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 현황 파일 필드의 디자인은 브라우저마다 제 각각이며, 선택한 파일의 이름을 표시하는 부분과 업로드 버튼이 한데 묶여 있어 이를 각자 컨트롤할 수 있는 방법이 없다. 또한 스타일링을 위해 CSS를 적용해보면 어떤 것은 내부 박스에 영향을 주고 어떤것은 외부를 감싼 박스에만 영향을 미친다. .. 웹개발론/크로스브라우징 2015.07.27 16:00
폼필드(체크박스, 라디오) 디자인 #3 체크박스와 라디오버튼의 정렬과 디자인은 예전부터 골치를 아프게 하는 작업이였습니다. 관련하여 현재 애용되는 디자인 방법과 브라우저 호환성을 확보하는 방법에 대하여 알아봅니다. 체크박스와 라디오버튼 디자인 현황 모던 브라우저들과 IE11은 체크박스와 라디오버튼의 크기정도는 조정할 수 있다. 모바일 브라우저에서는 기본으로 제공되는 체크박스와 라디오버튼의 선택영역이 매우 작게 표시되어 선택의 불편함이 가중되기에 이 크기를 변경하는 것이 추천된다. we.. 웹개발론/크로스브라우징 2015.07.27 11:00
폼 필드(select 박스) 디자인 #2 폼 필드들 중에 가장 디자인하기 까다로운 것이 select 박스입니다. 이에 대한 현실을 파악하고 대체방안들을 모색해 봅니다. Select 디자인의 현황 네이티브 select 박스의 디자인상의 한계로 인해 많은 플러그인들에서 select 박스의 구조를 div 와 ul 요소등으로 치환하여 사용한다. 물론 근래의 대부분의 플러그인이 그렇듯이 구버전의 IE에 대한 지원이 부족하다. 그나마 오래전에 개발된 jQuery Selectbox plugin 정도가.. 웹개발론/크로스브라우징 2015.07.24 06:00
폼 필드(input type="text") 디자인 #1 계속해서 이어지는 폼관련 요소들에 대한 이야기입니다. 폼의 각 필드들을 디자인하면서 고민했던 점들과 대안책들을 순차적으로 다루어 봅니다. label 요소와 placeholder 속성 구분 label 요소는 for 속성과 연결된 필드들(input, select, textarea, checkbox, radio)를 가르키는 요소이다. 즉 입력필드들의 제목과 같은 역할을 하며, 때로는 이 요소를 이용해서 상호작용을 대신할 수 있다. placehold.. 웹개발론/크로스브라우징 2015.07.21 10:00
input 이벤트 감지 크로스브라우징 폼 검증을 위해 값의 변경을 감지한 후, 이벤트를 수신하여 유효성 검증을 하고 오류 메세지를 표시하는 작업에 열을 올리고 있었습니다. 실시간으로 변경되는 값을 수신하고 싶었고 관련하여 이벤트의 종류와 기능을 살펴보다가 어느정도 결론에 도달하여 내용을 공유합니다. 폼 검증시 사용되는 이벤트 기본적으로 폼 검증시에는 해당 input 필드에 값이 입력되고 포커스가 해제되면 발생하는 blur이벤트를 많이 사용한다. 대부분의 경우 유효한 방법이지만, 작.. 웹개발론/크로스브라우징 2015.07.20 14:42
화면 깜빡임(FOUC) 문제해결 어쩌면 낯선 단어일 수도 있습니다. 자꾸 어떤 단어와 헷갈리기도 하고... 웹문서를 작성하다가 요소들의 변화가 눈에 띄어 화면의 깜빡거림이 눈에 거슬리는 경우가 있습니다. 이와 관련된 내용을 다루어 봅니다. FOUC 란 무엇인가? FOUC(Flash of Unstyled Content)는 브라우저로 웹문서에 접근했을때, 미처 CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일의 적용 전과 적용 후가 그.. 웹개발론/크로스브라우징 2015.06.18 11:00
In-Field Labels jQuery Plugin - 폼힌트 크로스브라우징 타임머신을 타고 과거로 돌아가는 심정으로 placeholder 속성을 대체하는 또 다른 방법을 소개합니다. placeholder 속성이 지원되지 않았던 과거에는 label 요소를 이용해 힌트를 제공하기도 했습니다. 비록 그 사용목적이 스펙에 맞지 않을지라도... In-Field Labels jQuery Plugin 소개 필드 안쪽에 label 요소를 지원하는 형태로 올바른 형식의 HTML 폼을 만드는 간단한 플러그인이다. label 요소에 포커스.. 웹개발론/크로스브라우징 2015.05.22 17:00
