라라리라
2023.08.09 / CSS2 - 코딩 21 일차 본문
0201_리스트스타일.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul.a { list-style-type: circle; }
ul.b { list-style-type: disc; }
ul.c { list-style-type: square; }
</style>
</head>
<body>
<ul class="a">
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="b">
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="c">
<li>HTML5</li>
<li>CSS3</li>
<li>JAVASCRIPT</li>
</ul>
</body>
</html>
0202_리스트들여쓰기.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.inside { list-style-position: inside; } /* 목록 들여쓰기 */
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ul>
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
<ul class="inside">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
</body>
</html>
0202_리스트불릿삭제.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.book1 {
list-style-type:none; /* 불릿 없앰 */
}
.book2 {
list-style-type: upper-alpha; /* 알파벳 대문자 */
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ul class="book1">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ol>
</body>
</html>
0203_테이블.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* table, td, th 요소의 경계선을 1픽셀 두께의 파란색 실선으로 설정 */
table, td, th {
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
</table>
</body>
</html>
0204_테이블테두리삭제.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* table, td, th 요소의 경계선을 1픽셀 두께의 파란색 실선으로 설정 */
table, td, th {
border: 1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
</table>
</body>
</html>
0205_테이블컬러.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
th {
background-color: green;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
</table>
</body>
</html>
0206_링크1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
*/
a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; }
a:active { color: yellow; }
</style>
</head>
<body>
<p><a href="#" target="_blank">여기가 링크입니다.</a> </p>
</body>
</html>
0207_링크2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a.style1:hover { font-size: 150%; }
a.style2:hover { background: #66ff66;}
</style>
</head>
<body>
<p>마우스를 올려놓으면 스타일이 변경됩니다.</p>
<p><a class="style1" href="#" target="_blank">
폰트크기를 변경하는 링크</a></p>
<p><a class="style2" href="#" target="_blank">
배경색을 변경하는 링크</a></p>
</body>
</html>
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.11 / CSS4 - 코딩 23 일차 (0) | 2023.08.11 |
|---|---|
| 2023.08.10 / CSS3 - 코딩 22 일차 (0) | 2023.08.10 |
| 2023.07.21 / HTML 4- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.21 / HTML 3- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.20 / HTML 2- 코딩 1 일차 (0) | 2023.07.20 |