๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[D+47] Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 3์ผ์ฐจ : section ๋ ˆ์ด์•„์›ƒ ์„ค์ • ๊ตญ๋น„์ง€์› D+47 Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 3์ผ์ฐจ - section ๋ ˆ์ด์•„์›ƒ ์„ค์ • - ์˜ค๋Š˜ ํ•œ ์ผ - section ๋ ˆ์ด์•„์›ƒ ์„ค์ • ํŒŒ์ผ ๊ตฌ์„ฑ ๋ฐ ๋‚ด์šฉ • style.css - section์— ๋Œ€ํ•œ ๋””์ž์ธ์„ ์žฌ์„ค์ •ํ•ด ์ฃผ์—ˆ๋‹ค. .product-name { font-size: 7.5rem; text-align: center; margin-top: 2em; } .sticky-element { display: none; position: fixed; } .section0-message { font-size: 4.5rem; font-weight: bold; width: 100%; height: 6rem; left : 0; top: 5em; text-align: center; } #show-section0 .s.. 2022. 11. 27.
[D+46] ์š”๊ตฌ์‚ฌํ•ญ ํ™•์ธ ๊ตญ๋น„์ง€์› D+46 - ์š”๊ตฌ์‚ฌํ•ญ ํ™•์ธ - ์š”๊ตฌ์‚ฌํ•ญ ํ™•์ธ • ํ˜„ํ–‰ ์‹œ์Šคํ…œ ํŒŒ์•… ์ ˆ์ฐจ - 1๋‹จ๊ณ„ : ํ˜„์ƒ ์‹œ์Šคํ…œ์˜ ๊ตฌ์„ฑ, ๊ธฐ๋Šฅ, ์ธํ„ฐํŽ˜์ด์Šค ํ˜„ํ™ฉ์„ ํŒŒ์•…ํ•˜๋Š” ๋‹จ๊ณ„ - 2๋‹จ๊ณ„ : ํ˜„ํ–‰ ์‹œ์Šคํ…œ์˜ ์•„ํ‚คํ…์ฒ˜ ๋ฐ ์†Œํ”„ํŠธ์›จ์–ด ๊ตฌ์„ฑ ํ˜„ํ™ฉ์„ ํŒŒ์•…ํ•˜๋Š” ๋‹จ๊ณ„ - 3๋‹จ๊ณ„ : ํ˜„ํ–‰ ์‹œ์Šคํ…œ์˜ ํ•˜๋“œ์›จ์–ด ๋ฐ ๋„คํŠธ์›Œํฌ ๊ตฌ์„ฑ ํ˜„ํ™ฉ์„ ํŒŒ์•…ํ•˜๋Š” ๋‹จ๊ณ„ • ๊ฐœ๋ฐœ ๊ธฐ์ˆ  ํ™˜๊ฒฝ์˜ ์ •์˜ ์‹œ ๊ณ ๋ ค์‚ฌํ•ญ • ๋ฏธ๋“ค์›จ์–ด์˜ ์ •์˜ ์šด์˜์ฒด์ œ์™€ ์†Œํ”„ํŠธ์›จ์–ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‚ฌ์ด์— ์œ„์น˜ํ•˜๋Š” ๋ฏธ๋“ค์›จ์–ด(Middleware)๋Š” ์†Œํ”„ํŠธ์›จ์–ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—๊ฒŒ ์šด์˜์ฒด์ œ๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์„œ๋น„์Šค๋ฅผ ์ถ”๊ฐ€ ๋ฐ ํ™•์žฅํ•˜์—ฌ ์ œ๊ณตํ•˜๋Š” ์ปดํ“จํ„ฐ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๋งํ•œ๋‹ค. • ์š”๊ตฌ๊ณตํ•™ - ์ •์˜ : ์š”๊ตฌ๊ณตํ•™(Requirements Engineering)์ด๋ž€ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ •์˜ํ•˜๊ณ , ๋ฌธ์„œํ™”ํ•˜๊ณ , ๊ด€๋ฆฌํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ์˜๋ฏธํ•œ๋‹ค. .. 2022. 11. 24.
[D+45] Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 2์ผ์ฐจ : ๋„ค๋น„๊ฒŒ์ดํ„ฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • ๋ฐ section ํฌ๊ธฐ ์„ค์ • ๊ตญ๋น„์ง€์› D+45 Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 2์ผ์ฐจ - ๋„ค๋น„๊ฒŒ์ดํ„ฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • ๋ฐ section ํฌ๊ธฐ ์„ค์ • - ์˜ค๋Š˜ ํ•œ ์ผ - ๋„ค๋น„๊ฒŒ์ดํ„ฐ ๋ ˆ์ด์•„์›ƒ ์„ค์ • - section์˜์—ญ์„ ์ง‘ํ•ฉ์œผ๋กœ ๋งŒ๋“ค์–ด ํฌ๊ธฐ ์„ค์ • ํŒŒ์ผ ๊ตฌ์„ฑ ๋ฐ ๋‚ด์šฉ • style.css - ์ƒ๋‹จ ๋„ค๋น„๊ฒŒ์ดํ„ฐ์— ๋Œ€ํ•œ ์Šคํƒ€์ผ ์žฌ์„ค์ • ๋ฐ display๋ฅผ flex๋กœ ์„ค์ •ํ•ด ์ฃผ์—ˆ๋‹ค. - ๋ณธ๋ฌธ ์˜์—ญ ์‚ฌ์ด์ฆˆ๋ฅผ ์ž„์‹œ๋กœ ์„ค์ •ํ•ด ์ฃผ์—ˆ๋‹ค. .global-nav { position: absolute; width: 100%; height: 44px; left: 0; top: 0; } .local-nav { position: absolute; width: 100%; height: 52px; left: 0; top: 45px; } .global-nav-links { d.. 2022. 11. 23.
[D+45] CSS : box-sizing, position, flex ๊ตญ๋น„์ง€์› D+45 - CSS : box-sizing, position, flex - CSS : box-sizing - Element์˜ ๋„ˆ๋น„์™€ ๋†’์ด๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค. - content-box : ๊ธฐ๋ณธ๊ฐ’, content ์˜์—ญ์ด width, height์˜ ๊ธฐ์ค€์ด ๋œ๋‹ค. - border-box : border๊นŒ์ง€์˜ ์˜์—ญ์ด width, height์˜ ๊ธฐ์ค€์ด ๋œ๋‹ค. CSS : position - HTML๋ฌธ์„œ์—์„œ element๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ element์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์˜๋ฏธํ•œ๋‹ค. - static(๊ธฐ๋ณธ๊ฐ’), relative, absolute, fixed, sticky • position : static - element๊ฐ€ ๋ฌธ์„œ์˜ ์ผ๋ฐ˜์ ์ธ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜๋œ๋‹ค. - top, right.. 2022. 11. 23.
[D+44] Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 1์ผ์ฐจ : ์›นํฐํŠธ ์„ค์ • ๋ฐ ๋„ค๋น„๊ฒŒ์ดํ„ฐ ์„ค์ • ๊ตญ๋น„์ง€์› D+44 Front-end ๋ฏธ๋‹ˆํ”„๋กœ์ ํŠธ 1์ผ์ฐจ - ์›นํฐํŠธ ์„ค์ • ๋ฐ ๋„ค๋น„๊ฒŒ์ดํ„ฐ ์„ค์ • - ๋ชฉ์  ์Šคํฌ๋กค์„ ์›€์ง์ผ๋•Œ๋งˆ๋‹ค ๋ฐ˜์‘ํ•˜๋Š” ์Šคํฌ๋กค์ธํ„ฐ๋ ‰์…˜ ์‚ฌ์ดํŠธ๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์˜ค๋Š˜ ํ•œ ์ผ - ์›นํฐํŠธ ์„ค์ • - ๋„ค๋น„๊ฒŒ์ดํ„ฐ ์„ค์ • ํŒŒ์ผ ๊ตฌ์„ฑ ๋ฐ ๋‚ด์šฉ • index.html - ์›นํฐํŠธ๋ฅผ ์„ค์ •ํ•ด ์ดˆ๊ธฐ ์…‹ํŒ…์„ ์ง„ํ–‰ํ•ด์ฃผ์—ˆ๋‹ค. - ์ƒ๋‹จ์— ๋“ค์–ด๊ฐ„ ๋ฉ”๋‰ด์— ๋Œ€ํ•œ ์ •๋ณด์™€ ๋‚ด์šฉ๋“ค์„ ๋„ฃ์€ ํ›„ nav์™€ sectionํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌํ•˜์˜€๋‹ค. Home History Store Contact Real Apple Pro Overview Compare Buy Real Apple Pro ์˜จ์ „ํžˆ ๋น ์ ธ๋“ค๊ฒŒ ํ•˜๋Š” ๋น›๊น” ๋‚˜์˜ ๊ฑด๊ฐ•์„ ์ฑ„์›Œ์ฃผ๋Š” ํ–ฅ๊ธฐ ๊นจ๋—ํ•œ ์ž์—ฐ์˜ ์‹ ์„ ํ•จ ์ƒˆ๋กญ๊ฒŒ ์ž…๊ฐ€๋ฅผ ์ฐพ์•„์˜จ ๋งคํ˜น ์ง„์งœ ์‚ฌ๊ณผ ์ด์•ผ๊ธฐ ์‚ฌ๊ณผ๋ฅผ ๋งค์ผ ํ•˜๋‚˜์”ฉ ๋จน์œผ๋ฉด ์˜์‚ฌ ๋ณผ ์ผ์ด .. 2022. 11. 22.
[D+44] javaScript Class ๊ตญ๋น„์ง€์› D+44 - javaScript Class - javaScript Class • ํด๋ž˜์Šค์˜ ๊ฐœ๋… - ES5์—์„œ๋Š” ํด๋ž˜์Šค๊ฐ€ ์—†์—ˆ์œผ๋ฉฐ ๊ฐ์ฒดํ˜•, ํด๋กœ์ €, ์ƒ์„ฑ์ž, ํ”„๋กœํ† ํƒ€์ž…๋“ฑ์„ ์ด์šฉํ•ด ํด๋ž˜์Šค์™€ ์œ ์‚ฌํ•œ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ–ˆ์—ˆ๋‹ค. - ES5์™€ ๋‹ค๋ฅด๊ฒŒ ES6์—์„œ๋Š” ์™„๋ฒฝํ•œ ๊ฐ์ฒด์ง€ํ–ฅ์˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ํด๋ž˜์Šค ๋ฌธ๋ฒ•์„ ์ง์ ‘์ ์œผ๋กœ ์ง€์›ํ•œ๋‹ค. - object ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋‚ด๋ถ€์ ์œผ๋กœ class๋Š” ๊ฒฐ๊ตญ object ํ˜•๊ณผ ๊ฐ™๋‹ค. • ํด๋ž˜์Šค ์„ ์–ธ class Student { constructor(name, number, score) { this.name = name; this.number = number; this.score = score; } getTotal() { return this.score.kor .. 2022. 11. 22.