😕 card 만들기 실습

card 만들기 실습을 진행했다. 결과물을 보고 만들었을 때 아직 css를 다루는 능력이 부족하다보니 반복되는 코드가 많고 그만큼 코드 줄이 길어졌다. 혼자 힘으로 만들어본 다음 다 같이 실습을 진행했을 때 내가 만든 코드와 어떤 것이 다른지 비교해보았다. 첫번째는 class로 css 적용하는 방법이다. class를 HTML 파일에서 적용하지만 빨리 만들어야겠다는 생각이 급급해서 줄마다 작성하니 반복되는 구간이 많았다. 만약 p태그를 이용한다면 p[class^=title]과 같이 특정 선택자를 사용한다면 반복이 줄어들 수 있다는 것을 알게 되었다. 두번째는 응용이다. 만약 배경 위에 그림이 있는데 top-left와 top-right에 border-radius를 주고 싶다고 하자. 그럼 나는 배경에도 주고 그림에도 주었다. 하지만 이는 overflow: hidden 등 다른 코드를 통해서 하나하나 값을 지정하지 않아도 된다는 것을 알게 되었다.

😓 두 번째 card 만들기

수업시간에 진행한 카드가 아닌 또 다른 카드를 만드는 실습을 진행했다. 배운 내용을 바탕으로 실습을 진행하다 새로운 부분이 나오니 당황스러움이 먼저 느껴졌다. 조금 더 살펴보면 배운 내용일텐데 아직 나에게는 조금만 응용이 들어가도 어렵다고 느껴진다. 아직 실력이 부족하기 때문이라 생각한다. 결과적으로는 만들었지만 코드가 길고 스스로 느끼기에 지저분하다고 생각된다. 특정 선택자를 사용해서 코드를 줄이는 연습부터 진행했다. 수업이 진행되면서 점점 실력을 가꾸게 되면 card 만드는 코드도 업데이트를 할 계획이다.