2021. 11. 13. (토) 코코아 클론 - CSS_02

# 학습 전 나의 상태

오늘도 육아에 치여 녹초가 되었다..

그렇지만 지금은 챌린지 중이기 때문에 쉴 수 없다.

게다가 코딩을 하루라도 쉬면 또 나태해질 것이 두려워 놓을 수 없다.

30분..이라도 붙잡고 해야한다. 그래야 유지할 수 있지..

주말 늦은 시간이지만 오늘도 힘내서 공부하자!!

어젠 cascading의 의미, 블록, 인라인, margin에 대해 공부했는데 아는 내용이 거의지만 새롭게 알게 된 것은 css는 중복되는 것이 있으면 가장 마지막 것이 적용이 된다는 것이다. 이유는 위에서부터 아래로 읽어오기 때문,, 

오늘의 학습도 잘 정리해서 내 것으로 만들기 위해 노력해보자!

 

 

# 오늘의 학습 내용

padding

• margin의 반대 개념
• margin은 바깥이지만 padding은 경계로부터 안쪽을 의미한다.

  

• inline은 너비와 높이가 없기 때문에 위, 아래 margin을 가질 수 없다.
• 위 아래를 적용하고 싶다면 display를 block으로 변경해줘야 한다.
• 그런데 padding은 사방을 다 가질 수 있다.
• margin과 값 입력 방법이 같다.

• body {
    /* 상하좌우 모두 10px 적용 */
    padding: 10px;
    /* 앞이 상하, 뒤가 좌우 10px 적용 */
    padding: 10px 15px;
    /* 상, 우, 하, 좌 순으로 적용 */
    padding: 10px 5px 15px 0px;
  }​

 

border

• box의 테두리
• 자세한 내용은 MDN 참고

https://developer.mozilla.org/ko/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

class

• id는 유일한 것, class는 여러 개에 사용할 수 있다.
• css에서 온점(.)은 class를 의미한다.
• id보다 class를 많이 사용한다.

** selector에 ,를 붙여 여러개를 한 번에 작용할 수 있다.

 

 

inline-block

• 계속해서 언급하지만 inline 은 너비와 높이를 가질 수 없다.
• 그런데 너비와 높이를 보여주고 싶다면 display 속성에 inline-block을 적용한다.

  

• 요소 사이에 빈 공간이 보인다. 이처럼 inline-block은 정해진 형식이 없다.
• 반응형 디자인을 지원하지 않는다.

 

 

flex

• 규칙
  • 자식 엘리먼트에는 어떤 것도 적지 말아라, 부모 엘리먼트에 작성하기!!
  • 주축(main axis) - 수평으로 설정 / justify-content, 교차축(cross axis) - 수직으로 설정 / align-items
    • vh => viewport(=screen) height - 화면 크기에 따라 바뀜
    • justify-content, align-items 적용 시 수평은 적용이 되고 수직이 적용이 안될 때는 height: 100vh 로 높이를 준다.
  • justify-content, align-items를 적용하고 싶으면 diaplay: flex를 해줘야
• flex-direction
  • 플랙스의 방향을 설정한다. 
  • row (수평) - defualt
  • column (수직) 

    

• flex-wrap
  • 모든 요소가 같은 줄에 있게 해준다.
  • 한 줄에 들어가는 만큼 최대한 집어넣고, 그게 되지 않으면 다음 줄로 옮긴다.

 

 

# 학습을 마치며

css 작업을 하다보면 항상 flexbox 문제로 시간이 많이 들었던 것 같다.

오늘 배운 flex에 대한 내용을 잘 기억해서 추후에 css 작업 시 수월하게 지나가길.. 바란다.

이제 졸음이 쏟아진다... 자야지..