728x90
★ Horizontal Rule, <hr>
- 수평바, 구분자
- 문단과 문단을 구분하는 역할
- 단독 태그
★ <hr> 속성
- 1. size : 선의 두께
- 2. width : 선의 너비(픽셀:절대크기, %:상대크기)
- 3. align : 수평 정렬
- 4. color : 선의 색상
- 5. noshade : 그림자 유무
- 6. title : 풍선 도움말(tooltip, hover text)
★ HTML 속성 유형
- 1. 숫자(단위 없음)
- 픽셀(px) > 화소 > 화상(이미지)를 구성하는 최소 단위> 단일 색상을 가지는 점 1개
- 글자수
- 2. 숫자(단위 %)
- 100%의 기준이 누구인지
- 부모 태그 영역을 100으로 하는 상대 단위
- 3. 열거형
- 정해져있는 속성값 중 하나를 선택해서 사용
- 4. 색상
- 색상명, RGB
- 5. 플래그형(boolean)
- 속성명 기재(true), 미기재(false)
- 6. 문자열
- 자유롭게 기재
- 7. URL
- 상대경로, 절대경로, 외부경로
■ 소스코드
<!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>Document</title>
</head>
<body>
<h1 align ="center">수업 정리</h1>
<p title="내용입니다.">내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
<p>내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
<hr size="10" width="100%" align="center" title="구분선입니다.">
<p>내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
</body>
</html>■ 실행 화면
728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 5 - LIST (0) | 2023.04.11 |
|---|---|
| HTML STEP 4 - STYLE (0) | 2023.04.11 |
| HTML STEP 2 - Heading (0) | 2023.04.11 |
| HTML STEP 1 - HTML 기초 (0) | 2023.04.10 |
| Eclipse Tomcat 연동 (0) | 2023.04.10 |
728x90
★ Horizontal Rule, <hr>
- 수평바, 구분자
- 문단과 문단을 구분하는 역할
- 단독 태그
★ <hr> 속성
- 1. size : 선의 두께
- 2. width : 선의 너비(픽셀:절대크기, %:상대크기)
- 3. align : 수평 정렬
- 4. color : 선의 색상
- 5. noshade : 그림자 유무
- 6. title : 풍선 도움말(tooltip, hover text)
★ HTML 속성 유형
- 1. 숫자(단위 없음)
- 픽셀(px) > 화소 > 화상(이미지)를 구성하는 최소 단위> 단일 색상을 가지는 점 1개
- 글자수
- 2. 숫자(단위 %)
- 100%의 기준이 누구인지
- 부모 태그 영역을 100으로 하는 상대 단위
- 3. 열거형
- 정해져있는 속성값 중 하나를 선택해서 사용
- 4. 색상
- 색상명, RGB
- 5. 플래그형(boolean)
- 속성명 기재(true), 미기재(false)
- 6. 문자열
- 자유롭게 기재
- 7. URL
- 상대경로, 절대경로, 외부경로
■ 소스코드
<!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>Document</title>
</head>
<body>
<h1 align ="center">수업 정리</h1>
<p title="내용입니다.">내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
<p>내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
<hr size="10" width="100%" align="center" title="구분선입니다.">
<p>내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~ 내용이 어쩌구 저쩌구 블라블라~</p>
</body>
</html>■ 실행 화면
728x90
'웹페이지' 카테고리의 다른 글
| HTML STEP 5 - LIST (0) | 2023.04.11 |
|---|---|
| HTML STEP 4 - STYLE (0) | 2023.04.11 |
| HTML STEP 2 - Heading (0) | 2023.04.11 |
| HTML STEP 1 - HTML 기초 (0) | 2023.04.10 |
| Eclipse Tomcat 연동 (0) | 2023.04.10 |
