개발 공부 기록하기

DAY 25. 가상 요소 본문

프밍/CSS

DAY 25. 가상 요소

태영(泰伶) 2022. 12. 3. 17:35

☃ 가상 요소

     웹 문서 안의 특정 부분에 스타일을 지정하려고 가상으로 요소를 만들어 추가하는 방법이다.

        cf, 가상 클래스: 웹 문서의 여러 요소 중에서 원하는 요소를 선택하는 방법

 

     가상 요소를 쓰는 이유?

          → 특별히 화면에 보이는 부분을 꾸밀 때, 불필요한 태그를 사용하지 않도록 하기 위함!

 

 

 

  • ::first-line 요소 & ::first-letter 요소

          ::first-line

          지정한 요소의 첫 번째 줄에 스타일을 적용한다.

 

          (내가 만든) 예시 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>가상 선택자_특정 위치의 자식 요소 선택하기</title>
         <style>
            div {
               font-family: d2coding;
               text-align: center;
               border: 2px dashed #fd4;
               line-height: 3rem;
            }
            div::first-line {
               text-decoration: underline;
               font-weight: 900;
               font-size: 150%;
            }
         </style>
      </head>
      <body>
         <div>내가 좋아하는 노래 가사 climax 부분
            <br />
            이젠 알아요 너무 깊은 사랑은 외려 슬픈 마지막을 가져온다는 걸~♬
            <br />
            그대여 빌게요 다음 번의 사랑은 우리 같지 않길 부디 아픔이 없이~♬
         </div>
      </body>
   </html>

↓

 

 

 

          ::first-letter

          지정한 요소의 첫 번째 글자에 스타일을 적용한다.

          만약에,

<p><br />
이렇게 &lt;br /&gt;이 &lt;p&gt; 안에 있어서 첫 번째 글자가 둘째 줄에 있으면 스타일 적용이 안 된다.</p>

↓

배경색이 분홍색인 건, 그저 캡처한 이 이미지를 편집해서 그렇다..ㅎㅎ

 

          (내가 만든) 예시 2.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>가상 선택자_특정 위치의 자식 요소 선택하기</title>
         <style>
            div {
               font-family: D2Coding;
               line-height: 150%;
               word-break: keep-all;
            }
            div::first-letter {
               font-size: 300%;
               color: red;
               font-weight: bolder;
            }
         </style>
      </head>
      <body>
         <div>이제 올해도 한 달밖에 남지 않았다. 그간 이상기온이라고 느껴질만큼 춥지 않더니, 며칠 전부터 갑자기 기온이 뚝 떨어져서 겨울이 왔음을 실감하고 있다. 이 와중에 서울 기숙사에서 지내던 동생이 내려왔다가 가족들에게 코로나19를 전파시키고 갔다. 이제 안 걸린 사람이 나밖에 남지 않았다. 아픈 거 싫은데... 나도 걸리는 건 시간 문제겠지...??ㅋㅋㅋㅋ</div>
      </body>
   </html>

↓

          

 

 

 

 

  • ::before 요소 & ::after 요소

          ::before

          지정한 요소의 내용 앞에 스타일을 넣을 때 쓴다.

 

          (내가 만든) 예시 3.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>::before &amp; ::after</title>
         <style>
            div {
               font-family: d2coding;
               font-size: large;
               line-height: 3em;
               background-image: url('WoodTexture.jpg');
               color: #fff;
            }
            h1 {
               font-weight: 900;
               letter-spacing: 5px;
               text-align: center;
            }
            li {
               list-style-type: none;
            }
            .discount::before {
               content: "오늘의 할인!!";
               background-color: #55f;
               font-weight: lighter;
               font-size: small;
               line-height: 3em;
               color: #fff;
            }
         </style>
      </head>
      <body>
         <div>
            <h1>MENU</h1>
            <ul>
            <li> Americano</li>
            <li class="discount"> Caffè Latte</li>
            <li> Caffè Mocca</li>
         </ul>
         </div>
      </body>
   </html>

↓

배경 이미지 출처:&nbsp;https://www.google.co.kr/url?sa=i&url=https%3A%2F%2Fwww.textures.com%2Fbrowse%2Ffine-wood%2F14119&psig=AOvVaw2V5nLRgpqE1DeJ6KTTjwBZ&ust=1670140252393000&source=images&cd=vfe&ved=0CA8QjRxqFwoTCMDn0rT73PsCFQAAAAAdAAAAABAE

 

 

          ::after

          지정한 요소의 내용 뒤에 스타일을 넣을 때 쓴다.

 

          예제 1.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title></title>
         <style>
            .container {
               width: 960px;
               margin: 0 auto;
            }
            ul li {
               margin: 15px;
            }
            li.new::after {
               content: "NEW!!";
               font-size: x-small;
               padding: 2px 4px;
               margin: 0 10px;
               border-radius: 2px;
               background: #f00;
               color: #fff;
            }
         </style>
      </head>
      <body>
         <div class="container">
            <h1>제품 목록</h1>
            <ul>
               <li class="new">제품 A</li>
               <li>제품 B</li>
               <li>제품 C</li>
               <li class="new">제품 D</li>
            </ul>
         </div>
      </body>
   </html>

↓

 

 

cf,

VSCode Emmet Tip!!

<body> 안에다가

div>h1+ul>li.new+li*2+li.new

위를 타이핑하고  Tab 을 누르면

자동으로 생성된다ㅎㅎ

이렇게 내용만 입력하면 된다!

 

Emmet 진짜 사랑함..♥

 

 

 

도대체 COVID-19는 언제 끝이 나는가....

가족 모두가 확진됐다는데..

바이러스의 온상으로 내 발로 걸어들어가야 한다니...

제발, 제발, 제발... 나 또한 세게 앓지 않고 지나갈 수 있기를.....

(2시간 내로 바깥을 마.음.대.로. 돌아다니는 자유를 박탈당할 예정이라서

뭘 하고 들어가야 후회가 없을까 고민하는 중이다...하핳....

차라리 업무상 바쁜 일이 없는 다음주에 앓고 지나가 버리는 게 좋을 것 같다만..)

나도 옮아버려서 아프면 포스팅 안 쓸 거야... 쳇....

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

Section 6. CSS 기초(1)  (0) 2022.12.04
DAY 25. 단원 마무리 문제 풀기  (0) 2022.12.03
DAY 24. 가상 클래스  (1) 2022.12.03
DAY 23. 속성 선택자  (1) 2022.11.27
DAY 23. 연결 선택자  (0) 2022.11.27
'프밍/CSS' Related Articles more
Comments