UX/UI 기본코딩 개인과제

💡 주제 : “피그마를 이용한 원페이지 반응형 웹사이트”를 만들어 봅시다.

과제가 끝나면 아래 항목에 대한 자신감을 얻을 수 있어요
- figma 디자인을 기반으로 html과 css를 이용한 기본적인 퍼블리싱이 가능하다. (Dev mode 사용)
- media 쿼리를 이용한 모바일 반응형 퍼블리싱을 적용할 수 있다.
- 내가 만든 웹사이트를 배포할 수 있다.

---

☝🏻 필수 구현 사항
데스크탑

desktop 완성

줄 서서 튜터님 기다리는 중

이번 코딩수업은 전에 없이 튜터님을 찾아갈 수 밖에 없는 구조인것 같다. 하하. 혼자서는 정말 어쩔 수 없다. 튜터님께서 알려주지 않으면 절대 몰랐을 내용이였다. 덕분에 좀 더 수월해졌다. 이렇게 코딩과 친해지는 계기가 되다디. 멘탈케어는 내가 받아야겠다 ㅋㅋ 수정하는 과제 첫번째, 멘탈케어 로고를 수정하지 못해서 이렇게 버벅거리다니.. 덕분에 다른 문제에 대한 소스도 좀 얻어왔다. 검사하면 다 나온다던 튜터님 무섭다.

---

이 부분의 문제는, 병렬 상태인 로고를 직렬로 만들기이다. 그리고 아래로 내려가 있는 글씨를 위로 올려보는 것. 우선 HTML을 긁어온 파일을 브라우저에서 열고, 해당 부분 위에 마우스를 올려놓고 오른쪽 마우스-검사에 들어간다. 그부분에서 해당 부분에 마우스를 올리면 색이 브라우저 화면에서 색이 바뀐다. 정확한 지점을 파악하고 그 부분의 스타일 상세보기로 파악하면 된다. 원인은 넓이 값이 좁아 글씨가 아래로 쳐진 형상이었다. 두번째는, top에 10px값이 적용되어 있었다. 그부분을 지우니 자연스럽게 글씨가 올라갔다.

---

이부분을 해결할 때에는 위와 같은 방식으로 쉽게 해결 할 수 있었다. 해당 부분을 드래그 한 후에, 오른쪽 마우스 검사 클릭하면 바로 선택이 된다. 그부분에서 어떤부분에 어떤 값이 적용되었는지 쉽게 확인 할 수 있었다. margin값을 0px로 주니 딱 맞았다.

 

---

글자 간격이 맞지 않는 부분을 수정하기 미션이다. 높이값을 90px에서 60px로 줄여주니 적절하게 맞아보였다. 

---

width부분이 크게 잡혀있었다. 그 부분의 값을 줄여주니 자동으로 줄바꿈이 되었다. 
자연스럽게 Everyone Deserve/ to be Happy!.

---

제목 부분은 투명하게 값이 매겨져 있었다. 본문 내용 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 부분에 상,하 패딩값이 매겨져 있었다. style에 margin값을 0px으로 입력하니, 얼추 맞는 그림이 나왔다. 추가적으로, 녹색 동그라미 옆에 있는 available의 margin값을 0px을 주어 간격을 맞추었다.

본문내용에 margin값과 Available의 margin값을 0px을 주었다.

모바일

mobile 완성

모바일 과제를 따라하다가 막혀서 결국 튜터님께 찾아갔다. 햄버거메뉴를 누르면, 배경색이 투명한 상태에서 메뉴글씨가 노출이 되는 문제였다. 그부분이 왜 그렇게 되었나 튜터님께서 잘 짚어주셨다. 문제는 코드를 잘못 가져와서 붙여넣은 탓이었다. {} 안에 코드가 들어가야하는데, 밖으로 나와서 코드가 붙여져 있었다. 그런 문제를 2번이나 반복한 탓에 코드가 꼬인것. 이걸 한눈에 알아보시는 튜터님을 보고 참 놀라웠다. 내가 한글을 읽을 수 있는 것처럼 튜터님도 코드를 보고 해석을 바로 하실 수 있는 건가. 이정도는 되어야지 개발자를 할 수 있나보다. 나는 브이코드를 오랫동안 응시하면 눈이 너무 아파오던데, 어지럽고... 개발자 분들은 정말 대단하신 것 같다. 그리하야 드디어 과제 데스크톱과 모바일을 끝냈다. 이제는 못 다들은 수업 5주차 강의를 마져 수강하고, 배보하기 작업만이 남았다.
그 후에, 좀 더 욕심을 내서 나만의 웹사이트를 하나 만들어 볼 계획이다. 이것도 분명 어디에선가 막히겠지. 튜터님 죄송하지만, 좀 찾아 뵐게요! 감사합니다.
배포하기
https://song-minjin.github.io/sparta_UXUI1_SONGminjin/
✅ 배포하기 과정을 자세하게 살펴보자.
1. github에서 로그인한다. 메인화면에서 좌측 바에 있는 Repositories에서 New를 클릭한다.

2. Create a new repository 페이지에서 Repository name을 작성해주고, 바로 Create repository를 누른다.

3. uploading an existing file을 클릭해준다. 

4. Visual Studio code 앱에서 모든 파일을 포함하고 있는 "DESKTOP"에서 "index.html" 우측 마우스 클릭,
"Finder에 표시"를 클릭한다.

5. Finder 안에 있는 모든 파일을 드래그 앤 드랍하여 Drag files here to add them to your repository 안에 넣는다.

6. Commit changes 버튼을 과감하게 누르다.

7. "Setting" 카테고리안에 "Pages" 채널에 들어간다. "Branch"에서 'None'에서 'Main'으로 변경후에 "Save" 버튼을 클릭한다.

8. "Setting" 카테고리에서 제일 하단으로 내려가면 "Delete this repository"를 누르고 지시대로 따르면 해당 배포 사이트를 삭제할 수 있다.

9. 조금 기다리면, 배포된 사이트를 확인 할 수 있다.