[2025.04.01] TIL - 내일배움캠프 사전캠프 과제

좀 밍기적밍기적 다른 거 하다가 캠프 강의를 다 끝내버려야겠다는 생각에 하나씩 쳐내는 중..

막 엄청 어려운 내용은 아니지만 모르고 있던 내용이 스쳐 지나갈까 봐 열심히 보는 중이다.

그러던 중에 웹 개발 기초 강의에서 과제하는 부분이 있길래 과제를 했다.

 

과제는 이런식으로 지시가 세세하게 되어있어서 헷갈리는 부분도 없고

쉬운 부분이라서 나는 문제없었지만

처음 배우는 사람들이 기억 안 날까 봐 친절하게 어느 파트 강의를 참고해야 되는지도 쓰여있다.

그리고 주석도 하나하나 다 작성되어 있어서 배웠던 거 복습하는 느낌으로 따라 하면 되긴 하는데

 

첫 번째 벽...

아니 벽이라고 하기에도 창피함;;;

 

브라우저에는 저 코드가 보이는데 vscode 편집기에는 저 헤더 클래스가 들어간 div가 없었다....(예?)

텍스트를 바꿔야 제목이 바뀌든 하는데 텍스트를 넣은 적이 없는데 브라우저에는 보이고... 코드는 없고

진짜 환장할 뻔했는데

사실 중간에 작업하다가 저장 잘못해서 다시 새로 만들었는데

새로 만든 파일을 브라우저에서 열어본 게 아니라 과거 파일을 보고 있었던 것....ㅎ;;;

live 코드를 켜놓고 작업하다 보니 새로 열고 하지 않는 게 습관 돼서 그냥 떠있는 게 지금 내가 작업하고 있는 파일이겠거니~~하고 보고 있었던 것이다.

그래도 환장하기 전에 알아차렸다

 

 

그리고 이제 두 번째 벽...

이건 진짜 벽이었음... 그렇게 오래 걸릴게 아닌데 오래 걸려서 울뻔했다..

 

주석에 유일하게 없었던 내용은 css부분...

나는 과제가 주어지면 그~~~대로 하고 싶은 욕구가 있는데

시키는 대로 했더니

이렇게 됨...

 

예시랑 뭐가 다른지 보이나...?

인풋부분이랑 텍스트 부분이랑 안 맞는다는 것...

예시를 보면 인풋 부분과 텍스트 부분이 같이 시작한다.

요로코롬

 

 

그래서 F12를 눌러 어 뭐 텍스트 div로 감싸서 마진 좀 주면 되겠네 했는데

아무리 해도 변함없이 계속 똑같은 것....

이게 부트스트랩에서 가져와서 !important 되어있는 것도 있긴했지만 마진은 어디서도 찾아볼 수 없었고

왜 왜...왜 안들어가지? 이러면서 한시간이 지났다

(지금 생각해보면 이딴걸로 한시간 보낸게 너무 화나네)

 

개발자 도구로 열심히 건드려 보고 css도 계속 보고 그랬는데

뭐 어쩌고 저쩌고 열심히 보다가 알아차려버렸다

금방 해결할거라고 생각하고 gpt를 안돌린 내 잘못

 

태그에는

<div id="jumbotron-content">

로 줘놓고선

css에는 

      .jumbotron-content {

        margin-left: 135px;

      }

이딴식으로 class선택자로 써놨던 것...

왜 그랬냐고? 나도 모른다..

얼마전 선택자를 공부한게 쓸모없어지는 행동...

이게 선택자 공부한 사람이라니

근데 뭐 공부 안했으면 영원히 몰랐을 수도 있다 ㅎㅎ

 

아래 처럼 고치고 성공!

      #jumbotron-content {

        margin-left: 135px;

      }

 

 

아래는 결과 사진

저 맛집들은 진짜 맛집이다.

 

이상한데에서 헛짓거리 하긴 했지만 그래도 주석이나 이런저런 설명도 잘 되어있고

초보자들에게 좋은 구성으로 되어있었다.

지금은 그냥 강의보고 복습하기 위해 하는 과제라서 정해진대로 하라고 되어있지만

사실 좀 더 자유롭게 진행되는 과제도 있는데

이게 재미있어서..ㅎㅎ

 

 

어떻게 마무리 해야될지 모르겠다..! 그럼 이만...