초기엔 모든 홈페이지가 간단한 몇가지 HTML 명령어로 쉽게 만들어 졌어요.
조금 멋지게 보이려며 움직이는 플래쉬파일을 삽입하고
화면 구성은 화면을 커다란 표<table>로 분할해서 각각의 셀 영역에 디자인을 포함시켰죠.
하지만 요즘은 이 방법을 쓰지않고
평균적인 웹표준에 맞게 규정을 정한 HTML 문서로 본문만 쓰고,
복잡하고 화려한 디자인은 CSS로 분리해서 만들어주게 되었어요.
그래서 오늘은 <table>표형식 대신
박스<DIV>, 줄<p>로 화면을 구성하고
여기에 CSS명령어<style>로 디자인을 꾸며볼게요
1. HTML로 <div>두개랑 <p>하나로 화면을 만들어요.
<body> 본문시작
<h1> 박스 두개 </h1> 헤드라인 글씨
<div> 블럭박스 만들기
안녕하세요.<br>
저의 그림작품 전시합니다.<br>
무궁화 삼천리 화려강산<br>
대한사람 대한으로 길이 보전하세<br>
이기상과 이맘으로 충성을다 하여 <br>
괴로우나 즐거우나 나라 사랑하세<br>
무궁화 삼천리 화려강산 <br>
대한사람 대한으로 길이 보전하세<br>
</div> 블럭박스 닫기
<br> 한줄 띄기
<br> 한줄 띄기
<p> 딸기 </p> 한문단 열고 닫기.
<div>
<img그림을 한장 넣어요>
</div> 박스 닫기.
</body> 본문닫기.
요렇게 간단한 본문이 완성되었어요.
2. 이제 여기에 CSS명령어를 이용해서 꾸며주기만하면 돼요.
CSS명령어는 <style> </style> 명령어로 만듭니다.
<헤드>안에 <스타일> 명령어를 넣어서 <body>색을 지정해줄게요.
<head>
<style>
body{backround-color:pink;}
</style>
</head>
3.이번엔 본문body전체가 아니라 div박스에만 색을 지정해줄게요.
<head>
<style>
div{backround-color:pink;}
</style>
</head>
4. 자 이번엔 <div>박스에 Id 이름을 만들어주고
<style>명령어를 써볼게요.
<div id="song">
안녕하세요.<br>
생략....
</div>라고 바꿔주고
<style>의 명령어는
#song{background-color:pink;} 로 바꾸고 저장.
5. 이번엔 두번째 박스를 <div 클래스>로 변경해서 이름도 만들어 줄게요.
<div class="strawberry">
<그림>
</div>
<style>의 명령어는
#song{background-color:pink;}
.strawberry{background-color:red;} 로 바꾸고.
p{background-color:yellow;}도 색을 지정해봤어요.
댓글