💬 끄적이는 5일차 랜딩페이지 프로젝트 회고

부트캠프 시간에 하루 종일 일어나지도 못하고의자에 계속 앉아 개발만 하니 피곤해서내일이나 일요일에 제대로 쓰도록 하겠습니다😵‍💫오늘은 자기 전, 간단히 어떤 작업을 진행했는지와이런저런 잡담을 하도록 합시다!📌 진행상황✔️ HTML에서 태그 등 불필요한 요소 최대한 줄이기 태그 최대한 줄이고 구조 개선한다고 거의 갈아엎었는데마음에 안들어서 되돌리다가 원본을 날릴 뻔 했었다🫠남자친구가 개발자인데 급해서 물어보니까 브랜치를 별도로 만들어서 테스트 해야된다더라 •••계속 main에서 개발하고 있었어요🥲git checkout -b 브랜치명(새로운 브랜치를 생성하고 자동으로 그 브랜치로 전환)👉🏻 결론div 태그를 아예 안 쓸 수는 없었고반드시 필요한 부분이 존재했습니다.다른 시맨틱태그로 대체하려니까..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 23.
• textsms

[🥸JavaScript]📝카카오 지도 API 사용법과 키 숨기기(gitignore )➰랜딩 페이지

📍 진행상황 1️⃣ 카카오 API 키 값 숨기기 2️⃣ 이메일 입력 창 디자인 개선 📌 개발 완료 부분 시연 영상전체적인 레이아웃과 스타일, 기능 등 얼추 완성이 되었으니 이제 더욱 완성도 있게끔 작업을 해주고 있습니다. 오늘은 지도 API 관련 스크립트 작업을 중점으로 해서 이전 시간까지 진행했던 내용 중 에러가 있었던 부분이나 새로운 방식으로 해결해보는 시간을 가졌습니다😀 그러면 아래에서 어떻게 구현했는지 자세히 이야기 해보는 시간을 갖도록 하겠습니다.⭐ 코드리뷰➰카카오 지도 API 숨기기개인적으로 API를 처음 사용해보는 입장에서 어떻게 해야되는지 헤메기도 하고 에러가 계속 떠서 거의 반나절이 걸려 힘든 파트였는데요🤬 그래도 어떻게 하다보니 API 키 값을 숨기는데 성공했답니다! 그럼 피땀눈물 흘려..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 22.
• textsms

[🥸JavaScript]📝랜딩페이지 만들기➰카카오맵 API, 이메일 유효성 검사, 사이드 메뉴

📍 진행상황 🧷 랜딩페이지 웹, 모바일 버전 화면 작업 진행 👉🏻 7of7 진행 완료 ◾ 태그 줄바꿈 적용 방식 조정 ◾ 카카오 API를 통해 마커 및 맵 레벨 초기화 기능 추가, 아이콘 변경 ◾ 구독하기 버튼의 웹과 모바일 화면 간 위치 조정 ◾ 이메일 입력 후 버튼 클릭 시 모달창 띄우기 및 유효성 검사 ◾ 헤더 사이드 메뉴바 작업 ◾ 레이아웃 전체 세밀 조정 📌 개발 완료 부분 시연 영상 ✅ 레이아웃의 간격, 요소의 크기 등을 피그마 디자인 파일과 일치하도록 조정했습니다. 추가로, 텍스트와 이미지의 배치도 최적화하였습니다. ✅ 웹에서는 태그에 `display: none`을 적용하여 줄바꿈을 숨기고, 모바일에서는 `display: flex`를 적용하여 줄바꿈을 표시했습니다. 📁 카카오맵 API 사용과..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 21.
• textsms

[🥸HTML/CSS]📝랜딩페이지 좌우 여백, 헤더 고정, 스크롤 탑 버튼➰(반응형 웹페이지)

📍 진행상황🧷 랜딩페이지 헤더와 메인 페이지 👉🏻 4of7 진행 완료 ◾ 미디어 속성 이용하여 모바일 버전 화면 작업 👉🏻 글꼴 크기, 간격 세부 작업 미진행◾ 반응형 웹을 위한 컨테이너 max-width 속성 적용시 오류 해결 ◾ 첫 번째 섹션의 레이아웃에 overflow 속성 적용하여 이미지 하단 자르기 완료 ◾ 갤러리 형태의 여러 이미지 flex → grid 레이아웃 변경◾ 헤더 고정과 스크롤 탑 버튼 구현 완료📌 개발 완료 부분 시연 영상📁 컨테이너를 활용한 페이지 좌우 여백 이전 게시글을 보면 반응형 웹이 왼쪽 이미지처럼 막 늘어나도 되는건지 의문을 가졌었는데요.여러 홈페이지를 서치해보니 단순히 제가 잘못 만든 부분이라는 것을 알게 되었습니다.반응형 웹 페이지는 여백은 늘어나되 콘..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 20.
• textsms

[🥸HTML/CSS]📝랜딩페이지 시맨틱 구조 분석 및 설계➰(반응형 웹페이지)

📍 개요◾ 프론트엔드 화면을 구축하기 위해 랜딩페이지의 구조를 분석하고 코드를 작성해보는 시간을 가졌습니다.◾ 헤더와 메인의 첫 번째 을 구현하는 작업을 진행하였습니다.랜딩페이지는 주로 마케팅에서 중요한 역할로 많이 사용되는 페이지인데요!기업이나 회사의 상품이나 서비스 등을 스토리텔링 형식으로 안내하는 페이지를 말합니다.📁 시맨틱 태그를 활용한 랜딩페이지 구조 분석하기 태그를 남발하지 않고 각 화면마다 어떤 의미를 가지고 있는지 구분하기 위해시맨틱 태그를 적극적으로 활용하는 것이 좋은 방법인데요. 크게 header, main, footer로 나누고 헤더와 푸터에는 로고와 네비게이션,메인은 7개의 section으로 나누어 보았습니다. ✅ 왜 이렇게 나누게 되었나요?section은 페이지의 큰 주제나 구..

• format_list_bulleted 🎨 HTML, CSS
• · 2024. 8. 19.
• textsms

[🥸JavaScript]📝 this 호출방식과 사용법, JSON 개념➰(parse, stringify)

📍 개요 ◾ 자바스크립트의 `this`, 반복문, 배열 메서드, JSON 메서드를 이해하고 활용하는 방법에 대해 학습하였습니다. 1️⃣ this 키워드 이해하기📁 일반 함수 호출function showThis() { console.log(this); } showThis(); // 'this'는 브라우저 환경에서 window 객체를 가리킵니다. 👉🏻 함수가 전역 컨텍스트에서 호출될 때 this는 전역 객체를 참조합니다. 📁 화살표 함수 호출const obj = { f: function () { const ff = () => { console.log(this); }; ff(); const fff = function () { console.log(this); }; fff(); }, }; obj.f(); // ..

• format_list_bulleted 🖥️ JavaScript
• · 2024. 8. 14.
• textsms