링크 선택자, 내용관련 속성

HTML

링크 선택자, 내용관련 속성

기련이 2020. 5. 15. 17:53

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>링크 선택자</title>
<style type="text/css">
a{
	text-decoration:none;
}
a:link{
	color: black;
}
a:visited{/*방문한 페이지의 링크 글자를 보라색(기본)이 아닌 다른색으로 바꿀때*/
	color: red;
}
a:link::after {
	content: " - " attr(href);
}
a:active{
	color: green;
}
input:not([type="password"]){
	background-color: pink
}
</style>
</head>
<body>
<!-- 연결 태그(anchor) 적용하는 선택자
	link, visited, active
 -->
 <h3><a>Notting</a></h3>
 <h3><a href="http://www.naver.com">네이버</a></h3>
 <hr>
 <!-- 부정(not) 선택자 : 해당 태그가 아닌 태그들 -->
 <input type="text"><br>
 <input type="password"><br>
 <input type="text"><br>
 
</body>
</html>

연결 태그(anchor) 적용하는 선택자
link, visited, active

link : 링크에 들어가는 선택자

visited : 방문한 페이지의 링크 글자를 보라색(기본)이 아닌 다른색으로 바꿀때

link::after : 링크의 주소를 연결하여 보여줌

active : 링크를 클릭했을때

부정(not) 선택자 : 해당 태그가 아닌 태그들

input:not([type="password"]){ -password(패스워드) 가 아닌 컬럼에 핑크컬러를 적용해준모습
background-color: pink
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내용 관련 속성</title>
<style type="text/css">
p{
   background-color: powderblue;
   min-width: 500px;
}
</style>
</head>
<body>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
      justo dui, malesuada et libero vitae, gravida sodales leo. Sed
      viverra, arcu sit amet maximus facilisis, nisi augue aliquet diam, in
      dapibus tellus dolor ac lorem. Pellentesque habitant morbi tristique
      senectus et netus et malesuada fames ac turpis egestas. Vestibulum sit
      amet dolor nec velit ultricies lacinia eu sed urna. Nunc a libero
      tellus. Vivamus scelerisque consequat sagittis. Ut pretium est magna,
      a facilisis felis faucibus nec. Duis porta mauris arcu, ac suscipit ex
      fermentum in. Proin et ipsum consequat, consectetur arcu condimentum,
      suscipit eros. Donec fermentum nec ipsum nec aliquet. Vivamus
</body>
</html>

content 관련 속성
   실제 내용이 표현되는 곳
   width(너비), height(높이)
   가로세로 최대.최소값 지정 : max-, min-
   단위 : pixel(px), %(퍼센트)