오늘은 기본적으로 알아 둘 내용의 글을 올렸습니다, 다음 기회에 좀더 다루도록 하겠습니다.
★ 스타일 시트
앞에서 말한 html은 웹에서 같은 내용의 문서를 만들 때 사용할 수 있지만
화려하게 잘 만들려면 다양한 태그 상식을 알고 있어야 되므로 한계를 나타냅니다.
CSS (cascading stylesheet)라는 것을 이용하여 불가능 했던 효과를 적용하게 되므로
요즘은 스타일 시트로 대체되고 있어 나 만의 개성 있는 웹페이지를 제작할 수 있다.
HTML 웹페이지를 만들 때 스타일 시트를 직접 적용하려면
< HEAD> 와 </ HEAD> 사이에 정의를 한다
<HTML> < HEAD>
< TITLE> 문서 제목 </ TITLE >
< STYLE TYPE = " text /cess">
<! 스타일 시트 ---- >
</style>
</ HEAD>
<BODY>
본문 내용
< / BODY> </HTML>
외부에서 CSS확장자로 스타일 시트 파일을 만들어 두고 참조할 때
<LINK REL = "stylesheet" HREF =" CSS파일경로 " TYPE="text/css")로 정의한다.
스타일 시트를 ㄹ불러 오기(임포트)할 때 위와 비슷한 방법으로 @ import url(css파일경로);
만약 전체가 아닌 특정 태그에만 스타일 시트를 적용할 때는 적용할 태그 이름으로 정의한다.
<HEAD> 태그 내에 미리 스타일을 정의한다.
<HTML>
<HEAD >
<title> 문서제목 </ title>
<STYLE TYPE = "text /css" >
<!- - 태그이름 { 스타일 시트}
--->
</ STYLE>
</HEAD>
<BODY>
본문내용
< /BODY>
</HTML>
테이블 시트 안에서 스타일 시트가 잘 적용되지 않으면 class로 정의 한다면 잘 될 수 있다.
<BODY>
<TABLE>
< td width ="126" class = " menu= style " > <a href =" 링크할 웹문서 주소 ">
첫 번째 메뉴 </a>< /td>
</table>< / body> < / html>
</ HTML>
" http://www.sourcenara. com/xxx.css"
TYPE= "text /css">
</HEAD >
<BODY> 본문내용 </BODY>
< /HTML>
CSS를 함께 사용하여 페이지를 만들 때 그래도 html 태그를 조금 더 알 고 있으면 만드는데 조금은 쉬울 것입니다.
다양한 컴퓨터 환경에서 사용 가능한 하이퍼텍스트 웹문서를 만들려면 HTML언어 규약에 따라 만들어야 됩니다.
윈도우 운영체계에 있는 메모장이나 워드패드와 같은 텍스트에디터를 사용하여 하이펴텍스트로 작성합니다.
홈페이지를 만들 때 HTML문법에 대하여 좀 더 알고 있으면 더 효과적인 페이지를 만들 수 있습니다.
인터넷 사용자 누구나 아주 간단한 방법으로 인터넷상에 공개할 수 있으니까요.
주소 줄에 입력하는 WWW (world wide web)의 장점입니다.
기본적인 구조를 셈세하게 지정하려면 글자색, 크기, 글꼴, 이미지크기 ,위치 등.....
제작을 위하여 HTML(hyper makup llanguafe)의 명령어를 조금 배워야 됩니다.
홈페이지 제작은 제일 위 시작을 알리는 <html>입력으로 작업을 시작 합니다.
HTML 문법은 기호< >를 시작을 나타내고 마침은 </> 을 의미합니다.
기호 속에 명령어를 담아 표현됩니다.
<html > 홈페이지 시작
<head > 헤더 시작
</head>
<body > 몸체 부분
</body >
</html > 홈페이지 끝
창 타이틀이나 크기, 기본 경로 들을 설정하며
창 분할등으로 자신의 의도를 형식에 맞게 명령어로 나타냅니다.
<title> 문장</ title >
글꼴의 크기는 <h 숫자> 문장 </h>
숫자는 1 ~ 6까지며 숫자가 6이면 제일 작은 크기며 1이 제일큰 크기입니다.
글자의 위치 정렬은 왼쪽 오른쪽 가운데로 위치를 나타냅니다.
left , center, right
대한민국을 굵게 , 나라사랑을 중심에 나타내려는 형식은
<H1 >대한민국 </H1>
<H3 align=center> 나라사랑 </H3>
색상을 나타내는 형식은
<font color = 색상 값> 문장 </font>
글꼴 형식.
<font face= " 서체 이름" </font>
문단 정렬
문장을 여려 줄로 입력할 때 전체를 어느 위치에 보일 것인가를 나타냅니다.
Left, center, right
<DIV ALIGN = 위치> 문단 </div>
<DIV ALIGN = left> </div>
홈페이지의 문장( 한 줄)은 자판의 Enter로 줄바꿈을 하지 않고
<br> </br> ,<p> </p> <pre> </pre> 형식으로
문단 한줄 한줄도 어떤 모양으로 나타낼 것인지 태그로 명령합니다.
<br> 해당 위치에서 enter을 1번 한 것과 같다.
<P> 해당 위치에서 enter을 2번 한 것과 같다.
<pre> 문단 서두에 <pre>를 입력하면 문단 전체를 입력한 모양 그대로 나타내 줍니다.
문장 전체를 어느 위치에 둘 것인가도 태그 < LEFT /RIGHT / CENTER> 로 명령합니다.
<P ALIGN = LEFT /RIGHT / CENTER> 문장 < /p>
★ 문서 리스트 만들기
UL ... OL
문서에 항목 리스트를 만들려면 UL은 순서 없는 목록을 나타내는 태그.
OL은 순서 있는 목록을 만드는 태그입니다.
목록에서 순서를 나타낼 때는 LI 태그를 명령하고 사용할 기호 모양을 저정합니다.
disk, circls , square ●○■
< UL TYPE = disk /circle /square>
<LI TYPE = disk > 항목명
</UL>
순서 있는 목록 형식
<OL TYPE =A/a/I/i/1 START = 숫자>
< LI TYPE =A/a/I/i/1 START = 숫자> 항목명
</OL>
★ 표형식 그림 나타내기
그림을 나타낼 때 배경, 테두리, 선 등을 태그로 설정할 수 있습니다.
이미지도 하나 또는 다수를 나타낼 때 어떤 모양으로 배치 시킬 것인가도 태그로 명령합니다.
그림을 하나의 사각형 안에 나타내려면 사각형 즉 테두리 굵기, 색갈, 배경색을 지정할 수 있습니다,
그리고 여러 그림을 넣으려면 그림사이 간격도 태그로 명령합니다.
기본 형식은
<img src = " 그림 파일명">
표 형식
<table border = 숫자
bgcolor ...배경색
cellpadding ... 표 내부 여백
cellspacing ... 셀 내부 간격
align ... 좌우 정렬
valign ... 상하 정렬
< tr .... 새로운 행을 만든다.
< td ....데이터 셀을 만든다
< th ... 제목 셀을 만든다.
rowspan =숫자 ... 행을 숫자 만큼 합친다.
colspan= 숫자 ... 열을 숫자 만큼 합친다.
그림의 가로 세로 크기를 나타낼 때는
<img src = " 그림 파일명" width = 200 height = 300 >
그림을 표안에 놓는 모양을 할 때는 border태그
<img src = " 그림 파일명. jpg" border =5 width = 200 height = 300 >
★ 링크 나타내기
기본 형식은 <a href = url> 문장 < /a>
★ 창 분할 나타내기
창분할은 창을 나누어질 방향과 비율을 명령한다.
기본형식은
<frameset cols = " 30%, 70%"> 또는
<frameset rows = " 30%, 70%">
'IT- 컴퓨터 기초' 카테고리의 다른 글
Html 배우기 (0) | 2024.01.16 |
---|