📥 내 HTML, CSS 및 PHP 치트 시트,이 세 가지 코딩 언어에 대해 알고 기억해야 할 모든 것이 포함되어 있습니다.
- HTML이란 무엇입니까?
- HTML5 예제 (코드 플레이 그라운드)
- 📥 HTML 치트 시트
- CSS 란 무엇입니까?
- 📥 CSS 치트 시트
- PHP 란 무엇입니까?
- 📥 PHP 치트 시트
- 📥 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, async, ping과 같은 속성도 없습니다.
- 브라우저를 사용하여 사용자의 진정한 GeoLocation을 얻는 것은 매우 어렵습니다.
- 부정확한 구문을 처리할 수 없습니다.
HTML5
- 다음을 사용하여 오디오 및 비디오 제어를 지원합니다. 과 태그.
- SQL 데이터베이스 및 애플리케이션 캐시를 사용하여 오프라인 데이터를 저장합니다.
- 자바 스크립트가 JS 웹 작업자 API를 사용하여 백그라운드에서 작동하도록 허용합니다.
- 벡터 그래픽은 SVG 및 캔버스와 마찬가지로 HTML5의 기본 부분입니다.
- 드래그 앤 드롭 효과를 허용합니다.
- 모양을 그릴 수 있도록합니다.
- Firefox, Mozilla, Chrome 및 Safari와 같은 모든 새로운 브라우저를 지원합니다.
- 모바일 친화적입니다.
- Doctype 선언은 간단하고 쉽습니다.
- 기타 웹 구조, 예를 들어 nav, header, footer에 대한 새로운 요소가 추가되었으며 charset, async, ping에 대한 속성도 추가되었습니다.
- 문자 인코딩을 간단하고 쉽게 만듭니다.
- JS GeoLocation API를 사용하여 사용자 GeoLocation을 추적 할 수 있습니다.
- 부정확 한 구문을 처리 할 수 있습니다.
또한 HTML5에서 수정되거나 제거 된 HTML 요소가 많이 있습니다. 여기에는 다음이 포함됩니다.
- - 바뀌었다
- - 바뀌었다
- - 바뀌었다
- – 제거됨
- – 제거됨
- – 제거됨
- – 새 태그가 없습니다. CSS를 사용합니다.
- – 새 태그가 없습니다. CSS를 사용합니다.
- – 새 태그가 없습니다. CSS를 사용합니다.
- – 새 태그가 없습니다. CSS를 사용합니다.
- – 새 태그가 없습니다. CSS를 사용합니다.
한편 HTML5에는 새로 추가 된 여러 요소도 포함되어 있습니다. 여기에는 다음이 포함됩니다.
- 탐색
- 오디오
- 무화과
- 진행
- 명령
- 시간
- 데이터 목록
- 비디오
- 그림
- 미터
- 데이터
- 섹션에 있어야 합니다.
- 시간
- 산
- 캔버스
- 개요
- rp
- rt
- 세부설명
- wbr
- 머리글
- 보행인
- keygen
- 포함
- 기사
- h그룹
- BDI
- 표
- 출력
- 선로
- 섹션에 있어야 합니다.
- 루비
HTML5 예제 (코드 플레이 그라운드)
의미 구조의 예
In 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 형식 치트 시트 능숙한. 그리고 나는 모든 단계에서 당신을 도울 수 있는 것을 설계했습니다.
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에 대한 치트 시트 언제든지 사용할 수 있습니다.
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 함수로 구성되며 스크립트 언어에 내장되어 있습니다.
궁극적 인 HTML, CSS 및 PHP 치트 시트
노련한 개발자이든 코딩을 처음 시작하는 사람이든 관계없이 항상 다시 참조하거나 기억을 되살릴 수 있는 것이 있다는 것은 좋은 일입니다.
그리고 서로를 저글링하는 개발자에게 선물로 HTML, CSS 및 PHP, 여기 ULTIMATE 치트 시트가 있습니다., 다음 세 가지 코딩 언어와 관련하여 알고 기억해야 할 모든 내용이 포함되어 있습니다.
결합 된 HTML, CSS 및 PHP 치트 시트 다운로드