나의 개발일지

의사요소/after/before/first-line/marker/placeholder 본문

CSS

의사요소/after/before/first-line/marker/placeholder

heew0n 2023. 10. 11. 01:00

 

의사요소
: 의사요소(pseudo-elements)는 선택자에 추가하는 키워드
이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다

 

 

선택자::의사요소 {

       속성명: 속성값;

}

 

 

 

의사요소 의미
after 요소의 앞에 의사 요소를 생성 및 추가
before 요소의 뒤에 의사 요소를 생성 및 추가
first-line 블록 레벨 요소의 첫 번째 선에 스타일을 적용
marker 목록 기호의 스타일을 적용
placeholder 입력 요소의 플레이스홀더(자리표시자)스타일을 적용

 

 

 

first-line / first-letter
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-line{
            color: green;
        }
        p::first-letter{
            color: brown;
        }
    </style>
</head>
<body>
    <p>
    안녕하세요 만나서 반갑습니다
    안녕하세요 만나서 반갑습니다
    안녕하세요 만나서 반갑습니다
    안녕하세요 만나서 반갑습니다
    안녕하세요 만나서 반갑습니다
    </p>
</body>
</html>

 

 

 

marker
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       li::marker{
        color : red;
        font-size: 20px;       
       }
    </style>
</head>
<body>
   <ul>
    <li>강아지</li>
    <li>고양이</li>
    <li>다람쥐</li>
    <li>햄스터</li>
   </ul>
</body>
</html>

 

 

 

 

 

placeholder
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      input::placeholder{
        font-size: 20px;
        color: gray;
      }
    </style>
</head>
<body>
   <input type="text" placeholder="이곳에 입력하세요">
</body>
</html>

 

 

 

 

 

 

 

 

before / after

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     p::before{
        content: "안녕하세요 ";
        color: blueviolet;
     }

     p::after{
        content: " 다시 만나요";
        font-size: 25px;
     }
    </style>
</head>
<body>
  <p>반가워요</p>
</body>
</html>

 

 

 

 

 

 

저작자표시

'CSS' 카테고리의 다른 글

상속(Inheritance)에 대하여~  (0) 2023.10.11
의사(가상)클래스에 대하여~  (0) 2023.10.11
특성 선택자와 결합선택자에 대하여~  (0) 2023.10.10
float과 clear에 대하여~  (0) 2023.10.10
background에 대하여~  (1) 2023.10.10
'CSS' Related Articles more