css 이벤트 속성에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 이벤트 속성에 대하여 알아보도록 하겠습니다.

이벤트 속성은 자바스크립트에서도 자주 쓰이는데,

어떤 사건, 다시 말해 클릭이라던지, 커서가 위로 올라간다던지 등의 행동을 했을 때

그에 상응하는 무언가가 일어나는 것을 말합니다.

이는 css에서도 사용을 할 수 있고,

무조건 자바스크립트로만 모든 기능을 구현해야 하는 것이 아님을 보여드리기 위해서 작성하게 되었습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 여러 가지 이벤트 속성들

이벤트 속성은 제가 이전에 포스팅했던 가상 클래스 셀렉터와 연관이 되는데,

거기에서 쓰이는 셀렉터 입니다.

이전 포스팅은 아래에 기재를 할 테니,

가상 클래스 셀렉터에 대하여 궁금하신 분들은 같이 보시면 감사드리겠습니다.

2023.03.13 - [html, css, 자바스크립트] - css 가상 클래스 셀렉터에 대하여 알아보기

css 가상 클래스 셀렉터에 대하여 알아보기

css 가상 클래스 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 가상 클래스 셀렉터에 대하여 알아보도록 하겠습니다. 가상 클래스 셀렉터도 id와 class 셀렉터만큼이나 자주 쓰이

funnycoderl.tistory.com

그리고 이렇게 쓰이는 셀렉터는 40개가 넘는데,

여기에서 자주 쓰이는 속성만 골라서 제가 표로 작성을 해봤습니다.

유형	셀렉터	설명
마우스	:hover	마우스가 올라갈 때 스타일 적용
마우스	:active	마우스로 누르고 있는 상황에서 스타일 적용
폼 요소	:focus	폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용
링크	:link	방문하지 않은 링크에 스타일 적용
링크	:visited	방문한 링크에 스타일 적용
블록	:first-letter	p, div 태그와 같은 블록형 태그의 첫 글자에 스타일 적용(:;first-letter과 같은 기능을 함)
블록	:first-line	p, div 태그와 같은 블록형 태그의 첫 줄에 스타일 적용(::first-line과 같은 기능을 함)
구조	:nth-children(even)	짝수번째 모든 자식 태그에 스타일 적용
구조	:nth-child(1)	첫 번째 자식 태그에 스타일 적용

이렇게 씁니다.

그럼 지금까지 배운 것을 이용해서 한 번 간단한 예제를 작성을 해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
    h3, li { /* 태그 이름 셀렉터 */
        color : brown;
    }
    div > div > strong { /* 자식 셀렉터 */
        background : yellow;
    }
    ul strong { /* 자손 셀렉터 */
        color : dodgerblue;
    }
    .warning { /* class 셀렉터 */
        color : red;
    }
    body.main { /* class 셀렉터 */
         background : aliceblue;
    }
    #list { /* id 셀렉터 */
        background : mistyrose;
    }
    #list span{ /* 자손 셀렉터 */
        color : forestgreen;
    }
    h3:first-letter { /* 가상 클래스 셀렉터 */
        color : red;
    }
    li:hover { /* 가상 클래스 셀렉터 */
        background : yellowgreen;
    }
    </style>
</head>
<body>
    <h3>Web Programming</h3>
    <hr>
    <div>
        <div>2학기 <strong>학습 내용</strong>입니다.</div>
        <ul id="list">
             <li><span>HTML5</span></li>
            <li><strong>CSS</strong></li>
            <li>JAVASCRIPT</li>
        </ul>
        <div class="warning">60점 이하는 F</div>
    </div>
</body>
</html>

이렇게 작성을 해봤습니다.

우리가 지금까지 배운 셀렉터 유형이 거의 다 들어가 있습니다.

그럼 이제 이들이 어떤 식으로 적용이 되었는지 결과 화면으로 보도록 하겠습니다.

이런 식으로 각각의 기능이 적용이 되어서 화면이 나온 것을 볼 수 있습니다.

여기까지 이벤트 속성을 사용하는 방법에 대하여 알아보았고요,

다음 포스팅에서는 셀렉터들을 조합하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css로 색 꾸미는 방법에 대하여 알아보기 (0)	2023.03.13
css 여러 가지 셀렉터 조합하는 방법에 대하여 알아보기 (0)	2023.03.13
css 가상 클래스 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 속성 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 전체 셀렉터에 대하여 알아보기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css 이벤트 속성에 대하여 알아보기