220219 토

[오늘 할 일]

# 팬명록 홈워크 완성

 

[내일 할 일]

# CSS flex 마저 완전히 공부

# homework 제출

# 2주차 예습

 

[오늘 공부 내용]

▼ div 에 들어갈 background 이미지 꽉차게 만들기. background-size : cover 가 중요!

 

[출처 : https://cowimming.tistory.com/107]

height: 100vh를 지정해주면 각각 컴퓨터 화면에 맞는 꽉 찬 사이즈로 자동으로 변경된다

body {
        height: 100vh;
        background-image: url('img/signup.jpeg');
        background-repeat : no-repeat;
        background-size : cover;
      }

 

▼ class 이름은, 첫글자가 숫자면 안된다. 처음을 숫자로 했더니 css 스타일에서 인식을 못하더라..중간이나 끝에 숫자가 오는건 상관없다. → 참고출처 : https://hyeonseok.com/blog/552

▼ CSS flex 에 대해 공부 중인데, 처음이라 그런지 매우 헷갈림..일단..

1. flex-direction 의 row 에서 column 으로 변경되면, main 축이 justify 가 아닌 align 이 된다. 

출처 : https://naradesign.github.io/flex-justify-align.html

2. align-items 와, align-conten 의 차이는 분명하다

3. align-items 의 기본값은 stretch 이다

4. flex-wrap 의 wrap 은 div 박스의 컨텐츠가 넘칠때 적용되는게 아니라, 브라우저 사이즈가 줄어들면서, 컨텐츠가 줄바꿈 하는 것이다. 

5. align-content 는 flex-wrap : wrap 을 어떻게 줄바꿈 해줄 것인지를 결정한다. 

align-items 는 wrap 이랑 상관없이 기본 화면에서 item 들을 어떻게 배치할지를 결정한다.