본문 바로가기
웹개발 수업/HTML

HTML-2(서식 태그,리스트 태그)

by gugigugi92 2023. 3. 23.

    <strong>, <b> 태그
      두 태그의 표현은 동일하지만 사용 용도가 다르다.
      <b> 태그는 단순히 텍스트를 진하게 표시하는 역할을 하지만,
      <strong>태그는 강조 뿐만 아니라 실제 페이지 내에서 중요한 부분을 브라우저에게
      알려주는 역할을 한다. 브라우저에서 웹 접근성으로 인식되며, 스크린 리터로 페이지를 읽을 때
      거센 억양으로 음을 낼 수 있도록 강조한다.
   
    <i>, <em> 태그 : 글씨 기울이기
      <i> 태그는 단순히 화면의 텍스트를 이태릭채로 표현해주지만,
      <em>태그는 그 내용이 중요하다는 의미도 함께 포함해준다.
   
    <mark> 태그
      텍스트 하이라이팅 효과
   
    <del> 태그
      텍스트 중앙에 가로 줄을 그어서 텍스트를 지운 것과 같은 효과
      
    <ins> 태그
      텍스트 밑에 선을 추가하여 텍스트 강조 효과
   
   <sup>, <sub> 태그
      위 첨자, 아래 첨자

 

내용을 명령어로 인식하지 못하도록 하는 문법
< :  &lt;
> :  &gt;
& :  &amp;
" :  &quot;
공백 : &nbsp;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서식 태그</title>
</head>
<body>
   <h2><sup>제목</sup> 입술의 말</h2>
   <h3>최대호<sub>지음</sub></h3>
   <p>
      <i><q>뭐해요?</q></i>라는 말은<br>
      <strong><ins>걱정한다는 뜻.</ins></strong>
   </p>
   <p>
      <em><q>밥 먹었어요?</q></em>라는 말은<br>
      <strong><ins>걱정한다는 뜻.</ins></strong>
   </p>
   <p>
      <i>오늘 날씨가 추워요.</i>라는 말은<br>
      <b><del>좋아한다는 뜻.</del></b>
   </p>
   <p>
      <em>그만 좀 먹어라.</em>라는 말은<br>
      <strong><mark>그만 좀 먹으라는 뜻.</mark></strong>
   </p>
</body>
</html>

실행 결과

 

   <p> 태그, 글 단락 태그
        단락이란, 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하고, 문단이라고 부른다.

        태그를 이용하려면 이러한 단락을 표현한다.     

        span : 아무 기능없이 묶어만 준다

        <p style= "color: blue;"> : 태그안의 문자 색 변경

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p 태그</title>
</head>
<body>
	<p style= "color: blue;">
		You are <strong style = "color: red;">much</strong> better
	</p>
	
	<!--  I Love You를 다른 색으로 변경하고, Love는 또 다른 색으로 변경하기 -->
		<p style= "color: gray;;">
		
		I <span style = "color: blue;">love</span> You 
	</p>
	
</body>
</html>

실행결과

리스트 태그
   
   1. 순서 없는 리스트
      <ul>태그 안에 <li>태그 사용
      <ul>
         <li>텍스트1</li>
         <li>텍스트2</li>
         <li>텍스트3</li>
      </ul>
   2. 순서 있는 리스트
      <ol>태그 안에 <li>태그 사용
      <ol>
         <li>텍스트1</li>
         <li>텍스트2</li>
         <li>텍스트3</li>
      </ol>
     

      type 속성
      type 속성의 값: 1, A, a, i, I

      ex) type="1"

      ex) type ="A" start="3"(3번째인 C~부터 시작)
-->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list 태그</title>
</head>
<body>
   <h3>제9조(서비스 이용시간)</h3>
   <ul>
      <li>서비스 이용시간은 당 사이트의 업무상 또는 기술상 특별한 지장이 없는 한 연중무휴, 1일 24시간을 원칙으로 합니다.</li>
      <li>제1항의 이용시간은 정기점검 등의 필요로 인하여 당 사이트가 정한 날 또는 시간은 예외로 합니다.</li>
   </ul>
   <h3>제2조(개인정보의 처리 및 보유기간)</h3>
   <p>
      "정부24"에서 처리하는 개인정보는 수집·이용 목적으로 명시한 범위 내에서 처리하며, 개인정보보호법 및 관련 법령에서 정하는 보유기간을 준용하여 이행하고 있습니다.
   </p>
   
   <ol type="A" start="3">
      <li>
         정부24 회원정보
         <ul>
            <li>수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조</li>
            <li>보유기간 : 탈퇴 후 5일까지</li>
         </ul>
      </li>
      <li value="5">
         전자민원 신청이력(상담이력 포함)
         <ul>
            <li>수집근거 : 정보주체의 동의, 전자정부법 시행령 제90조</li>
            <li>보유기간 : 3년</li>
         </ul>
      </li>
   </ol>
</body>
</html>

실행결과

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list 태그 - 실습</title>
</head>
<body>
<!--
      제16조(회원의 의무)
      II. 회원은 당 사이트의 사전 승낙 없이 서비스를 이용하여 어떠한 영리행위도 할 수 없습니다.
      IV. 회원은 당 사이트 서비스 이용과 관련하여 다음 각 호의 행위를 하여서는 안됩니다.
         a. 다른 회원의 ID를 부정 사용하는 행위
         b. 범죄행위를 목적으로 하거나 기타 범죄행위와 관련된 행위   
-->
 <h3>제 16조(회원의 의무)</h3>
<ol type="I" start="2">
    <li>
 	회원은 당 사이트의 사전 승낙 없이 서비스를 이용하여 어떠한 영리행위도 할 수 없습니다.
 	</li>
 	
 	<li value="4">
     회원은 당 사이트 서비스 이용과 관련하여 다음 각 호의 행위를 하여서는 안됩니다.
    	     
<ol type="a">
         <li> 다른 회원의 ID를 부정 사용하는 행위</li>
         <li> 범죄행위를 목적으로 하거나 기타 범죄행위와 관련된 행위  </li>
         </ol>
     </li>
   

 </ol>
</body>
</html>

실행 결과

 

저작자표시 비영리 변경금지 (새창열림)

'웹개발 수업 > HTML' 카테고리의 다른 글

HTML-3( 페이지 단락/ 책갈피 이동, 블록, 인라인 요소 )  (0) 2023.03.23
HTML-1(웹,프로토콜)  (0) 2023.03.22

관련글

댓글

티스토리툴바