자바,HTML로 페이지 하나 만드는데 질문드립니다.

안녕하세요 이제 컴공 1학년 마친 대학생입니다.

자바,HTML,CSS로 웹디자인해서 페이지를 하나 만들어야 하는데요,

작성된 텍스트를

폰트색상, 폰트크기, 글씨체, 정렬 방법, 배경이미지 바꾸기 를 할수 있게 만들어야합니다.

제가 할수 있는것까지 다 해봤는데,

폰트크기, 정렬 방법은 아무 반응이 없네요ㅜㅜ 어떻게해야 폰트크기와 정렬 바꿀수 있을까요...??

그리구 배경이미지를 바꾸려고 하는데 도저히 생각이 안납니다..

input type="file" 로 해서 이미지를 불러와도 그다음에 사용법을 잘모르겠어요..

아래에 소스코드 넣어드립니다.

아직 내공이 부족해서 소스가 너무 기네요..ㅜㅜ 양해부탁드립니다.

<!DOCTYPE html>
<html>
<head>

function colorChange() {
var a=document.getElementById("color");

if(a.value=="blue")
document.getElementById("main").style.color="blue";

else if(a.value=="red")
document.getElementById("main").style.color="red";

else if(a.value=="yellow")
document.getElementById("main").style.color="yellow";

else if(a.value=="green")
document.getElementById("main").style.color="green";

else if(a.value=="black")
document.getElementById("main").style.color="black";
}

function sizeChange() {
var b=document.getElementById("size");

if(b.value=="10px")
document.getElementById("main").style.fontsize="10px";

if(b.value=="11px")
document.getElementById("main").style.fontsize="11px";

if(b.value=="12px")
document.getElementById("main").style.fontsize="12px";

if(b.value=="13px")
document.getElementById("main").style.fontsize="13px";

if(b.value=="16px")
document.getElementById("main").style.fontsize="16px";

if(b.value=="20px")
document.getElementById("main").style.fontsize="20px";

if(b.value=="24px")
document.getElementById("main").style.fontsize="24px";

if(b.value=="30px")
document.getElementById("main").style.fontsize="30px";

}

function shapeChange() {
var c=document.getElementById("shape");

if(c.value=="Times New Roman")
document.getElementById("main").style.fontFamily="Times New Roman, Times, serif";

else if(c.value=="Georgia")
document.getElementById("main").style.fontFamily="Georgia, cursive";

else if(c.value=="Garamond")
document.getElementById("main").style.fontFamily="Garamond";

else if(c.value=="Arial")
document.getElementById("main").style.fontFamily="Arial, Helvetic, sans-serif";

else if(c.value=="Verdana")
document.getElementById("main").style.fontFamily="Verdana, Monospace";

else if(c.value=="Courier New")
document.getElementById("main").style.fontFamily="Courier New, fantasy, serif";
}

function positionChange() {
var d=document.getElementById("position");

if(d.value=="left")
document.getElementById("main").style.textalign="left";

else if(d.value=="right")
document.getElementById("main").style.textalign="right";

else if(d.value=="center")
document.getElementById("main").style.textalign="center";
}

</script>
</head>

콩 타작을 하였다.<br/><br/>

콩들이 마당으로 콩콩 튀어나와<br/><br/>

또르르 또르르 굴러간다.<br/><br/>

콩 잡아라, 콩 잡아라 <br/><br/>

굴러가는 저 콩 잡아라<br/><br/>

콩 잡으로 가는데<br/><br/>

어, 어 저 콩 좀 봐라<br/><br/>

쥐 구멍으로 쏙 들어 가네<br/><br/>

콩 너는 죽었다.
</h4>
<form>
폰트색상:<select id="color">
<option value="blue">파랑</option>
<option value="red">빨강</option>
<option value="yellow">노랑</option>
<option value="green">초록</option>
<option value="black">검정</option>
</select>
<input type="button" onclick="colorChange()" value="변경"><br/>

폰트크기:<select id="size">
<option value="10px">10px</option>
<option value="11px">11px</option>
<option value="12px">12px</option>
<option value="13px">13px</option>
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="24px">24px</option>
<option value="30px">30px</option>
</select>
<input type="button" onclick="sizeChange()" value="변경"><br/>

글씨체:<select id="shape">
<option value="Times New Roman">Times New Roman</option>
<option value="Georgia">Georgia</option>
<option value="Garamond">Garamond</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Courier New">Courier New</option>
</select>
<input type="button" onclick="shapeChange()" value="변경"><br/>

정렬:<select id="position">
<option value="left">왼쪽 정렬</option>
<option value="center">가운데 정렬</option>
<option value="right">오른쪽 정렬</option>
</select>
<input type="button" onclick="positionChange()" value="변경"><br/>

배경설정:<input type="file" accept="image/jpg, image/png" id="image">
</form>

</body>
</html>