2022.04.01 Today I Learned📚

🌈ALLDAY CSS

오늘은 Veamcamp 이종찬 대표님의 CSS 특강이 있었다. 평소 CSS로 디자인 하는 것을 좋아해서 오늘 특강이 기대됐다.
이종찬 대표님께서도 CSS를 가장 좋아하신다고 하셨다..! 직접 만드신 페이지들을 보여주셨는데, CSS만으로 휘향찬란한 디자인과 애니메이션을 구현하셨다. 재미있었던 점은 지인분에게 모바일 청첩장도 만들어 주셨다는 것. 내 기술을 활용해 지인들에게 필요한 서비스를 선물로 주는 것도 참 좋을 것 같다.

HTML과 CSS에 대해 감으로는 알겠는데, 명확하게 개념이 서지 않는 것들이 많았다. 오늘 그 해답을 이종찬 대표님의 특강에서 얻을 수 있었다!

🍯특강에서 얻었던 꿀정보들

• 모든 CSS는 각 브라우저마다 정해놓은 기본 규칙이 있는데, 이를 user agent stylesheet (사용자 에이전트 스타일시트) 라고 한다. 모든 선택자에 default값이 기본적으로 설정되어 있기 때문에, body선택자로 사용자 에이전트를 다듬는 과정을 거치고 시작해야 한다.
  크롬 기본 제공 스타일

• 초기 설정을 초기화하겠다는 의미로 CSS stylesheet 맨 앞에 작성한다.

• 이미지 삽입 시 img는 내가 표현하고 싶은 컨텐츠인 경우에, background-image는 단순하게 꾸미는 용도의 이미지를 삽입하는 경우에 사용한다.

• 몇 개의 property들은 상속 속성 이 있다. body에 적용된 property가 자식 요소에게도 똑같이 적용되는 것이다.
  - 원래부터 상속이 지원되는 속성은 inherit으로 초기화를 해준다!
  -상속이 지원되지 않으면 initial로 초기화 하기!
  

• descendant selector 하위 선택자를 지정하는 이유는 html 마크업이 어떤 구조인지 명시하고, CSS를 보다 더 구체적으로 작성하여 안전성을 확보하기 위한 것이다.

• width: 100%; 와 width: auto; 는 다르다.
  - 둘 다 부모의 크기만큼 width가 가득 차는 것은 동일하다.
  - 하지만 width: auto;에서 margin-left: 50px;이면 부모 요소 안에서 이동, width: 100%; 에서는 전체에서 이동한다.

• width 와 height에 padding값을 주면 크기가 +α 된다. 하지만 box-sizing: border-box;를 주면 width, height값을 유지하고 안으로 padding된다.

• 마진 병합은 큰 값 기준으로 적용된다.

• 분명 border-radius값을 주었는데, 적용이 안 된 것처럼 보일 때가 있다. 이것은 자식요소가 부모요소의 값을 가렸기 때문인데, overflow: hidden을 작성해준다.

• CSS 입력 시 주석 사용하자!

🔊 대표님께서 남기신 명언도 인상 깊었기 때문에... 올려본다 ㅎㅅㅎ

→ css의 불완전함을 인정하며 어떻게 하면 똑똑하게 할 수 있을지 생각하자.
→ 모든 지식이 자기 자리를 찾는 순간 의심은 없어지고 머릿속은 깨끗해진다.

수업시간에 프로필 만들기 실습을 하며 배운 내용을 토대로 나의 프로필을 만들어 보았다. 역시 디자인은 재밌어.. 아 그리고! 대표님께서 Front-end Designer라고 하셨는데 나의 꿈을 명확히 표현한 단어라고 생각한다. 디자인도 잘 하는 개발자가 되기 위해 디자인도 개발도 열심히 공부하자. 디발자가 되는 그 순간까지!!!!👩‍💻 👩‍🎨