다연이네

[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터 본문

Web/CSS

[days03] ::의사 요소 - 요소의 지정된 부분을 스타일링 + css 카운터

　다연　 2020. 12. 7. 21:28
반응형


 ::의사요소 


::before  의사요소 - 요소의 내용 이전에 일부 내용을 삽입할 수 있음
::after 의사요소 - 요소의 내용 이후에                "

 

::first-letter 첫글자만

::first-line   첫줄만

::selection  드래그시

 

<!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>
p::first-letter{ /* 첫글자만  */
	color: red;
	font-size: xx-large;
}
p.intro::first-line { /* 늘이든 줄이든 첫줄만 */
	color: blue;
	font-variant: small-caps;  /* 작은대문자 */
}
</style>

<style>
h1:hover::before{
/* h1::before{ */
	/* h1내용 앞에 */
	content:url(../images/searchicon.png);
}

h1::after{
	content: "- Tutorial";
	color: red;
	font-style: italic;
}

</style>

<style>
p::selection{ /* 드래그시 */
	background-color: yellow;
	color: red;
}
</style>

</head>
<body>


<p class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Soluta voluptatem fugit magni esse impedit pariatur inventore 
dolor delectus commodi temporibus tempora repellat assumenda
 tenetur deserunt tempore. Accusantium nemo accusamus mollitia.</p>
<p>Lorem ipsum dolor sit.</p>

<hr>

<h1>Lorem ipsum dolor sit.</h1>
<h1>A quasi iure sit!</h1>
<h1>Accusantium quidem aspernatur porro.</h1>
<h1>Eos obcaecati molestiae vitae.</h1>

</body>
</html>

원래 모습에 맨 윗줄을 드래그한 경우

hr 선윗부분은 드래그시 배경(노랑) 텍스트(빨강)으로 변한다.

hr 선 밑의 아무 글이나 마우스를 올리면 앞에 돋보기 모양이 뜨게된다.

 

 [css 카운터] 


1. 마치 변수와 같다.
2. 자동 번호 매기기
3. 속성
  ㄱ. counter-reset 카운터 생성 또는 재설정(재 초기화)
  ㄴ. counter-increment 카운터 값 증가
  ㄷ. content - 생성된 콘텐츠 상비
  ㄹ. counter() - 요소에 카운터 값을 추가

 

<!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>
	body{
		/* int section=0; 변수 선언하고 초기화 */
		counter-reset: section; 
	}
	
	div::before{ /* 내용이 뿌려지기 전에 */
		/* section++; */
		counter-increment: section;
		content: counter(section);
		
		background-color: black;
		color: white;
		margin-right: 16px;
		padding: 1px 10px;
		border-radius: 50%;
	}
</style>

</head>
<body>
<div>Java</div>
<div>Oracle</div>
<div>JDBC</div>
<div>html5</div>
<div>css3</div>

</body>
</html>
반응형
저작자표시 비영리

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

[days03] dropdown  (0) 2020.12.07
[days03] 메뉴바 여닫기  (0) 2020.12.07
[days03] :의사 클래스 - 특수 상태를 정의하는 클래스  (0) 2020.12.07
[days03] CSS 결합자(선택자 간의 관계)  (0) 2020.12.07
[days03] 수평, 수직 정렬  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments