2021년 11월 4일
id는 유일
class 는 중복 가능
CSS 우선순위 계산 페이지 : https://specificity.keegan.st
-
Q. 실무에서도 우선순위 계산법쓰는지?
- A. 실무에서는 주로 **클래스 선택자** 많이 사용. -
ID 선택자
#coffee: 중복 허용 X , 사용 힘듬. -
요소 선택자 `li: 모든 요소에 영향. 사용 힘듬.
-
클래스 선택자
중복 허용 O.
이름도 요소의 용도에 맞게 지어놓으면 클래스의 역할을 알기 쉬워.
👨🏫: 점수로 선택자를 계산한다라고 하는건 실무자들도 잘 모르실거에요. 여러분들 이런 지식을 베이스로 깔고 취업하시면 분명 다른 실무자들과 차이가 생기실거에요 명품은 디테일이니까요!
막간 QnA
-
Q. 코드펜 저작권은 어떻게 되는지?
- 코드펜 코드는 public코드라면 mit라이센스를 따릅니다!
- 무료로 사용가능 but, 라이센스표기를 잘해야해요.
-
Q. border가 width에 포함된다? 안된다?
- border는 width에 포함되지 않는다.
-
Q. padding은 백그라운드컬러의 영역을 받는다?
- 보더와 패딩 모두 설정한 width 값에 더해져서 계산됩니다.
만약 css에서 이렇게 작성한다면,
width : 300px; padding-right : 20px; border : 1px solid black;
width 값은 322px 이 됩니다. 하지만 이후에 배울 box-sizing에서 border-box로 설정하면 설정한 width 값 300px 내에서 보더와 패딩이 적용됩니다
width : 300px; padding-right : 20px; border : 1px solid black; box-sizing: border-box;
BEM 방법론 : LINK
-
border는 width에 포함되지 않는다!! → width는 콘텐츠인 자신의 크기만.
-
width > border > padding > margin 순서로 감싸진다.
-
실습 추천 'css로 라이언 만들기 따라하기' → LINK
-
margin,border, padding 등 속성값 축약 순서 → 12시부터 9시까지 시계방향으로 생각하자. top-right-bottom-left
- 값 한번에 한개, 두개, 세개, 네개 쓰는 법 다 알기 : [MDN확인LINK](https://developer.mozilla.org/ko/docs/Web/CSS/padding) [mdn-margin](https://developer.mozilla.org/ko/docs/Web/CSS/margin)margin: 10px 5px 5px 10px; // top-right-bottom-left -
margin값 마이너스도 있다. ex)
margin: -5px;그럼 영역 침범하게 됨.
- css 너무 많아서 머리터질거같아요
- 일단 아는거 다 쓰고 코드리뷰할때 적용안되는 것들 지워나가면 된다.
마진겹침현상이란?
- 동적인 이미지 → 이미지 태그를 쓰고,
정적인 이미지 → url
디자인 색상 참고 사이트 → https://color.adobe.com/ko/trends
