개발자의 여정에 열정을 더하다.

Class/Frontend

[프론트 엔드 DAY04]

열정코딩 2022. 4. 26.

목차

전시간

css 선택자 추가 내용 

 

10. 속성선택자 2
    [속성명 = "속성값"] -> 속성 값이 완벽히 일치한 경우
    [속성명 ~= "속성값"] -> 값이 속성값과 다른 값이 띄어쓰기로 있는 경우
    [속성명 *= "속성값"] -> 속성값이 포함된 문자를 가지고 있는 요소를 선택
    [속성명 $= "속성값"] -> 속성값이 접미사로 끝나는 문자를 가지고 있는 요소를 선택
    [속성명 |= "속성값"] -> 속성값이 완벽히 일치하거나, 접두사로 존재하는 -으로 연결된 문자를 가지고    있는 요소를 선택
    ex) | = 값이 "apple"이거나 혹은 "apple-tree"인 것을 선택

    [속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 문자를 가지고 요소를 선택

 

- 코드 입력- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성선택자2</title>
</head>
<body>
    <h2>속성 선택자 -2</h2>
    <p title="css"> 독립적인 단어 </p>
    <p title="css-funny"> 하이픈이 들어간 합성어 </p>
    <p title="css_funny"> 언더바가 들어간 합성어 </p>
    <p title="funny css"> 공백으로 연결된 합성어 (접미사) </p>
    <p title="css funny"> 공백으로 연결괸 합성어 (접두사) </p>
    <p title="funnycss">공백이 없는 합성어 (접미사) </p>
    <p title="cssfuny">공백이 없는 합성어 (접두사) </p>
</body>
</html>

 

- 스타일 코드 입력 - 

<style>
        [title="css"]{
            color: red;
        }
    </style>

  > 이렇게 스타일 주었을때 어느쪽에 color 의 값이 들어갈까?

확실하게 css 라고 속성값을 지정해준 "독립적인 단어" 에만 컬러의 값이 들어가진다. 

 

 [title~="css"]{
            color: red;
        }

> 스타일 값에 이렇게 넣었을땐?

띄어쓰기로 쓰여져 있는 1,4,5, 번째

 

- 출력 결과- 

 

[프론트 엔드 DAY04]

 

 

 

11. 순서에 따른 가상 클래스 선택자
- 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 특정 요소를 선택하여 스타일을 지정
Ex) 
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
---------------------------------------------------------------
    ul > li:first-child -> ul의 자식인 li 요소 중에서 첫번째 해당하는 요소
    ul > li:last-child -> ul의 자식인 li 요소 중에서 마지막에 해당하는 요소
    ul > li:nth-child(n) -> ul의 자식인 li요소 중에서 n번째에 해당하는 요소 (2,3,4,5,6,7)
    ul > li:nth-child(odd) -> ul의 자식인 li요소 중에서 홀수번째에 해당하는 요소
    ul > li:nth-child(even) -> ul의 자식인 li요소 중에서 짝수번째에 해당하는 요소

 

- 코드 입력- 

 

<body>
    <h2>가상 클래스 선택자</h2>
    <ul class="list">
        <li>김사과</li>
        <li>반하나</li>
        <li>오렌지</li>
        <li>이멜론</li>
        <li>압카도</li>

    </ul>
</body>

 

- 스타일 코드 입력-

 

    <style>
        .list>li:first-child{color:deeppink;}
        .list>li:last-child{color:deepskyblue;}
        .list>li:nth-child(2){color:darkviolet;}
        .list>li:nth-child(1){font-weight: bold;}
        .list>li:nth-child(3){color:deeppink;}
        .list>li:nth-child(odd){background-color: gold;}
        .list>li:nth-child(even){background-color: lightgray;}

    </style>

 

- 가상클래스 선택자 코드 설명- 

 

위에 설명을 써놨듯이 first 는 첫번째 li에 컬러값을 넣어준다. 

nth-child(2) 는 li 요소중 2 번째 해당하는 값에 컬러값을 넣어준다 .

이런식으로 대입해서 속성의 값을 넣어주면 된다. 

 

- 출력 결과- 

[프론트 엔드 DAY04]

 

    12. 가상 요소 선택자

    1. 선택자::before
        글, 이미지, 그라데이션 등을 요소 앞에 가상의 태그에 삽입
    2. 선택자::after
        글, 이미지, 그라데이션 등을 요소 뒤에 가상의 태그에 삽입

    3.  :link
        하이퍼링크가 연결됐을 때(기본 상태)
    4.  :visited
        특정 하이퍼 링크를 방문한 적이 있을 때
    5.  :active
        마우스가 클릭하고 있을 때
    6.  :hover
        마우스가 올라갔을 때

 

 

-  코드 입력 - 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가상요소 선택자</title>
    </head>
<body>
    <ul>
        <li id="login">로그인</li>
        <li id="sign">회원가입</li>
    
    </ul>
    <a href="https://www.naver.com">아직 아이디가 없으세요?</a>
</body>
</html>

 

 

- 스타일 코드 입력- 

<style>
        ul > li{display: inline-block;list-style: none;}
        #login::before{content: "👻";}
        #sign::after{content: "💖";}
        #sign::before{content: "|" ; }
        a{text-decoration: none;}
        a:link{color: lightblue;}
        a:hover{color: magenta;}
        a:active{color:brown;}
        </style>

 

- 스타일 코드 설명- 

-로그인 앞에 유령 이모티콘

- 사인 태그 뒤에 하트 이모티콘

- 사인 태그 앞에 | 바 모양 

-  a 태그 링크 색상 파란색

- a 태그 마우스 커서 올리면 색 = 마젠타색 

 

 

- 출력 결과 - 

[프론트 엔드 DAY04]

 

 

 

 

 

 

 

'Class > Frontend' 카테고리의 다른 글

[프론트 엔드 DAY05]  (0) 2022.04.27
[프론트 엔드 DAY04-1]  (0) 2022.04.27
[프론트 엔드 DAY03- 2]  (0) 2022.04.25
[프론트 엔드 DAY03-1 ]  (0) 2022.04.19
[프론트 엔드 DAY03]  (0) 2022.04.17

댓글

티스토리툴바