몽땅뚝딱 개발자

🚩 반응형 웹디자인 수업 (2021.07~2021.09) ⭐ 목적 · 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다. · 코드 작성 순서에 따라 배치되는 엘리먼트가 아닌 지정된 위치에 고정되어야하는 엘리먼트의 경우, 부모와 자식 속성을 지정하여(position값 지정) 위치를 잡는 방법을 이해한다. · px로 고정된 폭을 잡는 것이 아니라, calc() 함수를 사용하여 디바이스의 폭에 따라 엘리먼트의 폭도 함께 조절하는 방법을 이해한다. 🔗 URL https://hvsundev.github.io/my-portpolio/project2/index.html 혹시나 전체적으로 구현된 모습이나 소스를 보고싶은 분이 계시다면 해당 파일 다운로드 후 알집을 풀고 index.html을 크롬으로 실행하면 볼 수 ..

남들은 다 쉽게하는 것만 같았던 프로젝트 배포,, 나에겐,, 아주아주 미니미한 프로젝트인데도 왜 이리 산넘어 산인지,, 시행착오 끝에 서버에 대한 이해가 점점 더 되고있는 듯 하다. 에러 Parsing error: Unexpected token

에러 ERROR: (gcloud.app.deploy) Cloud build failed. Check logs at https://console.cloud.google.com/cloud-build/builds/1221ffa4-39c8-4d54-b76e-be5f90da1bd7?project=project_num Failure status: UNKNOWN: Error Response: [2] Build failed; check build logs for details ERROR: (gcloud.app.deploy) Cloud build failed. Check logs at https://console.cloud.google.com/cloud-build/builds/1221ffa4-39c8-4d54-b76e-..

🚩 반응형 웹디자인 수업 (2021.07~2021.09) 기본적인 코딩 후, 직접 디자인하고 코딩해보는 시간을 가졌다. 강사님이 주신 레이아웃과 텍스트를 유지한채로 해야했기 때문에.. 이미지 소스가 굉장히 풍부한 스타벅스로 해보기로 결정했다. 사실 내 일을 할 때는 이미 만들어진 화면을 받아 개발을 했던터라 레이아웃 자체를 만들어볼 일이 없었는데 이번에 내 포트폴리오를 준비하면서 디자인과 CSS도 함께 더해보며 화면을 그려보고자 했다. 상자를 나란히 나열하는 것도 어려웠던 내가.. 이렇게 해냈다. 정말 좋은 수업이다. ⭐ 목적 · 전체적인 레이아웃을 위한 엘리먼트를 배치할 수 있다. · float 속성을 사용하여 적절한 위치에 를 배치할 수 있다. · float 속성 사용 후, clear: both를 이..

에러 ERROR: (gcloud.app.deploy) Permissions error fetching application [apps/project_name]. Please make sure that you have permission to view applications on the project and that your_account@developer.gserviceaccount.com has the App Engine Deployer (roles/appengine.deployer) role. ERROR: (gcloud.app.deploy) Permissions error fetching application [apps/project_name]. Please make sure that you have..

- 이미지의 사이즈가 커서 영역이 밀리는 것으로, 이미지 사이즈를 100%로 조정해줘야 한다. .mainimg_m > img { width: 100%; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 반응형으로 만들 때 필요한 태그이다. 사이즈는 아래와 같이 맞추면 된다. /* PC */ @media (min-width: 1024px) { ... css 작성 } /* 태블릿/아이패드 */ @media (min-width: 768px) and {max-width: 1023px} { ... css 작성 } /* 모바일 */ @media (max-width: 767px) { ... css 작성 } /* 세로모니터 판별 */ @media (orientation: portrait) { } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 텍스트와 이미지가 같이 있는 경우엔 text-align: center;로 중간정렬을 할 수 있다. - 이미지만 있는 경우엔 text-align 속성이 적용되지 않는다. 그럴 땐 margin: 0 auto;를 사용하여 중간정렬을 하자. - 코드가 반복되는 경우에는 줄여서 쓸 수 있도록 한다. 예를 들어, #aabbcc일 경우 #abc로 줄여쓰는 것이 좋다. color: #fff; // 하얀색 color: #000; // 검정색 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

에러 Error: Missing required argument #1' Error: Missing required argument #1' ERR .... 원인 서버에 프로젝트를 올린 후, npm i 명령어를 실행 시 생기는 에러이다. npm과 node가 최신 버전이 아니어서 그렇다. 해결 최신버전으로 업데이트하면 된다. 아래 명령어 차례대로 실행 후 npm cache clean --force npm install -g n n stable 이것도 실행해준다. npm install -g npm 그리고 서버를 한번 껐다켜야 한다. 명령어를 3번 정도 실행해봐도 계속 업데이트가 안돼서 껏다켜봤더니 되어있었다. 업데이트가 되었는지 한번 확인해보자. npm -v node -v 출처 우분투 npm install 에러..

- 메뉴에서 구분선을 넣을때는 img 태그와 span 태그 모두 사용해도 되지만 좀 더 깔끔한 구현을 위해서는 :before를 사용한다. - 반대되는 개념인 :after도 있다. - display와 content는 꼭 넣어줘야하는 요소이다. - content 항목: 글자를 넣는다. (여기서는 선만 넣기때문에 영역만 지정해주는 용도로 공백이다.) .util > li:before { display: inline-block; content: ""; width: 1px; height: 10px; background-color: #e1e1e1; margin-right: 10px; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.