개발 공부/Projects

HTML/CSS) Travel

Ryomi 2022. 10. 26. 10:03
728x90
반응형

 

- 학습 내용

  • Sementic Elements 
  • display: flex;   justify-content: space-between;  align-items: center;
  • position: absolutebox-sizing: border-box;
  • text-transform    text-shadow
  • 그라데이션
  • 그리드
  • nth-of-type(num)
  • main요소의 배경 위에 header 놓기
  • object-fit

 

- 회 고

: 위 페이지를 만들면서 새로운 것들을 많이 익혔다. 시멘틱 요소는 이론으로는 학습했지만 사용한 경험이 거의 없어 이번 강의가 특히 유익했다. 이번 경험을 통해 적절한 곳에 시멘틱 요소를 사용하는 연습을 해야겠다는 생각이 들었다. 사진을 보고 홈 페이지에 배경화면을 넣어야 할 때, 어떻게 해야 하나 한참을 고민했다. 아마 이번 페이지를 만들며 가장 고민했던 부분일 것이다.  솔루션은 'position: absolute'를 사용해 전체 화면을 덮는 것이었는데, 답을 알고 나니 뭔가 허탈했다. 이론으로 접한 내용인데, 사용한 적이 없어 어떻게 써야 할지를 몰라 속상하기도 했다. 게을러지지 말아야지...

모르는 것을 배우고 알았던 개념을 사용하여 작업하는 것에 즐거웠다. 특히 git과 github를 사용할 수 있게 되니 더욱 그렇다. 불과 얼마 전까지만 하더라도 git과 github 사용법을 몰라 답답했기에 한동안 학습을 피했다. 하지만 멘토님께서 작업한 내용을 커밋하고 업로드하는 습관을 길러야 한다길래 마음을 다잡았다. 그리고 몇 시간 동안 앉아서 씨름했고 마침내 사용하는 방법을 익히게 되었다. 역시, 시간을 투자해 익숙해지는 것이 답인가 보다. 그렇게 git과 github도 해결하고 나니나니 내가 한 작업을 업로드하는 것에 흥미를 느끼는 중이다. 배운 내용들을 잘 정리하고 연습하며 익혀야지. 오늘도 파이팅 😁

728x90
반응형

'개발 공부 > Projects' 카테고리의 다른 글

HTML/CSS/JS) Product Name  (0) 2022.11.05
HTML/CSS) Contact Us  (1) 2022.11.01
HTML/CSS) Responsive-Web  (0) 2022.10.27
HTML/CSS) My Upcoming Challenges  (0) 2022.10.25
HTML / CSS) 계산기 만들기  (0) 2022.08.02