VIEW/JAVASCRIPT

[javascript] html,css 기본문법

찰떡쿠키부스트 2017. 12. 1. 10:40

 

 

# 글자색상바꾸기 <font color="색상">

 

# 글자크기바꾸기 <font size="크기">

 

# 글자배경색상바꾸기 <h1 style="background:색상">  --->사실 css(Inline Sytle Sheet)

 

# 줄바꿈 <br/>

 

# 배경색상바꾸기 <body bgcolor="색상">

 

# 단락구분 <p>

 

# 입력한대로보여주기 <pre></pre>

 

# 공백한칸 &nbsp;

 

# 문단정렬하기   <div align="left|center|right"></div>

 

# 테두리지정하기


1. html문법
<table border="1" width="" height="">
       tr --> 줄   td  --> 칸

 

 

2. css문법 --> Embeded Style Sheet
<style type="text/css">
td {
 border-style:dotted;
 border-width:2px;
 border-color:red;
 width:50px;
 height:50px;
}
</style>

text-align:center;
background:yellow;

td class="s1"
.s1 {background:aquamarine;} // .class명 -->선택자 

 

 

# 이미지 삽입하기 168P

 

[ex]
<html>
<head>
<style type="text/css">
img { width:100px; height:100px; }
</style>
</head>
<body>
<img src="img2.jpg" />
</body>
</html>

 

# 이미지를 배경으로 불러오기 342p

 

[ex]
<html>
<head>
<style type="text/css">
img { width:100px; height:100px; }
body {
background : url(daum.png) no-repeat fixed right bottom;
}
</style>
</head>
<body>
<h1>
<script>
for(a=0; a<30; a++){
document.write("jdkasjfjsfjas;jfajfdsa");
document.write("jdkasjfjsfjas;jfajfdsa");
document.write("jdkasjfjsfjas;jfajfdsa<br/>");
}
</script>
</h1>
</body>
</html>


# 테두리 지정하기 360p

[ex]
<html>
<head>
<style type="text/css">
h1 {
border : solid navy 2px;
}
</style>
</head>
<body>
<h1>aaa</h1>
</body>
</html>

 

 

# 칸합치기

 

[ex]
<html>
<head>
<style type="text/css">
td { border:1px solid navy; }
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="3">7</td>
</tr>
</table>
</body>
</html>
 


# 줄합치기

 

[ex]
<html>
<head>
<style type="text/css">
td { border:1px solid navy; }
</style>
</head>
<body>
<table>
<tr><td>1</td><td rowspan="2">2</td></tr>
<tr><td>3</td></tr>
<tr><td rowspan="3">4</td><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
</body>
</html>
 
 

 

저작자표시 (새창열림)