Jam's story

[CSS] 의사요소 본문

WEB/CSS

[CSS] 의사요소

애플쩀 2022. 5. 24. 16:27
  • [의사클래스] 요소의 특정상태 
  • [의사요소] 요소의 지정된 부분에 스타일을 지정하는데 사용하는 선택자.

 

:: 을 붙이면 해당 요소의 지정된 부분 

 

 

 p태그의 첫번째 라인만  

p.intro::first-line{
color: green;
font-size: small;
}

 

p태그의 첫번째 문자만

p.intro::first-letter{
color: blue;
font-size: xx-large;
}

::before ::after 
<style type="text/css">
h1::before{
content:url('../images/searchicon.png');
}

h1::after{
content:"-Tutorial";
color:red;
font-style: italic;
}
</style>
Insert title here ::before -콘텐츠 앞에 일부 콘텐츠를 삽입 ::after

Lorem ipsum dolor sit amet.

Id quod dolore laboriosam quam.

Sapiente blanditiis aperiam modi mollitia.

Molestiae dicta explicabo distinctio sequi.

Numquam laborum laudantium sit pariatur.

 

 

 

::marker - 리스트 항목의 마커를 선택 
::selection - 사용자에 의해서 선택된 요소의 일부

전체코드 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
h1::before{
content:url('../images/searchicon.png');
}

h1::after{
content:"-Tutorial";
color:red;
font-style: italic;
}
</style>
<style type="text/css">
::marker{
color:red;
font-size:23px;
}
</style>
<style type="text/css">
::selection{
/* 사용자에 의해서 선택된 요소의 일부 */
color:red;
background-color: yellow;
}
</style>
</head>
<body>
::before -콘텐츠 앞에 일부 콘텐츠를 삽입
::after
<h1>Lorem ipsum dolor sit amet.</h1>
<h1>Id quod dolore laboriosam quam.</h1>
<h1>Sapiente blanditiis aperiam modi mollitia.</h1>
<h1>Molestiae dicta explicabo distinctio sequi.</h1>
<h1>Numquam laborum laudantium sit pariatur.</h1>
<hr>
::marker 의사요소 - 리스트 항목의 마커를 선택 
<ul>
	<li>Lorem.</li>
	<li>Provident.</li>
	<li>Ea?</li>
</ul>
<ol>
	<li>Lorem.</li>
	<li>Esse.</li>
	<li>Cumque.</li>
</ol>
</body>
</html>
Insert title here ::before -콘텐츠 앞에 일부 콘텐츠를 삽입 ::after

Lorem ipsum dolor sit amet.

Id quod dolore laboriosam quam.

Sapiente blanditiis aperiam modi mollitia.

Molestiae dicta explicabo distinctio sequi.

Numquam laborum laudantium sit pariatur.


::marker 의사요소 - 리스트 항목의 마커를 선택
  • Lorem.
  • Provident.
  • Ea?
  1. Lorem.
  2. Esse.
  3. Cumque.

 

 

 

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

[CSS] DropDown  (0) 2022.05.25
[css] nav 열고 닫기 + transition+ js+jquery  (0) 2022.05.25
[CSS] 의사클래스 종류  (0) 2022.05.24
[CSS]:first(last)-child 의 정확한 의미  (0) 2022.05.24
[CSS] 의사클래스  (0) 2022.05.24
Comments