다연이네

[days02] 1. CSS 목록 속성 2. 마우스 롤오버 (+href, src, url 차이) 본문

Web/CSS

[days02] 1. CSS 목록 속성 2. 마우스 롤오버 (+href, src, url 차이)

　다연　 2020. 12. 4. 13:49
반응형

1. 목록 속성

 

ol도 기호(동그라미 등)로 표현될 수 있고 ul도 숫자를 붙혀 표현될 수 있다.

따라서 css에서는 둘의 구분이 필요가 없다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>

ul.a{
	/* list-style-type: lower-roman; */ 
    /* ul태그라도 숫자로 정렬 가능, 이제 ul/ol 구분 안해도 됨 */
	
	/* 목록 속성 설정 제거  */
	list-style-type: none; /*앞에 태그 하나도 안붙음  */
	margin: 0;
	padding: 0; 
    /* 앞으로 붙음 (기본 목록 속성을 다 제거한 것) */
}

ol.b{
	 list-style-type: circle;  
     /* ol태그라도 동그라미로 정렬 가능 */	
}


ul.c{
	/* 이미지를 앞에 mark로 지정 */
	list-style-image: url('../images/arr.gif'); 
	/* list-style: square inside url("");  */ /* 얘도 줄여서 이렇게 약어로 사용 가능  */
}

ol.b{
	border: 1px solid gray;
	list-style-position: inside; /* 일케하면 마크가 li태그 안으로 들어감 (기본은 outside) */
}

ol.b li{
	border: 1px solid red;
}

</style>

</head>
<body>
<h3>html 목록+css 목록 속성</h3>


<ul class="c">
	<li>Lorem.</li>
	<li>Quis.</li>
	<li>Excepturi.</li>
	<li>Optio.</li>
	<li>Molestias.</li>
</ul>


<ul class="a">
	<li>Lorem.</li>
	<li>Natus.</li>
	<li>Vel.</li>
	<li>Debitis.</li>
	<li>Inventore!</li>
</ul>

<ol class="b">
	<li>Lorem.</li>
	<li>Natus.</li>
	<li>Vel.</li>
	<li>Debitis.</li>
	<li>Inventore!</li>
</ol>

</body>
</html>

list-style-position: inside;

위 속성을 통해 밖에 있던 동그라미들이 li 보드 안으로 들어간다. (기본값은 outside이기 때문에 밖에 있다.)

 

 

 

2. 마우스 롤오버

 

 링크태그로 버튼 만들어 롤오버 효과 주기  
 롤오버효과: 마우스를 올리면 디자인(스타일)이 바뀜 

 

마우스를 올리면(+클릭하는 동안도) 버튼 색깔이 변한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
	a:link, a:visited {
		background-color: white;
		color: black;
		text-decoration: none;
		border: 2px solid green;
		display: inline-block;
		width: 100px;
		text-align: center;
		padding: 10px 20px;
	}
	
	a:hover, a:active { /* 마우스 올라갈때든 클릭할때든 */
		background-color: green;
		color: white;
	}

</style>
</head>
<body>


<a href="#" target="_blank">버튼 1</a>
<a href="#">버튼 2</a>
<a href="#">버튼 3</a>
</body>
</html>

 

 

href, src, url 차이는 ? 

 

href : a태그에 (웹페이지 등) 주소 삽입시 사용

 

src : img태그에 파일 디렉토리 경로에있는 이미지를 지정하여 웹페이지에 결과물을 출력할때 사용

 

url : CSS / html의 style 에서 img태그와 같이 어떠한 파일을 불러올때 사용

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days02] display:none과 visibility: hidden  (0) 2020.12.04
[days02] 테이블 만들기  (0) 2020.12.04
[days02] 페이징 처리  (0) 2020.12.04
[days02] 메뉴바 만들기 test  (0) 2020.12.04
[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기  (0) 2020.12.03
'Web/CSS' Related Articles more
Comments