css2 :: 췐틀맨 devlog

css2

2024년 08월 05일

chantleman
작성자
2024.08.05.:04

^=속성값 : 속성으로 시작하는 ~

$=속성값 : 속성값으로 끝나는 ~

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            img{
                width:100px;
                height:100px;
            }
            [src]{
                border:3px solid skyblue;
            }

            [src^="/"]{
                border-color:rgb(195, 39, 39);
            }

            [alt$=a]{
                border-color:lime;
            }
        </style>
    </head>
    <body>
        <img src="/vscode/images/ala.jpg" alt="koala">
        <img src="/vscode/images/lion.jpg" alt="lion">
        <img src="/vscode/images/hh.jpg" alt="bara"> <br><br>

        <iframe src="/vscode/0730/img/img.html" frameborder="0" title="ifrmedia"></iframe>
        <iframe src="../../0731/div_span.html" frameborder="0" title="ifrm-doc"></iframe>
        <iframe src="../../0801/요소와정보얻기.html" frameborder="0" title="ifrm"></iframe>

    </body>
    </html>

img가 없을 때는 alt$a -> src -> src^='/' 순으로 우선순위가 적용됐는데

    <style>
        img{
            width:100px;
            height:100px;
        }
        img[src]{
            border:3px solid skyblue;
        }
 
        [src^="/"]{
            border-color:rgb(195, 39, 39);
        }

        [alt$=a]{
            border-color:lime;
        }
    </style>

img를 붙이면 우선순위가 바뀜

img가 있는 것부터 우선순위 적용

*=속성값 : 속성값을 포함하는 ~
~=속성값 : 포함된 속성값이 완벽힌 분리되어있는 항목만

    <style>  
        [title *=ifrm]
        {
            background-color: brown;
        }
    </style>        

     <body>
        <iframe src="/vscode/0730/img/img.html" frameborder="0" title="ifrmedia"></iframe>
        <iframe src="../../0731/div_span.html" frameborder="0" title="ifrm-doc"></iframe>
        <iframe src="../../0801/요소와정보얻기.html" frameborder="0" title="ifrm"></iframe>
    </body>

    <style>  
        [title *=ifrm]
        {
            background-color: brown;
        }
        [title ~=ifrm]
        {
            background-color: blue;
        }
    </style>        

     <body>
        <iframe src="/vscode/0730/img/img.html" frameborder="0" title="ifrmedia"></iframe>
        <iframe src="../../0731/div_span.html" frameborder="0" title="ifrm-doc"></iframe>
        <iframe src="../../0801/요소와정보얻기.html" frameborder="0" title="ifrm"></iframe>
    </body>

|= 속성값 : 속성값 또는 속성값-로 시작하는 항목

    <style>  
     	[title *=ifrm]
        {
            background-color: brown;
        }

        [title ~=ifrm]
        {
            background-color: blue;
        }

        [title|=ifrm]
        {
            background-color: gold;
        }
    </style>        

     <body>
        <iframe src="/vscode/0730/img/img.html" frameborder="0" title="ifrmedia"></iframe>
        <iframe src="../../0731/div_span.html" frameborder="0" title="ifrm-doc"></iframe>
        <iframe src="../../0801/요소와정보얻기.html" frameborder="0" title="ifrm"></iframe>
    </body>

728x90

'js' 카테고리의 다른 글

var, let, const (0)	2024.08.08
레이아웃 (0)	2024.08.06
css (0)	2024.08.02
선택 값 출력(getElement~, querySelector) (1)	2024.08.02
데이터 전달, post, get (0)	2024.08.01

다음 글이 없습니다.

이전 글이 없습니다.

'js' 카테고리의 다른 글

티스토리툴바