김도리의 개발자로서 성장기

웹페이지는 다양한 환경에서 접근할 수 있다. PC에서 만날 수 있고, 모바일로도 만날 수 있고, 태블릿으로도 만날 수 있다. 우리는 웹사이트를 개발하기 전, 설계 단계에서 이를 고려해야 한다. 디자이너가 있는 프로젝트에서는 이를 고려한 디자인이 나오고, 이에 맞춰 퍼블리싱을 해야 한다. 반응형 웹을 만드는 방식은 여러가지가 있다. 기존에 사용되던 반응형 웹 만드는 방법 1. Media Query 각 화면의 비율마다 필요한 스타일을 적용할 수 있도록 도와준다. 실제 코드에서 사용했던 미디어 쿼리 : @media all and (max-width: 1080px) { // 적용할 스타일 속성들을 작성 } 1080px 이하의 화면에서는 {} 안에 적는 스타일 속성들로 적용되어 보여진다. @media 뒤에 붙는 ..

VS Code에서 작업했고, 로컬에서는 JS가 module로 불러올 때 CORS 에러가 나기 때문에 Live Server라는 extension을 설치하여 진행했다. 설치가 끝나면 우측 하단에 Go Live라는 버튼이 생기는데 요거를 클릭하면 가상 서버에 해당 html파일이 띄워진다. 이 상태로 진행해보자. Interactive Web을 배워보고 싶어서 기초부터 시작했다. Interactive Developer라는 진짜 대단한 월클 유투버가 올려주신 강의를 따라서 개발해보았다. 일단 index.html, style.css, test.js, figure.js 파일들을 만든다. style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; hei..

웹 외주 프로젝트를 진행하다가 난관에 봉착했습니다.. (웹은 처음이라,,,) chrome으로는 잘 적용되던 것들이 IE에서는 호환이 안되는 것! 아무리 2022년 6월에 IE 서비스를 종료한다고 해도 이 부분은 고객사와의 약속이니만큼 최선을 다해 호환성을 맞추려 끙끙 댔습니다. 분명 다른 분들도 저와 비슷항 상황을 겪고 있을거라 생각하여 참고해보시라 적어봅니다!!! 이 사이트는 chrome에서 잘 돌아가는 css를 IE에서도 호환이 되게 자동으로 변경해주는 사이트입니다! https://autoprefixer.github.io Autoprefixer CSS online include comment with configuration to the result Select result Autoprefixer o..