๋ชฉ๋ก์ „์ฒด ๊ธ€ (433)

whatisthis?

<PROJECT> Importance Of Planning-2(2) css ๊ฐœ์š” ์ž‘์„ฑ + ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์ „์ฒด์ ์ธ html ๋ฌธ์„œ์˜ ์ž‘์„ฑ์€ ๋์ด ๋‚ฌ๋‹ค. ์•ž์œผ๋กœ ์ˆ˜๋งŽ์€ ์ˆ˜์ •์„ ๊ฑฐ์ณ ์›ํ•˜๋Š” ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•ด์•ผํ•œ๋‹ค. html + css ์ถ”๊ฐ€์‚ฌํ•ญ ๊ฐœ์š” 1. nav ๋ถ€๋ถ„์„ ์šฐ์ธก์œผ๋กœ ๋ฐฐ์น˜ํ•˜๊ธฐ (์ง€๋‚œ๋ฒˆ ์˜ˆ์ œ์—์„œ๋Š” grid๋ฅผ ์ด์šฉํ•˜์˜€๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ขŒ์ธก ์ •๋ ฌ์ด์˜€๊ณ , ์ด๋ฒˆ์—” ์šฐ์ธก์œผ๋กœ ํ•ด๋ณด์ž. ์˜ˆ์ „์—๋Š” tableํƒœ๊ทธ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๋งŽ์ด ํ–ˆ๋‹ค๊ณค ํ•˜๋Š”๋ฐ ์ง€๊ธˆ์€ float ๋‚˜ grid, flex๋ฅผ ์ฃผ๋กœ ์ด์šฉํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋‚œ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ๋‘๊ฐ€์ง€ ๋ฐฉ๋ฒ• - flex์™€ grid ๋ฅผ ์ด์šฉํ•ด๋ณด๊ฒ ๋‹ค.) 2. ์ฒดํฌ๋ฐ•์Šค ์ถ”๊ฐ€ํ•˜๊ธฐ ์šฐ์„  ํƒœ๊ทธ์˜ type์†์„ฑ์ค‘ checkbox๋ฅผ ์ด์šฉํ•˜๋ฉด ๋œ๋‹ค. ์ด์ฐธ์— ํƒœ๊ทธ์— ๋Œ€ํ•ด ์ž์„ธํ•˜๊ฒŒ ์•Œ์•„๋ณด์ž. ๋˜ํ•œ ๊ฐ ๊ฐ’์„ ์ฒดํฌํ•˜๊ณ  submit ๋ฒ„ํŠผ(์˜ˆ๋ฅผ ๋“  ๊ฒƒ์ž„.)์„ ๋ˆŒ๋ €์„๋•Œ ๊ฒฐ๊ณผ๊ฐ€ ์ €์žฅ๋˜๋„๋ก +) ์ด๋–„ ๋ฒ„ํŠผ์„ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ๋„ ..

PROJECT/WEB 2021. 8. 29. 14:42
Phython. ํŒŒ์ด์ฌ ์ฝ”๋”ฉ ๊ธฐ์ดˆํŽธ-03

๋ฌธ์ž์—ด / ์Šฌ๋ผ์ด์‹ฑ / ๋ฌธ์ž์—ด ์ฒ˜๋ฆฌํ•จ์ˆ˜ / ํฌ๋งท(format) ๋‹น์‹ ์€ ์ฝ”๋”ฉ ์Šคํ„ฐ๋”” ๋ชจ์ž„์„ ์ƒˆ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค. ์›” 4ํšŒ ์Šคํ„ฐ๋””๋ฅผ ํ•˜๋Š”๋ฐ, 3๋ฒˆ์€ ์˜จ๋ผ์ธ์œผ๋กœ ํ•˜๊ณ  1๋ฒˆ์€ ์˜คํ”„๋ผ์ธ์œผ๋กœ ํ•œ๋‹ค. ์•„๋ž˜ ์กฐ๊ฑด์— ๋งž๋Š” ์˜คํ”„๋ผ์ธ ๋ชจ์ž„ ๋‚ ์งœ๋ฅผ ์ •ํ•ด์ฃผ๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•˜์‹œ์˜ค. ์กฐ๊ฑด1 : ๋žœ๋ค ๋‚ ์งœ์—ฌ์•ผํ•จ. ์กฐ๊ฑด2 : ํ•œ๋‹ฌ์€ 28์ผ๋กœ ์ •ํ•จ. ์กฐ๊ฑด3 : ๋งค์›” 1-3์ผ์€ ์Šคํ„ฐ๋”” ์ค€๋น„๋ฅผ ํ•ด์•ผํ•˜๋ฏ€๋กœ ์ œ์™ธํ•œ๋‹ค๊ณ  ์นจ. from random import * date = (randint(1, 25) + 3) date2 = (int(random() * 25) + 4) # 4 ~ 28์ผ๊นŒ์ง€ ์ถœ๋ ฅ date3 = (randrange(1, 26) + 3) # 4 ~ 28์ผ print("์˜คํ”„๋ผ์ธ ์Šคํ„ฐ๋”” ๋ชจ์ž„ ๋‚ ์งœ๋Š” ๋งค์›” " + str(date) + "์ผ๋กœ..

WEB STUDY/PHYTHON | BACK-END 2021. 8. 28. 21:59
CSS ๊ทธ๋ฆฌ๋“œ( grid ) ์‹ค์Šต ์˜ˆ์ œ

NAVIGATION ARTICLE CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ(Grid Layout)์€ ํŽ˜์ด์ง€๋ฅผ ์—ฌ๋Ÿฌ ์ฃผ์š” ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆ„๊ฑฐ๋‚˜, ํฌ๊ธฐ์™€ ์œ„์น˜ ๋ฐ ๋ฌธ์„œ ๊ณ„์ธต ๊ตฌ์กฐ์˜ ๊ด€์ ์—์„œ HTML ๊ธฐ๋ณธ ์š”์†Œ๋กœ ์ž‘์„ฑ๋œ CONTROL ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐ ์•„์ฃผ ํƒ์›”ํ•˜๋‹ค. ํ…Œ์ด๋ธ”๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์€ ์„ธ๋กœ ์—ด๊ณผ ๊ฐ€๋กœ ํ–‰์„ ๊ธฐ์ค€์œผ๋กœ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ, ํ…Œ์ด๋ธ”๊ณผ ๋‹ฌ๋ฆฌ CSS ๊ทธ๋ฆฌ๋“œ๋Š” ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ์„ ํ›จ์”ฌ ๋” ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ทธ๋ฆฌ๋“œ ์ปจํ…Œ์ด๋„ˆ ์† ์ž์‹ ์š”์†Œ๋ฅผ, ๋งˆ์น˜ CSS๋กœ ์ผ์ผ์ด ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ค€ ๊ฒƒ์ฒ˜๋Ÿผ, ์‹ค์ œ๋กœ ๊ฒน์น˜๊ฒŒ ์ธต์„ ์ง€๋ฉด์„œ ์ž๋ฆฌ๋ฅผ ์žก๋„๋ก ๊ฐ ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค. GRID ์—์„œ๋Š” ํ…Œ์ด๋ธ”์ด๋ผ ์ƒ๊ฐํ–ˆ์„๋•Œ, ๊ฐ€๋กœ ๊ฐ’์ด column(์—ด), ์„ธ๋กœ๊ฐ’์ด row(ํ–‰) ์ด ๋œ๋‹ค. ์ฆ‰..

WEB STUDY/HTML,CSS 2021. 8. 27. 22:28
<PROJECT> Importance Of Planning-1.๊ฐœ์š”

์ฒซ๋ฒˆ์งธ ํ”„๋กœ์ ํŠธ. ์›”๊ฐ„ ์ผ์ • (๋‹ฌ๋ ฅํ˜•) ์›น์‚ฌ์ดํŠธ ์ธ์› : 1๋ช… (self) ํ•„์š” skill : HTML, CSS (+Valina JS) ๋‚˜๋Š” ๋„ค์ด๋ฒ„๋ธ”๋กœ๊ทธ์— ์›น ๊ณต๋ถ€ ์ผ์ •์„ ์—…๋กœ๋“œํ•˜๊ณค ํ•˜๋Š”๋ฐ, ์ด๋ฅผ ๋Œ€์ฒดํ•  ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋‹ค. ๋‹ฌ๋ ฅํ˜•ํƒœ๋กœ monthly plan์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฐ„๊ฒฐํ•œ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋„๋ก ํ•  ๊ฒƒ์ด๋‹ค. ๋‹จ, ์—ฌํƒœ ๋ฐฐ์šฐ์ง€ ์•Š์•˜๋˜ html ํƒœ๊ทธ์™€ css ์†์„ฑ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๋ฉด์„œ ํ•™์Šต์„ ๋ชฉํ‘œ๋กœ ํ•œ๋‹ค. 1. ๋ ˆ์ด์•„์›ƒ 2. ์š”๊ตฌ์‚ฌํ•ญ, ํ•„์š” ๊ธฐ๋Šฅ 1. ๋ฐ˜์‘ํ˜• ์›น์œผ๋กœ ๋งŒ๋“ค ๊ฒƒ. (width๊ฐ€ 600์ดํ•˜๊ฐ€ ๋˜๋ฉด ๋ ˆ์ด์•„์›ƒ์ด ๋‹ฌ๋ผ์ง€๋„๋ก.) 2. ์˜ค๋ฅธ์ชฝ nav ๋ถ€๋ถ„์„ ์ถ”ํ›„์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋„๋ก. (์•„๋งˆ php๊ฐ€ ํ•„์š”ํ• ์ˆ˜๋„) 3. html ํƒœ๊ทธ๋กœ ๋‹ฌ๋ ฅ ์ œ์ž‘. 4. ๋‹ฌ๋ ฅ ๋‚ ์งœ๋งˆ๋‹ค ๋นˆ์นธ์ด ์žˆ์–ด ๋ฉ”๋ชจํ•  ์ˆ˜ ์žˆ๋„๋ก. ..

PROJECT/WEB 2021. 8. 24. 11:24