반응형
<최종 화면>
a 요소 부터 차근차근 연습해보자.
우선 기본적으로 글씨를 쓰고 거기에 적용해보겠다.
여러 스타일을 적용해보자. [누르기 전 색깔, 누른 후 색깔, 마우스를 올렸을 때, 클릭을 한 순간]
hover를 마우스 올렸을 때도 가능하다.
위의 사진은 전체 배경색이 바뀌지만, 특정 요소 배경에만 적용이 가능하다.
Hello를 쓰고, 거기에만 적용해보자.
이미지에도 배경색을 적용해보자.
이미지에도 hover적용 가능하다. 마우스 포인트를 올렸을 때
리스트에도 스타일을 적용해보자.
<최종 화면>
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EX</title>
<style>
/* anchor 스타일 */
a#anchor:link{color: blue}
a#anchor:visited{color: green}
a#anchor:hover{color: red; font-size: 2em;} /* 마우스틑 올렸을 때 */
a#anchor:active{color: yellow}
/* 문서에 마우스를 올렸을 때 배경전체 변경 */
p:hover{background-color: green;}
img{background-color: yellow; border: 2px solid red;}
img:hover{background-color: gray; width: 100%;}
/* 리스트 스타일 */
ul.a{list-style: circle;}
ul.b{list-style: disc;}
ul.c{list-style: square; list-style-position: inside;}
/* 리스트 이미지는 사이즈 조절이 번거로워서 잘 사용안함 */
</style>
</head>
<body>
<a href="" id="anchor">aaaaa</a>
<p>Hello</p>
<!-- 리스트 스타일 -->
<hr>
<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>
<ul class="d">
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
</ul>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) table 스타일 적용하기 (2) | 2019.12.06 |
|---|---|
| HTML+CSS (기초) 리스트 스타일 적용 [홈페이지 로고,텝 같은.. 기초적 만들기] (0) | 2019.12.06 |
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-2 (0) | 2019.12.06 |
| HTML+CSS (기초) 경계선 및 배경색 스타일 적용 1-1 (0) | 2019.12.06 |
| HTML+CSS (기초) font 적용과 text 스타일 속성 적용 (0) | 2019.12.05 |
댓글