자라자

웹 개발을 하면서 프론트엔드로서 가장 힘들었던 부분이었다고 해도 과언이 아닌..... 미디어 쿼리!!! 시간이 지날수록 pc(컴퓨터)나 태블릿, 스마트폰 등 정말 다양한 수많은 화면 너비의 디바이스들이 계속해서 생겨남으로써 이러한 모든 상황에서도 화면이 깨지거나 핵심 구성요소들이 보이지 않는 등의 문제가 생기지 않도록 유연하게 반응형 웹을 만드는 '미디어 쿼리'가 매우 중요해졌다. 미디어 쿼리는 뷰포트의 너비나 높이, 장치의 너비와 높이 등에 대해 규칙을 정할 수 있다. @media screen and (max-width: 800px) 미디어 쿼리의 예로는 위 코드가 있다. 코드를 분석해보면 @media -> 미디어 쿼리 시작을 나타내는 코드 screen -> 미디어 유형(all/print/screen ..

음식 사진을 등록할 때 파일 열기 버튼을 누르고 (깔끔한 파일 선택 버튼 만드는 방법은 전 글에 포스팅 하였습니다.^^) 사진을 등록하면 기본적으로 해당 화면에서 사진이 바로 보이지 않고 사진의 파일명만 보일 것이다. 등록한 사진을 등록자가 해당 화면에서 바로 확인할 수 있도록 구현하려면 어떻게 해야 할까? 자바스크립트를 이용하면 사진을 바로 확인 가능하도록 구현할 수 있다. function setThumbnail(event) { var reader = new FileReader(); reader.onload = function(event) { var img = document.createElement("img"); img.setAttribute("src", event.target.result); doc..

맛집의 음식사진을 등록하고 싶으면 위 사진의 파일 선택을 눌러 원하는 음식사진을 선택해주면 된다. 그런데 기본 파일 선택 버튼이 정말 예뻐 보이지 않았던 나는 조금 더 깔끔한 버튼을 만들고 싶었다. 3. 음식사진 등록 파일 열기 따라서 html에서 이런식으로 label을 사용해서 새로운 파일열기 버튼을 만들고 /* 못생긴 기존 input 숨기기 */ #file { visibility: hidden; position:absolute; top:0%; } css에서 위의 코드의 visibility: hidden;을 이용하여 원래 기본의 파일선택 버튼을 숨겼다. 그 후 약간의 위치조정을 해준... 그 결과...!! 깔끔하고 예쁜 파일 열기 버튼이 보인다 ㅎㅎ! 프론트엔드로서 코드를 짤 때마다, 직접 사용자가 보..