๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’š UIUX ์›นํผ๋ธ”๋ฆฌ์…” ๊ณผ์ •(6๊ฐœ์›”)

2021-07-13 (92์ผ์ฐจ)php ๊ฐœ์š”, ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ ์ƒ์„ฑ๋ฐฉ๋ฒ•, ์ €์žฅ์†Œ ๊นƒํ—ˆ๋ธŒํŽ˜์ด์ง€๋กœ ์„ค์ •๋ฐฉ๋ฒ•, site-wrap, PHP ์‚ฌ์šฉ์ด์œ 

by widely design 2021. 7. 14.

  php 13๊ฐ•~20๊ฐ•  

https://github.com/manyrice/php_ssg_2021

(SSG์˜ ์˜๋ฏธ : Static Site Generator)

 

- ๋ธ”๋กœ๊ทธ ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•

  ๋ธ”๋กœ๊ทธ ํด๋” ์ƒ์„ฑ

  ํด๋” ์•ˆ์—์„œ command์ฐฝ ์—ด๊ธฐ

  git init

  git config.name ""

  git config.email ""

  git remote add origin ์ฃผ์†Œ

  code .

  'docs'๋ผ๋Š” ํด๋” ์ƒ์„ฑ (github์—์„œ๋Š”  docsํด๋” ์•ˆ์— ๋„ฃ๋Š” ๊ฒƒ์ด ๊ด€๋ก€์ด๊ธฐ ๋•Œ๋ฌธ)

  ๊ทธ ์•ˆ์—์„œ๋งŒ ์ž‘์—… (index.html, common.css, common.js ๋“ฑ...)

  

  ์ž‘์—…์™„๋ฃŒ ํ›„

  git add .

  git commit -m "๋ฉ”์‹œ์ง€๋‚ด์šฉ"

  git push origin master

 


- ์ €์žฅ์†Œ๋ฅผ ๊นƒํ—ˆ๋ธŒํŽ˜์ด์ง€๋กœ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

  ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ  > settings์˜ ๊ฐ€์žฅ ํ•˜๋‹จ > Github Pages "Check it out here!"์„ ํด๋ฆญ

  branch : master > folder : /docs > save๋ฒ„ํŠผ ํด๋ฆญ

  >>> ์œ„์— ๋ธ”๋กœ๊ทธ ๋งํฌ ์ƒ์„ฑ๋จ

 

โ€ป ์‚ฌ์ดํŠธ์— ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š” ์˜ค๋ฅ˜ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

1. ctrl + shift + R

2. ์ฃผ์†Œ ๋’ค์— ' /?r=์ˆซ์ž ' ์“ฐ๊ธฐ

 

โ€ป ์•„๋ฌด๋ฆฌ ํ•ด๋„ ์•ˆ ๋  ๋•Œ

  window > ์ž๊ฒฉ ์ฆ๋ช… ๊ด€๋ฆฌ์ž > windows ์ž๊ฒฉ ์ฆ๋ช… ๊ด€๋ฆฌ

  > ์ผ๋ฐ˜ ์ž๊ฒฉ ์ฆ๋ช… ๋‚ด๋ถ€์— github๊ด€๋ จ ์ฃผ์†Œ ์‚ญ์ œํ•˜๊ธฐ

  ( ์•ˆ ๋˜๋Š” ์ด์œ  : ๊ธฐ์กด์— ๋กœ๊ทธ์ธํ•œ ์‚ฌ๋žŒ์ด ์žˆ์–ด์„œ )


< ์ƒˆ๋กœ์šด ๊ด€๋ก€ >

site-wrap

  : body ํƒœ๊ทธ ์•ˆ์— ํ•˜๋‚˜ ๋‘๊ธฐ

  site-wrap { display : flex;  flex-direction : column;  min-height : 100vh; }

  site-wrap > * { flex-shrink : 0; }

  site-wrap > main { flex-grow : 1; }


< PHP >

- PHP ์‚ฌ์šฉ์ด์œ 

  HTML ์‚ฌ์ดํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ์ธ ์ƒํ™ฉ์—์„œ, ๊ณตํ†ต์ ์ธ ์š”์†Œ(header, footer ๋“ฑ)์™€ ๊ฐ™์€ ๋ณ€๊ฒฝ ์š”๊ตฌ๋ฅผ ๋ฐ›์•˜์„ ๋•Œ!

  ์šฐ๋ฆฌ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ html์„ ๋ชจ๋‘ ์ˆ˜์ •ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

  ํ•˜์ง€๋งŒ PHP๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

 

- header๊ณผ footer ๋ถ„๋ฆฌํ•˜๊ธฐ

  html ์‚ฌ์ดํŠธ ๋ชจ๋‘ ํ™•์žฅ๋ช… php๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ ( ex. index.php )

  header.php ์ƒ์„ฑ

  footer.php ์ƒ์„ฑ

  index.php์—์„œ ํ•ด๋‹น ๋ถ€๋ถ„ ์ž˜๋ผ๋‚ด์„œ ๋ถ™์—ฌ๋„ฃ๊ธฐ

  <php ๋ถˆ๋Ÿฌ์˜ค๊ธฐ>

  index.php ์ƒ๋‹จ → <?php require_once "header.php"; ?>

  index.php ํ•˜๋‹จ → <?php require_once "footer.php"; ?>

 

 

โ€ป ์ผ๋ฐ˜์ ์ธ ์›น์„œ๋ฒ„๋กœ php๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์—†๋‹ค. (open with live server ์‚ฌ์šฉ ๋ถˆ๊ฐ€๋Šฅ)

  - PHP ์›น์„œ๋ฒ„๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•

  : php -S localhost:87021 -r ./docs

๋Œ“๊ธ€