html`
제목
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
`
html`
단락(문단) paragraph
<p>
태극기가 바람에 펄럭입니다.
하늘높이 아름답게 펄럭입니다.
태극기가 바람에 펄럭입니다.
하늘높이 아름답게 펄럭입니다.
태극기가 바람에
펄럭입니다.
하늘높이 아름답게
펄럭입니다.
</p>
<p>
태극기가 힘차게 펄럭입니다.
마을마다 집집마다 펄럭입니다.
태극기가 힘차게 펄럭입니다.
마을마다 집집마다 펄럭입니다.
태극기가 힘차게
펄럭입니다.
마을마다 집집마다
펄럭입니다.
</p>
`
html`
줄바꿈. line break를 줄여서 br이라고 한다. 이것은 블럭 레벨 태그가 아니고 인라인 레벨 태그다!!!
<p>
태극기가 바람에<br>
펄럭입니다.<br>
하늘높이 아름답게<br>
펄럭입니다.
</p>
`
html`
수평 줄 horizontal line
<hr>
<hr>
`
html`
인용문
<blockquote cite="http://www.law.go.kr/법령/대한민국헌법">
유구한 역사와 전통에 빛나는 우리 대한국민은 3·1운동으로 건립된 대한민국임시정부의 법통과 불의에 항거한 4·19민주이념을 계승하고, 조국의 민주개혁과 평화적 통일의 사명에 입각하여 정의·인도와 동포애로써 민족의 단결을 공고히 하고, 모든 사회적 폐습과 불의를 타파하며, 자율과 조화를 바탕으로 자유민주적 기본질서를 더욱 확고히 하여 정치·경제·사회·문화의 모든 영역에 있어서 각인의 기회를 균등히 하고, 능력을 최고도로 발휘하게 하며, 자유와 권리에 따르는 책임과 의무를 완수하게 하여, 안으로는 국민생활의 균등한 향상을 기하고 밖으로는 항구적인 세계평화와 인류공영에 이바지함으로써 우리들과 우리들의 자손의 안전과 자유와 행복을 영원히 확보할 것을 다짐하면서 1948년 7월 12일에 제정되고 8차에 걸쳐 개정된 헌법을 이제 국회의 의결을 거쳐 국민투표에 의하여 개정한다.
</blockquote>
위 내용은 <cite>대한민국헌법 전문</cite>입니다.
`
html`
preformat 입력하는 그대로 화면에 표시 (관련 태그: code, samp, kbd 등)
<br><br>
pre 태그와 웹 접근성에 대해 설명하는 교과서 내용을 읽어볼 것 p.59
<pre>
태극기가 바람에
펄럭입니다.
하늘높이 아름답게
펄럭입니다.
</pre>
<pre>
<code>
function myfunc() {
console.log("Hello world!");
}
</code>
</pre>
`
html`
꺾쇠괄호는 pre가 그대로 보여주지 못한다 (주교재 01장 마지막 부분에 p.43 특수 기호 사용하기)
<pre>
어려분, <b>안녕</b>하세요?
</pre>
특수기호 표시 방법은 <b> 이렇게 pre가 아닌 곳에서도 마찬가지다.
`
md`
<strong>중요한 내용</strong>이라 굵게 강조하려면 strong 태그로 (경고, 주의사항)
단지 <b>두꺼운 모양</b>으로 표시만 하려면 b 태그로 (키워드 등)
b는 bold의 첫 글자
`
md`
문장 흐름상 특정 부분을 <em>강조</em>하려면 em 태그로
단지 <i>이탤릭체</i>로 표시만 하려면 i 태그로
em은 emphasis의 첫 두 글자, i는 italic의 첫 글자
`
html`
p.62 Do It! 텍스트 강조하기
<hr>
<h2>제주 이색 여행지 - 이중섭 거리</h2>
<p>
<strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.
<em>'아트마켓'</em>이라고도 부르는데 <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고
작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.
</p>
`
md`인용
철수가 <q>안녕하세요</q>라고 말했습니다.
<p>
웹의 창시자인 팀 버너스 리(Tim Berners-Lee)는
<q cite="https://www.w3.org/standards/webdesign/accessibility">웹의 힘은 보편성에 있다.
장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 웹 접근성을 설명한다.
</p>
q는 quote의 첫 글자
비슷한 일을 하는 blockquote 태그는 블록 레벨
`
md`형광펜 효과
여기에 <mark>형광펜 쫙 표시</mark>하세요.
HTML4까지는 없다가 HTML5에 새로 도입된 태그 중 하나
`
md`줄바꿈 없이 영역 묶기
줄바꿈 없이 <span style="color: magenta">영역을 이렇게</span> 묶으려면 span 태그를
span 태그와 비슷한데 블럭 단위로 묶을 때 div 태그를 사용
`
md`동아시아 글자 주석 (일본에서 많이 사용)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/ruby
<ruby>
明日<rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
<ruby>
漢<rp>(</rp><rt>Kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
`
md`
기타 텍스트 관련 태그에 관한 설명을 <abbr title="Mozilla Developer Network">MDN</abbr>에서 찾아 보자.
아래 태그를
<dl>
<dt>abbr</dt>
<dd>약자 표시</dd>
<dd>title 속성과 함께 사용 가능</dd>
<dt>cite</dt>
<dd>참고 내용 표시</dd>
<dt>kbd</dt>
<dd>키보드 입려이나 음성 명령 같은 사용자 입력 내용</dd>
<dt>small</dt>
<dd>부가 정보처럼 작게 표시해도 되는 텍스트</dd>
<dt>sub</dt>
<dd>아래첨자</dd>
<dt>sup</dt>
<dd>위첨자</dd>
<dt>s</dt>
<dd>취소선</dd>
<dt>u</dt>
<dd>밑줄</dd>
</dl>
`
// ul 예제
html`
<h3>관광 안내 전화 </h3>
<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.</p>
<p>1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.</p>
<ul>
<li>일반 전화 : (국번없이) 1330</li>
<li>휴대 전화 : 064-1330</li>
</ul>
`
// OL 예제
html`
<h3>1박 2일 가족 여행 코스</h3>
<ul>
<li>1일차
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
</li>
<li>2일차
<ol type="a" start ="3">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</li>
</ul>
`
// dl - 설명 목록(description list) 예제
html`
<style>
dl { line-height: 35px; /* 줄 간격 */ }
dt { color: red; /* 글자색 */ }
dd { background-color: cyan; /* 배경색 */ }
</style>
<h3 style="color: blue;">제주 올레 </h3>
<dl>
<dt>올레 1코스</dt>
<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
<dd>난이도 : 중</dd>
</dl>
`
html`
<img src="https://picsum.photos/100" alt="무작위 이미지">
`
md`figure, figcaption 태그
<figure>
<img src="https://picsum.photos/100" alt="무작위 이미지">
<figcaption>랜덤 이미지</figcaption>
</figure>
`
html`
<p>HTML5 부터는 HTML5 표준의 일부로 SVG를 HTML에 포함하여 사용 가능</p>
<svg>
<circle cx="60" cy="60" r="60" style="fill:teal;" />
<rect x="50" y="40" width="120" height="40" style="fill:blue;" />
</svg>
`
md`
<a href="http://ce.hnu.kr/">한남대학교 컴퓨터공학과</a>
<a href="http://ce.hnu.kr/" target="_top">
한남대 컴공 (_top 타겟)
</a>
<!-- 이 페이지가 iframe 등 복잡한 구조라서 의도한 대로 이라서 동작하지 않았다 (주교재 p. 109) -->
<!-- a href="http://ce.hnu.kr/" target="_self">
한남대 컴공 (_self 타겟)
</a-->
<a href="https://www.haskell.org/">
<img src="https://www.haskell.org/img/haskell-logo.svg" height="25px">
</a>
<a href="https://www.haskell.org/">
<ul>
<li>아무데나</li>
<li>클릭해도</li>
<li>링크된다</li>
</ul>
</a>
<br>
`
md`
<a href="http://ce.hnu.kr/" target="_blank">한남대 컴공 (_blank 타겟)</a>
<a href="http://ctl.hnu.kr/" target="_blank">한남대 CTL (_blank 타겟)</a>
<br>
`
md`
<a href="http://ce.hnu.kr/" target="targetname01">한남대 컴공 (이름붙인 타겟)</a>
<a href="http://ctl.hnu.kr/" target="targetname01">한남대 CTL (이름붙인 타겟)</a>
<br>
`
md`
SVG와 링크
<svg width="50" height="100">
<a href="https://stackexchange.com">
<rect x="0" y="0" width="50" height="50" style="fill:blue;">
</a>
<a href="https://reddit.com/">
<rect x="0" y="50" width="50" height="50" style="fill:red;">
</a>
</svg>
근데 이 SVG 내용에는 사실 뭔가 잘못된 점이 있다.
잘못된 점이 있어도 어쩌다 재수가 좋아서 잘 보이는 것일 뿐이다.
아래 출석체크용 과제에도 같은 문제점이 있는데 아래 SVG의 경우는 제대로 나타나지 않는다.
<br>
`
md`### 출첵용 과제 - 검정/빨강/노랑 독일 삼색기가 잘 보이도록 수정하라
<svg width="160" height="90">
<rect x="0" y="0" width="160" height="30" style="fill:black;">
<rect x="30" y="0" width="160" height="30" style="fill:red;">
<rect x="60" y="0" width="160" height="30" style="fill:yellow;">
</svg>
지금은 검정색밖에 보이지 않을 것이다. 나머지 두 색의 직사각형도 나타나
독일 국기와 같은 세 가지 색이 나타나도록 수정된 SVG 내용(\`<svg>\`부터 \`</svg>\`까지)을
영상 관련 과제 항목에 제출하시오. (힌트: HTML과 XML 태그 문법의 차이)
<br>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
