css로 캐릭터 만들기

오늘은 css box-model, font, position 그리고 float 속성까지 알아봤다.
그 중에서도 position 값이 fixed인 예제를 만들어봤다. 뭐가 급했는지 빠르게 내고 싶어서 얼레벌레 만들면서 header와 겹치지 않게 하려고 main의 p에 바로 margin을 줬는데, 이렇게 바로 스타일링하지 말고 그걸 감싸고 있는 부모로 제어하게끔 구조를 잡으라고 하셨다. 정말 간단한 예시를 만드는건데도 마크업에 신경을 못 쓰고 있다니 부끄러웠다.;;

position을 배우면서 css로 자신만의 캐릭터를 만들어보는 시간을 가졌다. 나는 사자를 만들고 싶었는데 만들면서 점점 사자가 어떻게 생겼는지 까먹은 것 같다...ㅋㅋㅋㅋㅋㅋ 귀랑 얼굴, 눈을 만들면서 border-radius로 다양한 값을 줘봤고 position을 absolute와 relative를 사용하면서 잡아갔다. 처음엔 내가 의도하지 않은 곳에 귀가 있고 눈이 있어서 어쩌면 완성을 못 할수도 있겠다 싶었는데 역시 백번 읽는 것보다 한 번 해보는게 익히는데는 짱인 듯 하다.
내가 만든 코딩사자 ㅎㅅㅎ
만들고 엄청 뿌듯했는데 다른 분들 올리는거 보고 굉장히 허접함을 깨달았다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

오늘 수업에서 자식요소에 float을 사용했을 때, 부모요소가 자신의 height 값을 잃을 수 있다는 걸 알았다. 그런데 해결 방법이 하나로 정해져있지 않고 여러가지로 그것을 개선할 수 있었다는 것이 가장 흥미로웠다. 검색을 조금 더 해보니 overflow로 제어할 수 있지만 그것은 float이라는 속성과 함께 사용할 이유가 없는 일종의 편법 느낌인 방법인거고, 형제 요소에 clear을 사용하는 건 무조건 형제요소를 만들어줘야 해서 불편한 것 같다. 부모요소에 클래스를 추가해서 가상요소 선택자 after로 플롯된 요소들 다음에 clear를 사용해주는 것이 가장 정통법인듯.

확실히 css는 가시적인 결과가 주는 만족감이 커서 재밌다. 빨리 flex랑 grid를 배워서 조금 더 세밀하게 요소들을 배치하고 제어해보고 싶다.