개발/웹개발
HTML 기본 태그
배타브
2023. 3. 30. 17:07
728x90
반응형
<!--
제목: <hn> 태그 (n은 1~6 의미 )
단락: <p>
줄바꿈: <br>
수평 줄: <hr>
인용문: <blockquote>
입력하는 그대로 화면 표시 : <pre>
강조 : <strong> , <b>
이탤릭 : <em> , <i>
줄바꿈 없이 영역 묶기 : <span>
아래 첨자 : <sub>
윗 첨자 : <sup>
밑줄 : <u>
-->
<h1>제목</h1>
<h2>제목</h2>
<h3>제목</h3>
<h4>제목</h4>
<h5>제목</h5>
<h6>제목</h6>
<hr> <!-- 수평선 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque fuga ipsum voluptas est laudantium illo rem eum eveniet minima repudiandae eos, quisquam quibusdam accusantium itaque magnam et, aut labore sed?
</p>
lorem = dummy text (예비 컨텐츠) 의미없는 단어나열이지만 페이지를 설계하며 필요할때 사용
lorem100 등 뒤에 숫자 붙여서 좀더 길게 만들수있음.
<hr> <br> 은 닫는 태그가 없다
<pre> <!-- 입력한 그대로 화면에 표시해 줌-->
아주 먼 옛날 바닷가 어느 왕국에
애나벨리라는 이름을 가진
한 소녀가 살고 있었다.
</pre>
최근엔
<strong> 디지털 세상 </strong>
을 살아가기 위한 기본 상식으로 코딩 교육이 시행되고 있다.
<strong> 과 <b> 의 차이
strong : 강조(경고,주의사항)의 의미
b : 그냥 폰트 굵게
일반적으로 보는데는 같지만 , 스크린리더등을 사용했을때 중요함
<p><i>이탤릭체로 표시할 텍스트</i></p>
<p><em>이탤릭체로 표시할 텍스트</em></p>
<i> = 단순 이탤릭체 , <em> = 강조형 이탤릭체
<p>E = mc<sup>2</sup></p>
<p>물의 화학식은 <b>H<sub>2</sub>o</b></p>
<p>링크 표시 용도가 아니라 단순히 밑줄 긑는다면 <u>u</u>태그</p>
<!--
<ul> : 순서 없는 목록 만들기
<ol> : 순서 있는 목록 만들기 속성 추가 가능 <!-- type : 1, A, a, I , i-->
<li> : 아이템 표현
-->
<ul>
<li>일반전화 : (국번없이)1330</li>
<li>휴대전화 : 064-1330</li>
</ul>
<ol>
<li>일반전화 : (국번없이)1330</li>
<li>휴대전화 : 064-1330</li>
</ol>
<h1>abc.com</h1>
<h2>Main menu</h2>
<ul>
<li>about us</li>
<li>services</li>
<li>location</li>
<li>
partners
<ul>
<li>naver</li>
<li>daum</li>
</ul>
</li>
</ul>
실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML</title>
</head>
<h1>HTML - 실습</h1>
<h2>수습 기자 모집</h2>
<h3>언론에 관심있는 새내기 여러분 모집합니다.</h3>
<p>
학내 언론사에서 신입생을 대상으로 공채 수습기자를 모집합니다. 학부나 전공에
상관없이 평소 학생 기자에 관심 있었던 여러 학우들의 지원 바랍니다.
</p>
<h4>모집분야</h4>
<ul>
<li>아나운서(0명):학내 소식을 라디오 방송으로 보도</li>
<li>프로듀서(0명):라디오 방송 기획, 제작</li>
<li>엔지니어(0명):라디오 방송 녹음 및 편집</li>
</ul>
<h4>혜택</h4>
<ol type="a">
<li>수습기자 활동 중 소정의 활동비 지급</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<body></body>
</html>
<!--
설명 목록 만들기 : <dl> , <dt>, <db>
-->
<h1>제주 올레</h1>
<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>
728x90
반응형