22/04/16 Django DB 복습, CSS 강의

220416 Today I learned!

---

• Django DB 복습
• CSS 강의 수강
• 백준 문제

---

1. Fact

(1) Django DB 복습

• DJango DB 시험(2022.04.18) 대비 공부
• DJango ORM에 대한 복습을 했다.
  • ORM을 활용하여 데이터를 CRUD 할 수 있다.
• 정리본

(2) CSS 강의

css flex grid 제대로 익히기

• 섹션2. Flex UI 만들기를 수강했다.

  • 실제로 어떻게 Flex를 활용하는지 알 수 있었다.

  • Flex의 유연성을 어떻게 적용하여 편하게 레이아웃을 만드는지 감을 잡았다.

  • 가운데 정렬을 하기 위해서는 정렬시킬 엘리먼트를 품고 있는 컨테이너 크기 자체가 브라우저에 꽉 차있어야 한다.

• CSS 실습관련 강의를 처음 듣기 때문에 실전 꿀팁을 많이 얻을 수 있었다. (처음 보는 속성들이 많았다)

  • transition: CSS 속성을 변경할 때 애니메이션 속도에 대한 속성

  • background-size: 요소의 배경 이미지의 크기를 설정한다. (auto, cover, contain, %)

  • overflow-x: hidden: 왼쪽과 오른쪽의 내용이 넘칠때 내용이 잘리고 스크롤바가 나타나지 않는다.

/* wrap되지 않고 말줄임표 효과 넣기 */
overflow: hidden;
text-overflow: 
ellipsis;white-space: nowrap;

• 수업 자료

(3) 백준 문제풀기

• N과 M (1) ~ N과 M (8)
  • 조합과 순열
• 풀이

2. Feeling

월요일 시험 범위 중 하나인 SQL까지 복습을 하기로 마음을 먹었는데, 토요일인 만큼 휴식을 취하면서 쉬엄쉬엄 공부했다.

CSS강의를 들으면서 나는 아직 CSS 잘 다루지 못한다는 것을 새삼 느끼게 되었다… 🥺 하지만, 새롭게 배우는 것이 많은만큼 강의는 재밌고 유익했다.

3. Finding

의도를 명확하게 가지고 코드를 입력해야 한다.

CSS강의를 들으면서 강사님이 지속적으로 어떤 의도로 이런 코드를 작성했는 지 수강하는 학생들에게 명확히 말해주었다. 이렇게 내가 의도하는 것은 명확해야 하고 그것에 맞는 코드를 작성해야 한다. 요즘들어, 배운 내용을 외우듯이 기계적으로 코드를 작성할 때가 많았던 것 같아서 나름 반성 중..👀

HTML img태그와 CSS background-image 속성의 차이

사실 그동안, 이미지는 무조건 HTML의 이미지 태그를 활용하는 줄 알았다. 하지만 CSS로 편리하게 이미지를 다루기 위해서는 CSS의 backgourd-image 속성을 사용하기도 한다. 특히, 디자인적 요소로만 사용할 때는 이미지는 큰 의미를 갖지 않기 때문에 alt속성이 필요하지 않다. 그런 경우, CSS의 background-image 속성을 사용한다.

그러나 콘텐츠로서 의미가 있을때 혹은 SEO작업을 위한 키워드가 필요할 때는 img 태그를 사용한다. 이번 강의에서는 img태그를 사용하더라도 이를 display:none처리를 하고 back-gorund 이미지를 사용하는 모습을 보여주었다. 아마도 콘텐츠로서의 의미가 있어서 img태그를 사용했지만, CSS를 편하게 하기위해 이런식으로 처리를 한 것이 아닐까…🤔

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	in progress 🚀