.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
와일드카드(*), !important
와일드카드(*)는 전역 CSS 설정인데요. 초기화를위해 적당히 쓰는 것은 괜찮지만 많은 것들을 설정해서는 안됩니다. 그럴경우 HTML 엘리먼트 연산이 많아질 수 있음.
/* 적당한 수준 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
JSON
복사
!important :CSS 우선 순위 최상위에 있는 속성 강제 적용
위든 밑에서든 아무리 열심히 스타일 적용을 했어도 이게 설정 되어있으면 이걸로 적용
정말정말 어쩔 수 없는 최후의 수단일 때 사용
Class > ID
•
클래스에 비해 이점이 없으며(ID로 할 수 있는 모든 작업, 클래스로 수행할 수 있음) 재사용할 수 없으며 구체성이 너무 높다.
•
무한한 수의 체인 클래스가 있어도 하나의 ID의 특이성을 능가하지 않는다.
기본에 충실하기
•
span은 텍스트에만 사용
•
h1, h2 태그는 최대한 초기화, 스타일 적용하지 않고 그대로 사용
•
button 태그는 버튼에만 사용
이 외 등등...
inline 태그에 굳이 display:block; 을 부여하는 모습...
기본 고유 태그들의 용도와 의미를 항상 기억하면서 사용하자
Link > Import
•
속도면에서 Link가 Import보다 빠르다
•
웹폰트를 불러올 때도 네트워크가 연결되어있을 떄만 @import를 불러올 수 있기 때문에 웹폰트는 다운을 받아 연결하자.
z-index를 규칙있게 묶어서 지정하기
1,2,3 … 9,10 이렇게 순차적으로 지정한 경우
.header {
z-index: 1;
}
.header .btn {
z-index: 2;
}
.section {
z-index: 3;
}
.footer {
z-index: 4;
}
. footer .img {
z-index: 5;
}
JSON
복사
만약 중간에 새로운 컨텐츠가 들어가야할 때 z-index를 전체 수정해줘야하는 비효율적인 상황이 생긴다.
/* header는 10~19 사이 숫자 사용 */
.header {
z-index: 10;
}
.header .btn {
z-index: 11;
}
/* section은 20~29 사이 숫자 사용 */
.section {
z-index: 20;
}
/* footer는 30~39 사이 숫자 사용 */
.footer {
z-index: 30;
}
. footer .img {
z-index: 31;
}
JSON
복사
미리 규칙을 세워놓고 수정을 최소화하자.
