12/07 수업 (25일차) _ 선택자 /

개미의 베짱이 2023. 12. 7. 17:50

2023. 12. 7. 17:50

선택자(selector) 란?

- CSS의 효과가 적용될 태그를 지정

예) h1 {color:blue;font:12px;}

* Id 선택자

- id속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨 / 우선순위가 가장 높다.

- css선택자에서는 #을 사용해서 id임을 표시

<style type="text/css">
#memo{color:red;}
</sytle>
<div id="memo">
	red
    </div>

→ id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함.

* Class 선택자 *

- class속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용

- class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음

- css선택자에서는 '.'을 사용해서 class임을 표시

- 예) </style>

.red{ }

* type 선택자 *

- 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용

- css선택자에서는 태그의 이름을 사용함

* 하위 선택자 *

- 특정 엘리먼트의 하위에 나오는 엘리면트를 선택하는데 사용

- 부모가 먼저 나오고 자식이 나중에 나옴

- 공백을 통해서 부모와 자식을 구분

* 하나의 CSS선언을 여러 개의 선택 자에 적용 *

- 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용 / 선택자와 선택자를 ,(콤마)로 구분

- 예제)

- h1과 #link 선택자 사이에 ,(콤마)를 두어 글씨의 색을 붉은색으로 지정

* 스타일링 링크 꾸미기 *

- 링크는 4가지의 상태를 가지고 있고, 각 상태에 따라소 시각적으로 다른모양을 가질 수 있음

방문하지 않은 링크	a:link{}
방문했던 링크	a:visited{}
마우스르 오버한 링크	a:hover{} <!--a:link와 a:visited 뒤에 와야함-->
마우스를 누른 상태의 링크	a:active{} <!--a:hover뒤에 와야함-->

* 두개의 클래스 적용 *

** 예제 1207.html (id, class선택자) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>id, class선택자</title>
    <!--overflow:hidden (내용이 넘치면 자름. 자른 부분은 안보임.)
        float:left (정렬-왼쪽)-->
    <style>
        #memo{
            color:red;
            font-size:30px;
        }
        #memo2{
            color:orange;
            font-size:50px;
        }

        #header{
            width:800px;
            margin:0 auto;
            background:red;
        }

        #wrap{
            width:800px;
            margin:0 auto;
            overflow:hidden;
        }
    
        #aside{
            width:200px;
            height:100px;
            float:left;
            background:blue;
            overflow:scroll;
            overflow:hidden;
        }
        #content{
            width:600;
            float:left;
            background-color:green;
        }

        .red{
            color:red;
        }
        .intro{
            color:blue;
        }
    </style>
</head>
<body>
    <!--
     <h1>id 선택자</h1>
     <div id="memo">
        red
     </div>
     <div id="memo2">
        red2
     </div>
    -->

    <!--id가 순서대로 적용
    <div id="header">
        <h1>#header 태그 적용</h1>
    </div>
    <div id="wrap">
        <div id="aside">
            <h1>#aside 태그 적용#aside 태그 적용#aside 태그 적용#aside 태그 적용#aside 태그 적용</h1>
        </div>
        <div id="content">
            <h1>#contect 태그 적용</h1>
        </div>
    </div>
    -->

    <!--클래스 선택자-->
    <div class="red">red</div>
    <p class="red intro">Hello World</p>
</body>
</html>

** 예제 1207_2.html (하위 선택자) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>하위 선택자</title>
    <style>
        #navigation li a{
            color:orange;
        }
        h1, #link{
            color:red;
        }

        a:link{
            color:red;
        }
        a:visited{
            color:aqua;
        }
        a:hover{
            color:greenyellow;
        }
        a:active{
            color:orange;
        }

        .select{
            color:pink;
            font-size:30px;
        }

        .header{background-color:blue;color:orange}
        .item{color:yellow;}

        li.select2{
            color:brown;
        }
        input[type="text"]{
            background:orange;
        }
        h3, #link{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <!--하나의 CSS선언을 여러 개의 선택 자에 적용 시작-->
    <div id="navigation">
        <ul>
            <li>홈</li>
            <li><a href="http://www.daum.net">제품소개</a></li>
            <li>고객센터</li>
        </ul>
    </div>
    <ul>
        <li>홈</li>
        <li><a href="http://www.sist.co.kr">제품소개</a></li>
        <li>고객센터</li>
    </ul>

    <h1>하나의 CSS선언을 여러개의 선택자에 적용</h1>
    <a id="link" href="http://www.daun.net">잘되나요?</a>
    <!--하나의 CSS선언을 여러 개의 선택 자에 적용 끝-->

    <!--스타일링 링크 꾸미기 시작-->
    <p>
        <a href="https://www.jejusi.go.kr">링크 상태 모두 체크</a>
    </p>
    <!--스타일링 링크 꾸미기 끝-->
    <br /><br />

    <ul>
        <li class="select">사과</li>
        <li>바나나</li>
        <li class="select">오렌지</li>
        <li>키위</li>
    </ul>
    
    <!--header/item 두개의 클래스 적용해보자-->
    <p><h1 class="header item">즐거운 하루 되세요</h1></p>

    <!--태그 하위 클래스 선택-->
    <ul>
        <li class="select2">사과</li>
        <li>바나나</li>
        <li>오렌지</li>
        <li>키위</li>
    </ul>

    <h3 class="select2">나는 하위가 아닙니다.</h3>
    <br />
    <input type="text" name="name1" size="20" />
    <input type="password" name="name2" size="20" />
    <br /><br />
    <a id="link" href="http://www.daun.net">잘 됩니까.....</a>
</body>
</html>

** 예제 1207_3.html (스타일링 테이블 꾸미기 _ css외부파일방식 적용) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>스타일링 테이블(표) 꾸미기 (css외부파일방식 적용)</title>
    <link type="text/css" href="./style/style.css" rel="stylesheet" />
</head>
<body>
    <table>
        <tr>
            <th>순서</th>
            <th>과목명</th>
            <th>토픽수</th>
        </tr>
        <tr>
            <td>1</td>
            <td>웹서비스 만들기</td>
            <td>12</td>
        </tr>
        <tr>
            <td>2</td>
            <td>HTML수업</td>
            <td>13</td>
        </tr>
        <tr>
            <td>3</td>
            <td>HTML수업</td>
            <td>9</td>
        </tr>
        <tr>
            <td>4</td>
            <td>CSS수업</td>
            <td>15</td>
        </tr>
    </table>
</body>
</html>

table{
    border:1px solid gray;
    border-collapse:collapse;
}

th{
    background-color: #d0d0d0;
    font-weight:bold;
}

th, td{
    border:1px solid gray;
    padding:5px;
}

** iframe **

- 웹페이지 안에서 다른 웹페이지를 표시하고자 할 때 사용됨.

** 예제) 1207_4,5 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe 테스트</title>
</head>
<body>
    <h1>첫번째 iframe 페이지</h1>
    <p>첫번째 나눈 단락</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iframe 적용</title>
</head>
<body>
    <h1>iframe 적용</h1>
    <iframe src="1207_4.html" width="300" height="150"></iframe>
    <h3>iframe 적용 끝</h3>
</body>
</html>

** 예제 1207_6.html (textarea) **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--textarea 안에있는 것은 텍스트로 인식-->
    <!--가끔 <>(꺽쇠)를 태그로 인식할때는 &lt; &gt;로 써준다.-->
    <textarea rows="5" cols="50"> 
        &lt;html&gt;
            <body>
                <h1>This is a header.</h1>
            </body>
        </html>
    </textarea>

    <br />
    <iframe src="" name="iframe1"></iframe>
    <p><a href="http://www.daum.net" target="iframe1">여기를 클릭하면 어디에 보일까요??</a></p>
    <p><b>참고 : </b>링크를 클릭하면 iframe안에서 홈페이지가 열립니다.</p>
</body>
</html>

** 예제 1207_7 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*body{
            width:500;
            margin:10px auto;
        }*/

        #middle{overflow:hidden;}

        #left{
            float:left;width:150px;background-color:orange;
        }

        #right{
            float:right;width:350;background:brown;
        }

        #top{
            width:150;background:green;
        }

        #bottom{
            background:violet;
        }

        h1, p {width:300px;}

        .ell{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
    </style>
</head>
<body>
    <div id="top">"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표</div>
    <div id="middle">구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.

        <div id="left"> 1.0은 규모에 맞게 세 종류로 최적화했다. ▲방대하고 복잡한 작업에 적합한 가장 유용하고 규모가 큰 모델 '제미나이 울트라(Gemini Ultra)' ▲다양한 작업에서 확장하기에 가장 적합한 모델 '제미나이 프로(Gemini Pro)' ▲ 온디바이스(on-device) 작업에 가장 효율적인 모델 '제미나이 나노(Gemini Nano)'다.
        </div>

        <div id="right"> 따르면 특히 제미나이 울트라의 성능은 대형언어모델(LLM) 연구개발 평가에서 주로 사용되는 32개의 벤치마크 중 30개에서 기존의 최신 기술을 뛰어넘는 결과를 보여준 것으로 전해졌다.
        </div>
    </div>

    <div id="bottom"> 물리학, 역사, 법률, 의학, 윤리 등 총 57개의 주제를 복합적으로 활용해 세계 지식과 문제 해결 능력을 평가하는 MMLU(대규모 멀티태스크 언어 이해) 테스트에서 90.04%의 점수를 기록한 제미나이 울트라는 전문가 인력보다 높은 결과를 기록한 최초의 모델이라는 설명이다.또한 제미나이 울트라는 고도의 추론 능력이 요구되는 다양한 영역에 걸친 멀티모달 작업으로 구성된 새로운 MMMU 벤치마크에서 59.4%의 최상위 점수를 획득했다.
    </div>
    
    <!--
    <h1 class="ell">"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
    구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </h1>
    <p class="ell"> 규모에 맞게 세 종류로 최적화했다. ▲방대하고 복잡한 작업에 적합한 가장 유용하고 규모가 큰 모델 '제미나이 울트라(Gemini Ultra)' 
    ▲다양한 작업에서 확장하기에 가장 적합한 모델 '제미나이 프로(Gemini Pro)' ▲ 온디바이스(on-device) 작업에 가장 효율적인 모델 '제미나이 나노(Gemini Nano)'다.
    따르면 특히 제미나이 울트라의 성능은 대형언어모델(LLM) 연구개발 평가에서 주로 사용되는 32개의 벤치마크 중 30개에서 
    기존의 최신 기술을 뛰어넘는 결과를 보여준 것으로 전해졌다.
    물리학, 역사, 법률, 의학, 윤리 등 총 57개의 주제를 복합적으로 활용해 세계 지식과 문제 해결 능력을 평가하는 MMLU(대규모 멀티태스크 언어 이해) 테스트에서 
    90.04%의 점수를 기록한 제미나이 울트라는 전문가 인력보다 높은 결과를 기록한 최초의 모델이라는 설명이다.
    또한 제미나이 울트라는 고도의 추론 능력이 요구되는 다양한 영역에 걸친 멀티모달 작업으로 구성된 새로운 MMMU 벤치마크에서 59.4%의 최상위 점수를 획득했다.
    </p>
    -->
</body>
</html>

** 예제 1207_8 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <title>html5 책갈피 기능</title>
</head>
<body>
    <header>
        <center>
            <h2>&lt 책갈피 기능 &gt</h2>
        </center>
    </header>

    <section>
        <article>
            <p>
                <a href="#user">[이름]</a>&nbsp;
                <a href="#addr">[주소]</a>&nbsp;
                <a href="#tel">[전화번호]</a>&nbsp;
                <a href="#foot">[참고]</a>
            </p>
        </article>
    </section>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    
    <p><a name="user">홍길동</a></p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <P><a id="addr" name="addr">서울 마포구 월드컵</a></P>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <p><a id="tel">02-123-4567</a></p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>

    <p id="foot">기타</p>
    <a href="#top">[TOP]</a>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
    <p>"각 분야 전문가보다 해박"…구글, 멀티모달 AI 모델 '제미나이' 발표
        구글은 제미나이는 구글 딥마인드와 구글 리서치 등 구글 조직 전반에 걸친 대규모 협업의 결과"라며 "구글 역사상 가장 큰 과학적 및 기술적 노력 중 하나"라고 소개했다.
    </p>
</body>
</html>

** 예제 1207_9 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html5 input type</title>
</head>
<body>
    <form name="form1" action="1207_8.html" method="get">
        date : <input type="date" name="name1" /><br />
        datetime-local : <input type="datetime-local" name="name2" /><br />
        month : <input type="month" name="name3" /><br />
        time : <input type="time" name="name4" /><br />
        week : <input type="week" name="name5" /><br />
        color : <input type="color" name="name6" /><br />
        e-mail : <input type="email" name="name7" pattern=".@gmail.com" 
                    placeholder="example@gamil.com" required/><br />

        <input type="submit" />
    </form>
</body>
</html>

** 예제 1207_10 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--optgroup label은 타이틀의 역할-->
    <h3>전공 분야를 선택하세요.</h3>
    <form name="form1" action="1207.html" method="get">
        <label>그룹별 선택항목을 제공
            <select name="major">
                <optgroup label="computer">
                    <option value="software">SoftWare</option>
                    <option value="robot">Robot</option>
                    <option value="system">System</option>
                </optgroup>
                <optgroup label="language">
                    <option value="korea" selected>Korea</option>
                    <option value="english">English</option>
                    <option value="china">China</option>
                    <option value="germany">Germany</option>
                </optgroup>
                <optgroup label="business">
                    <option value="service">Service</option>
                    <option value="education">Education</option>
                    <option value="communication">Communication</option>
                    <option value="marketing">Marketing</option>
                </optgroup>
            </select>
            <br />
            <input type="submit" value="선택">
            <input type="reset" value="다시선택">
        </label>
    </form>

    <br /><br /><br />
    <h3>선택사항을 직접 입력하세요.</h3>
    <form name="form2" action="1207.html" method="get">
        <label>전공분야를 입력하세요.
            <input type="text" name="major" list="majorlist">
            <datalist id="majorlist">
                <option value="SoftWare">소프트웨어</option>
                <option value="Robot">로봇</option>
                <option value="System">시스템</option>
                <option value="Service">서비스</option>
                <option value="Education">교육</option>
            </datalist>
            <br />
            <input type="submit" value="완료">
            <input type="reset" value="다시작성">
        </label>
    </form>
</body>
</html>

** 예제 1207_11 **

** 문제 1207_12 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{ margin:0; padding: 0;}
    body{background-color: #F5F6F7;}
    div{margin-top: 60px;margin-left: 38%;}
    ul,li{ list-style: none;}
    li{margin-bottom: 20px; text-align: left;}
    .box{width: 450px; height: 50px; border: 1px solid #666; padding: 10px;}
    .pbox{width: 120px; height: 50px; border: 1px solid #666; padding: 10px;}
    .necessary{font-size: small; color:red;}
    button{background:#00C850; color:white; width: 450px; border: 1px solid #666; height:50px; font-size: x-large; }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><span>아이디<span><br />
                <input type="text" name="name1" placeholder="아이디를 입력하세요." class="box"/>
            </li>
            <li><span>패스워드</span><br />
                <input  type="password" name="name2" placeholder="패스워드를 입력하세요." class="box" /><br />
                <span class="necessary">필수 정보입니다.</span>
            </li>
            <li><span>패스워드 확인</span><br />
                <input  type="password" name="name3" placeholder="패스워드를 다시 입력하세요." class="box" /><br />
                <span class="necessary">필수 정보입니다.</span>
            </li>
            <li><span>생년월일</span><br />
                <input  type="date" name="name4" placeholder="연도-월-일" class="box" /><br />
                <span class="necessary">태어난 년도 4자리를 정확하게 입력하세요.</span>
            </li>
            <li>전화번호<br />
                <input class="pbox" type="text" name="name5" maxlength="4" />-
                <input class="pbox" type="text" name="name6" maxlength="4" />-
                <input class="pbox" type="text" name="name7" maxlength="4" /><br />
                <span class="necessary">필수 정보입니다.</span>

            <li>
            <li><span>성별</span><br />
                <input type="radio" name="name8" value="남자" />남자
                <input type="radio" name="name8" value="여자" />여자
            </li>
            <li><span>취미생활</span><br />
                <input type="checkbox" name="name9" value="독서" />독서
                <input type="checkbox" name="name9" value="산책" />산책
                <input type="checkbox" name="name9" value="TV시청" />TV시청
            </li>

            <li><button>가입하기</button></li>
        </ul>
    </div>
</body>
</html>

** 예제 1207_13 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            background-color:yellow; color:red;
            font-weight:bold; font-size:16px;
        }

        p.pad{
            color:purple;
            padding:20px;
        }

        p.mar{
            color:green;
            margin:30px;
        }

        p.mp{
            color:blue;
            padding:5%;
            margin:5%;
        }

        body{font-family:consolas}
        h3.none{border-style:none;}
        h3.hidden{border-style:hidden}
        h3.dootted{border-style:dotted}
        h3.dashed{border-style:dashed}
        h3.solid{border-style:solid;}
        h3.double{border-style:double;}
        h3.groove{border-style:groove;}
        h3.ridge{border-style:ridge;}
        h3.inset{border-style:inset;}
        h3.outset{border-style:outset;}
        h3.mix{border-style:dotted dashed solid double;}
    </style>
</head>
<body>
    
    <!--padding : 박스의 안쪽 여백, margin : 박스의 바깥쪽 여백
    <p>박스의 안쪽 여백과 바깥쪽 여백 지정</p>
    <p class="pad">(1) 안쪽 여백 지정 - padding 20px</p>
    <p class="mar">(2) 바깥쪽 여백 지정 - margin 30px</p>
    <p class="mp">(3) 안쪽, 바깥쪽 여백 지정 - padding 5% margin 5%x</p>
    -->

    <h1>border-style 예제</h1>
    <h3 class="none">no border</h3>
    <h3 class="hidden">hidden border</h3>
    <h3 class="dotted">dotted border</h3>
    <h3 class="dashed">dashed border</h3>
    <h3 class="solid">solid border</h3>
    <h3 class="double">double border</h3>
    <h3 class="groove">groove border</h3>
    <h3 class="ridge">ridge border</h3>
    <h3 class="inset">inset border</h3>
    <h3 class="outset">outset border</h3>
    <h3 class="mix">mix border</h3>
</body>
</html>

** 예제 1207_14 **

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{font-weight:bold; font-size:12px;}

        .boxshadow1{
            background-color:yellow;
            border:5px solid blue;
            box-shadow:10px 10px 10px teal;
        }
        .boxshadow2{
            background-color:orange;
            border:5px solid red;
            box-shadow:20px 20px 20px red;
        }
        .boxshadow3{
            background-color:silver;
            border:5px solid black;
            box-shadow:20px 20px 30px - 20px maroon;
        }
        .boxshadow4{
            background-color:lime;
            border:5px solid olive;
            box-shadow:10px 10px 0px 10px fuchsia inset;
        }
    </style>
</head>
<body>
    <h1 class="boxshadow1">박스 그림자 스타일링 예제1</h1>
    <h1 class="boxshadow2">박스 그림자 스타일링 예제2</h1>
    <h1 class="boxshadow3">박스 그림자 스타일링 예제3</h1>
    <h1 class="boxshadow4">박스 그림자 스타일링 예제4</h1>
</body>
</html>

** 문제 1207_15 **

'수업끄적끄적_7MONTH > HTML' 카테고리의 다른 글

12/08 수업 (26일차) _ 평행이동 / 애니메이션 (1)	2023.12.08
12/06 수업 (24일차) _ Table 태그 속성 / Img 태그 / Input태그 / Form 태그 / 레이아웃 구성 태그 - div, span / CSS란? (1)	2023.12.06
12/04 수업 (23일차) _ HTML설치 / Web이란? / HTML태그 / CSS적용 List 태그 / Table태그 (2)	2023.12.04

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

sist