Showing
1 changed file
with
84 additions
and
0 deletions
css_practice1.html
0 → 100644
| 1 | +<html> | ||
| 2 | +<style> | ||
| 3 | +h1 | ||
| 4 | +{ | ||
| 5 | + text-align: center; | ||
| 6 | +} | ||
| 7 | +a:link, a:visited | ||
| 8 | +{ | ||
| 9 | + text-decoration: none; | ||
| 10 | + color: black; | ||
| 11 | +} | ||
| 12 | +a:hover | ||
| 13 | +{ | ||
| 14 | + color: hotpink; | ||
| 15 | +} | ||
| 16 | +a.a1:link, a.a1:visited | ||
| 17 | +{ | ||
| 18 | + background-color: #50c964; | ||
| 19 | + color: white; | ||
| 20 | + padding: 15px 500px; | ||
| 21 | + text-align: center; | ||
| 22 | + display: inline-block; | ||
| 23 | + border-radius: 15px; /*상자의 끝을 둥글게 굴려주는 역할. 숫자가 클 수록 많이 굴려짐*/ | ||
| 24 | +} | ||
| 25 | +a.a1:hover | ||
| 26 | +{ | ||
| 27 | + background-color: #5060c9; | ||
| 28 | + color: #000; | ||
| 29 | +} | ||
| 30 | +/*클래스 쓰는 방법*/ | ||
| 31 | +li.inline_practice | ||
| 32 | +{ | ||
| 33 | + display: inline; | ||
| 34 | + margin-right: 10%; | ||
| 35 | +} | ||
| 36 | +table | ||
| 37 | +{ | ||
| 38 | + border-collapse: collapse; | ||
| 39 | + width: 50%;/*간격을 띄움*/ | ||
| 40 | +} | ||
| 41 | +table | ||
| 42 | +{ | ||
| 43 | + margin: 50px 50px; /*위와 왼쪽에 여백을 줌*/ | ||
| 44 | +} | ||
| 45 | +p | ||
| 46 | +{ | ||
| 47 | + /*왼쪽에만 선을 그림*/ | ||
| 48 | + border-left: 20px solid #50c964; | ||
| 49 | +} | ||
| 50 | +</style> | ||
| 51 | +<meta charset="utf-8"> | ||
| 52 | +<title>실습2</title> | ||
| 53 | +<body> | ||
| 54 | + <h1><a class = "a1" href="https://namu.wiki/w/%EB%B9%85%EB%B1%85">빅뱅</a></h1> | ||
| 55 | + <img src="http://pds21.egloos.com/pds/201502/10/79/b0215379_54da13e304e3e.jpg"/> <!--URL로 이미지를 넣음--> | ||
| 56 | + <ul> | ||
| 57 | + <li>구성원</li> | ||
| 58 | + <ul> | ||
| 59 | + <li>지드래곤</li> | ||
| 60 | + <li>태양</li> | ||
| 61 | + <li>탑</li> | ||
| 62 | + <li>대성</li> | ||
| 63 | + <li>승리</li> | ||
| 64 | + </ul> | ||
| 65 | + <li>설명</li> | ||
| 66 | + <p> | ||
| 67 | + <br/>2006년에 힙합 그룹으로 데뷔 한 YG엔터테인먼트 대표 아이돌이다.<br/> | ||
| 68 | + 2007년 10대들의 패션과 이후 쏟아져나온 아이돌 그룹의 컨셉에 크게 영향을 준 그룹이다.<br/> | ||
| 69 | + 힙합 컨셉을 정면으로 들고 나와 큰 성공을 거뒀다.<br/><br/> | ||
| 70 | + </p> | ||
| 71 | + | ||
| 72 | + <li>소속사 : <a href = "http://www.ygfamily.co.kr/" target="_blank">YG entertainment</a></li> <!--target="_blank"의 의미 : 새 탭에 띄운다.--> | ||
| 73 | + <br/> | ||
| 74 | + <li>앨범</li> | ||
| 75 | + <table border="0"> | ||
| 76 | + <tr> | ||
| 77 | + <td>Always</td> | ||
| 78 | + <td>Hot Issue</td> | ||
| 79 | + <td>Stand Up</td> | ||
| 80 | + </tr> | ||
| 81 | + </table> | ||
| 82 | + </ul> | ||
| 83 | +</body> | ||
| 84 | +</html> |
-
Please register or login to post a comment