[코드라이언] Reset CSS와 선택자(Selector) 그리고 상자(Box) -Day 8-

각 브라우저마다 제공하는 요소의 기본 스타일은 다 다르다.

나는 현재 chrome과 firefox를 번갈아가며 쓰고 있는데, 같은 <input>속성 태그를 사용하여도 chrome과 firefox에서는 다르게 보여진다.

 

이러한 점은 웹페이지를 구현할 때 문제가 된다. 바로 브라우저마다 각각 다른 스타일을 만들어 적용시켜 주어야 한다는 것.... 이러한 비효율을 개선하기 위한 것이 

 

에릭마이어의 Reset CSS

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

 

브라우저의 모든 기본 스타일 속성들을 초기화 시켜 완전히 from the scratch로 스타일을 만드는 것이다.(2011년 이후 업데이트 중단)

 

/* 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;
}

 

또 비슷한 기능을 하는 것은

Normalize CSS

https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

Normalize CSS는 모든 기본적인 스타일의 속성들을 삭제하지는 않는다. 대신 추가적인 스타일을 덧붙여 어떤 브라우저에서든 비슷하게 보여지도록 통일해 준다.

Reset CSS가 브라우저의 모든 기존 스타일을 삭제하여 초기화 하는 것이라면 Normalize CSS는 기존 브라우저 스타일을 존중하며 추가하는 좀 더 완곡한 방법이라 할 수 있다.

 

 

 

 

 

 

벤더 프리픽스(Vendor Prefix)

 

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

아직 상용화 되지 않은 실험적인 CSS 속성들을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사만의 Prefix를 붙이는 문법이다.

 

아래는 벤더 프리픽스가 쓰이는 예제

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;

 

webkit은 브라우저가 html/css를 화면에 그려줄 때 사용하는 렌더링 엔진이다. 대부분의 브라우저들이 webkit을 사용했지만 현재는 blink엔진으로 전환 되었고, blink 엔진은 벤더 프리픽스가 존재하지 않는다.

 

벤더 프리픽스 사용은 많이 줄어들고 있지만, CSS의 기능들은 계속 발전하고 있고 사용해야하는 벤더 프리픽스가 있다.

벤더 프리픽스는 상당히 귀찮지만 Visual Studio 익스텐션인 Autoprefixer를 통해 자동으로 벤더 프리픽스를 완성할 수 있다.

 

 

덧붙여 크로스 브라우징을 위해 https://caniuse.com/ 을 자주 이용하자!

 

 

 

 

 

 

CSS 선택자

 

선택자 종류

• 전체 선택자
  * { margin:0 auto };
• 타입 선택자
  태그 이름을 사용. 해당 모든 태그를 선택한다.
  p { color:red; }
• 아이디 선택자
  HTML문서 안에서 id값은 중복되지 않아야 한다. id 값은 알파벳/하이픈(-)/언더스코어(_)로만 시작할 수 있다.
  #one { background-color : black; }
• 클래스 선택자
  id 속성과 다르게 class 속성은 중복 사용이 가능하다. 마찬가지로 값은 알파벳/하이픈/언더스코어로만 시작할 수 있다.
  .container{ margin: 0; padding: 0; }

 

선택자들은 콤마(,)로 다중 선택할 수 있다.

h1, h2, h3, h4 { font-size: 34px; color:violet; }

 

 

 

한번 해보면 바로 이해가 가는 재미있는 CSS 선택자 게임. 이런거 너무 좋다...

https://flukeout.github.io/

CSS Diner

 

 

 

 

 

CSS 선택자의 우선순위 원칙

 

1. 후자 우선의 원칙
동일한 선택자가 연속으로 사용되었을 때, 후자가 우선한다. CSS 코드는 후자 즉, 아래의 최신 코드부터 우선순위를 갖는다.

 

 

2. 구체성의 원칙

더 구체적으로 작성된 선택자가 우선된다. 예를 들어, 같은 <img> 태그여도 class 값과 함께 선택된 <img>태그 선택자가 우선되어 적용된다.

img.super { height: 500px; }

img. { height: 800px; } 

 

"super"이라는  class 값을 같이 적어준 img.super 의 속성이 우선적용된다. 이는 가중치를 기준으로 하고 있다.

쉽게 말하자면, 어떤 선택자가 더 구체적인가? 에 따라 더 우선순위가 달라진다.

가중치 순서는 Id > class > 타입 순이다. id값의 가중치가 더 높기 때문에 같은 태그에 id값 선택자 / class 값 선택자 따로 해준다면, id값 선택자의 속성이 우선적용 된다.

 

 

3. 중요성의 원칙

위의 중요성 원칙을 다 무시하고 절대적으로 우선시 되어야 할 스타일을 지정해주는 마법의 속성값

!important

.container{ margin: 0; padding: 0; !important }

 

쉬운 방법이지만 우선 순위 계산을 어렵게 만들기 때문에 지양하자. 자주 쓰는것은 나쁜 습관이다.

 

 

이러한 CSS 선택자 우선순위는 가중치를 기준으로 작동하는데, 아래는 가중치 점수 표이다.

출처 : 코드라이언 프론트엔드스쿨 교안

 

(1위인 inline-style은 html 태그 안에 직접 style = " "을 주는 것.)

 

 

 

 

 

박스(Box)

 

HTML 문서의 모든 요소들은 모두 네모난 상자(box) 형태를 띄고 있는데 이를 박스 모델이라 한다.

박스 모델에는 4가지의 박스 구성들이 있는데, 접시위에 올려진 딸기로 비유를 해보겠다.

 

• Margin
  보더 바깥쪽 영역으로 요소와 요소사이의 공백 역할. 즉, 접시와 접시 사이의 공간으로 보면 된다.
• Border
  콘텐츠와 패딩을 둘러싸는 테두리. 말 그대로 경계선으로 접시의 가장자리라고 할 수 있다.
• Padding
  콘텐츠와 테두리 사이의 영역으로, 딸기(=콘텐츠)와 접시 가장자리 사이의 공간으로 볼 수 있다. 
• Content
  콘텐츠가 표시되는 영역. 딸기 크기로 볼 수 있다.

 

 

 

border에는 여러가지 스타일을 줄 수 있다.

 

• dotte : border 선이 점선으로 표현
• dashed : 바느질 선으로 표현
• doubled : 이중 선으로 표현
• groove : 테두리가 오목하게 안쪽으로 파인 선 표현
• ridge : 테두리가 볼록하게 나온 선
• inset : 요소가 안으로 들어가 보이게 하는 형태
• outset : 요소가 밖으로 튀어나와 보이게 하는 형태
• radius : 꼭지점을 둥글게 만들어 준다. radius 값을 반지름으로 하는 원을 기준으로 둥근 형태를 그리는 원리.

 

margin 값은 4개의 면에 모두 줄수 있으며 작성 시, 방향은 시계방향(상/좌/하/우)이다.

margin값을 두개만 적으면 상하/좌우 값을 주는 것이다.

 

 

 

 

 

인라인(In-line)박스 VS 블록(Block)박스

모든 HTML의 요소들이 다 같은 박스는 아니다. 인라인 박스, 그리고 블록 박스 2가지 형태가 있다.

정확히 말하면 인라인 요소(In-line element) / 블록 레벨 요소 (Block level element)로 나누어 진다.

 

 

• 인라인 요소 (In-line element)

기본적으로 컨텐츠 박스 크기 만큼의 크기만 가진다. base line에 맞추어 정렬된다.

 

width / height 속성을 사용 할 수 없다.

 

마진 속성은 좌우만 사용할 수 있다. 상하에 마진을 주어도 다른 요소들을 밀어내지 않는다 (base line이 절대적이기 때문에)

 

대표적인 HTML 인라인 요소 태그들

<a> <button> <abbr> <b> <br> <button> <img> <input> <label> <select> <span> <strong> <textarea>

 

*인라인 태그는 블록 레벨 요소의 태그를 자식으로 포함할 수 없다.

 

 

 

 

• 블록 레벨 요소(Block level element)
  
  블록 레벨 요소는 항상 새 줄에서 시작한다. 블록 레벨 요소는 양 옆으로 Full로 width 값을 사용할 수 있다.
  width/height 속성을 사용 할 수 있으며, margin / padding / border 속성 값으로 다른 요소들을 밀어낼 수 있다.

대표적인 HTML 블록 레벨 요소 태그들

<article> <aside> <div> <fieldset> <figure> <footer> <form> <h1>-<h6> <header> <li> <main> <nav> <ol> <ul> <p> <section> <table> 

 

 

 

각각의 요소들은 기본적으로 인라인이냐 블록 레벨이냐의 속성을 가지고 있지만, display 속성을 사용하여 다른 박스들과 어떻게 어울려 배치될지 정할 수 있다.  display 속성은 형제/부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입과 자식 박스들의 배치에 영향을 주는 내부 디스플레이 타입으로 나눠진다. (내부 디스플레이 타입은 flex와 grid가 있는데 이건 다음 시간에...)

 

 

• Display 속성
  
  

div { display : inline;}

인라인으로 박스의 유형을 변경해준다.

 

 

div { display : block; }

박스의 유형을 블록으로 변경해준다.

 

 

div { display : inline-block; }

블록 유형 + 인라인 유형을 짬뽕 시켜주는 속성.

블록처럼 margin, padding, width, height 값을 모두 줄 수 있으면서도 인라인 요소처럼 한 줄에 여러 요소를 정렬 시킬 수 있다.

 

출처 : 코드라이언 프론트엔드스쿨 교안

 

 

• 대체 CSS 박스 모델
  모든 요소들의 박스 크기는 콘텐츠 크기 + 패딩 + 보더크기로 정해진다. 실제로 박스 크기를 height: 50px를 주었다 하더라도 border:5px;을 주면 보더의 width넓이까지 더해져 박스의 height는 50+5+5 = 60px이 된다...
  
  이런 복잡함과 귀찮음을 해결 해 주는 것이 대체 박스 모델이다. box-sizing을 통해 위와 같은 표준 박스 모델을 대체 박스 모델로 변경할 수 있다.
  
  

p { box-sizing : border-box; }

이렇게 해주면 보더 width까지 합쳐서 박스 크기를 계산해 주기 때문에 height: 50px 이고 border:5px 값을 주어도 실제 박스 크기는 60px가 아닌 그대로 50px로 출력 된다.

 

(box-sizing : content-box; 는 box-sizing의 기본 값으로 표준 박스 모델이다.)

 

 

인라인 요소와 블록 레벨 요소를 공부할 때 가장 유의해야 할 점은 바로 "마진 겹침 현상(margin collapsing)"인데 이 부분은 HTML/CSS를 사용하면서 자주 겪는 현상이고 중요한 부분이라 따로 정리하여 포스팅 하려 한다.