포트폴리오 만들기 프로젝트 1일차 : 목표는 대충이라도.......

 

밀린 강의에 공부에 포스팅에

새벽까지 열일하다가 자려고보니 해가 뜨고 있다.

 

지금 자면 분명히 오후 늦게야 일어나겠지..

그래서 엘리스 AI 트랙 실시간 강의 녹화본을 틀었다.

 

일단 손을 놨던 Git 부터 복습하는데

깃을 하다보니 HTML을 만들게 되고

HTML을 만지다보니 CSS를 하게 되고

결국 포트폴리오 만들기 프로젝트를 시작했다 ㅎ

 

 

< 프로젝트 목표 : 대충이라도 좋으니 JS까지는 활용해서 동적인 홈페이지를 만들자 >

 

 

 

 

살아생전 포트폴리오 라는건 본 적도 없는 1인..

그냥 무작정 그리고 무작정 만들었다

 

 

 

 

Git은 막상 보니까 할만했다.

물론 GUI 라서 그런 것 ㅋ

CLI로 배울 때는 진짜 죽고 싶었다.. 머리에 하나도 안들어와 ㅜㅜ

 

차라리 GUI로 돌아가는(?) 상황을 좀 알고

그걸 CLI로 적용하는게 나을 것 같다

 

 

 

 

중간 결과...

 

단색으로 꾸미는건 정말 아닌 것 같아서

Unsplash를 통해 배경 이미지를 가져왔다.

 

 

 

 

... 역시 디자인이 전부인가.

배경 이미지를 썼더니 퀄리티가 급 좋아졌다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

약 3시간 정도 작업한 결과인데

디자인으론 꽤 만족스럽다

main 페이지는 이걸로 끝내도 될 듯 ㅎ

 

근데 매우 큰 문제가 있다...

 

 

 

 

모바일 사이즈로 보면 틀어진다는거..............

대체 왜 이러는거야... 왜.......

 

 

보니까 중간에 이미지와 인사말 영역을 div로 묶어서 grid 했는데

div에 배경색을 준게 완전 잘리고 있다.

왜???????????? 왜냐고!!!!!!

 

근데 PC버전으로는 화면을 늘리거나 줄여도

거기에 맞춰서 잘 늘어나고 잘 줄어든다

 

의문 1. 왜 모바일 화면으로 보면 틀어지는가?

 

 

 

 

네비게이션 부분도 grid로 영역을 나눴는데

그랬더니 자리 배치가 너무 어려웠다.

 

내가 원하는건 3개의 메뉴가 가운데로 조금 몰려있는건데

grid로 하니까 자리 배치가 모 아님 도 ㅋㅋㅋ

그래서 그냥 1:1:1로 맞춘 뒤, 인라인 스타일로 text-align을 주었다

 

이래도 되는걸까...

모르겠다 ㅜㅜ

 

의문 2. grid로 영역을 나눈 다음에 자리 배치를 잘 하는 방법은 무엇일까

 

 

 

 

폰트 불러오는 방법은 좀 더 연습이 필요할 것 같다

새벽이라 정신이 혼미하다보니 폰트 링크 따오는 방법도 못찾겠고

결국 누가 올린거 긁어다 썼다 ㅎ...

 

정신 차리고보니 방법이 잘 올라와 있더라.

 

구글폰트 웹폰트 설정하는방법 CSS3 스타일 링크 HTML코딩 외부링크로 제작

 

의문 3. 폰트 연동하는 방법

이건 다음에 꼭 복습하기!!!!!!!!!!!!!!

 

 

 

 

프로젝트 하면서 새롭게 배운 것-

 

배경 이미지를 투명하게 만들 때 opacity 를 사용할텐데

이미지가 아니라 색을 사용했을 땐

이렇게 rgba로 투명도를 조절하면 된다

 

rgba를 사용하면 좋은 점은

opacity는 배경색을 비롯해 컨텐츠, 폰트 등등

그 영역에 포함된 모든 것을 투명하게 만드는데

rgba는 배경색만 투명하게 만든다고 한다.

 

사실 누가 배경색도 opacity 속성으로 투명하게 만들 수 있다던데

몰라... 나는 안되더라 ㅜㅜ

 

의문 4. 배경색도 opacity로 투명하게 만들 수 있나?

 

의문인 부분들은 두고 두고 더 공부해야지.

1일차 프로젝트 일기는 끝!