[CSS] CSS 선택자 지정 방법

HTML 2017. 4. 28. 10:53





출처 : 자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉






■ CSS 선택자 지정 방법



▼ 선택자 기본 서식

서식

설명

*

 · 모든 요소

태그명

 · 태그명이 일치하는 요소(예)

.클래스명

 · 클래스 속성 값이 일치하는 요소

#id명

 · id 속성의 값이 일치하는 요소






▼ 선택자끼리의 관계를 지정하는 서식

서식

설명

선택자, 선택자

 · 열거된 복수의 선택자 (예) h1, h2

선택자 선택자

 · 하위 계층의 후손 요소 (예) div > h1

선택자 > 선택자

 · 바로 아래 계층의 자식 요소 (예) div > h1

선택자A + 선택자B

 · 같은 계층에 선택자A 바로 뒤에 있는 선택자B 한 개 (예) h1 + h2

선택자A ~ 선택자B

 · 같은 계층에 선택자A 바로 뒤에 있는 선택자B 모두 (예) p ~ ul






▼ 선택자의 속성에 따른 지정 서식

서식

설명

요소[att]

 · 특정 속성을 가지는 요소를 선택

요소[att = 'val']

 · att 속성의 값이 val인 요소, val값이 전체 일치해야 함

요소[att ~ 'val']

 · att 속성의 값에 val을 단어로(스페이스로 구분) 포함하는 요소

요소[att |= 'val']

 · att 속성의 값이 val이거나 val로 시작하고 뒤에 하이픈(-)이 있는 모든 요소

요소[att ^= 'val']

 · att 속성의 값이 val로 시작하는 요소

요소[att $= 'val']

 · att 속성의 값이 val로 끝나는 요소

요소[att *= 'val']

 · att 속성의 값에 val을 포함하는 요소






▼ 위치나 상태를 지정하는 서식

서식

설명

:root

 · Document의 루트 요소

:nth-child(n)

 · 동위 요소 중 n 번째 위치한 요소

:nth-last-child(n)

 · 동위 요소 중 뒤에서 n 번째 위치한 요소

태그:nth-of-type(n)

 · 동위 요소 중 지정한 태그 중 n번째 요소

:first-child

 · 동위 요소 중 첫번째 요소

:lat-child

 · 동위 요소 중 마지막 요소

태그:first-of-type

 · 동위 요소 중 지정한 태그 중 첫번째 요소

태그:last-of-type

 · 동위 요소 중 지정한 태그 중 마지막 요소

:only-child

 · 동위 요소 없이 한 개의 요소만 있을 때 해당 요소

:only-child

 · 동위 요소 중 지정한 태그 중 마지막 요소

태그:only-of-type

 · 동위 요소 중 지정한 태그가 하나만 있을 때 해당 요소

:empty

 · 내용이 빈 요소

:lang(code)

 · 특정 언어 code로 된 요소

:not(s)

 · s 이외의 요소

:enabled

 · 활성화된 UI 요소

:disbled

 · 비활성화된 UI 요소

:checked

 · 체크된 UI 요소







[HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02

HTML 2017. 4. 15. 13:34




참고 : 자바스크립트 없이 tree 만들기





■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02





01. 이전 예제에서 2단 트리 뷰를 만들어 보았다. 이번에는 3단 트리뷰를 만들어 보자.

 tree.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
<style type="text/css">
    input[type="checkbox"] {
        display:none;
    }

    input[type="checkbox"]:checked~ul {
        display:none;
    }
</style>
</head>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul>
        <li>one1</li>
        <li>one2</li>
        <li>
            <input type="checkbox" id="one3">
            <label for="one3">one3</label>
            <ul>
                <li>one3-1</li>
                <li>one3-2</li>
                <li>one3-3</li>
                <li>
                    <input type="checkbox" id="one3-4">
                    <label for="one3-4">one3-4</label>
                    <ul>
                        <li>one3-4-1</li>
                        <li>one3-4-2</li>
                        <li>one3-4-3</li>
                        <li>one3-4-4</li>
                        <li>one3-4-5</li>
                        <li>one3-4-6</li>
                        <li>one3-4-7</li>
                        <li>one3-4-8</li>
                        <li>one3-4-9</li>
                    </ul>
                </li>
                <li>one3-5</li>
                <li>one3-6</li>
                <li>one3-7</li>
                <li>one3-8</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>two1</li>
            <input type="checkbox" id="two2">
            <label for="two2">two2</label>
            <ul>
                <li>two2-1</li>
                <li>two2-2</li>
                <li>two2-3</li>
            </ul>
        <li>two3</li>
    </ul>
</body>
</html>



출력결과는 아래와 같다.





하지만 기본적인 ul, li 태그의 점, 블릿기호가 삽입된 모습니다.


이제 이 트리뷰를 폰텔로를 사용하여 좀더 트리 뷰 처럼 보이게 꾸며보자.





02. 폰텔로(http://fontello.com/) 사이트에 접속하여 예제에 필요한 아이콘을 다운받자.

 ① 사용할 아이콘을 3개 선택한다 선택된 아이콘은 붉은색 기호로 테두리가 감싸진다.

 ② 아이콘을 선택하면 화면 상단에 Download Webfont 를클릭한다.

 ③ 사용도리 fontello 코드를 다운받는다.





03. 다운받은 fontello.zip 파일을 위 tree.html 과 같은 폴더에 위치시키고 압축을 해제한다.

 ① 다운받은 fontello.zip 파일의 압축을 해제한다.

 ② 압축을 해제하고 생성된 폴더의 이름을 tree_fontelo로 변경하였다.







04. tree_fontelo 폴더내부의 demo.html 파일이 존재한다. 해당 파일을 실행 시킨다.






05. demo.html을 윕브라우저를 통해 실행한다.

 ① 상단 우측에 보면 show codes라는 체크박스가 존재한다. 체크해준다.

 ② 그럼 다운받은 아이콘들의 CODE값이 나타난다. 이제 이 코드를 적용시켜 보자.





06. 위에서 작업한 tree.html 파일을 이제 다시 실행하여 수정하여 보자.






07. tree.html 파일을 아래와 같이 수정해 보자.

 tree.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
<!-- 다운받은 fontello.css의 경로를 지정하여 준다. -->
<link rel="stylesheet" href="./tree_fontello/css/fontello.css"/>
<style type="text/css">
   
    /* ul, li태그의 앞의 점, 블릿기호를 제거한다. */
    ul { list-style:none; }
   
    /* fontello 아이콘과 tree의 간격 조절 */
    .tree *:before {
        width:17px;
        height:20px;
        display:inline-block;
    }

    /* 해당 영역을 닫을경우, 혹은 닫혀있는경우 사용할 이미지를 지정한다. */
    .tree input[type="checkbox"]:checked+label:before {
        content:"\e800";
        font-family:fontello;
    }

    /* 해당 영역을 오픈 하였을때 변경할 이미지를 지정한다. */
    .tree label:before {
        content:"\e801";
        font-family:fontello;
    }

    /* a태그로 지정한 더이상 오픈할 것이 없고 해당 페이지를 불러올때 사용될 이미지를 지정한다. */
    .tree a:before {
        content:"\f0f6";
        font-family:fontello;
    }

    input[type="checkbox"] {
        display:none;
    }

    input[type="checkbox"]:checked~ul {
        display:none;
    }
</style>
</head>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul class="tree">
        <li><input type="checkbox" id="one1" checked="checked"><label for="one1">one1</label></li>
        <li><input type="checkbox" id="one2" checked="checked"><label for="one2">one2</label></li>
        <li>
            <input type="checkbox" id="one3" checked="checked">
            <label for="one3">one3</label>
            <ul class="tree">
                <li><input type="checkbox" id="one3-1" checked="checked"><label for="one3-1">one3-1</label></li>
                <li><input type="checkbox" id="one3-2" checked="checked"><label for="one3-2">one3-2</label></li>
                <li><input type="checkbox" id="one3-3" checked="checked"><label for="one3-3">one3-3</label></li>
                <li>
                    <input type="checkbox" id="one3-4" checked="checked">
                    <label for="one3-4">one3-4</label>
                    <ul class="tree">
                        <li><a href="">one3-4-1</a></li>
                        <li><a href="">one3-4-2</a></li>
                        <li><a href="">one3-4-3</a></li>
                        <li><a href="">one3-4-4</a></li>
                        <li><a href="">one3-4-5</a></li>
                        <li><a href="">one3-4-6</a></li>
                        <li><a href="">one3-4-7</a></li>
                        <li><a href="">one3-4-8</a></li>
                        <li><a href="">one3-4-9</a></li>
                    </ul>
                </li>
                <li><input type="checkbox" id="one3-5" checked="checked"><label for="one3-5">one3-5</label></li>
                <li><input type="checkbox" id="one3-6" checked="checked"><label for="one3-6">one3-6</label></li>
                <li><input type="checkbox" id="one3-7" checked="checked"><label for="one3-7">one3-7</label></li>
                <li><input type="checkbox" id="one3-8" checked="checked"><label for="one3-8">one3-8</label></li>
            </ul>
        </li>
    </ul>
    <ul class="tree">
        <li><input type="checkbox" id="two1" checked="checked"><label for="two1">two1</label></li>
            <input type="checkbox" id="two2" checked="checked">
            <label for="two2">two2</label>
            <ul class="tree">
                <li><a href="">two2-1</a></li>
                <li><a href="">two2-2</a></li>
                <li>
                    <input type="checkbox" id="two2-3" checked="checked">
                    <label for="two2-3">two2-3</label>
                    <ul class="tree">
                        <li><a href="">two2-3-1</a></li>
                        <li><a href="">two2-3-2</a></li>
                        <li><a href="">two2-3-3</a></li>
                    </ul>
                </li>
                <li><a href="">two2-4</a></li>
                <li><a href="">two2-5</a></li>
            </ul>
        <li><input type="checkbox" id="two3" checked="checked"><label for="two3">two3</label></li>
    </ul>
</body>
</html>



폰텔로 아이콘을 적용한 tree.html파일의 출력결과는 아래와 같다.


해당 트리를 선택하면 폴더 아이콘이 끝에가서는 페이지 아이콘이 나오는 모습을 확인 할 수 있다.











[HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01

HTML 2017. 4. 15. 10:48




참고 : 자바스크립트 없이 tree 만들기


※ 해당 글은 참고로 올려둔 생활코딩의 내용을 자체적으로 정리한 내용입니다.




■ HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #01




01. 먼저 ul, li 태그와 checkbox를 이용하여 트리 구조를 만들어 보자. 코드는 아래와 같다.


 tree_01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul>
        <li>one1</li>
        <li>one2</li>
        <li>
            <!-- 트리를 ON / OFF 하기위해서 checkbox를 사용한다. -->
            <input type="checkbox" id="one3">
            <label for="one3">one3</label>
            <ul>
                <li>one3-1</li>
                <li>one3-2</li>
                <li>one3-3</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>two1</li>
            <!-- 트리를 ON / OFF 하기위해서 checkbox를 사용한다. -->
            <input type="checkbox" id="two2">
            <label for="two2">two2</label>
            <ul>
                <li>two2-1</li>
                <li>two2-2</li>
                <li>two2-3</li>
            </ul>
        <li>two3</li>
    </ul>
</body>
</html>




위 코드를 그대로 입력하면.


아래와 같은 결과의 트리 구조가 출력되는 것을 확인 할 수 있다.









02. 이제 체크박스를 check함으로서 체크박스의 창을 열고 닫고 하는 기능을 추가하여보자.


 tree_02.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
 <style type="text/css">

     /* 체크박스가 체크가 되어있는(checked) 속해있는(~) 모든 ul태그를 숨긴다. */

    input[type="checkbox"]:checked~ul {
        display:none;
    }
</style>
</head>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul>
        <li>one1</li>
        <li>one2</li>
        <li>
            <input type="checkbox" id="one3">
            <label for="one3">one3</label>
            <ul>
                <li>one3-1</li>
                <li>one3-2</li>
                <li>one3-3</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>two1</li>
            <input type="checkbox" id="two2">
            <label for="two2">two2</label>
            <ul>
                <li>two2-1</li>
                <li>two2-2</li>
                <li>two2-3</li>
            </ul>
        <li>two3</li>
    </ul>
</body>
</html>



출력결과를 보면 아래와같이 체크박스를 선택하면 트리구조의 카테고리가 ON / OFF 되는것을 확인 할 수 있다.





03. 특정 영역을 닫아 두고 시작하고 싶다면 해당부분을 해당부분을 미리 체크해 두고 시작하면 된다.


 tree_03.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
 <style type="text/css">   


     /* 체크박스가 체크가 되어있는(checked) 속해있는(~) 모든 ul태그를 숨긴다. */

    input[type="checkbox"]:checked~ul {
        display:none;
    }

</style>
</head>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul>
        <li>one1</li>
        <li>one2</li>
        <li>
            <!-- checked를 사용하여 해당 영역을 미리 체크된 상태로 시작하면 닫혀진 상태로 실행되는것을 확인 할 수 있다 -->
            <input type="checkbox" id="one3" checked="checked">
            <label for="one3">one3</label>
            <ul>
                <li>one3-1</li>
                <li>one3-2</li>
                <li>one3-3</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>two1</li>
            <input type="checkbox" id="two2">
            <label for="two2">two2</label>
            <ul>
                <li>two2-1</li>
                <li>two2-2</li>
                <li>two2-3</li>
            </ul>
        <li>two3</li>
    </ul>
</body>
</html>



위 코드를 실행해 보면 one3부분만 체크가 된 상태로 나타나는 것을 알 수 있다.






04. 마지막으로 이제 저 체크박스가 나타나지 않으면서 작동할 수 있게끔 숨겨보자.


 tree_04.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML / CSS를 이용한 트리</title>
<head>
<style type="text/css">

    /* 모든 체크박스를 숨김 처리 한다. */
    input[type="checkbox"] {
        display:none;
    }

    input[type="checkbox"]:checked~ul {
        display:none;
    }
</style>
</head>
<body>
    <input type="checkbox" id="root"/>
    <label for="root">트리 카테고리</label>
    <ul>
        <li>one1</li>
        <li>one2</li>
        <li>
            <input type="checkbox" id="one3">
            <label for="one3">one3</label>
            <ul>
                <li>one3-1</li>
                <li>one3-2</li>
                <li>one3-3</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>two1</li>
            <input type="checkbox" id="two2">
            <label for="two2">two2</label>
            <ul>
                <li>two2-1</li>
                <li>two2-2</li>
                <li>two2-3</li>
            </ul>
        <li>two3</li>
    </ul>
</body>
</html>



위 코드를 실행해보면 이제 체크박스가 사라진 것을 확인 할 수 있다.


그렇지만 트리의 동작에는 전혀 문제가 되지 않는 모습을 확인 할 수 있다.











[HTML] HTML / CSS 만을 이용하여 트리 뷰(tree view) 제작하기 #02









[HTML] 범위 주석

HTML 2015. 10. 31. 11:54

■ 범위 주석 : 원하는 범위에 대한 설명문


 \n

 · Enter

 \t

 · Tap(웹 브라우저에 따라 실행 안될 경우가 존재한다.

 \"

 · 문자

 \'

 · 문자

 \\ · 문자



[HTML] lable 태그를 사용한 radio 박스 선택영역 확장

HTML 2015. 6. 30. 17:51

lable 태그를 사용한 radio 박스 선택영역 확장


 radioLable.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>라디오버튼 선택영역 확장</title>
</head>
<body>
    <font size="5px" color="#000000"><b>선택영역이 확장되지 않은 경우</b></font>
    <div>
        <ul>
            <font size="3px" color="#000000">
                <li>&nbsp;&nbsp;<input name="quizeABC" value="N" type="radio"/>&nbsp;나이트 엘프</li>
                <li>&nbsp;&nbsp;<input name="quizeABC" value="O" type="radio"/>&nbsp;오크</li>
                <li>&nbsp;&nbsp;<input name="quizeABC" value="U" type="radio"/>&nbsp;언데드</li>
                <li>&nbsp;&nbsp;<input name="quizeABC" value="H" type="radio"/>&nbsp;휴먼</li>
            </font>
        </ul>
    </div>
</body>
</html>

 출력결과


 라디오 박스를 사용하면 기본적으로 위 예제와 같이 작은 라디오 박스 부분만 선택영역으로 지정된다.


 그렇지만 아래와 같이 lable태그를 사용함으로서 선택영역을 좀더 넓힐 수 있다.

<label><input type="radio"/>텍스트</label>


 위와 같은 방식을 예제에 적용하면 결과는 아래와 같이 달라진다.


 radioLable.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>라디오버튼 선택영역 확장</title>
</head>
<body>
    <font size="5px" color="#000000"><b>선택영역이 확장된 경우</b></font>
    <div>
        <ul>
            <font size="3px" color="#000000">
                <li>&nbsp;&nbsp;<label><input name="quizeABC" value="N" type="radio"/>&nbsp;나이트 엘프</label></li>
                <li>&nbsp;&nbsp;<label><input name="quizeABC" value="O" type="radio"/>&nbsp;오크</label></li>
                <li>&nbsp;&nbsp;<label><input name="quizeABC" value="U" type="radio"/>&nbsp;언데드</label></li>
                <li>&nbsp;&nbsp;<label><input name="quizeABC" value="H" type="radio"/>&nbsp;휴먼</label></li>
            </font>
        </ul>
    </div>
</body>
</html>

 출력결과