HTML, CSS 및 PHP : 최고의 치트 시트

Written by

📥 내 HTML, CSS 및 PHP 치트 시트,이 세 가지 코딩 언어에 대해 알고 기억해야 할 모든 것이 포함되어 있습니다.

코딩 기술은 종종 얽혀있는 프로그래밍 언어의 모든 태그, 구문 및 기타 요소를 완전히 마스터하는 데 수년이 걸릴 수 있습니다.

숙련된 개발자라도 특정 작업에 대한 올바른 구문을 잊어버리는 함정에 빠질 수 있습니다. 따라서 더 많은 녹색을 기대하는 것은 비현실적입니다. 웹 개발자 예술에 대한 완벽한 이해를 갖기 위해.

이 이유 HTML, CSS 및 PHP 용 치트 시트 얼마나 오랫동안 연습했는지에 관계없이 매우 유용합니다. 올바른 명령과 구문을 찾는 빠른 가이드 역할을 하므로 실제 웹 개발에 집중할 수 있습니다.

아래에서 코딩 노력에 도움이 되는 빠른 복습이 선행되는 시각적으로 기울어진 치트 시트를 찾을 수 있습니다. 또한 사용자의 편의를 위해 쉽게 북마크, 저장 또는 인쇄할 수 있도록 만들었습니다.

HTML이란 무엇입니까?

HTML은 Hypertext Markup Language를 나타냅니다. – 웹 페이지 및 해당 콘텐츠의 구조를 만드는 데 사용되는 코드입니다.

이 마크 업 언어는 콘텐츠를 특정 방식으로 표시하거나 작동시키는 데 사용되는 일련의 요소로 구성되며 모든 웹 사이트의 프런트 엔드 코드에서 주요 부분입니다.

HTML은 웹 페이지의 구조를 설명하는 언어입니다.… HTML을 사용하여 작성자는 마크 업을 사용하여 페이지의 구조를 설명합니다. 단락, 목록, 표 등과 같은 콘텐츠의 언어 레이블 부분 요소입니다. – W3.org에서

예를 들어 콘텐츠의 다른 부분을 묶거나 래핑 할 수 있습니다. 여기에서 묶는 태그는 다른 페이지에 대한 단어 또는 이미지 하이퍼 링크를 만들 수 있습니다. 또한 이것을 사용하여 단어를 기울임 꼴로 표시하고 글꼴을 더 크게 또는 더 작게 만들 수 있습니다.

에서 언급 한 바와 같이 W3, HTML을 사용하면 다음과 같은 작업을 수행 할 수 있습니다.

  • 온라인 문서 게시 제목, 텍스트, 표, 목록, 사진
  • 다음을 통해 버튼 클릭으로 온라인 정보 검색 하이퍼 텍스트 링크.
  • 설계 양식 원격 서비스와의 거래를 수행하기 위해 정보 검색, 예약, 상품 주문, 다른 기능 중에서.
  • 포함 스프레드 시트, 비디오 클립 및 기타 미디어 문서에 이미있는 애플리케이션.

그래서 만약 당신이 라인을 만들려면 “내 개는 아주 달콤 해요” 그 자체로, 단락 태그로 묶어 단락임을 지정할 수 있습니다 (나중에 자세히 설명). 내 개는 매우 달콤합니다

HTML과 HTML5의 차이점은 무엇입니까?

이름에서 알 수 있듯이 HTML5는 HTML 표준의 다섯 번째 버전입니다.. 비디오 및 오디오의 언어 통합을 지원하므로 타사 플러그인 및 요소의 필요성이 줄어 듭니다.

다음은 HTML과 HTML5의 주요 차이점입니다.

HTML

  • 플래시 플레이어 지원 없이 오디오 및 비디오를 지원하지 않습니다.
  • 쿠키를 사용하여 임시 데이터를 저장합니다.
  • JavaScipt가 브라우저에서 실행되는 것을 허용하지 않습니다.
  • VML, Silver-light 및 Flash와 같은 다양한 기술을 사용하여 벡터 그래픽을 허용합니다.
  • 드래그 앤 드롭 효과를 허용하지 않습니다.
  • 모든 이전 브라우저에서 작동합니다.
  • 모바일 친화적이지 않습니다.
  • Doctype 선언은 길고 복잡합니다.
  • nav 및 header와 같은 요소와 charset과 같은 속성이 없습니다.sync, 핑.
  • 브라우저를 사용하여 사용자의 진정한 GeoLocation을 얻는 것은 매우 어렵습니다.
  • 부정확한 구문을 처리할 수 없습니다.

HTML5

  • 다음을 사용하여 오디오 및 비디오 제어를 지원합니다. 과 태그.
  • SQL 데이터베이스 및 애플리케이션 캐시를 사용하여 오프라인 데이터를 저장합니다.
  • 자바 스크립트가 JS 웹 작업자 API를 사용하여 백그라운드에서 작동하도록 허용합니다.
  • 벡터 그래픽은 SVG 및 캔버스와 마찬가지로 HTML5의 기본 부분입니다.
  • 드래그 앤 드롭 효과를 허용합니다.
  • 모양을 그릴 수 있도록합니다.
  • Firefox, Mozilla, Chrome 및 Safari와 같은 모든 새로운 브라우저를 지원합니다.
  • 모바일 친화적입니다.
  • Doctype 선언은 간단하고 쉽습니다.
  • nav, header, footer 등과 같은 웹 구조를 위한 새로운 요소가 있으며 charset 속성도 있습니다.sync, 핑.
  • 문자 인코딩을 간단하고 쉽게 만듭니다.
  • JS GeoLocation API를 사용하여 사용자 GeoLocation을 추적 할 수 있습니다.
  • 부정확 한 구문을 처리 할 수 ​​있습니다.
 

또한 HTML5에서 수정되거나 제거 된 HTML 요소가 많이 있습니다. 여기에는 다음이 포함됩니다.

  • - 바뀌었다
  • - 바뀌었다
  • - 바뀌었다
  • – 제거됨
  • – 제거됨
  • – 제거됨
  • – 새 태그가 없습니다. CSS를 사용합니다.
  • – 새 태그가 없습니다. CSS를 사용합니다.
  • – 새 태그가 없습니다. CSS를 사용합니다.
  • – 새 태그가 없습니다. CSS를 사용합니다.
  • – 새 태그가 없습니다. CSS를 사용합니다.

한편 HTML5에는 새로 추가 된 여러 요소도 포함되어 있습니다. 여기에는 다음이 포함됩니다.

 

HTML5 예제 (코드 플레이 그라운드)

의미 구조의 예

HTML5에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수있는 몇 가지 의미 요소가 있습니다. 다음은 가장 일반적인 것입니다.

 

머리글

<header>
  <h1>Guide to Search Engines</h1>
</header>

Nav

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 

부분

<section>
  <h2>Internet Browsers</h2>
  <p>Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the browser market.</p>
</section>

<article>
  <h3>Google Chrome</h3>
  <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
 

옆 (사이드 바)

<p>Google Chrome is a cross-platform web browser developed by Google.</p>

<aside>
  <h4>History of Mozilla</h4>
  <p>Mozilla is a free software community founded in 1998.</p>
</aside>

보행인

<footer>
  <p>Copyright Example.com. Read our <a href="#">privacy policy</a>.</p>
</footer>
 

기본 텍스트 서식 예

제목 ...에

<h1>Heading level 1</h1>
 <h2>Heading level 2</h2>
  <h3>Heading level 3</h3>
   <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
     <h6>Heading level 6</h6>

절 ( & )

<p>Paragraph of text with a sentence of words.</p>

<p>Paragraph of text with a word that has <em>emphasis</em>.</p>

<p>Paragraph of text with a word that has <strong>importance</strong>.</p>
 

정렬되지 않음 및 주문 목록

<ul>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ul>

<ol>
  <li>HTML5</li>
  <li>CSS3</li>
  <li>PHP</li>
</ol>

인용구 그리고 인용

<blockquote cite="https://www.huxley.net/bnw/four.html">
  <p>Words can be like X-rays, if you use them properly – they'll go through anything. You read and you're pierced.</p>
</blockquote>
  <cite>– Aldous Huxley, Brave New World</cite>
 

링크

<p>Search for it on <a href="https://www.google.com/" title="Google search engine">Google</a>

단추

<button name="button">I am a Button. Click me!</button>
 

줄 바꿈

<p>The line break tag produces a<br> line break in<br> text (carriage-return)</p>

수평선

<p>This is the first paragraph of text.</p><hr><p>This is second paragraph of text.</p>
 

주소

<address>
Acme Inc<br>
PO Box 555, New York, USA<br>
Call us: <a href="tel:+1-555-555-555">+1-555-555-555</a><br>
Email us: <a href="mailto:[email protected]">[email protected]</a>
</address>

아래 첨자 및 위첨자

<p>The chemical formula of water is H<sub>2</sub>O</p>

<p>This text is <sup>superscripted</sup></p>
 

약어

<p><abbr title="Hypertext Markup Language">HTML</abbr> is easy to learn.</p>

암호

<p>This is normal text. <code>This is code.</code> This is normal text.</p>
 

시각

<p>The movie starts at <time>20:00</time>.</p>

삭제

<p>I am <del>wrong</del> right, you are <del>right</del> wrong.</p>
 

테이블 예

테이블 머리, 몸통 및 발 예

<table>
<thead>
     <tr> ...table header... </tr>
</thead>
<tfoot>
     <tr> ...table footer... </tr>
</tfoot>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
</tbody>
<tbody>
     <tr> ...first row... </tr>
     <tr> ...second row... </tr>
     <tr> ...third row... </tr>
</tbody>
</table>

표 제목, 행 및 데이터 예

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>34</td>
  </tr>
</table>
 

미디어 예

영상

<img src="images/dinosaur.png" 
     alt="The head and torso of a dinosaur skeleton;it has a large head with long sharp teeth"/>

그림

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
 

그림

<figure>
    <img src="/images/frog.png" alt="Tree frog" />
    <figcaption>Tree frog by David Clode on Unsplash</figcaption>
</figure>

비디오

<video controls width="400" height="400" autoplay loop muted poster="poster.png">
  <source src="rabbit.mp4" type="video/mp4">
  <source src="rabbit.webm" type="video/webm">
  <source src="rabbit.ogg" type="video/ogg"> 
  <source src="rabbit.mov" type="video/quicktime">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit.mp4">link to the video</a> instead.</p>
</video>
 

완전한 HTML 치트 시트

노련한 개발자이든 업계에서 발을 담그고자 하는 사람이든 항상 도움이 됩니다. HTML 치트 시트 능숙한. 그리고 저는 모든 단계에서 여러분을 도울 수 있는 것을 설계했습니다.

HTML 치트 시트

 

HTML 치트 시트 다운로드

 

CSS 란 무엇입니까?

CSS (Cascading Style Sheet) 또는 CSS HTML 요소가 화면에 표시되는 방식을 설명합니다. 여러 페이지의 레이아웃을 동시에 제어할 수 있기 때문에 많은 시간과 노력을 절약할 수 있습니다.

CSS는 색상, 레이아웃 및 글꼴을 포함하여 웹 페이지의 표현을 설명하는 언어입니다. 대형 화면, 소형 화면 또는 프린터와 같은 다양한 유형의 장치에 프레젠테이션을 적용 할 수 있습니다. – W3.org에서

HTML과 CSS의 차이점은 무엇입니까?

HTML과 CSS는 웹 페이지와 애플리케이션을 구축하는 데 사용되는 언어이지만 기능이 다릅니다.

HTML은 웹 페이지에 표시 될 구조와 콘텐츠를 지정하는 데 사용하는 것입니다.

반면에 CSS는 웹 디자인 웹 페이지의 HTML 요소 (레이아웃, 시각 효과 및 배경색 포함).

HTML은 구조와 콘텐츠를 만들고 CSS는 디자인이나 스타일을 만듭니다. HTML과 CSS는 함께 웹 페이지 인터페이스를 구성합니다.

CSS 구문이란 무엇입니까?

CSS 구문 선택기와 선언 블록으로 구성됩니다.

선택기는 스타일을 지정할 HTML 요소를 결정하는 반면 선언 블록에는 하나 이상의 선언 또는 CSS 쌍, 속성 이름 및 그 사이에 콜론이있는 값이 포함됩니다.

선언은 세미콜론으로 구분되며 선언 블록은 항상 중괄호로 묶여 있습니다.

예를 들어, 제목 1의 모양을 수정하려는 경우 CSS 구문은 다음과 같습니다. h1 {color : red; 글꼴 크기 : 16pc;}

완전한 CSS 치트 시트

CSS는 사용하기 쉽습니다. 문제는 선택자와 선언을 모두 기억하는 것이 불가능하지는 않더라도 어렵다는 점입니다. 그러나 그것들을 외울 필요는 없습니다.

여기입니다 CSS 및 CSS3에 대한 치트 시트 언제든지 사용할 수 있습니다.

CSS 치트 시트

 

CSS 치트 시트 다운로드

 

PHP 란 무엇입니까?

PHP는 Hypertext Preprocessor의 약자입니다., 동적 웹 사이트, 웹 응용 프로그램 또는 정적 웹 사이트를 개발하는 데 사용되는 인기있는 오픈 소스, HTML 내장 스크립팅 언어입니다.

이후 PHP는 서버 측 언어입니다., 해당 스크립트는 브라우저가 아닌 서버에서 실행되며 해당 출력은 브라우저에서 일반 HTML입니다.

PHP는 널리 사용되는 오픈 소스 범용 스크립팅 언어로 특히 웹 개발에 적합하고 HTML에 포함 할 수 있습니다. – PHP.net에서

이 서버 측 스크립팅 언어는 Windows, Mac OS, Linux 및 Unix를 포함한 다양한 운영 체제에서 실행됩니다. 또한 Apache 및 IIS와 같은 대부분의 서버와 호환됩니다.

ASP 및 JSP와 같은 다른 언어에 비해 PHP는 초보자가 배우기 쉽습니다. PHP는 또한 고급 개발자에게 필요한 많은 기능을 제공합니다.

PHP와 HTML의 차이점은 무엇입니까?

두 언어가 모두 중요하지만 웹 개발, PHP 및 HTML은 여러면에서 다릅니다.

주요 차이점은 두 언어가 사용되는 용도에 있습니다.

HTML은 클라이언트 측에 사용됩니다. (또는 프런트 엔드) 개발 PHP는 서버 측에 사용됩니다. 개발.

HTML은 개발자가 텍스트, 이미지, 표 및 하이퍼 링크 삽입, 텍스트 서식 지정 및 색상 지정과 같은 웹 사이트의 콘텐츠를 구성하는 데 사용하는 언어입니다.

한편, PHP는 데이터베이스에서 데이터를 저장 및 검색하고, 논리적 작업을 수행하고, 이메일을 보내고 회신하고, 파일을 업로드 및 다운로드하고, 데스크톱 애플리케이션을 개발하는 데 사용됩니다.

코드 유형 측면에서 HTML은 정적이지만 PHP는 동적입니다.. HTML 코드는 열릴 때마다 항상 동일하지만 PHP 결과는 사용자의 브라우저에 따라 다릅니다.

새로운 개발자의 경우 두 언어 모두 배우기 쉽지만 PHP보다 HTML의 학습 곡선이 짧습니다.

완전한 PHP 치트 시트

PHP에 더 능숙하거나 이에 대한 지식을 넓히고자 하는 초보 프로그래머라면 다음을 참조하십시오. PHP 치트 시트 빨리 참조 할 수 있습니다.

이 치트 시트는 널리 사용되는 코드의 바로 가기 인 PHP 함수로 구성되며 스크립트 언어에 내장되어 있습니다.

PHP 치트 시트

 

PHP 치트 시트 다운로드

 

궁극적 인 HTML, CSS 및 PHP 치트 시트

노련한 개발자이든 코딩을 처음 시작하는 사람이든 항상 참조하거나 단순히 기억을 새로 고칠 수 있는 무언가를 갖는 것이 좋습니다.

그리고 서로를 저글링하는 개발자에게 선물로 HTML, CSS 및 PHP, 여기 ULTIMATE 치트 시트가 있습니다., 다음 세 가지 코딩 언어와 관련하여 알고 기억해야 할 모든 내용이 포함되어 있습니다.

 

결합 된 HTML, CSS 및 PHP 치트 시트 다운로드

 

뉴스 레터 가입

주간 라운드업 뉴스레터를 구독하고 최신 업계 뉴스 및 동향을 받아보세요.

'구독'을 클릭하면 당사의 이용약관 및 개인정보취급방침.