2021_08_24개발일지

Yeo Eunhye·2021년 8월 24일
개발일지
0

1) 학습한 내용

오늘은 reset css , normalize css , 변수에 대해서 알아보았다.

- html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title> CSS 추가설명</title>

	<!-- <link rel="stylesheet" type="text/css" href="css/reset.css"> -->
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<!-- 링크간에도 캐스캐이딩 발생 ! 순서가 중요-->
</head>
<body>

	<h1>Hello World</h1>
	<h2>Hello World</h2>
	<h3>Hello World</h3>
	<h4>Hello World</h4>
	<h5>Hello World</h5>
	<h6>Hello World</h6> 


	<header id="intro">
		<p>Header P</p>
	</header>

	<footer id="footer">
		<p>Footer P</p>
	</footer>






</body>	
</html>

1. reset css

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

reset css 는 디폴트값으로 적용된 디자인 모두를 초기화 시키는 것을 말한다.
참고 페이지 "https://meyerweb.com/eric/tools/css/reset"


2. normalize css

- css

/*https://necolas.github.io/normalize.css/*/
/*브라우저간 디자인의 오차를 줄일때 사용 */



/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

Normalize css 는 브라우저간 디자인의 오차를 줄일때 사용하며 모든 디자인이 초기화 되는 것은 아니지만 기본적인 것들은 초기화가 된다. 또 취향에 따라 다르긴하지만 reset css 보다 자주 사용된다고 한다.
참고 페이지 "https://necolas.github.io/normalize.css/"

3. 변수와 변수의 값

- css

:root {
	--black: #18181a;
	--brand-color: #9147ff;
	--font-size-40: 40px;
}
/*:root 안에 작성된 변수들은 
어디서든(모든영역) 다 가져다 사용가능하다.*/
h1 {
	background-color: var(--black);
	font-size: var(--font-size-40);
	color: var(--brand-color);
}

/* {변수 : 값} 
변수를 사용하는이유
1. 일괄적인 수정이 필요할때 변수의 값만 조정해주면 된다.
2. 변수의 명을 직관적으로 지정해 쉽게 찾을 수 있다
 */



#intro {
	--font-color:  blue;
	--font-size: 50px;
}

#intro p {
	font-size: var(--font-size);
	color: var(--font-color);
}

#footer p {
	font-size: var(--font-size);
	color: var(--font-color);
}

/*영향력을 발휘 하는 부분을 css 선택자로 지정을해서 
사용할 수 도 있다 - 제한을 두는것*/

변수라는 박스 안에 변수의 값을 집어 넣어 사용하는 것을 말한다. 변수의 명은 언제든지 바꿀수 있으며, 보기좋게 지정할 수 있는 장점이 있다.
또 변수의 값은 일괄적인 수정이 필요할 경우 변수의 값만 수정을 하면 사용한 모든 변수들이 한번에 변경되는 장점이 있다.

변수는 모든 영역에서 사용가능한 변수 (:root) 와
제한된 영역에서만 사용가능한 변수 ( ex) #intro ) 등이 있다.


2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 크게 실습보다는 학습 위주의 강의라서 크게 어려웠던 점은 없었다.

3) 학습소감

오늘 변수라는 것을 배우니 뭔가 아직도 배워야할 어마무시한것들이 많을것 같은 느낌이다.
크게 어렵지는 않은 내용이었으나 뭔가 이와같이 내가모르는 내용들이 아주 많이 남아있을 것만 같다. 무서우어어어..
그래도 조급해하지말고 끝까지 뽜이팅 : )

profile
Yeo Eunhye
아직 여백이 많은 개린이입니다.
이전 포스트

2021_08_ 23개발일지

다음 포스트

2021_08_25 개발일지

0개의 댓글

관련 채용 정보