<body>
<!-- 기본 글꼴 크기-->
제주 이색 여행지
<!-- </h1> : 자동으로 생성: vs studio code -->
<h1>제주 이색 여행지</h1>
<!-- 글자크기 h1>h2 -->
<h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
아일랜드 출신 임피제 신부가 1954년 제주에 오면서
<!-- <br> : 엔터 -->
목장 숙소로 짓기<br>
시작한 후 사료공장, 성당으로 활용됐습니다.
<!-- <p></p> 아래, 위 빈줄이 생김 : 단락 -->
<p>
제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있다.
</p>
제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있다.
<!-- <hr> : 수평선 -->
<hr>
<!-- <blockquote> : 들여쓰기(인용) -->
<blockquote>
성이시들목장은 제주특별자치도 제주시 한림읍 금악리에 있다.
성이시들목장은 제주특별자치도 제주시 한림읍 금악리에 있다.
성이시들목장은 제주특별자치도 제주시 한림읍 금악리에 있다.
성이시들목장은 제주특별자치도 제주시 한림읍 금악리에 있다.
성이시들목장은 제주특별자치도 제주시 한림읍 금악리에 있다.
</blockquote>
</body>
<pre> 태그 – 입력한 그대로 표시
기본형 : <pre> 텍스트 </pre>
소스에 표시한 공백이 그대로 표시됨.
프로그램 소스를 표시할 때 유용함.
<body>
<h3>자바 소스</h3>
<!-- <pre></pre>: 소스 모양 그대로 출력 -->
<pre>
public class Test{
public static void main(String args[]){
System.out.println("html~");
}
}
</pre>
</body>
2. 텍스트를 한 줄로 표시하는 태그
<strong>, <b> – 굵게 표시
<strong> - 중요한 내용이라서 강조해야 할 때
<b> - 단순히 굵게 표시할 때
<em>, <i> – 이탤릭체로 표시하기
<em> - 흐름상 특정 부분을 강조하고 싶을 때
<i> - 단순히 이탤릭체로 표시할 때
<body>
<h2>제주 이색 여행지</h2>
<!-- <strong></strong>: 글자가 진하게 강조 -->
<!-- <b></b>: 글자가 진하게 강조 -->
<p>
<strong>주말</strong>마다 <b>서귀포문화 예술디자인시장</b>이 열립니다.
</p>
<!-- <em></em>:이탤릭체 -->
<!-- <i></i>:이탤릭체 -->
<em>아트마켓</em>이라고도 부르는데, <i>문화예술체험</i>이나 공연관람을 할 수도 있고,
작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.
</body>
<q> 태그 – 인용 내용 표시
줄바꿈 없이 다른 내용과 한 줄에 인용 내용 표시
인용 내용 앞뒤에 따옴표(" ") 추가됨
<body>
<h1>웹 접근성</h1>
<p>웹의 창시자인 팀 버너스 리</p>
<!-- <blockquote></blockquote>:줄바꿈과 들여쓰기로 인용 -->
<blockquote>
웹의 힘은 보편성에 있다.
</blockquote>
웹의 힘은 보편성에 있다.
웹의 힘은 보편성에 있다.
<!-- <q></q>:줄바꿈 없이 인용:큰따옴표 추가 -->
<q>
웹의 힘은 보편성에 있다.
</q>
웹의 힘은 보편성에 있다.
</body>
<mark> – 형광펜 효과
<mark> 태그로 묶은 부분의 배경색이 노랑으로 표시됨.
< span>, <div> – 영역 묶기
<span> - 줄 안에서 (인라인) 묶기
<div> - 줄 바꿔 (블록) 단락으로 묶기
<body>
<!-- <mark></mark>:형광펜 -->
<h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기<br> 시작한 후
<!-- <span></span>:영역 지정 -->
<!-- style="color:blue;" 글자색 파란색이 스타일(세미콜론 생략 가능) -->
<span style="color: blue;">사료공장, 성당으로 활용</span>됐습니다.
</body>
< ruby> - 글자에 주석 표시
<ruby> 태그 안에 <rt> 태그를 사용해 주석 표시
<body>
루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로(
<!-- ruby 태그 안에서 rt가 주석 역할을 함 -->
<ruby>
마츠모토 유키히로<rt>일본의 프로그래머</rt>
</ruby>
) 가 만든 프로그래밍 언어입니다.
</body>
3. 기타 텍스트 관련 태그들
<abbr>
약자 표시, title 속성을 함께 사용할 수 있음
<cite>
웹 문서나 포스트에서 참고 내용 표시
<code>
컴퓨터 인식을 위한 소스 코드
<kbd>
키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small>
부가 정보처럼 작게 표시해도 되는 텍스트
<sub>
아래 첨자
<sup>
위 첨자
<s>
취소선
<u>
밑줄
<body>
<!-- abbr:밑줄이 생기면서 설명은 title 속성으로 함(마우스 올리면 발생) -->
<abbr title="Internet Of Things">IOT</abbr><br>
IOT<br>
<!-- cite:인용인데 이탤릭체(em,i) -->
영화 <cite>'비포선셋'</cite>중<br>
영화 '비포선셋'중<br>
<!-- <code></code>:소스표시하는데 작게 보임 -->
<code>function aaa(){}</code><br>
function aaa(){}<br>
<!-- <small></small>:작게 표시 -->
가격: 13,000원<small>(부가세별도)</small><br>
가격: 13,000원(부가세별도)<br>
<!-- <sub></sub>:아래 첨자 -->
물의 화학식은 H<sub>2</sub>O다<br>
물의 화학식은 H2O다<br>
<!-- <sup></sup>:윗첨자 -->
E=mc<sup>2</sup><br>
E=mc2<br>
<!-- <s></s>:취소선 -->
<s>34,000원</s>19,000원<br>
34,000원19,000원<br>
<!-- <u></u>:밑줄 -->
링크가 아니라 단순히 밑줄을 긋는다면 <u>u태그</u><br>
링크가 아니라 단순히 밑줄을 긋는다면 u태그<br>
</body>
