CSS
1. 5 기타 선택자
beubeu95
2023. 7. 20. 22:38
1.5.1 before,after
a:before { content:"앞 " }
a:after { content:" 뒤"; }
1.5.2 first
.comment::first-letter { font-size:60px; }
.comment::first-line { text-decoration: underline; }
1.5.3 target
첫번째 방법
- <body>에 <a>와 <div> 태그로 링크와 글 내용을 작성한다.
<a href="#link1">링크1</a>
<a href="#link2">링크2</a>
<a href="#link3">링크3</a>
<div id="link1">hello,world!</div>
<div id="link2">high hopes</div>
<div id="link3">Panic! At the disco</div>
2) <head>의 <style>에 타겟 설정을 해준다.
#link1:target, #link2:target, #link:target {height : 300px;}
// 링크와타겟은 띄어쓰기 하지말기!
- <head>의 <style>에 타겟 디자인을 해준다. (hidden 사용!)
#link1, #link2, #link3 {width:500px; height:300px; text-align: center;
font-size:40px; line-height: 300px; border:3px solid #333; height:0px;
overflow:hidden; box-sizing:border-box; transition:0.6s;}
//overflow:hidden을 이용해야 박스가 겹치치 않고 보인다.
두번째 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>타겟 연습</title>
<style>
.tab div{display : none;}
.tab div:target{display : block;}
</style>
</head>
<body>
<div class="tab">
<a href="#link1">링크1</a>
<a href="#link2">링크2</a>
<a href="#link3">링크3</a>
<div id="link1">hello,world!</div>
<div id="link2">high hopes</div>
<div id="link3">Panic! At the disco</div>
</div>
</body>
</html>
- <div class=””>의 범위는 <a>와 <div id=””> 모두 포함한다.
- display ⇒ none: 화면상에서 안보이게 함. / block: 블록으로 보임.
1.5.4 slection
.area::selection { background-color: deeppink;}
<div class="sel">
<p class="area">내가 그것이 무엇인지를 깨닫게 된 것은 십이 년이나 십삼 년이 지나고 나서였다.
나는 어떤 화가를 인터뷰하기 위해 뉴멕시코 주 산타페에 가 있었다.
해질녘 근처 피자하우스에 들러 맥주와 피자를 먹으며 기적처럼 아름다운 석양을 바라보고 있었다.
온 세상의 모든 것이 붉게 물들고 있었다. 내 손과 접시, 테이블과 눈에 비치는 모든 것이 온통
붉게 물들고 있었다. 그런 압도적인 석양 속에서 나는 문득 하쓰미 씨를 떠올렸다.
그리고 그때, 그녀가 일으켰던 내 마음속의 소용돌이가 무엇이었던가를 이해했다.
그것은 채워질 수 없었던, 그리고 앞으로도 영원히 채워질 수 없을 소년기의 동경과도 같은 것이었다.
나는 그렇게 타오르는 듯한 순진무구한 동경을 벌써 까맏그한 옛날에 어딘가에 잊어버리고 왔기에,
그런 것이 한때 내 안에 존재했다는 사실조차 오랫동안 잊어버린 채 살아온 것이다.
하쓰미 씨가 흔들어놓은 것은 내 안에서 오랫동안 잠자고 있던 ‘나 자신의 일부’였던 것이다.
그리고 그것을 깨달았을 때, 나는 거의 울어버릴 것 같은 슬픔을 느꼈다.
그녀는 정말이지 특별한 여자였다. 누군가가 어떻게 해서든 그녀를 구원했어야만 했다
내가 그것이 무엇인지를 깨닫게 된 것은 십이 년이나 십삼 년이 지나고 나서였다.
나는 어떤 화가를 인터뷰하기 위해 뉴멕시코 주 산타페에 가 있었다.
해질녘 근처 피자하우스에 들러 맥주와 피자를 먹으며 기적처럼 아름다운 석양을 바라보고 있었다.
온 세상의 모든 것이 붉게 물들고 있었다. 내 손과 접시, 테이블과 눈에 비치는 모든 것이 온통
붉게 물들고 있었다. 그런 압도적인 석양 속에서 나는 문득 하쓰미 씨를 떠올렸다.
그리고 그때, 그녀가 일으켰던 내 마음속의 소용돌이가 무엇이었던가를 이해했다.
그것은 채워질 수 없었던, 그리고 앞으로도 영원히 채워질 수 없을 소년기의 동경과도 같은 것이었다.
나는 그렇게 타오르는 듯한 순진무구한 동경을 벌써 까맏그한 옛날에 어딘가에 잊어버리고 왔기에,
그런 것이 한때 내 안에 존재했다는 사실조차 오랫동안 잊어버린 채 살아온 것이다.
하쓰미 씨가 흔들어놓은 것은 내 안에서 오랫동안 잠자고 있던 ‘나 자신의 일부’였던 것이다.
그리고 그것을 깨달았을 때, 나는 거의 울어버릴 것 같은 슬픔을 느꼈다.
그녀는 정말이지 특별한 여자였다. 누군가가 어떻게 해서든 그녀를 구원했어야만 했다