웹개발(31)
-
CSS가 안먹힌다..? (+캐시 문제)
PHP 페이지를 유지보수 하던 중에 분명 background를 알맞게 설정했는데 적용이 안 되는 현상이 있었다. 그래서 혹시나 이전에 개발했던 부분의 캐시 문제인가?하고 ctrl+F5를 눌렀더니 바로 적용되었다. CSS에서 왜 이런 캐시 문제가 발생하는지 좀 더 자세히 찾아보았다. CSS를 고쳤는데도 그전과 똑같이 보인다면, 브라우저가 저장해놓은 '캐시'를 사용하기 때문에 그전에 내용이 그대로 보이는 경우가 많다. 해결책으로는 브라우저의 캐시를 지우거나, 파일명 변경해주는 것이 있다. 나 같은 경우에는 Ctrl+F5로 캐시를 삭제했다. * Cache란? 데이터를 임시로 저장해두는 장소. 사용자가 최근에 열어본 페이지로 다시 돌아왔을 때 브라우저는 시간을 줄이고 네트워크에 추가 부담을 덜기 위해, 원래의 ..
2022.01.18 -
[firebase 설치 오류] firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해결방법
안녕하세요. brandy 입니다. firebase를 사용하기 위해 이것저것 설정을 마치고 VSCode 터미널에서 firebase 로그인을 진행하려고 했는데 에러가 떴습니다. 이 에러는 VSCode를 사용하다보면 정말 흔한 오류인데요, 간단하게 PowerShell 관리자 권한을 이용하여 해결할 수 있습니다. 1. PowerShell에 관리자 권한으로 접속해줍니다. 현재 어떤 권한을 가지고 있는지 get-ExecutionPolicy 를 입력해줍니다. 'Restricted'라고 나와있는데요, 현재 권한이 제한되어 있기 때문에 위와 같은 오류가 발생합니다. 2. 권한을 바꿔주기 위해 Set-ExecutionPolicy RemoteSigned로 변경해줍니다. 실행 규칙 변경에 대해 Y를 눌러줍니다. 3. get-..
2022.01.13 -
VSCODE live server 변경
안녕하세요. brandy 입니다. VSCODE를 사용하던 중에 extension으로 설치해두었던 live server가 계속 MS Edge로 뜨는 현상이 있어 이를 변경하였습니다. (저는 계속 Edge로 뜨더라구요 ㅜㅜ) 아무래도 크롬으로 보는게 더 편리하고, 크롬에 더 최적화 되어있기 때문에 chrome으로 변경하고자 합니다. File > Preferences > Settings에서 검색창에 'live server config'를 클릭해주세요. Live Server : Custom Browser이 현재 null로 되어있는데, 이 null 부분을 변경하고자 합니다. chorme으로 live server가 변경된 모습입니다. 각자 편하신 live server로 변경해서 사용하시면 좋을 것 같네요 ! chr..
2022.01.12 -
@ 미디어쿼리에 대하여
안녕하세요. brandy 입니다. 요즘 Web 개발 공부에 다시 매진하고 있는데, 공부하면서 미디어쿼리 라는 것을 알게 되었습니다. 솔직히 말해서 프론트엔드 분야는 남의 일이라고 생각했지만,, 풀스택으로 공부하는게 맞다고 생각하여 프론트엔드 백엔드 둘다 공부를 하고 있습니다. ※ 반응형 웹페이지가 중요한 이유? Responsive Web Design (RWD) 우선 반응형 웹페이지는 하나의 웹사이트에서 PC,스마트폰,태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 페이지 디자인은 사용자가 콘텐츠를 보기 위해 가로로 스크롤하거나 핀치 또는 확대/축소하지 않고도 모든 화면 크기에서 올바르게 렌더링 될 수 있는 경우가 반응형입니다. 출처 : bradf..
2022.01.07 -
웹개발 빠른 마크업을 위한 Emmet 정리
VSCode를 이용하여 웹개발을 많이 진행합니다. 그중에서도 빠른 마크업을 위한 도구인 Emmet(에밋)이 있는데요, 저도 놓치고 있었던 부분이 있어서 한번 정리해보고자 합니다. 빠른 마크업이 중요한 이유 ? html이나 xml 같은 마크업 언어는 코드의 양이 많기 때문에 시간 단축이 중요합니다. 그래서 html에서는 emmet 같은 tool들이 개발자들이 좀 더 빠르게 코드를 작성할 수 있도록 지원해주죠. https://docs.emmet.io/abbreviations/syntax/ 정리하기 앞서, Nesting Operator에 대해 알아보도록 하겠습니다. Nesting Operator은 약어 요소를 생성된 트리 안에 배치하는데 사용하고, 컨텍스트 요소의 내부 또는 근처에 배치할지 여부를 결정합니다...
2022.01.07 -
21.12월 모각코) Javascript 3일차 - HTML+JS
안녕하세요. brandy 입니다. 이번 모각코 Javascript 3차시에서는 HTML과 Javascript를 연결하는 방법에 대해 학습하였습니다. 1222.html click me
2021.12.22