본문 바로가기
WEB/멋쟁이사자처럼 프론트엔드스쿨

멋쟁이사자처럼 프론트엔드스쿨 5일차 기록

by twinkite 2021. 11. 4.
반응형

오늘 한 것

  • CSS

오늘 배운 것(new!)

Box-sizing 속성 

content-box(default), border-box

일반적으로 요소의 넓이를 설정할 때 width, padding, border의 값이 다 따로 적용되서 하나를 바꾸려면 다른 크기도 연쇄적으로 바꿔주어야 하는 불편함이 있었다. 이 때 box-sizing:border-box를 이용하면 border와 padding의 크기도 width에 포함시킨다. 

Cascading

CSS(Cascading Style Sheet) 이름부터 Cascading 이라고 들어가있는데 적용 원리를 몰라서 이런 질문을 했다. 

속성 사이에 우선순위는 없고 위에서 아래로 흐르며 적용된다. top, left가 적용됐지만 마지막에 border이 상하좌우에 모두 적용되면서 사라진 것이다.

오늘의 팁

- CDN : 개인 프로젝트는 괜찮지만 실제 서비스를 해야 하는 경우에는 사용하지 않는 것이 좋다. 이전에 모 회사에서도 CDN이 마비되는 바람에 자사 서비스의 UI가 모두 깨지는 사건이 발생한 적이 있었다고 한다. - CSS BEM(Block Element Modify) 방법론 

 

css 방법론 - BEM 방식

css 방법론이란 쉽게 풀어쓰면 css 클래스네임을 어떻게 지으면 좋을지를 고민해보는 것.BEM은 block, Element, Modifier를 뜻한다.이 세가지로 구성된 이름을 짓는 것. 그리고 각각 \_\_와 --로 구분한다.

velog.io

CSS 클래스 이름을 짓는게 정말 어려웠는데 방법론이 있었다. 진작에 알았으면 졸플을 좀 더 편하게 했었을까^^.... 앞으로는 적용할 수 있도록 해봐야겠다. 

리뷰

나만의 규칙!
1. 어떤 내용이든 말로 설명할 수 있게 학습하기
2. 강의 중 모르는 내용은 바로 질문하거나 필기노트에 써놓고 쉬는시간 or 마치고 찾아보기

개인적으로 점수를 매기자면 5점만점에 3점이다.

1. 기존에 잘 알지 못하던 속성을 정확하게 정리하기 위해 블로그에 정리했다. 

2. 모르는 내용 참기 왜이렇게 힘들죠? 보면 바로 해결해야 속이 시원하다구ㅠ 중간에 자꾸 새나가는 바람에 호다닥 돌아오기를 몇번을 반복했느닞.... 그리고 새어나가면 궁금증 해결하고 바로 와야되는데 왜 바로 안오고 딴짓해? 나자신 반성해라

그리고 나는 오늘도 회고 그룹 못들어갔어... 나만 그룹 없어... 오늘 새로 오신 분들도 들어갔던데 왜 나는 안넣어주시는걸까.... ㅠ0ㅠ... 나도 소속감... 나도 그룹...

반응형