web publishing_HYML_Basic 01

장봄·2020년 1월 3일

web publishing_HTML_Basic

목록 보기

1/4

01. Editor 설치 및 준비

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 + / = 주석

02. meta요소

검색로봇 제어 -

모든 검색엔진에 유효하지는 않음.
ALL : 기본값. 'index,follow'를 지정한 것과 같음.
NONE : 'NOINDEX, NOFOLLOW'를 지정한 것과 같음.
INDEX : 그 페이지를 수집대상으로 한다.
FOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
NOINDEX : 그 페이지를 수집대상에서 제외한다.
NOFOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다.
설명문 입력 -
키워드 입력 -
작성자 입력 -
저작도구 입력 -
대체로 제작에 적용 된 프레임웍 등을 지칭 함.
지정한 시간이후 페이지 이동 -
모바일 뷰를 위한 뷰포트 지정 -

출처 : https://cafe.naver.com/wepub

03. html 템플릿 작성하기

로 모바일에서도 화면을 편하게 볼 수 있도록 을 지정한다.
는 아래쪽 이미지에 맞춰 기본 틀을 만든다.

<!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>

04. 문자 참조

출처: https://cafe.naver.com/wepub

예시)
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>문자참조</title>
</head>
<body>
	<h1>문자참조 예제</h1>
	<p>Lorem &lt;ipsum dolor sit amet&gt;, consectetur adipisicing elit.</p>
</body>
</html>

위 코딩이 적용된 웹화면

05. 강조태그_strong, em, mark

strong : 객관적인 강조. 진하게 표현.
em : 주관적인 강조. 기울어지게 표현.
mark : 형광펜같은 표현.

<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>

위 코딩이 적용된 웹화면

06. 상세설명 및 부가설명 _ dfn, abbr, cite, small

dfn : 마우스를 텍스트위에 올리면 설명문이 보인다.
abbr : dfn과 같은 기능을 가지고 있지만 차이점으로는 아래에 점선 등 태그가 적용된 흔적이 표현된다.
cite : 작품명등을 표현하는 태그.
small : 텍스트를 작게 표현하는 태그.

<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>

위 코딩이 적용된 웹화면

07. 루비 주석과 시간의 표현

ruby : 텍스트 위에 텍스트나 설명을 올리는 태그.

<h2><ruby>家和萬事成<rt>가화만사성</rt></ruby></h2>

<h2>
	<ruby>
	家<rt>가</rt>
	和<rt>화</rt>
	萬<rt>만</rt>
	事<rt>사</rt>
	成<rt>성</rt>
	</ruby>
</h2>

위 코딩이 적용된 웹화면

time : 웹화면에 나타나지는 않지만 정보를 제공하거나 눈으로 보기 힘든 경우 정보제공을 위해 사용하는 태그.

<p><time datetime="2020-01-02">오늘</time>은 친구 생일이라서 일찍 들어가 봐야 합니다.</p>

<p>논문 발표일은 <time datetime="2020-01-02T13:36">2020년 1월 2일</time> 입니다.</p>

위 코딩이 적용된 웹화면

address : 주소. 그룹화시 P태크만 사용가능.
blockquote : 인용문. 자동으로 들여쓰기.
hr : 로 구분선. 새로운 내용이 시작됨 의미.
pre : 에디터에서 표현된 모습을 그대로 재현.
footer : 출저 등 표현.

<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">웹접근성연구소 &gt; 웹 접근성이란 ?</a></cite></footer>
<hr>
<pre>
	&lt;h1&gt;heading 1&lt;/h1&gt;
	&lt;h2&gt;heading 2&lt;/h2&gt;
	&lt;h3&gt;heading 3&lt;/h3&gt;
	&lt;h4&gt;heading 4&lt;/h4&gt;
	&lt;h5&gt;heading 5&lt;/h5&gt;
	&lt;h6&gt;heading 6&lt;/h6&gt;
</pre>

위 코딩이 적용된 웹화면

09. 목록작성_ul, ol, li, dl, dt, dd

ul : li만 사용 가능.
ol : 순서가 매겨짐. type의 값에 a, A, i 등 삽입가능.
li : ul와 ol의 자식태그.

<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와 dd의 부모 태그. dl안에는 둘 다 있어야 한다. dt가 1개이지만 dd는 여러 개일 수 있다. 하지만 dt가 여러 개인데 dd가 1개 일 순 없다. 단어와 설명/ 제목과 설명 등의 표현에 사용된다.
dt : dl의 자식태그.
dd : dl의 자식태그.

<dl>
	<dt><strong>Lorem ipsum dolor sit amet.</strong></dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, officia.</dd>
</dl>

위 코딩이 적용된 웹화면

10. 테이블 작성_table, tr, th, td

table : 표.
tr : 줄.
td : 칸.
caption : 표 이름.
col : 가로.
row : 세로.
thead : table의 head.
tbody : table의 body. 필수 태그.
tfoot : table의 foot.

<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사이즈를 화면의 100% 크기로 고정.

: table의 가로 머릿칸. th에는 scope이 필수.	: 세로 3칸을 1칸으로 간주.	: 세로 1칸이 머릿칸.	: 가로 3칸을 1칸으로 간주.

장봄

즐겁게 배우고 꾸준히 블로깅하는 개발자입니다 ;>

다음 포스트

web publishing_HYML_Basic 01

web publishing_HTML_Basic

01. Editor 설치 및 준비

02. meta요소

03. html 템플릿 작성하기

04. 문자 참조

05. 강조태그_strong, em, mark

06. 상세설명 및 부가설명 _ dfn, abbr, cite, small

07. 루비 주석과 시간의 표현

08. 문단, 연락처, 인용문_address, blockquote, hr, pre, footer

09. 목록작성_ul, ol, li, dl, dt, dd

10. 테이블 작성_table, tr, th, td

web publishing_HTML_Basic 02

0개의 댓글