JunO3O
배경 속성
배경 속성
2023. 3. 21. 03:04ㆍCSS
배경 속성(background)
: 배경에 이미지나 색상을 입력할 경우 배경 속성을 사용해 지정합니다.
| 속성 | 설명 |
| background-image | 배경 이미지 삽입 |
| background-size | 배경 이미지의 크기 지정 |
| background-repeat | 배경 이미지의 반복 형태 지정 |
| background-attachment | 배경 이미지의 부착 형태 지정 |
| background-position | 배경 이미지의 위치 지정 |
| background | 한 번에 모든 배경 속성 입력 |
ㅁ 배경 이미지 삽입 및 크기 지정
: background-image 속성은 배경 이미지를 지정하는 속성으로 스타일 값에는 URL 단위나 그레이디언트를 입력합니다.
: 배경 이미지 크기는 background-size 속성으로 조정하고 크기 단위나 키워드를 입력할 수 있습니다.
: 크기 단위로는 퍼센트를 많이 사용하고, 너비와 높이 값 2개를 입력할 수 있습니다.
background-image : url();
background-size : 크기;
ㅁ 배경 이미지 1개 삽입하기
: 배경 이미지를 넣을 때는 background-image 속성을 사용합니다.
<!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>
<style>
body {
background-image: url(https://images.pexels.com/photos/2662116/pexels-photo-2662116.jpeg?cs=srgb&dl=pexels-jaime-reimer-2662116.jpg&fm=jpg);
}
</style>
</head>
<body>
</body>
</html>
ㅁ 배경 이미지의 너비 조정하기
: background-size 속성을 사용하여 배경 이미지 크기를 조절할 수 있습니다.
<!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>
<style>
body {
background-image: url("/Files/winter.jpg");
background-size: 100%;
}
</style>
</head>
<body>
</body>
</html>
ㅁ 배경 이미지의 높이 조절하기
: background-size 속성에서 두 번쨰로 입력하는 크기 단위는 높이를 의미합니다.
: 아래 소스에서는 250px 이 높이 값이 됩니다.
<!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>
<style>
body {
background : url('/Files/background.jpeg');
background-size: 100% 250px;
}
</style>
</head>
<body>
</body>
</html>
ㅁ 배경 이미지 반복, 부착 형태, 위치
: background-repeat 속성은 배경 이미지의 반복 형태를 지정합니다. 기본 키워드가 repeat 이기 때문에 패턴처럼 이미지가 반복됩니다.
: repeat를 입력하면 이미지를 패턴처럼 표시하고, repeat-x를 입력하면 x축 방향으로만 이미지가 반복되고, repeat-y를 입력하면 y축 방향으로만 이미지가 반복됩니다.
background-repeat : repeat-x;
background-repeat : repeat-y;
: background-attachment 속성은 배경 이미지를 화면에 고정하는 속성입니다.
: background-attachment 속성의 기본 키워드는 scroll 이며, 이는 화면 스크롤에 따라 배경 이미지가 함께 이동합니다.
background-attachment : scroll;
: 아이콘(스프라이트 이미지)를 만들 때는 background-position 속성을 사용합니다.
: background-position 속성은 배경 이미지의 배치 위치를 지정합니다.
background-position : 키워드;
background position : x축 위치;
background position : x축 위치 y축 위치;
ㅁ 배경 이미지 반복 없애기
: background-repeat 속성에 no-repeat 키워드를 입력하면 반복 없이 배경 이미지가 적용됩니다.
<!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>
<style>
body {
background-image : url('/Files/background.jpeg'), url('/Files/background.jpeg');
background-size : 100%;
background-repeat : no-repeat;
}
</style>
</head>
<body>
</body>
</html>
ㅁ 이미지에 스크롤 가능한 텍스트 추가하기
: background-attachment : scroll 키워드를 적어주면 스크롤을 할 수 있습니다.
<!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>
<style>
body {
background-color: #777777;
background-image: url("/Files/background.jpeg"),
url("/Files/background.jpeg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>스크롤이 가능한 텍스트를 추가하였습니다.</h1>
<p>이미지와 함께 텍스트를 출력할 수 있습니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
<p>스크롤이 되나 테스트하기 위해 긴 글을 적어봅니다.</p>
</body>
</html>
ㅁ 배경 이미지 화면에 고정시키기
: background-attachment 속성 값에 fixed를 입력하면 스크롤을 이동해도 배경 이미지가 고정됩니다.
<!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>
<style>
body {
background-color: #777777;
background-image: url("/Files/background.jpeg"),
url("/Files/background.jpeg");
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
1212121212121212121212121212121212121212121212<br />
1313131313131313131313131313131313131313131313<br />
1414141414141414141414141414141414141414141414<br />
1515151515151515151515151515151515151515151515<br />
1616161616161616161616161616161616161616161616<br />
1717171717171717171717171717171717171717171717<br />
1818181818181818181818181818181818181818181818<br />
1919191919191919191919191919191919191919191919<br />
2020202020202020202020202020202020202020202020<br />
ㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄱ<br />
ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ<br />
ㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸ<br />
ㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹ<br />
ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ<br />
ㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅂ<br />
ㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅅ<br />
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ<br />
ㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉ<br />
ㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊ<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
1212121212121212121212121212121212121212121212<br />
1313131313131313131313131313131313131313131313<br />
1414141414141414141414141414141414141414141414<br />
1515151515151515151515151515151515151515151515<br />
1616161616161616161616161616161616161616161616<br />
1717171717171717171717171717171717171717171717<br />
1818181818181818181818181818181818181818181818<br />
1919191919191919191919191919191919191919191919<br />
2020202020202020202020202020202020202020202020<br />
ㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄱ<br />
ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ<br />
ㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸ<br />
ㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹ<br />
ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ<br />
ㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅂ<br />
ㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅅ<br />
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ<br />
ㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉ<br />
ㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊ<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
1212121212121212121212121212121212121212121212<br />
1313131313131313131313131313131313131313131313<br />
1414141414141414141414141414141414141414141414<br />
1515151515151515151515151515151515151515151515<br />
1616161616161616161616161616161616161616161616<br />
1717171717171717171717171717171717171717171717<br />
1818181818181818181818181818181818181818181818<br />
1919191919191919191919191919191919191919191919<br />
2020202020202020202020202020202020202020202020<br />
ㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄲㄱ<br />
ㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴㄴ<br />
ㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸㄸ<br />
ㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹㄹ<br />
ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ<br />
ㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅃㅂ<br />
ㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅆㅅ<br />
ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ<br />
ㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉㅉ<br />
ㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊ<br />
</body>
</html>
ㅁ 배경 이미지 아래 쪽에 배치하기
: background-position 속성에 bottom 키워드를 입력하면 아래 쪽에 위치합니다.
<!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>
<style>
body {
background-color: #777777;
background-image: url("/Files/background.jpeg"),
url("/Files/background.jpeg");
background-size: 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
</head>
<body>
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
</body>
</html>
ㅁ 배경 이미지 위치 조정하기
: x축 위치와 y축 위치를 지정하는 값을 2개 입력하면 특정 위치에 이미지를 넣을 수 있습니다.
<!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>
<style>
body {
background-color: #777777;
background-image: url("/Files/background.jpeg"),
url("/Files/background.jpeg");
background-size: 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
</head>
<body>
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
1111111111111111111111111111111111111111111111<br />
2222222222222222222222222222222222222222222222<br />
3333333333333333333333333333333333333333333333<br />
4444444444444444444444444444444444444444444444<br />
5555555555555555555555555555555555555555555555<br />
6666666666666666666666666666666666666666666666<br />
7777777777777777777777777777777777777777777777<br />
8888888888888888888888888888888888888888888888<br />
9999999999999999999999999999999999999999999999<br />
1010101010101010101010101010101010101010101010<br />
</body>
</html>