SullimeText3 설치
https://www.sublimetext.com/3
emmet(zen-coding) 설치
https://packagecontrol.io/installation
설치 후 SullimeText3 파일에서 install 파일에 packagecontrol파일을넣어준다.
SullimeText3을 열고 preference에 package controll검색란에 install package를 입력한다.
emmet을 검색해서 설치한다.
! + Tab키 = 기본틀을 만든다.
문서형 선언, 언어 지정, 문자 코드 셋 지정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Tab키 = 들여쓰기
Shift + Tab키 = 내어쓰기
Ctrl + / = 주석
검색로봇 제어 -
모든 검색엔진에 유효하지는 않음.
ALL : 기본값. 'index,follow'를 지정한 것과 같음.
NONE : 'NOINDEX, NOFOLLOW'를 지정한 것과 같음.
INDEX : 그 페이지를 수집대상으로 한다.
FOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
NOINDEX : 그 페이지를 수집대상에서 제외한다.
NOFOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다.
설명문 입력 -
키워드 입력 -
작성자 입력 -
저작도구 입력 -
대체로 제작에 적용 된 프레임웍 등을 지칭 함.
지정한 시간이후 페이지 이동 -
모바일 뷰를 위한 뷰포트 지정 -
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="">
<title>template</title>
</head>
<body>
<p><a href="#content">본문바로가기</a></p>
<div id="wrap">
<!-- header -->
<div id="header">
</div>
<!-- //header -->
<!-- dontainer -->
<div id="container">
<div id="content">
</div>
</div>
<!-- //dontainer -->
<!-- footer -->
<div id="footer">
</div>
<!-- //footer -->
</div>
</body>
</html>
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문자참조</title>
</head>
<body>
<h1>문자참조 예제</h1>
<p>Lorem <ipsum dolor sit amet>, consectetur adipisicing elit.</p>
</body>
</html>
위 코딩이 적용된 웹화면
<h1>strong, em, mark</h1>
<p>우리집 화단에서 <em>가장 이쁜 꽃은 장미다.</em></p>
<p>저기 있는 웅덩이는 깊어서 <strong>위험하므로 들어가지 마시오.</strong></p>
<p><mark>Lorem ipsum dolor sit amet</mark>, consectetur adipisicing elit. Libero, nemo!</p>
위 코딩이 적용된 웹화면
<h1>dfn, abbr, cite, small</h1>
<p><dfn title="웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다. 하이퍼텍스트를 작 성하기 위해 개발되었다.">HTML</dfn></p>
<p>월드 와이드 웹 컨소시엄(<abbr title="World Wide Web Consortium">W3C</abbr>)</p>
<p>
<cite>Psycho</cite>
Red Velvet (레드벨벳)
</p>
<p>값 : 50,000원<small>(부가세별도)</small></p>
위 코딩이 적용된 웹화면
<h2><ruby>家和萬事成<rt>가화만사성</rt></ruby></h2>
<h2>
<ruby>
家<rt>가</rt>
和<rt>화</rt>
萬<rt>만</rt>
事<rt>사</rt>
成<rt>성</rt>
</ruby>
</h2>
위 코딩이 적용된 웹화면
<p><time datetime="2020-01-02">오늘</time>은 친구 생일이라서 일찍 들어가 봐야 합니다.</p>
<p>논문 발표일은 <time datetime="2020-01-02T13:36">2020년 1월 2일</time> 입니다.</p>
위 코딩이 적용된 웹화면
<address>대구광역시 동구 첨단로 53 (41068) 디지털포용본부</address>
<hr>
<blockquote>
<p>Lorem ipsum dolor sit amet.</p>
<p>월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
'장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며,
웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야
한다고 하였다.</p>
</blockquote>
<hr>
<footer>출처 : <cite><a href="https://www.wah.or.kr:444/Accessibility/define.asp">웹접근성연구소 > 웹 접근성이란 ?</a></cite></footer>
<hr>
<pre>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</pre>
위 코딩이 적용된 웹화면
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ol type="A">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<hr>
<ul>
<li><a href="#">menu 1</a>
<ul>
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 4</a></li>
</ul>
</li>
<li><a href="#">menu 2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a></li>
</ul>
<hr>
위 코딩이 적용된 웹화면
<dl>
<dt><strong>Lorem ipsum dolor sit amet.</strong></dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, officia.</dd>
</dl>
위 코딩이 적용된 웹화면
<table border width="100%">
<caption>table caption</caption>
<colgroup>
<col width="100">
<col width="300">
<col width="300">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">table header cell</th>
<th scope="col">table header cell</th>
<th scope="col">table header cell</th>
<th scope="col">table header cell</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
<tr>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
<tr>
<td>table data cell</td>
<td>table data cell</td>
<td>table data cell</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">result</th>
<td colspan="3">...</td>
</tr>
</tfoot>
</table>
위 코딩이 적용된 웹화면
: table의 가로 머릿칸. th에는 scope이 필수.
| : 세로 3칸을 1칸으로 간주.
| : 세로 1칸이 머릿칸.
| : 가로 3칸을 1칸으로 간주.
|
---|