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