<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>anchor , list style</title>
<style>
/* 링크 스타일 */
a.anchor:link{color: blue;}
a.anchor:visited{color: green;}
a.anchor:hover{color: red; font-size: 2em;}
a.anchor:active{color: yellow; font-size: 1em;}
/* <a>요소가 아닌 것에도 적용가능함 */
p:hover{background-color: pink; text-decoration: underline;}
img{background-color: aqua; border: 2px solid red}
img:hover{background-color: aquamarine; width: 50%;}
/* 리스트 스타일 */
ul{list-style-type: circle;}
ul{list-style-type: square; list-style-position: inside;}
ul{list-style-image: url(./image/border.png);}
/* 이미지의 사이즈 조절이 없기에 그림파일의 사이즈를 조절하여 설정해야함. 잘 사용안함. */
ol{list-style: lower-alpha;}
ol{list-style: upper-alpha;}
ol{list-style: lower-roman;}
ol{list-style: upper-roman;}
ol{list-style: lower-greek;}
ol{list-style: decimal-leading-zero;}
</style>
</head>
<body>
<p>hello css</p>
<img src="./image/image.png" alt="이미지">
<hr>
<ul>
<li>html5</li>
<li>css3</li>
<li>javascript</li>
</ul>
<hr>
<ol>
<li>html5</li>
<li>css3</li>
<li>javascript</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list-style-menu</title>
<style>
/* navigation bar style */
ul{
list-style: none; /*블릿기호 지움*/
border-top: 1px solid red;
border-bottom: 1px solid blue;
padding: 10px 0px;
text-align: center; /*gravity*/
}
ul li{
display: inline; /*블럭요소 인라인으로*/
text-transform: uppercase; /*대소문자변경가능*/
padding: 0 10px ; /*0은 px생략가능*/
letter-spacing: .3em; /*자간간격 0.3em (.3으로 생략가능)(30%)/ 5px*/
}
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>
'CSS' 카테고리의 다른 글
| Web App: 반응형웹01 (0) | 2023.10.30 |
|---|---|
| 웹사이트 만들어보기 (0) | 2023.10.30 |
| CSS-D5 (0) | 2023.10.30 |
| CSS-D03 (0) | 2023.10.26 |
| css//01 (0) | 2023.08.30 |