๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€_Mobile Layout

Solmiiยท2020๋…„ 4์›” 19์ผ
1

Project

๋ชฉ๋ก ๋ณด๊ธฐ
1/14
post-thumbnail
post-custom-banner

โš ๏ธ ์ด ๊ธ€์€ 4์›” 13์ผ์— ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹น......
๊ตํ›ˆ : velog๋Š” ๋งค์ผ๋งค์ผ ์ •๋ฆฌํ•˜์ž......


๐Ÿ“ WeCode ์‚ฌ์ „์Šคํ„ฐ๋”” 1์ฃผ์ฐจ ๊ณผ์ œ

๋Š” HTML,CSS๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ž๊ธฐ์†Œ๊ฐœ ํŽ˜์ด์ง€ ๋งŒ๋“ค๊ธฐ!
po๊ณ„ํš๋งจwer์ธ ๋‚˜๋Š” ์ผ๋‹จ ๊ณ„ํš๋ถ€ํ„ฐ ์งœ๋ณธ๋‹ค.....
plan

๋„ˆ๋Š” ๋‹ค ๊ณ„ํš์ด ์žˆ๊ตฌ๋‚˜...!

photoshopใ…Ž ์•ˆ๋‡ฝ? ์—ญ์‹œ ๋ ˆ์ด์•„์›ƒ ์งค๋• ๋„ˆ๊ฐ€ ์งฑ์ด์•ผใ…Ž ์Šค์ผ€์น˜ ๋นจ๋ฆฌ ๊น”์•„์•ผํ•˜๋Š”๋Ž…^^....


์šฐ์„  ๋‚˜๋Š” ๊ฐ„๋„ ํฌ๊ฒŒ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ฑฐ๊ธฐ ๋•Œ๋ฌธ์—, mobile์ด๋ž‘ web ํ…œํ”Œ๋ฆฟ์„ ๋”ฐ๋กœ ๋งŒ๋“ค์—ˆ๋‹ค.
(๋งŒ๋“ค๊ณ  ๋ณด๋‹ˆ ์‚ฌ์‹ค ํฐ ์ฐจ์ด๋Š” ์—†๋‹ค....)


๐ŸŽจ mobile์€ ์ด๋Ÿฐ ๋Š๋‚Œ์œผ๋กœ ์™„์„ฑ~~

mobile


๐Ÿ™‹๐Ÿปโ€โ™€๏ธ ๋‚˜๋ฆ„๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๊ธฐ๋Šฅ์„ ๊ณ„์† ์ƒ๊ฐํ•˜๋ฉฐ ๋งŒ๋“ค์—ˆ๋‹ค!!


  • ์šฐ์„  ๋ฐ˜์‘ํ˜•์ผ๊ฒƒ!!!!!!
    (์•„์ง ์ง„ํ–‰์ค‘์ž„....web์—์„œ ๋ณด๋ฉด ๊ฐœ๋˜ฅ๊ฐ™์Œ)

header

  • header
    1. ์ƒ๋‹จ navigation์€ hover๊ธฐ๋Šฅ์„ ์ด์šฉ, ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ๋ฐฐ๊ฒฝ์ƒ‰์ด ํ•ซํ•‘ํฌํ•‘ํฌ ํ•ด์ง
    2. ์ƒ๋‹จ navigation์—์„œ ํ˜„์žฌ ๋ฉ”๋‰ด์˜ ์œ„์น˜ ํ‘œ์‹œ
    3. ์ œ๋ชฉ์€ h1 ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ๊ณ , ๊นœ๋นก์ด๋Š” ์ปค์„œ ๋ชจ์–‘ I gif ๋„ฃ๊ธฐ

main

  • main
    1. ์‚ฌ์ง„ ๋„ฃ๊ธฐ - ์ž‘์€ํ™”๋ฉด์—์„œ๋Š” 2์ค„, ํฐ ํ™”๋ฉด์—์„œ๋Š” 1์ค„๋กœ ํ‘œ์‹œ
    2. content๊ฐ€ background์— ์™ ๋“ค์–ด๊ฐ€๋Š” ๋Š๋‚Œ์ด ์•„๋‹Œ, ๋ญ”๊ฐ€ ์–ด๊ธ‹๋‚œ๊ฒƒ์ฒ˜๋Ÿผ ์žฌ๋ฐŒ๊ฒŒ ๋ฐฐ์น˜!!!!
    (๋ฅผ ํ•˜๊ณ ์‹ถ์—ˆ๋Š”๋ฐ ์ด ๊ธฐ๋Šฅ์€ ๊ฒฐ๊ตญ ์‹คํŒจํ–ˆ์Œใ… ใ… ใ… ใ… ใ…  ์ด์œ ๋Š” ๋งˆ์ง€๋ง‰์—....)
    3. ์‚ฌ์ง„ ์œ„์— hover ํ•˜๋ฉด ๊ฒ€์€์ƒ‰ ๋ฐ˜ํˆฌ๋ช… ์ฐฝ์ด ๋œจ๋ฉด์„œ ์—ฌํ–‰์ง€์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์†Œ๊ฐœ๊ธ€ ๋ณด์ด๊ฒŒ ํ•˜๊ธฐ

footer

  • footer
    1. header์—์„œ ๋„ฃ์—ˆ๋˜ gif I ์ปค์„œ ์ด๋ฏธ์ง€ ๋™์ผํ•˜๊ฒŒ ๋„ฃ๊ธฐ
    2. ์•„๋ž˜์—๋Š” social ๋ฉ”๋‰ด - sns๋ฅผ ์•ˆํ•ด์„œ ๊ทธ๋ƒฅ git hub, velog, gmail ์ •๋„๋งŒ ๋„ฃ๊ธฐ๋กœ!
    (gmail์€ ๋ˆ„๋ฅด๋ฉด ๋ฐ”๋กœ ๋ฉ”์ผ ์ „์†ก์ฐฝ์ด ๋œจ๋„๋ก)

โ˜ ๏ธ ๊ทธ๋ž˜์„œ ์™„์„ฑ์€ ํ–ˆ๋‚˜!!

๋Œ€๋ถ€๋ถ„์€ ์™„์„ฑํ–ˆ๋”ฐ!!!!! (mobile ๊ธฐ์ค€....)
๐Ÿ˜ป https://solmii.github.io/wecode/
๊ทธ ๊ณผ์ •์—์„œ ๊ณ„ํš์— ์—†์—ˆ๋Š”๋ฐ ์ถ”๊ฐ€ํ•œ ๊ธฐ๋Šฅ๊ณผ, ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ ๊ธฐ๋Šฅ์ด ์žˆ๋”ฐ.....ใ… 0ใ… 

๐Ÿ‘ ์šฐ์„  video tag๋ฅผ ์ด์šฉํ•ด์„œ mp4 ํŒŒ์ผ์„ ํ•˜๋‚˜ ๋„ฃ์—ˆ๊ณ ,(pc๋กœ ๋ณด๋ฉด ๊ดœ์ฐฎ์€๋ฐ moile ์—์„œ ๋กœ๋”ฉ์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฐ๋‹ค๐Ÿ˜ต)

๐Ÿ‘Ž background๋Š” ๊ฒฐ๊ตญ ๊ฐ content๋ฅผ ๊ฐ์‹ธ๋Š” div์— background-color๋ฅผ ๋„ฃ์–ด์„œ ์˜๋„์™€๋Š” ๋‹ค๋ฅธ ๋ชจ์–‘์ƒˆ๊ฐ€ ๋˜์–ด๋ฒ„๋ ธ๋‹น.......
์›๋ž˜๋Š” background-img ๋กœ ๋„ฃ์—ˆ๋Š”๋ฐ, mobile output์€ ์ฒ˜์Œ ๊ณ„ํšํ•œ ๋ ˆ์ด์•„์›ƒ๋Œ€๋กœ ๋ณด์˜€์œผ๋‚˜ web์—์„œ ์—‰๋ง์ง„์ฐฝ์ด ๋˜๋ฒ„๋ ค์„œ.... ๊ตฌ๊ธ€๋ง๋„ ํ•˜๊ณ  ๋„ค์ด๋ฒ„ ์นดํŽ˜์—๋„ ๋ฌผ์–ด๋ณด๋‹ค๊ฐ€ ๊ฒฐ๊ตญ ์Šน์งˆ๋‚˜์„œ ๋นผ๋ฒ„๋ ธ๋‹ค๐Ÿ˜ญ
์ฝ”๋ฆฐ์ด ์ฃผ์ œ์— ๋„ˆ๋ฌด ๊ณผํ•œ ๋ ˆ์ด์•„์›ƒ์ด์—ˆ์„๊นŒ๐Ÿ˜‚
์‚ฌ์ „์Šคํ„ฐ๋””๊ฐ€ ๋๋‚œ ํ›„์—๋ผ๋„, ์ฒ˜์Œ ๋ ˆ์ด์•„์›ƒ๋Œ€๋กœ ๊ผญ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹คใ… .ใ… 
(ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์•„์‹œ๋Š” ๋ถ„์€ ๋Œ“๊ธ€ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค!!!!)


๐Ÿค ๊ทธ ์™ธ ๋ช‡๋ช‡ ๊ธฐ๋Šฅ์€ ์•„์ง ๊ตฌํ˜„ํ•˜๋Š” ์ค‘์ด๋‹ค!
์•„์ง ์™ธ์ฃผ ์ผ์ด ๋‚จ์•„์žˆ์–ด์„œ ์ผํ•˜๋Š๋ผ ์†์„ ๊ฑฐ์˜ ๋ชป๋Œ€๋Š”์ค‘๐Ÿ˜ต
์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ž‘ web layout์€ ๋‹ค์Œ ์ด์‹œ๊ฐ„์—....

profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€