스타일(CSS선택자)

카테고리 없음

스타일(CSS선택자)

psys 2020. 6. 30. 12:42

728x90

클래스 안에는 여러 클래스가 들어와도 됨

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        .fgPink {
            color: pink;
        }

        .fgPing {
            color: palevioletred;
        }

        .fgYello {
            color: yellow;
        }

        .fgBlue {
            color: blue;
        }

        .bgPink {
            background-color: pink;
        }

        .bgYello {
            background-color: yellow;
        }

        .bgBlue {
            background-color: blue;
        }

        .bgPing {
            background-color: palevioletred;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

css파일 생성

.fgPink {
    color: pink;
}

.fgPing {
    color: palevioletred;
}

.fgYello {
    color: yellow;
}

.fgBlue {
    color: blue;
}

.bgPink {
    background-color: pink;
}

.bgYello {
    background-color: yellow;
}

.bgBlue {
    background-color: blue;
}

.bgPing {
    background-color: palevioletred;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹디자이너 입장에서 본 CSS</title>
</head>

<body>
    <div class="fgBlue bgPink">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

CSS파일 적용

헤드안에 넣는다.

    <link rel="stylesheet" href="css/myStyle.css">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
</head>

<body>
    <div class="fgBlue bgPink">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

모든 요소에 테두리 넣어라

    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }
    </style>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

border를 두 개 사용하면 마지막 것이 적용이 됨

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

아이디 선택자

        #psy {
            font-size: 2em;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink" id="psy">박성연</div>
    <div class="fgYello bgPing">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

class선택자

   .aaa {
       background-color: tomato;
   }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink" id="psy">박성연</div>
    <div class="fgYello bgPing aaa">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
</body>

</html>

        input[type="button"]{
            color:gold;
            background-color: hotpink;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {  /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink" id="psy">박성연</div>
    <div class="fgYello bgPing aaa">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
    <input type=button value="버튼">
</body>

</html>

여러개 선택

태그에 백그라운드 줘서 태그것이 먹힘!!(덮어씌워지지 않음,,)

        div, input {
            background-color: black;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {
            /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }

        /* 여러개 선택  , 콤마 */
        div, input {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="fgBlue bgPink" id="psy">박성연</div>
    <div class="fgYello bgPing aaa">박성연</div>
    <input class="fgPink bgBlue" type="text" value="박성연">
    <input type=button value="버튼">
</body>

</html>

태그 애들 지움

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {
            /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }

        /* 여러개 선택  , 콤마 */
        div,
        input {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="fgBlue" id="psy">박성연</div>
    <div class="fgYello aaa">박성연</div>
    <input class="fgPink" type="text" value="박성연">
    <input type=button value="버튼">
</body>

</html>

버튼 하나 더 만들거얍

        input[type=button]#id_a{
            font-size: 3em;
            
        }

버튼이면서 아이디가 id_a인 것!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {
            /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }

        /* 여러개 선택  , 콤마 */
        div,
        input {
            background-color: black;
        }

        /* 붙여쓰면 and */
        input[type=button]#id_a {
            font-size: 3em;

        }
    </style>
</head>

<body>
    <div class="fgBlue" id="psy">박성연</div>
    <div class="fgYello aaa">박성연</div>
    <input class="fgPink" type="text" value="박성연">
    <input type=button id="id_a" value="나버튼"><br>
    <input type=button value="나도버튼"><br>
    <input type=button value="나도오버튼">
</body>

</html>

div>div*4>div*1로 div만들기

    <div>
        <div> <!-- 나는 자식이자 후손 -->
            <div></div> <!-- 나는 후손 -->
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>

        /* 후손 선택자 빈 공백 */
        #parent {
            width: 400px;
            height: 400px;
            border: 1px solid cyan;
        }
        /* parent의 후손(자식포함) */
        #parent div{
            width: 200px;
            height: 20px;
            border: 1px solid fuchsia;
            margin: 3px;
        }
    </style>
</head>

<body>
    <!-- div>div*4>div*1 -->
    <div id="parent">
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>

    <div class="fgBlue" id="psy">박성연</div>
    <div class="fgYello aaa">박성연</div>
    <input class="fgPink" type="text" value="박성연">
    <input type=button id="id_a" value="나버튼"><br>
    <input type=button value="나도버튼"><br>
    <input type=button value="나도오버튼">
</body>

</html>

        /* 직계 자손만 선택 */
        #parent>div {
            background-color: red;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {
            /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }

        /* 여러개 선택  , 콤마 */
        div,
        input {
            background-color: black;
        }

        /* 붙여쓰면 and */
        input[type=button]#id_a {
            font-size: 3em;
        }

        /* 후손 선택자 빈 공백 */
        #parent {
            width: 400px;
            height: 400px;
            border: 1px solid cyan;
        }

        /* parent의 후손(자식포함) */
        #parent div {
            width: 200px;
            height: 20px;
            border: 1px solid fuchsia;
            margin: 3px;
        }

        /* 직계 자손만 선택 */
        #parent>div {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- div>div*4>div*1 -->
    <div id="parent">
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>

    <div class="fgBlue" id="psy">박성연</div>
    <div class="fgYello aaa">박성연</div>
    <input class="fgPink" type="text" value="박성연">
    <input type=button id="id_a" value="나버튼"><br>
    <input type=button value="나도버튼"><br>
    <input type=button value="나도오버튼">
</body>

</html>

나버튼에 클래스명줫

** 우선순위는 클래스보다 id가 더 높다 **

    <input type=button id="id_a" class="kkk" value="나버튼"><br>

        input[type=button][class=kkk] {
            font-size: 5em;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/myStyle.css">
    <title>웹디자이너 입장에서 본 CSS</title>
    <style>
        /* basic selector */

        /* 전체 선택자 */
        * {
            border: 2px solid black;
        }

        /* 태그(또는 type이라고 부름) 선택자 */
        input {
            border: 5px dashed pink;
        }

        /* ID 선택자 # */
        #psy {
            font-size: 2em;
        }

        /* class 선택자 . */
        .aaa {
            background-color: tomato;
        }

        /* 속성 포함 선택자 [] 개발자가 많이 쓰는 표현 */
        input[type=button] {
            /* input 태그중에 type이 버튼인거 */
            color: gold;
            background-color: hotpink;
        }

        /* 여러개 선택  , 콤마 */
        div,
        input {
            background-color: black;
        }

        /* 붙여쓰면 and */
        input[type=button]#id_a {
            font-size: 3em;
        }

  		 /* 우선 순위가 id가 class 보다 높답니다 */
        input[type=button][class=kkk] {
            font-size: 5em;
        }

        /* 후손 선택자 빈 공백 */
        #parent {
            width: 400px;
            height: 400px;
            border: 1px solid cyan;
        }

        /* parent의 후손(자식포함) */
        #parent div {
            width: 200px;
            height: 20px;
            border: 1px solid fuchsia;
            margin: 3px;
        }

        /* 직계 자손만 선택 */
        #parent>div {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- div>div*4>div*1 -->
    <div id="parent">
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
        <div>
            <div></div>
        </div>
    </div>

    <div class="fgBlue" id="psy">박성연</div>
    <div class="fgYello aaa">박성연</div>
    <input class="fgPink" type="text" value="박성연">
    <input type=button id="id_a" value="나버튼"><br>
    <input type=button value="나도버튼"><br>
    <input type=button value="나도오버튼">
    <input type=button class="kkk" value="나도5버튼">
</body>

</html>

현재글스타일(CSS선택자)

StringEscapeUtils, utf8설정, DatePicker, 2875, jstreetable, 200602 #백준 #java #그리디알고리즘, 그리디알고리즘, 트리테이블, jstree, 이클립스기본세팅, unescapeHtml3, 하이픈, jqtree, Settings, 백준2875, ignored, 백준, jqtreetable, escapeXml, treetable,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

성연이의 프로그래밍 블로그

스타일(CSS선택자)

'카테고리 없음'의 다른글

티스토리툴바