CSS 수평 리스트, 테이블
2019. 10. 22. 10:47
Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
text-align:center;
border-top: 1px solid red; border-bottom:1px solid red; padding : 10px;
}
ul li{
display:inline;
padding:10px;
letter-spacing:10px
}
ul li a{ text-decoration:none; color:black;}
ul li a:hover{ text-decoration:underline;}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
background:green url(image.png) right;
background-repeat: no-repeat;
}
ul{
text-align:center;
width:50%;
margin-left:auto;
margin-right:auto;
border-top: 1px solid red; border-bottom:1px solid red; padding : 10px;
}
ul li{
display:inline;
padding:10px;
text-align:center;
letter-spacing:10px
}
ul li a{ text-decoration:none; color:black;}
ul li a:hover{ text-decoration:underline; background:black; color:red;}
div.one {
margin-left:auto;
margin-right:auto;
width:50%;
border: 5px dotted red;
background:yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">WEB_PROGRAMING</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVACRIPT</a></li>
</ul>
<div class="one">과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었다. 다시 말해서 온갖 레이아웃, 디자인 정보를 HTML 안에 욱여넣다 보니 HTML의 본연의 목적인 구조화된 문서가 아닌 디자인을 위한 문서로 전락하고 말았다. 표를 작성해야 하는 <table> 태그가 레이아웃을 구성하는 용도로 쓰이는 등으로 인해 HTML 소스코드만 보면 이 문서가 어떤 문서인지 전문가조차 알기 힘든 상황이었다.[2]
</div>
</div>
</body>
</html>
테이블
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table{
width:100%;
}
table,th,td{
border: 1px dotted gray;
}
#at1{
background-color:blue;
color:white;
}
#at2{
background-color:yellow;
color:black;
}
td{
text-align:center;
}
</style>
</head>
<body>
<table border="1">
<caption>VIP 고객리스트</caption>
<tr>
<td id="at1">학과</td>
<td id="at1">성명</td>
<td id="at1">휴대폰</td>
</tr>
<tr>
<td rowspan="4">스마트미디어</td>
<td>김철수</td>
<td>010-1111-1111</td>
</tr>
<tr>
<td id="at2">김영희</td>
<td id="at2">010-1111-1112</td>
</tr>
<tr>
<td>김희</td>
<td>010-1111-1113</td>
</tr>
<tr>
<td id="at2">희s</td>
<td id="at2">010-1111-1114</td>
</tr>
</body>
</html>
'Programing > Web Programming' 카테고리의 다른 글
| HTML 마우스 올리면 사이즈 조절 (0) | 2019.10.31 |
|---|---|
| HTML 투명도 (0) | 2019.10.31 |
| img,video,audio 삽입 | table | fieldset | input | button (0) | 2019.10.10 |
| IIS 서버 HTML (0) | 2019.10.01 |
| 웹프로그래밍 2. 테이블 (0) | 2019.09.17 |