📅 TIL #21

👉 Twittler 완성!!

드디어 트위틀러 목업을 완성했다!! 첫째날이랑 둘째날은 정말 고생했지만

셋째날인 오늘은 수월하게 마무리를 지었다. 적응이 된 것인가… 오늘 정말 빠르게 마무리했다.

먼저 내가 한 목업을 보자면!!

최종 완성본이다 👏👏

최대한 구현해보고 싶었다! 다른 분들은 확실히 코드스테이츠에서 원하는 정도로만 하고 끝낸 것 같다.

물론 나는 다른 분들보다 CSS에 시간을 엄청 쓴 것이 맞다. 하지만 이 성취감은 진짜.. 말로 표현 못한다!!

그리고 이렇게 만들어 보니까 정말 flex에 대해서 스스로 깨달은 점이 정말 많았다.

사실 이 트위터를 만들기 전에는 flex에 대한 개념조차 잘 몰랐지만,

CSS는 이론보다는 직접 해봐야 안다는 말이 사실이었다!!!!! 정말 하면서 새로운 것도 알게 된다.

비록 이번에는 트위터 홈페이지를 거의 그대로 따라하긴 했지만 이렇게 직관적으로 홈페이지를 만들어 보는 과정이 정말 즐거웠다.

그리고 이번에 배운 CSS Selector 기능들을 적극 활용했다!! 적용하고 원하던대로 직관적으로 확인할때는 정말 기분이 좋았다 ㅜㅜㅜ

힘들지만 즐거웠던 느낌..!?

👉 새로 배운 기능

1. hover 가상클래스 안에 transform: scale(1.5) 기능을 사용하고 마우스를 올리면 아이콘 확대!

2. align-self : align-items 속성보다 우선 적용 (이 부분도 활용했다)

3. not(:first-child) 실제로 몇 번이나 사용했던 Selector!!

4. .mene > div 이 Selector 는 셀 수 없을 정도로 자주 사용했다.

5. position: relative (top, left) 속성을 활용해 박스위치 이동!!

6. input 텍스트 박스들은 outline : none 으로 외각을 다 지울 수 있었다.

7. 기본 아이콘은 여기서 :point_right: 링크

8. 가장 중요한 css 초기화!

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

이로써 트위틀러 과제도 끝! 💪

정말 이번 과제가 쉽진 않았지만 flex를 사용해서 어떤 목업이든 만들 수 있겠다는 자신감이 생겼다!!!

👊 내일의 TIW(today I Will)

고차함수