자라자

웹 개발을 하면서 프론트엔드로서 가장 힘들었던 부분이었다고 해도 과언이 아닌..... 미디어 쿼리!!! 시간이 지날수록 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;을 이용하여 원래 기본의 파일선택 버튼을 숨겼다. 그 후 약간의 위치조정을 해준... 그 결과...!! 깔끔하고 예쁜 파일 열기 버튼이 보인다 ㅎㅎ! 프론트엔드로서 코드를 짤 때마다, 직접 사용자가 보..

개발을 하면서 꼭 거쳐야 하는 과정이 바로 '오류 해결'입니다. 개발 중에 예기치 못한 오류가 종종 발생하기도 하는데요, 오늘은 이러한 오류나 에러들을 해결해보도록 하겠습니다. (개발환경 Visual Studio Code 사용) 1. CSS적용 오류 css란 html 파일을 시각적으로 꾸며주는 역할을 하는 언어인데요. 이런 css 적용법으로는 크게 두가지가 있습니다. 첫번째는 html 문서 속 태그 안에서 style 속성을 작성하는 방법(인라인 스타일), 두번째는 html 파일 전체의 스타일을 하나의 css파일을 만들어 변경하는 방법(외부 스타일)입니다. (사실 html 파일의 요소에 요소로 사용하여 적용하는 내부 스타일 방법도 있지만 여기서는 넘어가도록 하겠습니다.) html 문서 속에서 css작성(인..