멋쟁이사자 FE7 10일차

Findings (배운 점)

컨테이닝 블록 Containing Block 이란?

어떠한 요소의 크기와 위치에 영향을 주는 영역으로, 대부분 가장 가까운 블록 레벨 조상의 콘텐츠 영역이 컨테이닝 블록이 된다. (예외도 있다)

컨테이닝 블록의 조건

position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너(inline-

block, block, list-item 등의 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.

 

 position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌 (fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.

 

 position 속성이 fixed인 경우, 컨테이닝 블록은 뷰포트나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.

 position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다.

• transform이나 perspective (en-US) 속성이 none이 아님.
• will-change 속성이 transform이나 perspective임.
• filter 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
• contain 속성이 paint임.

출처 : MDN

 

css초기화

각 브라우저마다 제공하는 기본 스타일이 다르다.

css 초기화란, 브라우저 간의 요소들 차이를 없애 디폴트 값으로 초기화시키는 코드다.

css 초기화 방법

reset.css 파일을 만든다.

 

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

CSS Tools: Reset CSS

 

위쪽의 사이트에서 코드를 가져와 붙인다.

 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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

 

그 다음 styles.css에서 reset.css파일을 import 하면 된다.

 

@import "reset.css";

body {
  background-color: #f6f9fc;
}