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

첫번째 방법

  1. <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;}
// 링크와타겟은 띄어쓰기 하지말기!
  1. <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">내가 그것이 무엇인지를 깨닫게 된 것은 십이 년이나 십삼 년이 지나고 나서였다. 
나는 어떤 화가를 인터뷰하기 위해 뉴멕시코 주 산타페에 가 있었다. 
해질녘 근처 피자하우스에 들러 맥주와 피자를 먹으며 기적처럼 아름다운 석양을 바라보고 있었다. 
온 세상의 모든 것이 붉게 물들고 있었다. 내 손과 접시, 테이블과 눈에 비치는 모든 것이 온통 
붉게 물들고 있었다. 그런 압도적인 석양 속에서 나는 문득 하쓰미 씨를 떠올렸다. 
그리고 그때, 그녀가 일으켰던 내 마음속의 소용돌이가 무엇이었던가를 이해했다. 
그것은 채워질 수 없었던, 그리고 앞으로도 영원히 채워질 수 없을 소년기의 동경과도 같은 것이었다. 
나는 그렇게 타오르는 듯한 순진무구한 동경을 벌써 까맏그한 옛날에 어딘가에 잊어버리고 왔기에, 
그런 것이 한때 내 안에 존재했다는 사실조차 오랫동안 잊어버린 채 살아온 것이다. 
하쓰미 씨가 흔들어놓은 것은 내 안에서 오랫동안 잠자고 있던 ‘나 자신의 일부’였던 것이다.
 그리고 그것을 깨달았을 때, 나는 거의 울어버릴 것 같은 슬픔을 느꼈다. 
그녀는 정말이지 특별한 여자였다. 누군가가 어떻게 해서든 그녀를 구원했어야만 했다
내가 그것이 무엇인지를 깨닫게 된 것은 십이 년이나 십삼 년이 지나고 나서였다. 
나는 어떤 화가를 인터뷰하기 위해 뉴멕시코 주 산타페에 가 있었다. 
해질녘 근처 피자하우스에 들러 맥주와 피자를 먹으며 기적처럼 아름다운 석양을 바라보고 있었다. 
온 세상의 모든 것이 붉게 물들고 있었다. 내 손과 접시, 테이블과 눈에 비치는 모든 것이 온통 
붉게 물들고 있었다. 그런 압도적인 석양 속에서 나는 문득 하쓰미 씨를 떠올렸다. 
그리고 그때, 그녀가 일으켰던 내 마음속의 소용돌이가 무엇이었던가를 이해했다. 
그것은 채워질 수 없었던, 그리고 앞으로도 영원히 채워질 수 없을 소년기의 동경과도 같은 것이었다. 
나는 그렇게 타오르는 듯한 순진무구한 동경을 벌써 까맏그한 옛날에 어딘가에 잊어버리고 왔기에, 
그런 것이 한때 내 안에 존재했다는 사실조차 오랫동안 잊어버린 채 살아온 것이다. 
하쓰미 씨가 흔들어놓은 것은 내 안에서 오랫동안 잠자고 있던 ‘나 자신의 일부’였던 것이다.
 그리고 그것을 깨달았을 때, 나는 거의 울어버릴 것 같은 슬픔을 느꼈다. 
그녀는 정말이지 특별한 여자였다. 누군가가 어떻게 해서든 그녀를 구원했어야만 했다