사전스터디 1주차 과제

[ html & css | 자기소개페이지 만들기 ]

❣️ 시작하는 글

기다리고 기다리던 wecode 사전스터디 OT를 마치고 우리 1조 팀원분들과 함께 첫 과제인 html 과 css 를 사용한 자기소개 페이지 제작 과제가 주어졌다!

과제를 확인하고 처음 든 생각은 "금방하겠는데?" 였다. (현실은..)
국비학원에서 퍼블리셔 과정을 들을때 자바스크립트, 제이쿼리는 몰라도 html, css는 다 뗐다! 라는 이상한 착각에 사로잡혀 첫날 바로 시작을 했다.

🤯 난관 봉착

레이아웃

디자인 전공생으로 항상 힘들었던게 "레이아웃"이었다.
제한 된 이미지와 텍스트로 가독성은 좋아야하니.. 나는 백엔드를 지망하니까 간단하게 마음대로 하자라고 생각은 했지만 간단이 뭐였지? 마음대로? (내마음이 어떤데..?)
이대로는 시작부터 너무 오래걸리겠다는 생각이 들어 참고 할 레이아웃을 찾아 나섰다.

그 중 유용하게 참고했던 사이트를 정리하자면

지디웹

국내 디지털 디자인 산업의 발전 도모 취지로 자체적으로 매년 국내외 웹사이트 출품작들을 온라인 투표와 심사위원 투표로 수상하는 곳이다.
그래서 그런지 몇몇 상위에 등록 된 사이트를 보다보면 어느정도의 웹디자인의 트렌드가 보이는것 같다. 퍼블리셔 과정을 들을 때는 많은 에이전시들을 알 수 있어서 좋았음!

디비컷

지디웹과 비슷하지만 이곳은 커뮤니티 성격이 강한 사이트이다.
지디웹에선 내가 원하는 업계?의 사이트들을 쉽게 찾아서 볼 수 있다면
이곳은 생각없이 최근 오픈 및 리뉴얼 순으로 슉슉 볼수 있는 장점이 있다.

Pinterest

디자이너들에게는 이곳이 곧 구글!
검색창에 "레이아웃", "자기소개페이지" 등등 입력하면 무수히 많은 자료들이 쏟아진다. 이미지를 피드에서 미리볼 수 있고 더 자세히 보고싶으면 링크를 통해 쉽게 접근할 수 있으니 매우매우 유용하고 나 같은 경우 이번 자기소개 페이지 레이아웃의 경우 이곳에서 참고하였다. 참고 이미지 (핀터레스트 이동)

git & github

사전스터디 이전 혼자 파이썬을 공부하면서부터 깃헙에 올리고싶었는데 m1이 문제인건지 내가 이해를 잘 못하는건지 설치과정에서 터미널을 잘못건들여서 초기화,, 초기화 하고 설치 완료하고 커밋, 푸쉬하려고 하니 또 오류.. 오류메세지를 토대로 열심히 구글링해도 외계어만 줄줄.. 아직 내가 제대로 이해못하고있는게 확실한것같아

팀 개발을 위한 Git Github 시작하기 (정호영, 진유림)

서적 참고와 구글링을 통해 (또 같은 맥북 동지인 상협님이 내어주신 귀중한 자료들도 포함) 공부해 가기로하고 우선은 소스트리를 통해 깃과 깃헙 원리를 조금씩 익히는 중이다.

class로 왜 북마크 이동이 안되는건데!

나는 모든 태그에 이름 지정 속성을 id 보다 class 를 더 자주 사용하는데 딱히 다른 이유가 있다기 보다는 class 가 중복이 되니 css 작업을 할 때 수정이 더 빠르다는 생각이있기 때문이다. (글쓰고 보니 굉장히 게으르고 코드가 더러워지는 이유)
사족이 길어졌지만 습관적으로 남발하다 보니 문제가 생겼다.

<div class="fir_bottom_wrap">
                <ul>
                    <li class="bottom_child bottom_info"><a href=".info_wrap">info</a></li>
                    <li class="bottom_child bottom_favorite"><a href=".fav_wrap">favorite</a></li>
                    <li class="bottom_child bottom_contact"><a href=".contact_wrap">contact</a></li>
                </ul>
            </div><!--fir_bottom_wrap 메인하단 menu-->

각각의 <li> 의 <a> 태그들은 사용자가 클릭시 북마크 역할로 해당 class 로 이동하게끔 작성 해놓았는데
마크업 검사까지 완료하고 직접 실행해보는 와중에

띠용! (사진은 현재 테스트목적으로 만든 html 파일입니다)

혹시 몰라 vscode 내에서 테스트파일의 .test 를 follow link 해보았지만

이걸보고 class 말고 id 를 써야하나? 라는 생각이 들었고

<div class="fir_bottom_wrap">
                <ul>
                    <li class="bottom_child bottom_info"><a href="#info_wrap">info</a></li>
                    <li class="bottom_child bottom_favorite"><a href="#fav_wrap">favorite</a></li>
                    <li class="bottom_child bottom_contact"><a href="#contact_wrap">contact</a></li>
                </ul>
            </div><!--fir_bottom_wrap 메인하단 menu-->

위와 함께 해당하는 각 div 의 기존 class 속성을 id 로 바꾸어 주니 잘 실행 되었다.

이후 수요일에 googlemeet 으로 진행 된 스터디에서 사전스터디 팀원분도 같은 시행착오를 겪으셨다고 했는데 해결은 결국 나와 같이 id 속성으로 바꾸셔서 해결 하셨다고 했다.

위 문제때문에 구글링 할 당시에 출처가 명확하지 않은 글 중에서 id 와 class 모두 사용가능하다 는 글을 봤기 때문에 class 로 할 수 있는 방법을 찾아야겠다 라고 생각하고 스택오버플로우와 구글링, w3schools 심지어 답답한 마음에 나무위키 까지 찾아 보았지만 이글을 쓸때 까지도 명확한 방법과 class 는 불가능한 이유를 찾지 못했다.

다만, w3schools 의 HTML 링크-북마크 만들기 와 w3schools 의 HTML 전역속성 를 살펴본 결과 내가 내린 스스로의 결론 도출은 원래그런것

...

바보같은 짓일 수 있겠지만 거의 3시간을 찾아 본 것 같다 .
혹시 이글을 보는 분들 중에 아시는분이 있다면 제발 좀 알려주세요!

아무튼 굉장한 삽질끝에 앞으로 <a> 태그를 북마크로 활용할 경우 아무런 의심 없이 무조건 id 를 쓰기로 나와 타협했다.

마치며

사실 크게 맞닥뜨린게 위 3가지 정도의 문제이지 코드를 뜯어보면 많이 더럽고
css에 어디서 언제 생긴지 모르는 문제를 강제로 위치를 정해 놓은 부분도 많다. 지금은 아직 고치고 있는 부분이 있어 나머지 문제의 부분들은 2주차 자바스크립트까지 진행하며 같이 수정하고 올릴 예정이다. 휴

아무튼,

빠이!