본문 바로가기
HTML5

21. 02. 04. 12장- 선택자, 가상클래스

Levinni 2021. 2. 4. 16:16

선택자(Selector): css의 속성이 적용될 장소

태그, 아이디, 클래스, 전체, 복수, 자손(공백 한 칸)

 

연결선택자, 속성선택자, 가상클래스와 요소

 

12-1. 연결선택자

자손

상위요소 하위요소 {}

자식

상위요소 > 하위요소 {}

인접

요소1 + 요소2 {}

형제

요소1 ~ 요소2 {}

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        div ul {border: 1px dotted;}
        div > ul {border-width: 3px;} /* 조상이 아니라 부모. ul 바로 위에 div가 있어야 함. */
        li + li {color: blue;}
        li + li + li {color: green;}
        /* h1 ~ p {text-decoration: underline;} */
        h1 ~ * {text-decoration: underline;} /* h2는 h1보다 윗줄에 있어서 적용 안 됨. */
    </style>
</head>
<body>
    <div>
        <h2>참고사항</h2>
        <h1>예약방법 및 요금</h1>
        <p>세부 조항은 아래 내용 참고.</p>
        <ul>
            <li>예약방법
                <ul>
                    <li>직접통화</li>
                    <li>문자남기기</li>
                </ul>
            </li>
            <li>
                요금
                <ul>
                    <li>1인: 40,000원</li>
                    <li>2인: 60,000원</li>
                    <li>3인: 80,000원</li>
                    <li>4인: 100,000원</li>
                </ul>
            </li>
        </ul>
    </div>   
</body>
</html>

child.html

12-2. 속성 선택자

[속성]: 속성이름

[속성="속성값"]

[속성~="속성값"]: 특정 값을 포함하는 속성에 적용, 순수하게 단어만 가지고 구분

[속성|="속성값"]: 특정 값을 포함하는 속성에 적용, 하이픈을 기준으로

[속성*="속성값"]: 특정 값을 포함하는 속성에 적용

[속성$="값"]: 끝에서부터 그 값을 찾음. ex) 파일확장자

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        li {display: inline-block; margin: 20px;}
        li a {text-decoration: none;}
        a[href] {background: yellow;}
    </style>
</head>
<body>
    <ul>
        <li><a>메인메뉴 :</a></li>
        <li><a href="#">메뉴 1</a></li>
        <li><a href="#">메뉴 2</a></li>
        <li><a href="#">메뉴 3</a></li>
        <li><a href="#">메뉴 4</a></li>
    </ul>    
</body>
</html>

attr1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        li {display: inline-block; margin: 20px;}
        li a {text-decoration: none; color: #09f;}

        .attr2 li {display: list-item;}
        [target="_blank"] {padding-right: 20px; 
            background: url(images/newwindow.png) no-repeat center right;}
        
        .attr3 a {padding: 15px;}
        [title~="button"] {border: 2px solid black; box-shadow: #0006 5px 5px;}
        [title~="flat"] {background: blue; color: #ddd;}
        [title|="button"] {background: url(images/us.png) center left no-repeat; padding-left: 20px;}
        [title*="button"] {text-decoration: underline;}

        .attr4 [href] {background: no-repeat left center; padding: 5px 25px;}
        .attr4 [title^="eng"] {background-image: url(images/us.png);}
        .attr4 [title^="jap"] {background-image: url(images/jp.png);}
        .attr4 [title^="chi"] {background-image: url(images/ch.png);}

        .attr5 [href] {background: no-repeat right center; padding: 5px 25px;}
        .attr5 [href$="hwp"] {background-image: url(images/hwp_icon.gif);}
        .attr5 [href$="xlsx"] {background-image: url(images/excel_icon.gif);}
    </style>
</head>
<body>
    <div class="attr2">
        <h1>[속성="값"] 선택자</h1>
        <h1>HTML5 표준안 사이트</h1>
        <ul>    
            <li><a href="http://www.w3c.org" target="_blank">HTML</a></li>
            <li><a href="http://www.w3c.org" target="_self">CSS</a></li>
            <li><a href="http://www.w3c.org" target="_self">미디어쿼리</a></li>
        </ul>
    </div>
    <div class="attr3">
        <h3>[속성~="값"] 선택자</h1>
        <h3>[속성|="값"] 선택자</h1>
        <h3>[속성*="값"] 선택자</h1>
        <ul>
            <li><a href="#" title="button-1">메뉴 1</a></li>
            <li><a href="#" title="mybutton-2">메뉴 2</a></li>
            <li><a href="#" title="button">메뉴 3</a></li>
            <li><a href="#" title="button flat">메뉴 4</a></li> <!-- 툴팁박스 -->
        </ul>    
    </div>
    <div class="attr4">
        <h3>[속성|="값"] 선택자</h3>
        <ul>
            <li>외국어 서비스</li>
            <li><a href="#" title="english">영어</a></li>
            <li><a href="#" title="japanse">일본어</a></li>
            <li><a href="#" title="chinese">중국어</a></li>
        </ul>
    </div>
    <div class="attr5">
        <h3>[속성$="값"] 선택자</h3>
        <h4>회사 소개 다운받기</h4>
        <ul>
            <li><a href="intro.hwp">hwp파일</a></li>
            <li><a href="intro.xlsx">엑셀파일</a></li>
        </ul>
    </div>
</body>
</html>

attr2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        .daum ul {list-style: none;}
        .daum li {display: inline-block;}
        .daum li a {background: url(https://t1.daumcdn.net/daumtop_deco/images/top/2021/txt_pctop_210121.png) no-repeat;
            background-position-y: -46px; display: inline-block; text-indent:-9999px;
            width: 22px; height: 12px; margin: 10px;
        }
        .daum li + li a {background-position-x: -37px;}
        .daum li + li + li a {background-position-x: -73px; width: 23px;}
        .daum li + li + li + li a {background-position-x: -110px;}

        .custom ul {list-style: none; background: #000; font-size: 12px;}
        .custom li {display: inline-block;}
        .custom li a {text-decoration: none; padding: 25px; display: inline-block;}
        /* pseudo(가짜의, 모조의)- 가상클래스, :~샹태일 때 */
        .custom li a:link, .custom li a:visited {color: #fff;}
        .custom li a:hover, .custom li a:active, .custom li a:focus {color:yellow; background-color: gray;}
        
        .signin {width: 600px; margin: 0 auto; border-collapse: collapse;}
        .signin th {text-align: right;}
        .signin th + td {text-align: left;}
        .signin td {height: 50px; text-align: center; padding: 15px;}

        .signin input:not([type='radio']) {padding: 10px; margin: 3px 10px; width: 350px; }
        /* .signin input {width: 30px;} */
        .signin input:focus:not([type='radio']) {box-shadow: 0 0 5px red; background: #ffa;}
        .signin input[type='radio']:checked + span {color: blue;}
        .signin button {margin: 0 10px; padding: 15px;}

        /* .signin tr:nth-child(3n) {background: #eee;} */
        
    </style>
</head>
<body>
    <nav class="daum">
        <ul>
            <li><a href="#">카페</a></li>
            <li><a href="#">메일</a></li>
            <li><a href="#">뉴스</a></li>
            <li><a href="#">지도</a></li>
            
        </ul>
    </nav>
    <nav class="custom">
        <ul>
            <li><a href="#">카페</a></li>
            <li><a href="#">메일</a></li>
            <li><a href="#">뉴스</a></li>
            <li><a href="#">지도</a></li>
        </ul>  
    </nav>
    <form>    
        <table class="signin">
            <tr>
                <th>아이디</th>
                <td><input type="text" name="id"></td>
            </tr>
            <tr>
                <th>비밀번호</th>
                <td><input type="text" name="pw"></td>
            </tr>
            <tr>
                <th>비밀번호 확인</th>
                <td><input type="text" name="pwck"></td>
            </tr>
            <tr>
                <th>이름</th>
                <td><input type="text" name="name"></td>
            </tr>
            <tr>
                <th>성별</th>
                <td>
                    <label><input type="radio" name="gender" value="male"><span>남</span></label>
                    <label><input type="radio" name="gender" value="female"><span>여</span></label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button type="button" value="회원가입" onclick="alert('회원가입이 완료되었습니다.'); location.href ='info.html'">회원가입</button>
                    <a href="javascript:history.back()"><button type="button">취소</button></a>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

nav.html

12-3. 가상클래스 가상 요소

: 콜론 link, visited, hover, active, focus 사용자 동작에 반응

: enabled disabled checked 해당 ui가 가지고 있는 상태가 어떠냐에 대한. 

: root

 

구조적인 가상 클래스

: nth-child nth-last-child n번째 자식

: nth-of-type, nth-last-of-type

: last-child, first-child

: first-of-type, last-of-type

: only-child, only-of-type

: target, :not

 

:: 더블콜론

:: first-line, first-letter

:: before :: after -> 엄청 많이 쓰고 강력함.

 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        p:nth-child(2) {color: blue;}
        p:nth-of-type(2) {background-color: orange;}

        p:nth-last-child(2) {color: red;}
        p:first-child {border: 1px solid black;}
        p:last-child {border: 1px solid green;}
    </style>
</head>
<body>
    <div class="wrapper">
        <h2>제목입니다</h2>
        <p>국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.</p>
        <p>헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며, 재판관은 대통령이 임명한다. 이 헌법시행 당시의 대법원장과 대법원판사가 아닌 법관은 제1항 단서의 규정에 불구하고 이 헌법에 의하여 임명된 것으로 본다.</p>
        <p>이 헌법시행 당시에 이 헌법에 의하여 새로 설치될 기관의 권한에 속하는 직무를 행하고 있는 기관은 이 헌법에 의하여 새로운 기관이 설치될 때까지 존속하며 그 직무를 행한다.</p>
        <p>광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.</p>
        <p>국무총리는 국회의 동의를 얻어 대통령이 임명한다. 누구든지 체포 또는 구속을 당한 때에는 적부의 심사를 법원에 청구할 권리를 가진다. 국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다.</p>
        <p>군인은 현역을 면한 후가 아니면 국무위원으로 임명될 수 없다. 국무총리 또는 행정각부의 장은 소관사무에 관하여 법률이나 대통령령의 위임 또는 직권으로 총리령 또는 부령을 발할 수 있다.</p>
    </div>    
</body>
</html>

nth.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        .target {background: black; color: white;
            min-width: 100px;
            max-width: 300px;
            padding: 10px 15px;
            border-radius: .7em;
            position: relative;
        }
        .target::after {content: '';
        display: block;
        position: absolute;
        border: 20px solid transparent;
        border-top-color: black;
        border-width: 40px 20px;
        left : 20%;
        transform: skewX(-30deg);
        }

    </style>
</head>
<body>
    <h1>제목</h1>
    <h1>제목</h1>
    <div class="target">오늘도 여러분 고생하셨습니다. 오늘도 여러분 고생하셨습니다. 오늘도 여러분 고생하셨습니다.</div>    
    <h1>제목</h1>
    <h1>제목</h1>
</body>
</html>

ex.html 말풍선 만들기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)

'HTML5' 카테고리의 다른 글

21. 02. 05. 13장- CSS3와 애니메이션  (0) 2021.02.05
21. 02. 03. 10장- HTML5와 시맨틱 태그, 11장- HTML과 멀티미디어  (0) 2021.02.03
21. 02. 03. 09장 다단 편집, 표 스타일  (0) 2021.02.03
21. 02. 02. 09장- CSS 포지셔닝  (0) 2021.02.02
21. 02. 02. 08장- 레이아웃을 위한 스타일  (0) 2021.02.02

'HTML5' Related Articles

티스토리툴바