CSS연습하기(계속 추가추가)

-CSS

1.border포함해서 box-size정하기

{box-sizing: border-box;}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

-border-box : 테두리 기준

-content-box : 콘텐츠 영역 기준

-initial : 기본값으로 설정

-inherit : 부모 요소의 설정값을 상속

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

 

2.box-inner box 위치 조절시

→ 박스 안에서 포지션을 옮겨 가고 싶으면 박스가 스태틱이 아닌 다른 값으로 지정해야한다

ex)) position : relative;

static : 기본값

fixed : box에 상관없이 뷰포트 기준으로 위치

sticky : 화면 스크롤링해도 상단에 위치

https://developer.mozilla.org/ko/docs/Web/CSS/position

 

 

3.alignment

-text-align : center;

-> div인 경우 : text-align 설정해도 변화X

-> block 인경우 margin: auto; 로 center 위치 가능

-transform : translate(n%, m%) → 박스 자신의 n%, m%만큼 뷰포트기준으로 이동

-line-height : 야매: 줄간격 설정 → 박스의 height로 설정하면 가운데 정렬가능!

.container {
  position : absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

!다음은 화면중앙으로 만드는 기본적인 방법! 암기하도록!

따라서 부모요소의 50%, 50%로 이동하고 싶으면

• position : 설정해주고 →top: 50%; left: 50%로 이동
• but, 중앙 이동 기준이 box의 중앙점이 아닌 왼쪽 상단 꼭지점이니까
• 그 박스의 가로,세로 50%씩 이동해야 화면 중앙으로 이동!!
• ((((뷰포트는 4사분면!!!!!))))

 

4.CSS변수

—font-size: 32px; 변수설정시 →font-size: var{—font-size}: 로 받아올수있음!

.root {
	--font-size: 32px;
	--background-color: orange;
	--base--space: 8px; //space 8px로 기본 설정하고
}

.box {
	background-color: var(--background-color);
	font-size: var(--font-size);
	margin-left: calc(var(--base-space) * 2);
}

최상위 루트인 → .root에서 변수 정하여 모든 요소들이 접근 가능하도록!

calc함수: 계산가능!! (but 최적화ㄴㄴ)

 

5.반응형

@media : 미디어 쿼리 이용시 →

@media screen and (max-width: 768px) {
	:root {
	--font-size: 32px;
	--background-color: orange;
	--base--space: 8px; //space 8px로 기본 설정하고
}

tip:하나씩 다 바꾸는거보다 변수 저장한걸 복붙해서! 고치기!

 

 

6.reset.css

각 브라우저마다 기본 설정된 스타일이 다르기 때문에 먼저 reset.css를 사용하여 0인 상태에서 css를 줘야지 같은 style을 입힐 수 있다.

CSS 초기 설정 : reset CSS ⇒reset.css 저장하고 style.css에서 @import "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;
}

 

 

7.flex-wrap

flex-wrap : flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성!!!!!