시작하기전에...
프론트엔드에 대한 기초적이고 기본적인 지식들 또한 필요하기에 열심히 작성해보려 합니다.
목표
- 복잡한 코드나 인터넷에 떠도는 코드를 마구잡이로 복붙하기보다 내가 아는 지식 안에서 작성하고 모르는 개념은 이해하고 추가하기
- 처음부터 완벽한 코드를 작성하기를 바라지 말고 몇번이고 고치고 또 고쳐가기
- 코드를 만든 나도, 코드를 보는 다른 사람도 이해하기 쉽게 작성하기
본문
첫 시도
가장 먼저 한 것은 어떤 구조를 가질지에 대한 고민이었습니다.
그리고 고민 끝에 링크를 통해 각각의 페이지를 이동하는 모델을 구상했습니다.
스케치
머리로만 생각하려니 정리가 잘 안되서 그려보았습니다.
가장 중점적으로 생각한 부분은 많은 내용을 넣기보다 필요한 것만 넣고 거의 모든 요소가 링크를 가지고 이동하는 것에 초점을 두었습니다.
코드 맛보기
기본적으로 동일하게 구성되는 <head>에 대한 설명은 제외하고
먼저 header 파트부터 리뷰해보겠습니다.
1. html 코드
처음 만들었던 구조입니다. semantic 구조는 써야겠는데 아직 제대로 이해하진 못했고 그렇다고 계속 이론만 하기에는 좀 부족하다 생각되어 만들어보고 후에 손보자!라는 마음으로 만들었습니다.
이제와서 보니 semantic 요소와 구조에 대해 많이 부족했다고 느껴집니다.(물론 지금도 많이 부족합니다😢)
다른 html 부분도 이와 비슷합니다. 지금 리뷰하며 드는 생각은 왜 div로 한번 감싸고 들어갔을까?라는 의문이 듭니다...🤔
CSS 클래스명 작성과 관련해서는 BEM 방식 을 적용해보려 하였으나 이전에 잠깐 훑어본 수준으로는 BEM 방식이 요구하는 수준의 클래스명을 작성할 수 없었습니다. 이 역시 만들고 손보자는 생각으로 꾸역꾸역 작성한 눈물겨운 코드입니다.
2. CSS 코드
css의 경우 이전에 클론코딩 강의를 들었던 적이 있었는데 그 때 기억을 살려서 이것저것 적용해 보았었습니다. 티는 잘 안나지만 티내보자면😅
- 위에 보이는 components 폴더는 여러 페이지에서 중복되게 사용되는 css 기능을 모아두는 곳이고 screen 폴더는 한 개의 페이지에만 사용되는 css 기능을 모아두는 곳입니다. 물론 잘 사용하지 못하고 흉내내기에 급했던 것 같습니다;;
- 페이지 구역은 flex 기능을 통해 나눴다. grid 기능이 핫하다던데... 사용할 줄 몰라 우선 조금이나마 익숙한 flex를 사용했다.
- 그나마 유용하게 써먹은 개념이 있다면
@import개념이었습니다.@import를 통해 style.css 파일에 다른 css파일들을 연결하면 html파일에서는 style.css 파일 하나만<link>요소로 연결하여 코드를 적게 사용할 수 있다는 장점을 가지고 있습니다.(코드를 보기 좋게 해주는 가시성에 도움을 주었습니다)
결과
놀랍게도 이렇게 엉망진창으로 코드를 만들었지만 나의 똑똑한 친구인 브라우저가 기똥차게 이해해서 결과를 만들어줬습니다!
이 때는 문제없이 결과가 나왔다는 것 만으로도 감사했지만 곧 다른 자기소개 페이지나 다른 웹 페이지를 보면서 깊은 고민에 빠졌습니다...
그리고 '결국 이대론 안된다...'라는 결과가 나오게 되었고...
