겉바속촉

[html] text css 연습하기 본문

IT일기(하반기)/HTML

[html] text css 연습하기

겉바속촉 2020. 6. 16. 01:24
728x90
반응형

이번에는 ul이랑 li 사용해서 코드를 짜보도록 할게요:)

table에만 css를 적용할 수 있는 것이 아니쥬?

text에도 가능합니다!!

다음과 같이 코드를 작성해주세요

순서 없는 list기 때문에 ul을 사용해주는 것이에요

그리고 각각 들어갈 데이터들은 li 태그를 사용해주는 것입니다:)

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
a{
	text-decoration: none;
}

ul li {
	list-style: none;
}
li.main{
	float: left;
}

li.main>a {
	display: block;
	width: 180px;
	color: red;
	font-weight: bold;
	font-family: '굴림';
}

ul.submenu{
	margin-left: 0;
	font-size: 12px;
	font-family: '굴림';
	padding-left: 0;
	margin-top: 15px;
	
}

ul.submenu>li>a{
	display: block;
	width: 180px;
	height: 20px;
	color: orange;
	
}

ul.submenu>li>a:hover {
	color: blue;
}

</style>
</head>
<body>
<div>
	<ul>
		<li class="main">
			<a href="#">1일차</a>
				<ul class="submenu">
					<li>
						<a href="../day0610/aTagTest_07.html">1번예제 </a>          
						
					</li>
					
					<li>
						<a href="../day0610/cssClass_08.html">2번예제 </a>   
					
					</li>
					
					<li>
					 	<a href="../day0610/cssLinkTest_09.html">3번예제 </a> 
					</li>				
				</ul>		
		</li>
	</ul>
	
	<ul>
		<li class="main">
			<a href="#">2일차</a>
				<ul class="submenu">
					<li>
						<a href="../day0610/aTagTest_07.html">1번예제 </a>          
						
					</li>
					
					<li>
						<a href="../day0610/aTagTest_07.html">2번예제 </a>   
					
					</li>
					
					<li>
					 	<a href="../day0610/aTagTest_07.html">3번예제 </a> 
					</li>				
				</ul>		
		</li>
	</ul>
	
	<ul>
		<li class="main">
			<a href="#">3일차</a>
				<ul class="submenu">
					<li>
						<a href="../day0610/aTagTest_07.html">1번예제 </a>          
						
					</li>
					
					<li>
						<a href="../day0610/aTagTest_07.html">2번예제 </a>   
					
					</li>
					
					<li>
					 	<a href="../day0610/aTagTest_07.html">3번예제 </a> 
					</li>				
				</ul>		
		</li>
	</ul>
	
	<ul>
		<li class="main">
			<a href="#">4일차</a>
				<ul class="submenu">
					<li>
						<a href="../day0610/aTagTest_07.html">1번예제 </a>          
						
					</li>
					
					<li>
						<a href="../day0610/aTagTest_07.html">2번예제 </a>   
					
					</li>
					
					<li>
					 	<a href="../day0610/aTagTest_07.html">3번예제 </a> 
					</li>				
				</ul>		
		</li>
	</ul>
	
	

</div>

</body>
</html>

 

컴파일

 

 

 

 

여기서 포인트는 hover를 썼다는 점입니다

hover는 바로

다음과 같이 마우스를 올려보면 blue로 바뀌게 해주는 것이에요!!

색깔은 자기맘!!

 

다음과 같이 작성해주세요:)

ul.submenu>li>a:hover {
color: blue;
}

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] jquery로 select 연습하기  (0) 2020.06.16
[html] Jquery 사용하기  (0) 2020.06.16
[html] table에 css적용해보기  (0) 2020.06.16
[html] table 행, 열 합치기  (0) 2020.06.16
[html] table 생성하기  (0) 2020.06.16
'IT일기(하반기)/HTML' Related Articles more