[CSS]List Style

정은아·2022년 9월 20일
0
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>List Style</title>
  <style>
  	ul	{	list-style:none;
			text-align:center;
			border-top:1px solid red;
			border-bottom:1px solid red;
			padding:10px 0;
		}
	
	ul li {		display:inline;
				text-transform:uppercase;	
                /*영문자열의 대소문자를 변경하는데 사용한다.*/
				padding:0 10px; letter-spacing:10px; 
                /*letter-spacing : 글자와 글자사이 간격*/ 
		}

	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>

profile
꾸준함의 가치를 믿는 개발자

0개의 댓글