210823_[40]_대구 AI스쿨_일반과정_웹 프로그래밍_css_추가내용

홍연수·2021년 8월 23일
CSS기초과정대구AI스쿨웹프로그래밍
0
post-thumbnail

1.학습한 내용

(1) 페이지 실습
오늘은 css의 추가적인 내용에 대해서 배웠다.(8/25(수) 분량)

(2) 학습한 내용

  1. reset normalize
  2. normalize css
  3. css 변수

reset normalize

여태껏 실습들을 진행하면서 페이지 초기화 작업을 메뉴얼로 진행하였었다.

가령 예시를 들자면,

/*default값의 적용*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: #0e0e10;
}

ol, ul {
	list-style: none;
}
/* a는 underline이 들어가있는데 제거 */
a {
	text-decoration: none;
	/*color: #ffffff;*/
}

img	{
	vertical-align: top;
}	
input {
	outline: none;
	border: none;

}
button{
	outline: none;
	border: none;
	background: transparent;
}

h1, h2, h3, h4, h5, h6, p, span, input, button, a {
	color: #ffffff;
}

.btn-purple {
	background-color: #9147ff;
	color: #ffffff;
}

.font-purple {
	color: #9147ff;
}

하지만, 미리 세팅이 된 초기화로 이런 코드를 일일이 입력하는 번거로움을 줄여 줄수 있는 일종의 tool이 있다.

Reset.css : 초기화 작업에서 일일이 code 입력할 필요없이 세팅되어 있는것 (완전 초기화)

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

홈페이지를 들어오면 영문으로 소개와 함께 code를 복사해서 사용할 수 있다.

실습을 해보면

HTML code

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

	<link rel="stylesheet" type="text/css" href="css/reset.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>

css code

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

초기화가 진행 되어 있음을 알 수 있다.

그리고 이러한 작업에서 이전에 공부를 하였던 cascading을 생각해보면
적용되는 우선 순위는

불러와지는 순위인

  1. 브라우저 css
  2. 초기화 css
  3. 우리가 작성한 css

의 반대다

쉽게 생각해서 나중에 작성된 code의 우선 순위가 먼저인 것을 생각하면 된다.

Normalize css

reset css와는 조금 다른 형태의 일반화? 방식이 있다.

디자인을 입힌 형태에서 재가공하는데 목적은
브라우저간에 디자인을 맞추고 버그와 오차를 줄이는 목적이다.

실무에서는 normalize 많이 사용하지만, 개발자들간의 개취이다.

역시 normalize css를 검색해서
https://necolas.github.io/normalize.css/
site에 들어가서 다운로드를 진행한다.

css code

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


△ 적용한 결과

css 변수

css 변수라는 개념은 사용자 지정 속성이라는 의미로 쉽게 얘기해 내가 의미를 부여하는 변수를 설정하여 편하게 작업을 할 수 있다.

위에 그림과 같이 코랄색이라고 하는 orange와 비슷한 색이 있다.

hexa code나 rgb와 같은 개념으로 적용을 할 수 있지만, 복잡하고 기억하기가 힘들어 코랄색을 강혜원이라는 변수 지정을 한다.

그러면 필요할때마다 이 색상을 강혜원으로 불러내면 적용을 쉽게 할 수가 있는 것이다.
단점은 익스플로러 브라우저에서 미지원이다.

HTML과 css code로 실습을 해보면 다음과 같다.

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>

css code

/* root 어디에서든 다 사용가능 */
:root {
	--kang_he_won:  #ff7f50;
	--purple: #9147ff;
	--font-size-40:  40px;
}

/* 앞에것이 변수 뒤에가 데이터 */

h1 {
	background-color: var(--kang_he_won);
	font-size: var(--font-size-40);
	color: var(--purple);
}

/* 일괄적인 작업을 할때 변수가 편하다, 그리고 직관적으로 활용할수 있다. 단점은 익스플로러에서 제약 */

추가로 :root는 모든 곳에다가 적용을 하는 속성이고 kang_he_won을 변수로 뒤에 코랄색을 데이터로 적용했다.

그리고 h1에서는 var() 함수를 적용하는데 사용자 지정 속성 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용하는 것이다.

그래서 #ff7f50을 직접 적용할 필요없이 쉽게 일괄적인 작업을 할 수가 있다.


△ 적용된 값

그리고 마지막으로, :root 말고 id값으로 지정하여 특정부분만 지정하는 방법도 존재한다.
HTML code


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

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

css code


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

△ intro p에만 적용된 변수값을 확인할 수 있다.

2. 실습

분량이 적어서 깃허브 push를 하지 않고 위쪽 css code로 다시 학습 가능.

3. 어려웠던 내용 & 해결방법

어려운점이 없었다. (교육과정 중 가장 분량이 적었음)

4.소감

HTML css에 대해서도 2달 가까이 학습을 하였지만, 끝이 없는 것 같다. 특히, 계속 시간이 흐르면서 ver이 발전해나가는 것도 한몫하는 것 같다.

profile
홍연수
일단 하는 개발자
이전 포스트

210820_[39]_대구 AI스쿨_일반과정_웹 프로그래밍_실습_13_트위치_2_메인_footer영역_end

다음 포스트

210823_[40]_대구 AI스쿨_일반과정_웹 프로그래밍_css_추가내용

0개의 댓글

관련 채용 정보