[TIL 4th] 웹개발종합반 3주차의 과제를 해보았다

진행상황 

 Complete  -

 In progress  국민취업지원제도 1유형 11/12에 신청함─처리중

 In progress  내일배움캠프 Spring 5기 사전캠프 (24.11.18.月 ~ 24.12.20.金─총 33일 / 14:00~18:00 ─일일 4시간)

 In progress  웹개발기초 강의 듣기 ─ 3주차까지 완료

 To-do  내일배움캠프 Spring 5기 본캠프 (24.12.23.月 ~ 25.05.06.火 ─총 135일 / 9:00~21:00─일일 12시간)

 To-do  SQL 강의 듣기 & 퀘스트 하기

 To-do  혼공자바 읽기 & 퀘스트 하기

---

생각보다 정말 오래 걸린 과제.

---

3주차에 첫 과제가 있었다, 두근두근

미리 무언가 많이 작성된 HTML 파일을 다운받아서, 지시사항에 맞게 코드를 추가/변형해서 결과물이 예시대로 나오면 된다.

 

🚨 그런데, 과제 파일에 이미 문법적 오류가 있는 상태였다.

　HTML과 CSS 코드는 오류를 발견하는 컴파일러같은 존재가 없어서 문법적 오류가 있든말든 브라우저가 좔좔 읽고 자신이 이해한 만큼 창으로 보여준다. 그래서, Prettier라고 Indentation과 문법적 오류를 어느정도 알려주는 VS code Extention 을 설치해서 사용중이다.

오류가 있어요!

　과제 파일을 받자마자 이 Prettier가 빨간 불을 켜고 오류가 있다고 알려왔다. <img> 태그는 닫는 태그가 없는데 뒤쪽에 </li>로 닫혀있었다. 그걸 없애도 계속 오류가 떠있었고 의미없는 </div>들이 많아서 다 지워주었다.

<img · · · /> , </div> 두 개 지우기

드디어, Prettier가 조용해졌다.

마음의 안정을 찾은 상태로 코드를 한 줄 한 줄 읽으며 과제요구사항을 하나하나 해결하는데

🚨Logical error가 남아있었다.

문법적 오류는 없어도 원하지 않는 방향으로 구현되어있는 코드들이 있었다.

1) Selector 오류

　예를 들어, .header > h1 은 class가 header인 요소의 직계 자식(손자X, 후손X)인 h1 요소만을 셀렉하는 것인데 코드에 .header 는 h1 을 직계 자식으로 두고 있지 않다. 따라서, > 가 아닌    를 사용해야 원하는 위치에 CSS가 적용된다.

　또한, .header > div 의 properties를 보면(폰트사이즈나 윗마진), .header 의 직계자식인 div 보다는 p 요소에 적용시켜야 결과물 예시와 동일해진다.

header 클래스와 h1, p는 부모-자식 사이가 아니다.

주석을 달고 수정했다.

이런 오류도 있었다.

2) 의미없는 ID 선언과 의미없는 CSS중복 적용

　id가 input-card이고 class가 post인 부트스트랩 인풋박스가 있었는데, (나중에는 어떻게 될 지 모르겠지만) 일단은 class가 post인 요소가 이거 하나로 유일했다. class나 id 둘 중 하나만 선언해도 되는 이 상황에서 CSS 셀렉터로 .post(88line), #input-card (184line) 둘 다 사용되고 있었고, 그런데 각기 다른 스타일 설정이 되어있다.

　엥? 같은 애를 다른 방식으로 셀렉해서 굳이 두 번 꾸민다니? #input-card 의 스타일만 적용해도 결과물 예시와 같았고, .post 의 스타일만을 적용하면 결과물 예시와 완전 다른 형태였다.

　그래서, .post 의 CSS코드를 전부 주석처리하고, #input-card의 CSS코드만 살렸다. 그리고, 셀렉터는 .post로 바꿔주었다. 이제 ID가 쓸모없어졌으므로 HTML에서 해당 요소의 ID선언도 지워주었다. (line 307)

　나중에나~중에 클래스가 post인 요소가 여러 개 있고 그 중에 이 요소만 다른 스타일을 적용하고 싶어진다면 처음 코드대로 짜도 되겠지만, 이 결과물은 과제로 제출하면 끝이기 때문에 굳이 미래를 염두할 필요가 없다고 생각했다.

---

결과

좌: 예시 ─ 우: 내 결과

　과제요구사항은 점보트론 삽입하기, 폰트 적용하기, 카드세트 삽입하기로 배운 내용 안에서 나와서 열심히 공부한 사람들이라면 문제없이 해결했을 것이다. 그런데, 우리 학교 과제도 그랬다. 배우지 않은 부분에서 원인이 되는 짜잘한 오류들이 오히려 학생들을 더 난감하게 만든다는 것...

　이 코드들을 이해해보려고 mdn을 엄청 뒤적거렸고, padding이나 margin, CSS Selector에 대한 개념들을 어느정도 익힌 것 같다. F12의 도움도 엄청 받았다 !

　다만, 이렇게 공부하면 시간이 너무 오래 걸리는 것 같다. 시간이 항상 부족하다고 느껴서 TIL이나 과제를 하는데 몇 시간 걸리면, 더 공부하고 싶은데 벌써 아침이 사라지고, 밤이 되고, 새벽이 된다. 내가 하는 공부방식이 맞는건가 의문... SQL도 들을 계획이었고, Java도 들을 계획이었는데, 더 하고 싶은데 시간이 너무너무너무 부족하다. 그렇다고, 과제 대충 안 되면 안 되는대로 제출 안하고 넘어가고 빨리빨리 듣고 그럴 수는 없는거니까... 일단은 웹개발부터 끝내보자 🐣