본문 바로가기
웹퍼블리셔수업

1/7(목)웹퍼블리셔수업 8회차

#쇼퍼제리 2021. 1. 7. 20:16

교재 120쪽

 

~= 여러의 문장중 한단어만 인식해도 적용된다

특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택합니다

 

=값이 일치 해야만

ㅣ= 특수문자 _등 영어로만 거의 쓴다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>단어 선택</title>
        <style>
            span[lang=ko] {
                background-color: red;
            }
            span[lang~=ko] {
                background-color: brown;
            }
            span[title~=가자] {
                background: pink;
            }
            span[lang|=en] {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <p>~= 단어가 일치할 경우</p>
        <span lang="en-test" title="학교 가자">영어</span>
        <span lang="pp ko pd">한글</span>
        <span lang="jp">일어</span>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>속성의 값으로 시작 / 끝</title>
    <style>
        span[title^=sc] {
            background-color: green;
        }
        span[title$=ill] {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <span title="bill">마을</span>
    <span title="sch">학교</span>
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>특정 단어 포함</title>
    <style type="text/css">
        .first {
            background-color: hotpink;
        }
        /* 값으로 포함하는 모든 요소 */
        span[class*=s1p] {
            background-color: lawngreen;
            /* border: 테두리굵기 스타일 색*/
            border: 3px solid red;
            /* 
                border-width:
                border-style:
                border-color:
            */
        }
    </style>
</head>
<body>
    <span class="first span">1</span>
    <span class="seconds1pan">2</span>
    <span class="thirds1pan">3</span>
</body>
</html>

http://romeonews.woobi.co.kr/green/wp/word3.html

문서객체모델 참고

https://poiemaweb.com/js-dom

 

DOM | PoiemaWeb

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저

poiemaweb.com

후손선택자(부모요소 자식요소)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>후손 선택자</title>
    <style>
        /* 한 칸 띄우기는 모든 후손 선택 */
        div * {
            color: red;
        }
        div li {
            color: blue;
        }
        div h4, div h5 {
            color: brown;
        }
    </style>
</head>
<body>
    <h5>h5</h5>
    <div>
        <h4>제목</h4>
        <ul>
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>
                <h5>리스트4</h5>
                <div>
                    영역1
                    <ul>
                        <li>리스트4</li>
                        <li>리스트5</li>
                        <li>리스트6</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

자손선택자(부모요소>자식요소) 예외(table)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자손 선택자</title>
    <style>
        /* >는 직계 자손 선택 */
        div>h4 {
            color: blue;
        }
    </style>
</head>
<body>
    <h5>h5</h5>
    <div>
        <h4>제목</h4>
        <ul>
            <li>리스트1</li>
            <li>리스트2</li>
            <li>리스트3</li>
            <li>
                <h4>리스트4</h4>
                <div>
                    영역1
                    <ul>
                        <li>리스트4</li>
                        <li>리스트5</li>
                        <li>리스트6</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

동위선택자 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>동위 선택자</title>
    <style>
        
        /* 바로 아래 동생 선택 */
        h1+h2 {
            background-color: green;
        }
        /* 모든 동생 */
        h2~h2 {
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</body>
</html>

 

반응선택자

커서를 대면

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응 선택자</title>
    <style>
        /* 누른 상태 */
        a:active {
            color: red;
        }
        /* 마우슬 올린 상태 */
        a:hover {
            background: coral;
        }
    </style>
</head>
<body>
    <a href="http://www.naver.com">네이버</a>
</body>
</html>

상대선택자

 

체크박스 선택시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상태 선택자</title>
    <style>
        input:checked {
            width: 100px;
            height: 100px;
        }
        /* 커서 */
        input:focus { 
            border: 5px solid red;
        }
        input:disabled {
            background-color: green;
        }
        input:enabled {
            background-color: red;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="text">
    <input type="text" disabled>
</body>
</html>

체크응용

클릭시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크 응용</title>
    <style>
        label {
            cursor: pointer;
        }
        #myCheckbox {
            /* 투명도 */
            opacity: 0;
        }
        div.contents {
            border: none;
            height: 0px;
            background-color: gray;
            /* 넘침 설정 */
            overflow: hidden;
            /* 차이의 속도 지정 */
            transition: 0.2s;
        }
        #myCheckbox:checked+div {
            height: 100px;
            border: 1px solid red;
            background-color: none;
        }
    </style>
</head>
<body>
    <label for="myCheckbox">선택</label>
    <input type="checkbox" id="myCheckbox">
    <div class="contents">내용 내용</div>
</body>
</html>

구조선택자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구조 선택자</title>
    <style>
        /* 자식 중에서 첫번째 li */
        li:first-child {
            background-color: red;
        }
        li:last-child {
            background-color: blue;
        }
        li:nth-child(2) {
            background-color: green;
        }
        /* 짝수 even */
        ul:last-child>li:nth-child(2n) {
            background-color: pink;
        }
        /* 홀수 odd */
        ul:last-child>li:nth-child(2n+1) {
            background-color:indigo;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
</html>

메뉴

둥근정도 radius는 시계방향으로 생각하면 될것 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>메뉴</title>
    <style>
        ul {
            /* 점 삭제 */
            list-style: none;
            /* 밖 여백 */
            margin-top: 150px;
            margin-left: 0;
        }
        ul>li {
            /* 일직선으로 만듦 */
            float: left;
            border: 1px solid red;
            width: 50px;
            /* 글자를 가운데 */
            text-align: center;
            /* 안쪽 여백 */
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 5px;
            padding-bottom: 5px; 
        }
        ul>li:first-child {
            /* 둥근 정도 : 왼쪽위 오른쪽위 오른쪽아래 왼쪽 아래 */
            border-radius: 15px 0px 0px 15px;
        }
        ul>li:last-child {
            border-radius: 0px 15px 15px 0px;
        }
        ul>li:nth-child(2n) {
            background-color: indigo;
        }
        ul>li:nth-child(2n+1) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>HOME</li>
        <li>FIRST</li>
        <li>SEC</li>
        <li>THIR</li>
    </ul>
</body>
</html>

형태구조 선택자 교재 140페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>형태 구조 선택자</title>
    <style>
        /* type : 형태 기준, child : 부목 기준 */
        p:first-of-type {
            background-color: red;
        }
        li:last-of-type {
            background-color: green;;
        }
        p:nth-of-type(2) {
            background-color: indigo;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <div>div</div>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
</html>

형태구조선택자2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>형태 구조 선택자</title>
    <style>
        body>*:first-of-type {
            color: red;
        }
    </style>
</head>
<body>
    <h1>1</h1>
    <h1>2</h1>
    <h2>3</h2>
    <h3>4</h3>
    <h2>5</h2>
    <h1>6</h1>
    <h4>7</h4>
    <h5>8</h5>
    <h1>9</h1>
    <h6>0</h6>
</body>
</html>

 

저작자표시

'웹퍼블리셔수업' 카테고리의 다른 글

공부중(작성중)..  (0) 2021.02.01
비주얼스튜디오코드 유용한 익스텐션 정리  (0) 2021.02.01
1/5(화)웹퍼블리셔수업 7회차  (0) 2021.01.05
12/29(화)웹퍼블리셔수업 6회차  (0) 2020.12.29
12/24(목)웹퍼블리셔수업 5회차  (0) 2020.12.24

'웹퍼블리셔수업' Related Articles

티스토리툴바