차근차근 배움터

Sass와 Npm eco system에 대해서 배워본다

실전에서 BEM Method 사용법 header block은 독립형 컴포넌트 block 컴포넌트의 modifier - 속성을 담당하면 -- 대쉬 두 개를 붙인다 element (요소) __ modifier (속성) -- 라고 정리하려 했는데 Q&A 게시판을 보니 강사가 설명한 BEM에 대한 토론이 근 3년 간 열 띠었던 것으로 보인다....! https://www.youtube.com/watch?v=7necWMY4qtU 유투브 강의로 보충을 해본다 Block이란 독립적으로 사용될 수 있는 부분 Element는 메뉴 바의 내부를 보면 독립적으로 쓰인다고 보기 애매하기 때문에 element라고 정리한다 버튼 > 자주 쓰이는 버튼이라면 block 일 수 있지만, 그렇지 않으면 element로 취급 __ 언더스..

inline의 경우 첫째, 높이와 너비 속성은 적용되지 않아요 즉 이 속성을 사용할 수 없다는 거죠 둘째, 인라인 요소로 수평 패딩과 여백만 지정할 수 있어요 inline-block의 경우 인라인 블록 요소는 블록과 인라인의 조합입니다. 이러한 요소(예: 블록)에 높이, 너비, 전체 패딩을 설정할 수 있습니다. 이러한 요소는 기본적으로 다른 요소가 새 줄에서 줄 바꿈되지 않는다는 점에서 인라인 요소처럼 작동합니다. 이러한 요소는 요소가 서로 옆에 배치되기를 원하지만 요소가 표시되는 방식(전체 패딩/너비/높이)에 대한 원격 제어를 원할 때 유용합니다. Now, a common misconception is that only the z index property creates new stacking cont..

왜 rem 단위를 사용하는지 그리고 rem - px 변환 방법도 알아본다 body / html 대신 * 를 사용하는 이유 1rem = 루트의 글꼴 사이트 * 1 inherit을 사용하여 sizing 상속시켰다! body 에 inherit을 작성하는 건 줄 알았는데 아니네

모든 css 속성은 반드시 값이 있어야 하고 상속을 강제할 수 있는 키워드와 초기화할 수 있는 키워드가 있다. text와 관련된 속성들은 상속된다 padding과 관련된 속성들은 (당연히) 상속되지 않는다

* padding의 em 값은 해당 요소의 font-size를 기준으로 적용된다 * 왜 이렇게 폰트 사이즈에 적용하는 거지??? 라고 생각했는데 실제로 프로젝트를 만들어 보면 더 이해가 가겠지만, 합리적이고 디자인에 맞게 설계된 것 같다.

재미있는 경우는 :hover 수도 클래스 역시 계산에 포함이 되기 때문에 :hover 기능을 활성화하고 싶다면 레벨을 같게 해주어야 한다.

Cascade란? Cascade는 다른 스타일시트를 결합하고 다른 CSS 규칙과 선언 사이의 충돌을 해결하는 프로세스이다 아주 쉬운 예제를 하나 주셨다 하지만 모든 게 똑같다면 그냥 마지막에 작성 css 가 적용된다 정리하자면 inline-style이 중요한 요소이지만 자주 사용하는 것은 좋은 연습이 아니다 제 3 외부 스타일시트를 사용할 때는 순서가 중요하다

CSS가 뒤에서 어떻게 작동하는 지 간단하게 알아봤다 다음 시간에 자세하게 다룰 예정이다.