웹페이지

HTML STEP 3 - HR

2023. 4. 11. 11:48
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
'웹페이지' 카테고리의 다른 글
  • HTML STEP 5 - LIST
  • HTML STEP 4 - STYLE
  • HTML STEP 2 - Heading
  • HTML STEP 1 - HTML 기초
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • 알고리즘
  • 프론트엔드
  • DBA
  • 코딩테스트
  • 웹개발자
  • IT개발자
  • ajax
  • IT자격증
  • 개발블로그
  • it
  • 백준
  • 개발자
  • 정보처리기사필기
  • DB
  • React
  • 데이터베이스
  • 자바
  • 정보보안전문가
  • html
  • 백엔드
  • css
  • java
  • jsp
  • 앱개발자
  • IT자격증공부
  • jquery
  • 웹개발
  • 정보처리기사
  • JavaScript
  • 웹페이지

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
HTML STEP 3 - HR
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.