test_wholesize.html
mystyle.csshtml화일 코드는 다음과 같습니다.
<html>
<head>
<title>Insert Portfolio Site Title</title>
<!-- 전체 웹사이트에 공통적으로 적용하는 텍스트나 테이블, 백그라운드 색상들을 external css로 연결 -->
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<center>
바깥에 텍스트 표시
<table width=100% border=1>
<tr>
<!-- CSS의 특정 클라스를 반영하는 경우 -->
<td width=150><div class="menu">english좌측</div> 고정경우<br><a href="#">첫번째메뉴</a><br>두번째메뉴<br><a href="#">세번째메뉴</a><br>
네번째메뉴</td>
<td><div class="content">브라우저창을</div> 움직여보면 우측은 사이즈가 변하는것을 볼수 있음</td>
</tr>
</table>
</center>
</body>
</html>
여기서 가져오는 css화일은 mystyle.css로 지정하고 위의 html과 동일한 폴더에 위치합니다. 들어가는 코드는 다음과 같습니다.
<!-- 전체 웹브라우저 창에서 여백을 넣고 싶지 않을때 margin을 위아래좌우 모두 0으로 설정 -->
body
{
margin: 0px 0px 0px 0px;
background-color:red;
font-family:"굴림",Gulim,AppleGothic,Arial,Helvetica,Clean,Sans-serif;
font-size:24px;
}
<!-- 링크 보이는 형태를 정의해줌 -->
A
{ color: #3366cc; text-decoration:none;}
A:link
{ color: #3366cc; text-decoration: none;}
A:visited
{ color: #3366cc; text-decoration: none;}
A:active
{ color: #FFFFFF; background:#3366cc; text-decoration: none; }
A:hover
{ color: #FFFFFF; background:#3366cc; text-decoration: none; }
Div.menu { font-size:10px; font-colot:blue;}
Div.content { font-size:24px; font-colot:green;}
<!-- 사이트의 모든 테이블에서 , 여백도 없애고 싶을때 -->
table
{
border-collapse:collapse;
border-spacing:0;
}
<!-- 테이블 셀내에서 글씨를 상단에 정렬하고 싶을때 -->
td
{
vertical-align:top;
margin:0;
padding:0;
}
<!-- 사이트의 모든 이미지에서 바깥선을 없애고 싶을때 -->
img
{border:0;}
------------------------------------------------------
위 두개의 화일을 첨부하니 같은 폴더에 넣어보고 테스트해보기 바랍니다.