DAY 25. 가상 요소
☃ 가상 요소
웹 문서 안의 특정 부분에 스타일을 지정하려고 가상으로 요소를 만들어 추가하는 방법이다.
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 />
이렇게 <br />이 <p> 안에 있어서 첫 번째 글자가 둘째 줄에 있으면 스타일 적용이 안 된다.</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 & ::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>↓
::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시간 내로 바깥을 마.음.대.로. 돌아다니는 자유를 박탈당할 예정이라서
뭘 하고 들어가야 후회가 없을까 고민하는 중이다...하핳....
차라리 업무상 바쁜 일이 없는 다음주에 앓고 지나가 버리는 게 좋을 것 같다만..)
나도 옮아버려서 아프면 포스팅 안 쓸 거야... 쳇....