오늘의 시작

힘들어하는 학생들을 위해 호준 강사님께서 덴젤 워싱턴의 연설 링크를 보내주셨다.

영상을 보는 내내 실제로 많은 힘이 되었다.. ㅎㅎ 더 확실한 목표가 필요하다는 것. 애매한 성공이 목표가 되어선 안 되며 하루의 목표부터 매주, 매달, 1년치의 목표를 의미있는 달성해야 한다는 것.

목표를 세워도 실패하는 경우가 많아 안일해져 있었는데 이 날을 계기로 다시 매일의 목표를 세우기로 했다.

목표를 이루는 성취감을 느끼며 재미있게 공부하기로!

---

bootstrap과의 만남

▶ bootstrap

▷ bootstrap, tailwind, d3, canvas, SASS... 모두 스펙으로 활용이 가능한 것들.
▷ 처음에는 무료 템플릿을 활용해 연습해보자. 프로젝트를 한두 번 해보면 어떤 부분이 중요한지 알수있다.
▷ 모바일 first. 페이지가 굉장히 유연하다(반응형 적용이 기본이어서 신기했다..)

▷ 컬러시스템, 그리드 시스템 같은 것들은 외워놓으면 훨씬 빠르게 개발할 수 있다.

▷ 숙련을 통한 스피드가 중요하다. 이론과 지식도 중요하지만 손에 익어서 빨리치는 것도 중요.

▷ 시맨틱 웹이나 SEO를 신경쓰지 않아도 되는 페이지를 제작할 때 많이 사용한다.

▶ 추가 정보

▷ 부트스트랩에는 권장되는 클래스 순서가 없지만 tailwind에는 있다.
▷ 경고는 모달 창을 띄우는 것보다 접근 자체를 막는 게 좋다.

CSS 특강 (과제 해설)

▶ flex로 안정적인 레이아웃 잡기 (기본)

▷ flex-basis: 0; flex-grow: 1; min-width: 0;

▶ img 기본 스타일 초기화

▷ max-width: 100%; height: auto; vertical-align: top;

▶ list

▷ list 마커 디자인을 직접 만들었다면 컨텐츠가 늘어나 줄 바꿈이 되었을 때 앞의 공백이 사라질 수 있다. 해당 공백을 유지할 수 있도록 해야한다!

▷ flex를 이용해서 list 마커를 만들었다면 shrink: 0을 줘야한다. 컨텐츠를 더 넣으면 마커 모양이 찌그러질 수 있다.

▷ ul에도 클래스를 달아주자.

▶ flex와 strong

▷ flex box는 strong으로 중간 텍스트를 강조할 수 없다.
▷ span으로 strong을 적용하고 싶은 문단을 감싸주면 적용된다.

▶ 가상요소

▷ 가상요소는 inline이라 width, height가 적용되지 않는다. inline-block을 줘야 함.

▶ flex-basis 값이 잡히지 않는 경우

▷ shrink가 1이면 basis 값 확보가 안 된다.
▷ basis는 상황이 여의치 않으면 축소된다.

▶ 마크업 img vs background-image

▷ 변화가 빈번하다고 보면 마크업이 유리하다.
▷ 백그라운드 이미지는 고정적 컨텐츠에 쓰는 게 좋다.
▷ 지연이 로딩되었을 때, 내용 설명이 필요한 이미지라면 alt 사용이 가능한 마크업 . 내용 설명이 필요치 않은 꾸밈 요소라면 background-image를 사용하는 것이 좋다.
추가로 볼 글: ('이미지 마크업, img vs background-image 딱 정해드립니다.')

▶ 기억할 점

▷ 실무에서는 굉장히 재미없고 무던한 디자인의 반복이 더 많다. 화려한 웹페이지에 주목하는 게 아님.
▷ 그렇기 때문에 화려한 웹페이지를 만들 수 있다고 다가 아니다.
▷ 복잡한 컴포넌트 일을 맡겨도 해낼 수 있는 사람, 컨텐츠 양이 늘어나도 커버될 수 있는 페이지를 만드는 사람이 되자.