HTML / CSS 첫 미션 개인 프로젝트가 끝났다.
결과적으로는 너무 안일하게 생각했고, 제대로 수행하지 못하여 속상함 😭
🌟 미션 - 2023. 03. 22 ~ 2023. 04.12
- mission-1
- mission-2
- mission-3
- mission-4
- mission-5
✍🏻 HTML / CSS 공부하며 느낀 점
부트캠프 시작 이전에 국비로 HTML과 CSS 기본 강의를 들었었다.
아주 기본적인 부분들을 공부했었어서 강의로 공부할 때는 큰 어려움이 없었다.
거의 다 이해한거라고 생각했는데 후에 네이버 주문서페이지 클론 코딩 실습 하면서 멘붕이 찾아오기 시작했다.
생소한 코드들이 나오기 시작했고, 생각했던 것보다 CSS의 범위가 너무 컸다는것.
HTML/CSS 공부 & 과제하면서 어려웠던 개념과 이유
HTML
- 폼 관련 요소
input 태그를 사용할 때 type과 label 등등 개념은 알고 있지만,
막상 직접 코드를 입력하려보니 가물가물할 때가 많다.
미션때도 다시 찾아보고 했던 기억이난다. - 스크린 리더
스크린 리더 환경에서도 읽을 수 있도록 구현하는 마크업도 과제 및 검색을 통해 알게 되었지만 이부분도 다시 한번 체크해서 훑어보자.
CSS
css 파트는 아직 완벽하게 이해하지 못하고 어렵다고 생각한다.
원하는 방향대로 나오지 않고 오류가 될 수 있는 요소들도 다양하다는걸 이번 미션 이후 깨달았다. ㅠㅠ
-
레이아웃
레이아웃 배치가 제일 헷갈리는 부분..🙄
flex와grid사용법이 아직도 익숙치 않다.
강의로는 이렇게 하면 되는구나 라고 인지했지만, 막상 해보니 내맘대로 되지 않는것..
특히grid같은 경우에는 몇번 검색하고 찾아보고 했지만 내가 마크업한 컨텐츠에 어떻게 영역을 나누고, 배치를 어떻게 해야할지 실제로 적용하기 어려웠다. -
선택자
자식선택자 자손선택자 등등.. 하위 선택자에게 적용하는법.
span으로 마크업 했을 때,.클래스명 span으로 하니 다른 span 요소들이 같이 적용되고는 했었다.
분명 내가 무언가 중구난방으로 짰나 하고 제일 만만한 div로 바꿔도 보고 여러번 수정했던 기억이 난다. -
가상클래스와 가상요소
예를들어hover할 경우 버튼이 새 디자인으로 변환 될때, 기존 컨텐츠 영역이 고정값으로 잡히고 변환되지 않아서 꽤나 골머리를 썩었다.
결국 해결방법은 너무나 간단하면서도 생각치 못했던것이었다.
opacity 값으로 인해 기존 컨텐츠 영역이 고정값으로 잡혀버리고, 가상 요소로 디자인한 영역이 바뀌지 않았던 것.
focus클래스를 넣었지만 작동이 되지 않았을 때.
focus 클래스만 넣는다고 해서 기본적으로 작동이 되는것은 아니었다.
첫번째 미션때는 수월하게 했지만 다음 미션 때는 이상하게 적용이 안됐었다.
그럴 때는 해당 요소에 tabindex="0" 속성을 사용하는 새로운 방법도 터득했다.
자바스크립트로 구현한 클래스가 적용이 안됨.
:focus상태에서active스타일이 적용이 안되서 제일 크게 멘붕이었다.
아직까지 해결방법을 못찾았다. 이부분은 답안을 보고, 다시 살펴볼 예정
다시 공부한다면
✅ 확실하게 개념을 알고가자!
강의를 들으면서도 터득하지 못한 부분은 추가적으로 검색해보고 여러 예시를 찾아가며 터득해보기
✅ 블로그 학습일지로 복습하기
몰랐던 부분도 내가 직접 찾아보고 터득하여 정리하는것이 더 기억에 남는다.
✅클론코딩 열심히 따라도 해보고 시도해보기
다양한 요소들은 학습강의를 통해서만 터득하기에는 어려움이 있다.
실습으로 진행하는 클론코딩 강의가 당장 이해가 안되고 무작정 빠르게 타이핑만 하는것이 괴롭긴 하지만.. 이해 안되는 부분은 따로 정리하는 습관을 들일 것.
👩🏻💻 앞으로의 계획
-
과제는 모범답안으로 다시 복습 할 것.
모르고 진행하지 못했던 부분은 꼭 다시 들여다 보자.
특히자바스크립트로 구현한 active와css grid배치! -
그래도 이번 미션을 통해서 나도 처음으로 웹페이지 만들어봤다 :)
앞으로 자바스크립트 미션을 위해 진짜 진짜 강의 열심히 듣고 모던 자바스크립트 책도 병행하기.. '다시 공부한다면' 리마인드 화이팅
