[HTML/CSS] 프론트엔드 스쿨 특강 CSS 작업순서

Mooongs·2022년 4월 3일
1

프론트엔트스쿨

목록 보기
5/28
post-custom-banner

5일차 수업은 빔캠프의 이종찬 대표님 특강으로 진행되었다.

개념과 용어들도 많이 알려주셨지만 실무적으로 CSS 작업을 할 때 중요한 기본 습관들을 강조해주셨다. 특히 프론트엔드 개발자들은 자바스크립트에 비해 css의 중요성을 지나치는 경우가 있는데, 이 때 놓쳐서는 안될 포인트들은 다음과 같았다.

🎃 type selector는 위험하다 (class 지정 필수, id는 css 단계에서 자제)
🎃 재료 손질 필수 (브라우저마다 미리 설정되어 있는 css 리셋- 공부 단계에서는 reset css를 복붙해 사용하는 것은 비추)

📌 그리고 작업 순서를 다음과 같이 정리해주셨다.

  1. 큰 레이아웃 먼저 짜기 (컨텐츠 급하게 넣지 않기!)
  2. 구분을 위해 각각 시각적으로 힌트 넣기 (ex.background-color / image)
  3. 기본 레이아웃 마련 (ex. margin / padding / width)
  4. 요리 재료 (요소, 타입셀렉터) 손질 : 초기화를 통해 가장 담백한 상태로 만들기 (ex. inherit, initial, unset, margin 0 padding 0)
  5. class를 사용하여 섬세한 작업 시작하기

알고 있는 내용같지만, 말씀하신 대로 실제 작업시에는 아직 습관화되지는 않은 상태였다. 특히 1,2번.... 컨텐츠를 넣고 시각적으로 빨리 완성시키려는 욕심이 있었는데 이제 레이아웃을 기본적으로 마련하고 특히 개발자 도구를 확인하면서 reset해야 하는 요소들을 고려하며 작업하는 습관을 길러야겠다.


정말 기대 이상이었던 이번 특강!!!!! 또 다시 뵙고 싶다..... 지나쳤을 수도 있는, 하지만 현업에서 굉장히 중요한 팁들을 알려주셔서 css에 대한 인식이 바뀐 하루였고 작업 순서를 다시 한번 정리하게 된 좋은 시간이었다. 유튜브에서라도 뵐 수 있어서 다행..(링크는요기) 오늘 배우며 충격 받았던 이미지 스프라이트 부분을 더 공부해봐야겠다...

행복-!💗

profile
#FE개발자🐣 #새로운건 #짜릿해
post-custom-banner

0개의 댓글