글
<HR> 선그리기
HTML
2011. 6. 29. 19:49
안녕하세요?
저번에는 <B>,<I>에 대해서 배웠습니다.
오늘은 화면에 선그리는 것을 배워보도록 하겠습니다.
태그명은 <HR> 입니다.
먼저 그냥 <HR>을 사용했을때 예입니다. 흔히들 디폴트라고 하지요. 인자가 여러개 있을때 기존에 정해져 있는 것으로 한다는 뜻입니다.
<html>
<head>
<title>선그리기</title>
</head>
<body>
여기와 아래를 구분하는 선을 그립니다. <br>
<HR>
여기는 선이 그려진 다음의 문장입니다.
</body>
</html>
먼저 글자를 쓰고 다음줄로 넘어가서 선을 긋는거지요. 그다음에 다시 문장을 쓰고...이런식으로 되어있습니다. 실행해보면 알겠죠?
보시다시피 선의 굵기가 SIZE가 커짐에 따라 굵어지는 것을 보실수 있을 것입니다.
그다음으로 WIDTH 속성에 대해 알아볼까요? WIDTH하면 넓이라는 뜻이잖아요. 그럼 아시겠죠? 선의 옆으로 넒이를 조절하는 것이 되겠습니다. 사용법은
<HR WIDTH=100> 또는 <HR WIDTH=70%>
이렇게 씁니다. 뒤에 100이라는 것은 100픽셀(픽셀은 화면에서 한점이 1픽셀입니다.)만큼 선을 그리라는 거고 %는 화면의 %를 나타냅니다. 70%라고 하면 현재화면의 70%만 그리라는 말입니다.
그럼 이것도 예제를 한번 보도록 할까요?
<html>
<head>
<title>선그리기</title>
</head>
<body>
WIDTH=100의 선입니다. 100픽셀넓이만큼 선이 그려집니다.<br>
<HR WIDTH=100>
WIDTH=60의 선입니다. 60픽셀만큼 선이 그려집니다.<br>
<HR WIDTH=60>
WIDTH=50%의 선입니다. 화면넓이의 반(50%)만큼 선이 그려집니다.<br>
<HR WIDTH=50%>
</body>
</html>
예제를 보면 100으로 하나 그리고, 60으로 하나그리고 화면의 50%로 하나 그린다는 것을 알 수 있을 것입니다. 그럼 결과를 한번 볼까요?
첫번째로 100픽셀만큼 그려지고 두번째로 60픽셀만큼 그려지고 세번째로 화면의 50% 즉, 반으로 그려집니다.
그다음 속성으로 ALIGN이라는 것이 있는데 이것 어디서 봤죠? P태그할때 나왔었지요. LEFT하면 왼쪽, CENTER하면 가운데, RIGHT하면 오른쪽으로 정렬되는거 했잖아요. HR도 똑같습니다. <HR WIDTH=100 ALIGN=LEFT> 이렇게 하면 100픽셀의 선으로 그리는데 왼쪽에 맞게 정렬되어 그리라는 것입니다. 그럼 예제를 한번 보도록 하겠습니다.
<html>
<head>
<title>선그리기</title>
</head>
<body>
WIDTH=100의 선입니다. 왼쪽 정렬입니다.<br>
<HR WIDTH=100 ALIGN=LEFT>
WIDTH=60의 선입니다. 가운데정렬입니다.<br>
<HR WIDTH=60 ALIGN=CENTER>
WIDTH=50%의 선입니다. 오른쪽 정렬입니다.<br>
<HR WIDTH=50% ALIGN=RIGHT>
</body>
</html>
예제를 보면 100픽셀로 선을 그리고 정렬은 왼쪽 정렬을 합니다. 그리고 60픽셀로 선을 그리고 정렬은 가운데 정렬을 합니다. 그리고는 50%로 선을 그리고 오른쪽 정렬을 합니다. 이해하시겠지요? 그럼 결과를 한번 보도록 하겠습니다.
이런식으로 나타나네요. 이해하셨죠?
오늘은 선그리기에 대해서 배워봤습니다. 이해못하신 분들은 다시 한번 차근차근 실행해 보시기 바랍니다. 그럼 다음시간에 또 만나요~!
저번에는 <B>,<I>에 대해서 배웠습니다.
오늘은 화면에 선그리는 것을 배워보도록 하겠습니다.
태그명은 <HR> 입니다.
먼저 그냥 <HR>을 사용했을때 예입니다. 흔히들 디폴트라고 하지요. 인자가 여러개 있을때 기존에 정해져 있는 것으로 한다는 뜻입니다.
<html>
<head>
<title>선그리기</title>
</head>
<body>
여기와 아래를 구분하는 선을 그립니다. <br>
<HR>
여기는 선이 그려진 다음의 문장입니다.
</body>
</html>
먼저 글자를 쓰고 다음줄로 넘어가서 선을 긋는거지요. 그다음에 다시 문장을 쓰고...이런식으로 되어있습니다. 실행해보면 알겠죠?
위의 그림처럼 위의 문장과 아래문장 사이에 선이 하나 그어졌습니다. 이게 <HR>태그입니다. 그럼 어떻게 선에 효과를 주는지 인자들을 하나씩 배워보도록 합시다. 먼저 SIZE인자입니다. 크기라는 뜻이지요. 말그대로 선의 굵기를 나타냅니다. 얼마나 뚜껍게 선을 그려야 할지를 나타내는 거지요. 그럼 예제를 한번 보도록 하지요.
<html>
<head>
<title>선그리기</title>
</head>
<body>
SIZE=2의 선입니다.<br>
<HR SIZE=2>
SIZE=10의 선입니다.<br>
<HR SIZE=10>
SIZE=35의 선입니다.<br>
<HR SIZE=35>
SIZE=100의 선입니다.<br>
<HR SIZE=100>
</body>
</html>
보시면 아시겠지만 SIZE값이 변합니다. 그 크기대로 선을 그리라는 말입니다.
그럼 실행해볼까요?
보시다시피 선의 굵기가 SIZE가 커짐에 따라 굵어지는 것을 보실수 있을 것입니다.
그다음으로 WIDTH 속성에 대해 알아볼까요? WIDTH하면 넓이라는 뜻이잖아요. 그럼 아시겠죠? 선의 옆으로 넒이를 조절하는 것이 되겠습니다. 사용법은
<HR WIDTH=100> 또는 <HR WIDTH=70%>
이렇게 씁니다. 뒤에 100이라는 것은 100픽셀(픽셀은 화면에서 한점이 1픽셀입니다.)만큼 선을 그리라는 거고 %는 화면의 %를 나타냅니다. 70%라고 하면 현재화면의 70%만 그리라는 말입니다.
그럼 이것도 예제를 한번 보도록 할까요?
<html>
<head>
<title>선그리기</title>
</head>
<body>
WIDTH=100의 선입니다. 100픽셀넓이만큼 선이 그려집니다.<br>
<HR WIDTH=100>
WIDTH=60의 선입니다. 60픽셀만큼 선이 그려집니다.<br>
<HR WIDTH=60>
WIDTH=50%의 선입니다. 화면넓이의 반(50%)만큼 선이 그려집니다.<br>
<HR WIDTH=50%>
</body>
</html>
예제를 보면 100으로 하나 그리고, 60으로 하나그리고 화면의 50%로 하나 그린다는 것을 알 수 있을 것입니다. 그럼 결과를 한번 볼까요?
첫번째로 100픽셀만큼 그려지고 두번째로 60픽셀만큼 그려지고 세번째로 화면의 50% 즉, 반으로 그려집니다.
그다음 속성으로 ALIGN이라는 것이 있는데 이것 어디서 봤죠? P태그할때 나왔었지요. LEFT하면 왼쪽, CENTER하면 가운데, RIGHT하면 오른쪽으로 정렬되는거 했잖아요. HR도 똑같습니다. <HR WIDTH=100 ALIGN=LEFT> 이렇게 하면 100픽셀의 선으로 그리는데 왼쪽에 맞게 정렬되어 그리라는 것입니다. 그럼 예제를 한번 보도록 하겠습니다.
<html>
<head>
<title>선그리기</title>
</head>
<body>
WIDTH=100의 선입니다. 왼쪽 정렬입니다.<br>
<HR WIDTH=100 ALIGN=LEFT>
WIDTH=60의 선입니다. 가운데정렬입니다.<br>
<HR WIDTH=60 ALIGN=CENTER>
WIDTH=50%의 선입니다. 오른쪽 정렬입니다.<br>
<HR WIDTH=50% ALIGN=RIGHT>
</body>
</html>
예제를 보면 100픽셀로 선을 그리고 정렬은 왼쪽 정렬을 합니다. 그리고 60픽셀로 선을 그리고 정렬은 가운데 정렬을 합니다. 그리고는 50%로 선을 그리고 오른쪽 정렬을 합니다. 이해하시겠지요? 그럼 결과를 한번 보도록 하겠습니다.
이런식으로 나타나네요. 이해하셨죠?
오늘은 선그리기에 대해서 배워봤습니다. 이해못하신 분들은 다시 한번 차근차근 실행해 보시기 바랍니다. 그럼 다음시간에 또 만나요~!
'HTML' 카테고리의 다른 글
| marquee태그 움직이는 글자 (1) | 2011.07.04 |
|---|---|
| <a href></a>, 새창으로 문서이동하기 (0) | 2011.07.01 |
| <B> <I> 태그 (0) | 2011.06.29 |
| <H>,<FONT SIZE> 태그 (0) | 2011.06.28 |
| <CENTER,<P>,<BR>,<P ALIGN> 태그 배우기 (2) | 2011.06.26 |
