* <body bgcolor = "yellow" text = "blue"> => CSS가 Tag에서 사용될 때
<h1>배경색은 bgcolor 노랑, 글자색은 text 파랑</h1>
<font color = "red" size = 10>ont 변경, 색상 빨강 10point @>>===---</font>
</body>
| Tag 이름 | 의미 | 활용 예시 |
| <h1>~<h6> | 제목 크기(굵게/한줄 띄기 포함) | <h1><code>h1 Tag</code></h1> <h2>h2 Tag</h2> |
| <b> | 굵은 글씨 | <b>b Tag : 굵은 글씨(bold)</b> |
| <i> | 이태리체 | <i>i Tag : 이태리체(italic)</i> |
| <u> | 밑줄 | <u>u Tag : 밑줄(underline)</u> |
| <blink> | 깜빡임(이전 IE 버전에서 사용) | <blink>blink Tag : 깜빡임, 이전 IE 버전, 지금은 사용안됨</blink> |
| <strike> | 취소선 | <strike>strike Tag : 취소선</strike> |
| code | 타이핑 글씨체 | <code>code Tag : typing 글씨체</code> |
| <sub> | 밑 지수 | <sub>sub Tag : 밑 지수</sub> |
| <sup> | 윗 지수 | <sup>sup Tag : 윗 지수</sup> |
| <p> | 단락 표시 텍스트 정보 입력 줄 바꾸고 한 줄 더 띄기 Tag 영역 : 브라우저 양 끝 블록(block) 요소 * 블록 요소 > 인라인 요소 - 블록 요소는 인라인 요소 포함 가능 But!인라인 요소는 블록 요소 포함 불가능! - p Tag는 div Tag를 포함할 수 없음(단락 표시 태그이기 때문!) |
강변살자<p> <p align = “center”>align = center<br> : 가운데 정렬</p> <p align = “right”>align = right<br> : 오른쪽 정렬</p> <p align = “left”>align = left<br> : 왼쪽 정렬</p> <p> </p> : 2줄 띄울 때 사용 <p><div>Hello World!</div><p> : 사용 X |
| <br> | 줄 바꿈 | 엄마야 누나야<br> 띄어쓰기 하기<br /> ☞ br Tag를 XHTML 형식으로 서도 에러나지 않음 |
| | 한 칸 띄기 | 띄어쓰기 응용<br /> ☞ 의 비연속 빈칸 인정 O 연속빈칸은 인정 X (출력될 시, 빈칸 축소됨) |
| <center> | 가운데 정렬 | <center> center Tag<br> : 가운데 정렬, HTML5 이전에 쓰이던 태그<br> </center> |
| <pre> | 미리 서식 지정한 텍스트 표현 HTML에 작성 내용 그대로 표현 |
<pre> <h1> pre Tag : br Tag가 없어도 줄바꿈이 가능 </h1> </pre> |
| <marquee> | 글자가 지나가게 함 | <marquee direction = “left”> <h1>marquee Tag : 글자가 지나가게한다 direction – 방향 설정 </h1> </marquee> <marquee direction = “right” behavior = “scroll”> <h1>marquee Tag : behavior – area 범위 설정<br> scroll : 계속 지나감 반복</h1> </marquee> <marquee direction = “right” behavior = “slide”> <h1>marquee Tag : behavior – area 범위 설정<br> slide : 벽에서 멈춤</h1> </marquee> <marquee behavior = “scroll” scrollamount = “50”> <h1>marquee Tag : behavior – area 범위 설정<br> scrollamount : scroll되는 속도 조절 (pixel씩 스크롤 됨, pixel이 클수록 속도가 빠름) </h1> </marquee> |
| <img> | 이미지 삽입 | <img src = "website_freefix_128" width=300 height=200><br> ☞ width : 가로길이 / height : 세로길이 <img src = "../chat_freefix_128"><br> ☞ .html 의 위치와 그림의 위차가 다를 경우, 경로 지정 ./ : 현재 방 위치 ../ : 부모 방 위치 |
| <table> | 테이블 생성 | <table border = "5"> <tr align = "center"> <!-- 없는 파일 --> <td> <img src="website_freefix_.png" alt=“그림이 나오지 않음”> </td> <td><img src = "chat_freefix_.png"></td> </tr> <tr align = "center"> <td><h3>생년월일</h3></td> <td><h3>12345678</h3></td> </tr> </table> ☞ border : table Tag 속성 테이블 경계선 굵기 ""를 하지 않아도 에러나지 않음 tr : 줄 삽입 / td : 칸 삽입 |
| <a> | 클릭 시, 웹 페이지 연결 | <a href = “url or 웹페이지”>글자 혹은 사진</a> <a href = “http://www.naver.com”>네이버</a><br> <a href = “mainpage.html”>네이버</a> |
| <div> | Group Tag 영역 구분 Tag 영역 : 브라우저 양 끝 블록(block) 요소 |
<div> 환영합니다 <div> <p>어서오세요</p> </div> </div> |
| <span> | Group Tag Tag 영역 : Content(내용)만큼 인라인(In-line) 요소 |
<div> <p>안녕하세요 <span>드시고 싶은 메뉴를 선택하여 주십시오</span> </p> <div> |
| <ul> | 순서 상관없는 리스트 (Unordered list) |
<div> 후식<br> <ul> <li type = "square"> 미숫가루 <li type = "circle"> 숭늉 <li> 홍차 </ul> </div> ☞ type : disk (기본값) ● / square ■ / circle ○ |
| <ol> | 순서있는 리스트 (Ordered list) |
<div>
<ol>메뉴<br> <li type = 1> 떡갈비조림 <li> 치즈라면 <li> 순대국 </ol> </div> ☞ type : 기본값 1 |
| <li> | ul 및 ol Tag의 리스트 요소 |
'스터디 > HTML & CSS' 카테고리의 다른 글
| HTML Tag 모음과 활용 예시3 - <input> (0) | 2021.09.07 |
|---|---|
| HTML Tag 모음과 활용 예시2 - <form> (0) | 2021.09.07 |
| HTML DOCTYPE 및 기본 구조 (0) | 2021.09.06 |
| Tomcat 설치 및 환경설정 (0) | 2021.09.04 |
| HTML 이란? (0) | 2021.09.04 |
댓글