๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

๐Ÿ“• Web๊ธฐ์ดˆ5

CSS Flex(Flexible Box) ๊ฐœ๋…์ •๋ฆฌ โ– float : ์ด๋ฏธ์ง€์™€ ํ…์ŠคํŠธ๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ•  ์ง€ ์ •์˜ํ•˜๊ธฐ ์œ„ํ•œ ๊ฒƒ โ– Flexbox 2๊ฐ€์ง€ ์ถ• ์ค‘์‹ฌ์ถ•, ๋ฐ˜๋Œ€์ถ• โ– Flex ์†์„ฑ ์„ค์ • - container container & item .container { background: beige; heigth:700px; display:flex; } flex-direction: row; ์ค‘์‹ฌ์ถ• : ์ˆ˜ํ‰/ ์ˆ˜์ง (row, column, row-reverse , column-reverse) flex-wrap: wrap; ํ•œ์ค„ ๋„˜์–ด๊ฐ€๋ฉด ๋„˜์–ด๊ฐˆ์ง€ ์•ˆ๋„˜์–ด๊ฐˆ์ง€ ๊ฒฐ์ • (wrap ,nowrap) flex-flow: column nowrap; ์œ„ 2๊ฐœ ํ•œ๋ฒˆ์— ์„ค์ • justify-content: space-between; ์ค‘์‹ฌ์ถ•์—์„œ ์•„์ดํ…œ๋“ค ๋ฐฐ์น˜ํ•˜๊ธฐ flex-start .. 2021. 2. 15.
HTML ๊ณผ CSS ๊ธฐ์ดˆ html ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ํŒŒ์ผ ๋งˆํฌ์—…์–ธ์–ด : tag๋ฅผ ์ด์šฉํ•œ ๊ตฌ์กฐ์  ๊ตฌ์กฐ โ– ๊ณ„์ธต์  ๊ตฌ์กฐ DOM Tree ๊ตฌ์กฐ๋กœ ๋ณด๊ด€ : DOM Tree ๊ตฌ์กฐ๋กœ ๋ณด๊ด€ โ– TopDown ๋ฐฉ์‹ โ– ๋ฅผ ์ด์šฉํ•œ ๊ตฌ์กฐ : html ๋ฌธ์„œ์˜ meta ์ •๋ณด ๊ธฐ์–ต : ์‚ฌ์šฉ์ž์˜ ํ™”๋ฉด์— ๋ณด์—ฌ์ง€๋Š” ์ •๋ณด : style ๊ทธ๋ฃน ์ง€์ • ์‹œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ -> ์˜๋ฏธ์— ๋งž๋Š” ํƒœ๊ทธ ์‚ฌ์šฉ ์ค‘์š” โ–์˜๋ฏธ์— ๋งž๋Š” ํƒœ๊ทธ์˜ ์ค‘์š”์„ฑ ์˜๋ฏธ ์ด๋ฏธ์ง€ ์ œ๋ชฉ ( ๋Œ€์ œ๋ชฉ, ์†Œ์ œ๋ชฉ) ๋ฌธ๋‹จ ํ‘œ ๋ชฉ๋ก ๊ฐ•์กฐ ๋งํฌ โ– HTML ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ attribute โญ๏ธclass css style ๋งŒ๋“ค๊ณ  ๋ถ€๋ฅด๋Š” ์—ญํ•  ์—ฌ๋Ÿฌ๋ฒˆ ์‚ฌ์šฉ โญ๏ธid ํƒœ๊ทธ์˜ ๊ณ ์œ ํ•œ ์ •๋ณด ํ‘œํ˜„ 1๋ฒˆ๋งŒ ์‚ฌ์šฉ ์ถ”์ฒœ(์œ ๋‹ˆํฌํ•œ ๊ฐ’) ๋ฐ”๊นฅ ๋ ˆ์ด์•„์›ƒ ๊ฒฐ์ • ์˜์—ญ์— ์ฃผ๋กœ ๋ถ€์—ฌ data HTML element .. 2021. 2. 15.
JavaScript ๊ธฐ๋ณธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‚ฌ์šฉ์ž์™€ ์ƒํ˜ธ์ž‘์šฉ ์›น๋ธŒ๋ผ์šฐ์ €๋Š” ํ•œ๋ฒˆ ์ถœ๋ ฅ๋˜๋ฉด ์ž๊ธฐ ์ž์‹ ์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์—†์Œ ๋”ฐ๋ผ์„œ JavaScript๋Š” HTML์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Œ ์›น๋ธŒ๋ผ์šฐ์ €๋“ค ์œ„์—์„œ ์ผ์–ด๋‚  ์‚ฌ๊ฑด๋“ค ์ค‘์— ๋ช‡๊ฐ€์ง€ ์ด๋ฒคํŠธ๋“ค์„ ์ €์žฅํ•ด๋‘  style= "CSS์†์„ฑ" input type="button" value="night" onclick="์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ" onclick button ์„ ํด๋ฆญํ•˜๋ฉด -> onclick ์— ์ €์žฅํ•ด๋‘” ์ด๋ฒคํŠธ๊ฐ€ ์ผ์–ด๋‚จ onchange textbox์— ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚˜๋ฉด -> ์ด๋ฒคํŠธ ์–ด๋–ค ํ‚ค๋ฅผ ๋ˆŒ๋ €์„ ๋•Œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•ด๋ผ javascript keydown event attribute " ๋ผ๊ณ  ๊ฒ€์ƒ‰ํ•ด๋ณด๊ธฐ onkeydown --> javascript๋ฅผ ์›นํŽ˜์ด์ง€๋กœ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ• Consol ํŒŒ์ผ์„ ๋งŒ๋“ค์ง€ ์•Š๊ณ ๋„javascr.. 2021. 1. 4.
[Web] HTML ๊ธฐ์ดˆ - ์›น์‚ฌ์ดํŠธ HTML Hypertext markup language ๊ตฌ์กฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์–ธ์–ด ์—ฌ๋Ÿฌ ์›น ๋ฌธ์„œ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ์–ธ์–ด ํ…ŒํŠธ๋ฆฌ์Šค ์ฒ˜๋Ÿผ ๋ธ”๋ก๋“ค์„ ์Œ“์•„ ์›นํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์›นํŽ˜์ด์ง€ NAVER ๋กœ๊ทธ์ธ ๋กœ๊ทธ์ธ ์ƒํƒœ ์œ ์ง€ ํ”„๋ก ํŠธ ์—”๋“œ- > ๋„ค์ด๋ฒ„์˜ html ๋ฌธ์„œ๋ฅผ ๊ฐ๊ฐ ๋‹ค์šด๋ฐ›์Œ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์ด์šฉํ•ด์„œ ๋‹ค์šด๋ฐ›์€ html์„ ๋ฐ”๊ฟ” ์‚ฌ์šฉ ์‹ค์ œ๋กœ ๊ฒ€์ƒ‰ ์ˆœ์œ„๋ฅผ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋„ค์ด๋ฒ„ ์„œ๋ฒ„์— ์žˆ๋Š” ๊ฑธ ์กฐ์ž‘ํ•ด์•ผ ํ•จ ์›น์‚ฌ์ดํŠธ ๊ณต์œ ํ•˜๋Š” ๋ฒ• ์›น์‚ฌ์ดํŠธ๋ฅผ ์ธํ„ฐ๋„ท์— ๊ณต์œ ํ•˜๊ธฐ ์œ„ํ•œ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ• 1) ๋‚ด ์ปดํ“จํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ๋งŒ๋“œ๋Š”๋ฒ• ๋‚ด ip ์ฃผ์†Œ๋ฅผ ์ธํ„ฐ๋„ท์— ์˜ฌ๋ฆฌ๊ธฐ ๋ณด์•ˆ์ด ์ทจ์•ฝ / ์ธํ„ฐ๋„ท์— ์—ฐ๊ฒฐ๋œ ๋‚ด์ปดํ“จํ„ฐ 365์ผ ๊ฐ€๋™ํ•ด์•ผํ•จ 2)์™ธ๋ถ€ ์„œ๋ฒ„๋ฅผ ์ด์šฉํ•œ๋Š ๋ฒ• ์„œ๋ฒ„์˜ ์ผ๋ถ€๋ฅผ ๋นŒ๋ ค ๊ณต๊ฐ„์„ ํ™œ์šฉํ•ด ๋ฐฐํฌ ํฐ ์„œ๋ฒ„์˜ ์ผ๋ถ€๋ฅผ ํ™œ์šฉํ•˜๋ฏ€๋กœ ์œ ์ง€๋น„์šฉ์ด ์ ๊ฒŒ ๋“ค์Œ ๊ฐ€๋” aws ์™€๊ฐ™.. 2020. 12. 19.
[Web]์ฝ”๋”ฉ์˜ ๊ธฐ์ดˆ์™€ ์›น, ์•ฑ ํ”„๋กœ๊ทธ๋ž˜๋ฐ FrameWork /Library/ API / SDK ์ฝ”๋”ฉ์„ํ• ๋–„ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋„๊ตฌ๋ฅผ ๋ชจ์•„๋‘๊ณ  ์‰ฝ๊ฒŒ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณต ๊ฒŒ์ž„ ์•ฑ Web unity React Native Rails ruby python java rails django spring Web ๊ฐ€์žฅ ์‰ฝ๊ณ  ์ต์ˆ™ํ•œ ๊ฒƒ Front-end Back-end ํ™”๋ฉด์— ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ ํ™”๋ฉด์— ๋ณด์—ฌ์ค„ ์ •๋ณด๋ฅผ ์ฒ˜๋ฆฌ ํ”„๋ก ํŠธ์—”๋“œ HTML CSS JAVA Script ๋งˆํฌ์—… ๋žญ๊ท€์ง€ ์—ฐํ•„ ์ „์ฒด์ ์ธ ๋ฐ‘๊ทธ๋ฆผ ์ œ๋ชฉ, ๋กœ๊ทธ์ธ์ฐฝ ๋ฌผ๊ฐ ์ƒ‰์„ ์น ํ•˜๊ณ  ์œ„์น˜๋ฅผ ์กฐ๊ธˆ์”ฉ ์ˆ˜์ • ๊ทธ๋ฆผ์„ ์›€์ง์ด๊ฒŒ ใ…๋‚˜๋“œ๋Š” ํ”Œ๋ฆฝ๋ถ ๋ฐฑ์—”๋“œ ๋ณ€์ˆ˜ ์กฐ๊ฑด๋ฌธ ๋ฐ˜๋ณต๋ฌธ ํ•จ์ˆ˜ ์ด์ •๋„ ๊ธฐ๋ณธ ๊ฐœ๋…๋งŒ ์ตํžˆ๊ณ  ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ๊ณต๋ถ€ํ•˜๋ฉฐ ์Šต๋“ํ•˜๊ธฐ ํฌ๋กฌ ์ ์œ ์œจ ๊ฐ€์žฅ ๋†’๊ณ  ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์œผ๋กœ ์ ํ•ฉ Visual Studio .. 2020. 12. 19.
๋ฐ˜์‘ํ˜•