All about {Web}

01.내 로컬에 PHP 홈페이지를 만들자.

CMS/server2018. 4. 30. 17:09

A. PHP 홈페이지의 시작
① XAMPP 프로그램을 실행합니다

② 코드 에디터 "Brackets"를 실행합니다. (아니면 다른 코드에디터를 실행합니다.)

메뉴중 "Getting Started" > "폴더열기"를 클릭해 경로 폴더를 선택합니다.

경로눈 XAMPP가 설치된 C:\xampp\htdocs 입니다. (xampp 설치시 디폴트 설치했을 경우)

a) 파일 > 새 파일 > "다른 이름으로 저장"을 클릭해 index.html로 저장합니다.
b) ! + Tab 키를 누르면 위의 그림과 같이 기본 html 페이지가 나타납니다.
c) 아래와 같이 페이지를 수정해 저장합니다.


일반적으로 웹호스팅의 index 파일 우선순위는 index.html, index.php 순이지만 XAMPP는 index.php가 우선 순위 입니다. XAMPP는 index.html, index.php 두 개의 파일이 있다면 index.php 파일을 우선 실행합니다.

브라우저 주소창에 'localhost' 또는 127.0.0.1로 접속하면 위와 같이 작성한 페이지가 나타납니다.
index.html 파일을 아래와 같이 수정후 index.php로 저장합니다.

이제 브라우저를 실행 후 주소창에 localhost  또는 127.0.0.1로 접속하면 아래와 같이 PHP 페이지가 나타납니다.


저작자표시

'CMS > server' 카테고리의 다른 글

Brackets - 플러그인 Synapse : FPT 사용법  (0) 2018.05.04
XAMPP [3] - 로컬서버 설치 및 PHP 테스트  (0) 2018.04.24
Brackets [3] - 플러그인 : Emmet 사용법  (0) 2018.04.24
Brackets [2] - 플러그인 : Emmet  (0) 2018.04.24
Brackets [1] - 코드 에디터(Code Editor)  (0) 2018.04.24

HTML5 - New Structural Tags : <nav>

Web Design/HTML & HTML 52018. 4. 28. 14:10

HTML5 - New Structural Tags ( 구조 태그 ) :  <nav></nav>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

07. <nav></nav>
nav 요소는 다른 페이지 또는 동일 페이지의 다른 부분으로 이어주는 섹션, 즉 내비게이션 링크로 구성된 섹션을 나타냅니다.

source )
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
<p><strong>Note:</strong> The nav tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )



저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

[HTML] Tag ; address, area, article  (0) 2018.05.07
[HTML] Tag ; a, abbr, acronym  (0) 2018.05.07
HTML5 - New Structural Tags : <footer>  (0) 2018.04.28
HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28

HTML5 - New Structural Tags : <footer>

Web Design/HTML & HTML 52018. 4. 28. 14:07

HTML5 - New Structural Tags ( 구조 태그 ) :  <footer></footer>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

06. <footer></footer>
footer 요소는 보통 작성자, 연관된 문서에 대한 링크, 저작권 정보, 기타 흡사한 정보를 담습니다.

source )
<!DOCTYPE html>
<html>
<body>
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<p><strong>Note:</strong> The footer tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )


저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

[HTML] Tag ; a, abbr, acronym  (0) 2018.05.07
HTML5 - New Structural Tags : <nav>  (1) 2018.04.28
HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28

HTML5 - New Structural Tags : <header>

Web Design/HTML & HTML 52018. 4. 28. 14:03

HTML5 - New Structural Tags ( 구조 태그 ) :  <header></header>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

04. <header></header>
- header 요소는 소개 또는 내비게이션 그룹을 나타냅니다.
- header 요소는 제목 요소를 포함하지 않아도 됩니다.
- 섹션의 차례나 검색 폼, 관련 로고 등을 감싸는 용도로도 사용할 수 있습니다.
- header 요소는 섹션 컨텐츠는 아닙니다.

source)
<!DOCTYPE html>
<html>
<body>
<article>
  <header>
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>

result)

Most important heading here

Less important heading here

Some additional information here.
Lorem Ipsum dolor set amet....



저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <nav>  (1) 2018.04.28
HTML5 - New Structural Tags : <footer>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28

HTML5 - New Structural Tags : <hgroup>

Web Design/HTML & HTML 52018. 4. 28. 12:59

HTML5 - New Structural Tags ( 구조 태그 ) :  <hgroup></hgroup>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

05. <hgroup></hgroup>
heading group : hgroup 요소는 섹션의 제목을 나타냅니다. 이 요소는 섹션의 제목이 몇 개의 레벨을 가질 때(단계를 가질 때, 예를 들어 부제목이나 태그 영역tagline 등)h1~h6 요소들을 그룹짓기 위해 사용됩니다.

source)
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>hgroup</title>
  </head>
  <body>
    <hgroup>
      <h1>대제목</h1>
      <h3>(부제목)</h3>
    </hgroup>
    <p>내용</p>
    <section>
    <h2>중제목1</h2>
      <article>
        <h4>소제목1</h4>
        <p>내용</p>
      </article>
      <article>
        <h4>소제목2<h4>
        <p>내용</p>
      <article>
    </section>
    <section>
      <hgroup>
        <h2>중제목2</h2>
        <h3>(부제목)</h3>
      </hgroup>
      <article>
        <h4>소제목1<h4>
        <p>내용</p>
      </article>
      <article>
        <h4>소제목2</h4>
        <p>내용</p>
      </article>
    </section>
  </body>
</html>


저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <footer>  (0) 2018.04.28
HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26

HTML5 - New Structural Tags : <aside>

Web Design/HTML & HTML 52018. 4. 28. 11:56

HTML5 - New Structural Tags ( 구조 태그 ) :  <aside></aside>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

03. <aside></aside>
aside 요소는 주위 요소의 내용과 접점을 이루는 섹션으로, 보통 사이드바 형태로 표현됩니다.
인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구에 사용하는 것은 적합하지 않습니다.
source )
<!DOCTYPE html>

<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<aside>
   <h4>Code is Poetry</h4>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</aside>
<p><strong>Note:</strong> The aside tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Note: The aside tag is not supported in Internet Explorer 8 and earlier versions.



저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <header>  (0) 2018.04.28
HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26

HTML5 - New Structural Tags : <article>

Web Design/HTML & HTML 52018. 4. 28. 01:57

HTML5 - New Structural Tags ( 구조 태그 ) :  <article></article>
01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

02. <article></article>
article의 사전상 의미가 신문이나 잡지에서 기사를 뜻하는 것처럼 article태그 역시 웹상의 실제 내용을 말한다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹콘텐츠 항목이 모두 여기에 해당한다.
<section>과 <article>태그를 사용하는데 있어 자주 혼동하곤 하는데, 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 article태그를 쓰면 된다.
article태그에 비해 section태그는 콘텐츠 기준이라기 보다 헤더와 섹션, 푸터와 구분하기 위한 기능상의 구분이다. 즉, section태그를 이용해 콘텐츠 영역을 구분해 놓고, article태그를 이용해 내용을 채워나간다고 생각하면 된다.

source )
<!DOCTYPE html>
<html>
<body>
<article>
  <h1>Code is Poetry.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<p><strong>Note:</strong> The article tag is not supported in Internet Explorer 8 and earlier versions.</p>
</body>
</html>

result )

Code is Poetry.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Note: The article tag is not supported in Internet Explorer 8 and earlier versions.



저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <hgroup>  (0) 2018.04.28
HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25

HTML5 - New Structural Tags : <section>

Web Design/HTML & HTML 52018. 4. 26. 10:30

HTML5 - New Structural Tags ( 구조 태그 ) : <section></section>



01. <section></section>
02. <article></article>
03. <aside></aside>
04. <header></header>
05. <hgroup></hgroup>
06. <footer></footer>
07. <nav></nav>

01. <section></section>
HTML Section 요소 (<section>) 는 문서의 일반적인 구획을 나타냅니다. 즉, (전형적으로 제목을 가지고 있는) 컨텐츠의 주제 그룹을 말합니다. 각 <section>은 식별되어야하며, 일반적으로 (<h1>-<h6> 요소들을 자식으로 가집니다.

- 제목으로 시작하는 컨텐트를 의미적으로 그룹핑하기 위해 사용됩니다.
- section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된  대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다.
- 요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다.
- section요소는 일반적인 컨테이너 요소는 아닙니다. 요소가 단순히 스타일링을 위한 목적이나 스크립팅의 편의를 위해서 필요할때 section요소보다는 div요소를 사용할것을 권장합니다.

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>WOOIN21</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.</p>
</section>

<section>
  <h1>CODE IS POETRY.</h1>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<p><strong>Note:</strong> The section tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

WOOIN21

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CODE IS POETRY.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Note: The section tag is not supported in Internet Explorer 8 and earlier versions.

 


저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <aside>  (0) 2018.04.28
HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML - META tag  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13

HTML - META tag

Web Design/HTML & HTML 52018. 4. 26. 04:21

HTML - All about META tag



META tag (메타 태그)란 키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보 즉, 키워드와 약간의 정리된 내용(콘텐츠)을 표현하는 HTML Tag이다.
META태그는 <head>와 </​head> 사이에 들어가며 <meta>태그는 메타 데이터로 HTML문서가 가지고 있는 유용한 정보를 담아 주는 곳이다. 활용 목적에 따라서 여러가지 형식으로 사용할수 있다.

※ META Tag의 종류 :

01. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     /* 현재 페이지 한글입력, 한글 인코딩 */

02. <meta content=kr name=content-language>
     /* 언어 설정 */

03. <meta content="IE=Edge" http-equiv="X-UA-Compatible">
     /* 인터넷 익스플로러 최신버전으로 랜더링한 후에 열으라는 메타주소 */

04. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     /* 인터넷 익스플로러 최신버전으로 랜더링한 후에 크롬이 깔려있다면 크롬으로 랜더링하라는 메타주소 */

05. <meta name="keywords" content="html5, jQuery, MariaDB">
     /* Keyword Search Engine에 검색되기 위한 키워드 설정 */

06. <meta content="META란 무엇인가?" name="description">
     /*해당 페이지의 설명, 제목과 더불어 서술되는 내용 요약. space포함 150이내(text) */

07. <meta content="May, 25, 2018" name=creation_date>
     /* 만든 날짜 */

08. <meta name="build"  content="2018.5.25">
     /* 갱신일자 */

09. <meta content="25 May 18" name=Author-Date>
     /* 제작일자 */

10. <meta http-equiv="Cache-Control"  content="No-Cache">
    /* No-Cache로 설정해놓으면 갱신이 빠름. 좋은점은 인덱스 페이지 리딩이 무척 빨라짐. */

11. <meta http-equiv="Pragma" content="No-Cache">
    /* 캐쉬가 되지 않게 하는 태그, 매번 새로고침 효과 */

12. <meta http-equiv="Expire" content="-1">
    /* 캐쉬 완료(파기)시간 정의  */

13. <meta content="1 Days" name="revisit-after">
    /* 검색엔진 재 방문 시기 */

14. <meta content="ALL" name="ROBOTS">
    /* 보안 및 공개 설정시 설정 */

15. <meta name="writer" content="anonymous">
    /* 만든 이  */

16. <meta name="copyright" content="anonymous">
    /* 회사 이름 */

17. <meta name="Distribution" content="anonymous" >
    /*  배포자  */

18. <meta http-equiv="imagetoolbar" content="no">
    /*  그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음  */

19. <meta http-equiv="refresh" content="2; URL=http://daum.net">
    /* content="대기시간(초); URL=이동할 페이지 주소 */

저작자표시

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML vs HTML5  (0) 2018.04.25
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13
HTML5 브라우저 호환 테스트  (0) 2018.04.10

HTML vs HTML5

Web Design/HTML & HTML 52018. 4. 25. 22:47

HTML  vs  HTML5 [HyperText Markup Language 5]
HTML 5 is an Evolution, Not a Revolution. ( HTML 5는 혁명이 아닌 진화이다. )

※ HTML의 진화 :
1995 :  HTML 2.0
1997 :  HTML 3.2
1998 :  Web Standard Project
2000 :  XHTML 1.0
2000~2004 :  The Growth of the Web
2004 :  HTML5 - The Rise of the HTML 5

※ HTML5가 아닌 것들 :
CSS3 Transitions
Web Sockets
Geolocation
SVG
CSS3 @font-face

 

※ HTML 5가 HTML과 다른 점 :
01.웹문서의 첫 머리에 선언하는 문서타입( DOCTYPE )의 선언이 간편화
HTML 4 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 5 :
<!doctype html> /* 대소문자 관계 없음 */

02. 언어셋 인코딩 (Character Encoding )
 HTML4 :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 :
<meta charset="utf-8">

03. HTML5에 추가된 새로운 요소들 (HTML 5 New Elements ; 26 elements )

 article

 aside

 audio

 canvas

command 

details

datalist

embed

figcaption

 figure

footer

header

hgroup

keygen

mark

meter

nav

 output

progress

rp

ruby

section

source

summary

time

video

 

 

 

 

 

저작자표시 비영리 변경금지

'Web Design > HTML & HTML 5' 카테고리의 다른 글

HTML5 - New Structural Tags : <article>  (0) 2018.04.28
HTML5 - New Structural Tags : <section>  (0) 2018.04.26
HTML - META tag  (0) 2018.04.26
[HTML] 메타태그 - viewport (뷰포트)  (0) 2018.04.13
HTML5 브라우저 호환 테스트  (0) 2018.04.10

티스토리툴바