[css] reset css | Vendor-Prefix | Selector우선순위

FE/HTML,CSS

[css] reset css | Vendor-Prefix | Selector우선순위

mandelina 2022. 4. 6. 17:11

🚀 CSS

1. RESET CSS

reset css 란? 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시키는 것 .

Q. 왜 reset 해주어야할까?

- 각각 브라우저가 제공하는 요소의 스타일이 모두 다르다!

- 하지만 개발자가 구현해야하는 디자인은 동일해야한다!

- 그렇기에 초기화를 해준다!

🪱 에릭마이어 Reset CSS

- 오래전부터 널리 사용되던 방법

- 2011년도 이후 업데이트 x

/* reset.css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

그외

nomalize.css : (https://necolas.github.io/normalize.css/)

CSS Remedy : (https://github.com/jensimmons/cssremedy)

2. 벤더프리픽스(Vendor-Prefix)

- 벤더 (브라우저 제조사) 와 프리픽스 (접두어)의 합성어

- 비표준이거나 실험적인 CSS속성을 특정 브라우저에서 실행 할 수 있도록 CSS속성 앞에 브라우저 제조사 만의

접두어를 붙이는 문법이다.

-webkit-transition: all 4s ease;  // 1
-moz-transition: all 4s ease; // 2
-ms-transition: all 4s ease; // 3 
-o-transition: all 4s ease; // 4
transition: all 4s ease; // 5

1. 크롬, 안드로이드, 사파리, ios 기반 파이어폭스, 오페라 등 웹킷 기반 브라우저

2. 파이어폭스 브라우저

3. 마이크로소프트 인터넷 익스플로러, 레거시 엣지

4. 레거시 오페라 브라우저

3. Selector와 우선순위

🫀 선택자 정리

https://mandelina-code.tistory.com/16?category=1020515

* class 는 중복이 가능하지만 id는 중복이 불가능하다!!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    <style>
    .one{
        color: red;    
    }
    
    .two{
        font-size: 20px;
    }

    </style>
</head>
<body>
    <h1 class="one two">hello</h1>
</body>
</html>

- 이런식으로 h1은 class로 one과 two를 가진다.

🫀 선택자 우선순위

1. 후자 우선의 원칙

- 동일한 선택자가 연속으로 쓰이면 후자가 우선한다.

2. 구체성의 원칙

- 더 구체적으로 작성되었다면 우선한다.

여기서 더 구체적이라는것은 무엇일까 ? 이 애매한 상황을 가충치로 설명 할 수 있다.

- 가중치 순위 : id > class > 타입

- 아래 사진을 참고하여 선택자가 여러개 있어도 직관적으로 가중치를 따질 수 있다

- 빨간색 플랑크톤 : 타입선택자

- 파란 생선 : class 선택자

- 상어 : id 선택자

- inline-style : 배

- !important : 그냥 제일 쎔 ...

직관적으로 상어2 플랑크톤1 vs 생선 3이면 -> 상어가 이긴다!

(다른 예시로 타입,class,id를 각각 동,은,금메달로 생각해도 쉽다.)

가중치 점수표를 활용할 수도 있다.

inline - style	1000점
id	100점
class , 가상 , 속성	10점
타입 , 가상요소	1점
전체 (*)	0점

Q . 이런경우는?

<head>
    <style>
        .h1 {
            color: red;
        }

        html body div div div div div div div div div h1 {
            background: #000;
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <h1 class="h1">hello</h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

태그 13점 VS 클래스 10점 -> 태그가 이긴다 ? (X)

- 아무리 점수를 얻어도 클래스가 가지는 10점을 넘기지 못한다!

(동메달 13개를 받아도 은메달 1개가 이긴다 . . )

3 . 중요성의 원칙

! important

: 절대적인 우선순위 . 가중치를 무시한다 .

(많은 대규모 웹사이트 및 앱에서 css으 문제는 우선순위를 유지하는것이 어려워 어느시점에서 !important를 피하기 어렵다고한다. 또한 스타일을 섯불리 제거하거나 수정하면 다른 구성요소가 손상될 수 있어 사용한다.)

Box Model (inline vs block) & 마진 겹침 현상 (margin collapsing)

포스팅 : https://mandelina-code.tistory.com/31

🌈그밖에

- 코딩표준 (변수 명명)

파이썬 : 스네이크 표기법

js : 카멜 표기법

html, css : 다양 (더블클릭시 드래그 되는 영역을 기준으로 코딩을 더욱 효율적으로 할 수 있다.)

- reset css는 보통 회사에서 사용하는 css코드가 정해져있다.

- backgroud-color는 border 내부의 영역에 색이 변한다 . margin까지 주고싶다면 부모요소에 색을 입혀야한다.

- html과 body의 영역에 대해 구분하자!

참고 영상 (빔캠프 css): https://www.youtube.com/watch?v=H7teKNwV-Bk&t=1s

🔥 회고

css를 본격적으로 들어갔다 . 사실 css를 한번도 각잡고 제대로 공부해본적이 없어서 html에 비해 새롭게 알게 된 부분이 많았다. (그래서 집중도 더 잘 된 느낌?)

마진병합현상과 inline,block 에 관련한 포스팅은 따로 다루었다. 중요해서 앞으로 계속 포스팅을 볼 것 같기 때문에 ..

그밖에 호준님께서 개발자들이 사용하는 모니터 , 마우스 , 키보드를 말씀해주시기도 했다.

부품 욕심은 너무 많은데 . . . 텅장이기에 이정도 스펙을 만족하며 . . . 😂

취업하면 꼭 좋은거 사야지 . . . .

'FE > HTML,CSS' 카테고리의 다른 글

[css] 단위 \| background \| font (0)	2022.04.07
[CSS ] 마진 겹침 현상 \| inline \| block (2)	2022.04.06
[HTML] table \| inline vs block (0)	2022.04.05
[HTML] form태그 (0)	2022.04.05
[HTML] Text-level semantics (0)	2022.03.30

현재글[css] reset css | Vendor-Prefix | Selector우선순위

Hello_coding

자바스크립트, useEffect, react, 리덕스, 프로그래머스, 멋쟁이사자처럼, TpyeScript, node.js, 프론트엔드스쿨, TypeScript, http, HTML, JS, 리덕스툴킷, spa, 프론트엔드스쿨2기, CSS, 프론트엔드, 리액트, 코딩테스트,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Hello_coding