2021. 2. 12. 22:16ㆍProgramming/WEB
HTML
html의 구조
<tag>contents</tag>HyperText Markup Language : 웹 페이지를 위한 마크업 언어
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="jlearner">
<meta name="description" content="Test page.">
<!-- fabicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>TITLE</title>
</head>
<body>
<p>This is new page</p>
<img src="images/image.png">
</body>
</html>- <!DOCTYPE html> 은 HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 함. 대소문자 구분 X
- <head> 브라우저에 표시되지 않지만 PAGE에 대한 메타데이터 를 포함한다.
- <meta>
- charset="utf-8" : encoding을 utf-8로 설정
- 키워드를 포함. 페이지 관련 키워드를 포함하면 검색에 노출될 확률 높일 수 있음 ( SEO : Searching Engine Optimization 근데 이걸 악용하는 사람들이 있어서 많은 meta들을 검색엔진들이 무시한다고 함)
- <link>
커스텀 reference를 데이터에 추가할 수 있다.
<link rel="stylesheet" href="assets/style.css">
<script src="myjs.js"></script>- css/ js 적용
link는 항상 문서의 head 부분에 위치한다. 문서의 stylesheet 임을 표시, 경로를 포함
scrpit는 head 에 들어갈 필요가 없다. </body> 태그 바로 앞, 문서 본문의 맨 끝에 놓는 것이 좋다.
- HTML에 특수문자 포함하기.
HTML 실습을 해보다가 특수문자 사용에 애를 먹었다. <script> 이런 애들을 텍스트로 쓰고싶은데 계속 tag로 인식되서 애를 먹었다. < > " ' & 이런 문자들을 텍스트 그대로 쓰려면 특수하게 기술해 주어야 한다.
| Literal character | Character reference equivalent |
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
* Semantics : 브라우저가 텍스트롤 올바르게 표시 할 수 있도록 텍스트 구조와 의미를 제공
- 제목은 heading (<h1> ...<h6>) 요소 안에 둘러싸여 있어야 한다.
- 단락은 <p> 요소 안에 둘러싸여 있어야 한다.
- 가급적이면 페이지 당 하나의 <h1>만 사용해야 한다.
- 계층적으로 올바른 순서로 사용한다.
<ol>
<li>Remove the skin from the garlic, and chop coarsely.</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>
<li>Add all the ingredients into a food processor.</li>
<li>Process all the ingredients into a paste.
<ul>
<li>If you want a coarse "chunky" hummus, process it for a short time.</li>
<li>If you want a smooth hummus, process it for a longer time.</li>
</ul>
</li>
</ol>- 리스트
ol : ordered list / ul : unordered list / li : 리스트의 각 아이템
- 기타
<em></em> :이탈릭체
<strong></strong> : 굵은 글씨
<i>: 기울이기 <b> : bold <u> : 밑줄
<img> 이미지 추가 <code> : 텍스트를 코드 스타일로 보여지도록 하기
- 하이퍼링크 만들기
<a href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's
mission and how to contribute">the Mozilla homepage</a>.href -> 링크 주소 (절대경로 또는 상대경로)
title -> hovering시 표시되는 내용
-Document fragments
HTML 문서 내부의 특정부분에 link를 할 수도 있다.
학습자료
* 하단에 표기된 학습자료 내용 중 일부 내용만을 정리하였습니다.
( 새로 알게 된 내용 , 중요하다고 생각되는 내용 등.)
WEB1 - HTML & Internet - 생활코딩
--- 우리는 지금부터 코딩 웹 인터넷 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다. 지금부터 여
opentutorials.org
MDN Web Docs
MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문
developer.mozilla.org
'Programming > WEB' 카테고리의 다른 글
| [WEB 기초] DAY6 Javascript1 (0) | 2021.02.22 |
|---|---|
| [Web 기초] Day5 HTTP (0) | 2021.02.15 |
| [Web 기초] Day4 CSS layout (0) | 2021.02.14 |
| [Web 기초] Day3 CSS (0) | 2021.02.13 |
| [Web 기초] Day1 Web & INTERNET (0) | 2021.02.11 |