본문 바로가기
학교 & 학원 이론 수업/네이버 클라우드 AIaaS 개발자 양성 과정

2023.02.06 월요일 - CSS, HTML, JavaScript

kwohyuno 2023. 2. 6. 17:46

 

 

ex1_olul.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>ol : 순서가 있는 목록(기본값 1)</h2>
    <ol>
        <li>자바</li>
            <ol type="a">
                <li>자료형</li>
                <li>제어문</li>
                <li>클래스</li>
            </ol>
        <li>CSS</li>
        <li>HTML</li>
        <li>JavaScript</li>
    </ol>
    <hr>
    <ol type="A">
        <li>자바</li>
        <li>CSS</li>
        <li>HTML</li>
        <li>JavaScript</li>
    </ol>
    <hr>
    <ol type="i">
        <li>자바</li>
        <li>CSS</li>
        <li>HTML</li>
        <li>JavaScript</li>
    </ol>
    <hr>
    <h2>ul:순서없는 목록(기본값 disc)</h2>
    <ul type="circle">
        <li>아반떼</li>
        <li>소나타</li>
        <li>그랜져</li>
    </ul>
    <hr>
    <ul type="square">
        <li>아반떼</li>
        <li>소나타</li>
        <li>그랜져</li>
    </ul>
    <hr>

</body>
</html>

 

(실행 화면)

 

 

 

 

ex2_ulstyle.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div 태그의 class가 title인 경우에만 적용*/
        div.title{
            /*상위 태그의 2.5배의 글자 크기
            rem: 최상위 태그의 배수로 지정할경우*/
            font-size: 2.5em;
            font-family: 'Jua';
            text-align: center;
            text-shadow: 3px 3px 3px gray;
        }
        div.menu{
            text-align: center;
        }

        div.menu>ul{
            list-style: none;
       
        }

        div.menu>ul>li{
            float: left;
            font-family: 'Gamja Flower';
            font-size: 24px;
            width:150px;
            height: 70px;
            line-height : 70px;
            margin-right: 10px;
            border: 2px solid tomato;
            border-radius: 20px;
            background-color: #afeeee;
            color: #c71585;
        }
       
        /*마우스를 올렸을 때 스타일 적용*/
        div.menu>ul>li:hover{
            background-color: #2e8b57;
            color: yellow;
            cursor: pointer;
            box-shadow: 5px 5px 5px gray;
        }

        img.main_photo:active{
            left:300px;
            top:300px;
        }

        div.menu>ul>li:active{
            background-color: black;
            color: white;
        }

        img.main_photo{
            /*위치 변경*/
            position: absolute; /*absolute:절대좌표, relative:상대좌표*/
            left:200px;
            top:200px;
        }

    </style>
</head>
<body>
<div class="title">Bitcamp Class Menu</div>
<div class="menu">
    <ul>
        <li>메인</li>
        <li>오시는길</li>
        <li>클래스과정들</li>
        <li>점수</li>
    </ul>
</div>
<img src="../photo/C1.png" class="main_photo">
</body>
</html>
       

(실행 화면)

 

 

 

ex3_atag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        a:link{
            color: black;
            text-decoration: none;/*밑줄 없애기*/

        }

        a:visited{
            color: gray;
            text-decoration: noone;
        }

        a:hover{
            color: red;
            text-decoration: underline;
        }
    </style>


</head>
<body>
    <h2>naver 글자를 클릭시 현재 페이지가 네이버 페이지로 전환</h2>
    <a href="http://www.naver.com">Naver</a>
    <br>
    <h2>nate 글자를 클릭시 네이트가 새 페이지로 열림</h2>
    <a href="http://www.nate.com" target="_blank">NATE</a>
    <h2>이미지 클릭시 구글메인으로 이동합니다</h2>
    <a href="http://google.com">
        <img src="../photo/C4.png" title="구글로이동">
    </a>
    <h2>02-03 예제3</h2>
    <a href="../day0203/ex3_image.html">2월3일 예제3</a>
    <br>
    <h2>frame 안에 네이트가 나와요!!!</h2>
    <iframe src="http:///www.nate.com" width="500" height="300" border="1"></iframe>

    <h2>frame 안에 2월3일 예제 2번 나오게 해보세요!!</h2>
    <iframe src="../day0203/ex2_tag.html" width="500" height="400" ></iframe>
</body>
</html>
 

(실행 화면)

 

 

 

ex4_marquee.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            font-size: 2rem;
            font-family: 'Jua';
        }

        #m1>img{
            width: 130px;
            height: 130px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h3>marquee 기본값 </h3>
    <marquee>
            <b>Have a Nice Day!!!</b>
    </marquee>

    <h3>marquee - right로 변경</h3>
    <marquee direction="right">
            <b style="color:orange;">Have a Nice Day!!!</b>
    </marquee>

    <h3>marquee - right, slide(1번만 이동) 로 변경</h3>
    <marquee direction="right" behavior="slide">
            <b style="color:blue;">Have a Nice Day!!!</b>
    </marquee>

    <h3>marquee - right, alternate(왔다갔다)로 변경</h3>
    <marquee direction="right" behavior="alternate" scrollamount="20">
            <b style="color:pink;background-color:cyan;">Have a Nice Day!!!</b>
    </marquee>

    <h2>사진에 적용해보자</h2>
    <marquee id="m1" direction="right">
        <img src="../photo/1.jpg">
        <img src="../photo/2.jpg">
        <img src="../photo/3.jpg">
        <img src="../photo/4.jpg">
        <img src="../photo/5.jpg">
    </marquee>

</body>
</html>

 

(실행 화면)

 

 

ex5_div.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box>div{
            border: 1px solid gray;
            width: 400px;
            height: 130px;
            margin-bottom: 10px;
        }

        #a{
            /*x,y방향으로 반복된다 : 기본값*/
            background-image: url('../photo/C1.png');
            background-size: 30px 30px;
            border: 10px dotted deepskyblue;
        }

        #b{
            background-image: url('../photo/11.jpg');
            background-size: 80px 80px;
            background-repeat: repeat-x;  /* x 방향만 반복 */
            border: 10px double green;
        }

        #c{
            border: 10px groove gold;
            background-image: url('../photo/C6.png');
            background-repeat: no-repeat; /*이미지 반복 안함*/
            background-position: right bottom;
            opacity: 0.3; /*흐리게 0~1*/
        }

        #d{
            border:10px inset orangered;
            background-image: url('../image/mainImage/K-041.png');
            background-size: 100% 100%;
            height: 200px;
            color: white;
            font-size: 30px;

        }

        /*
            background-size:
            auto: 원래 배경 이미지 크기만큼만 표시
            contain: 지정한 요소안에 배경이미지가 다 들어도록 확대/축소
            cover: 지정한 요소를 다 덮도록 배경이미지를 확대/축소
            크기 값: 100px 200px 이런식으로 지정
            백분율 : 지정한 요소를 기준으로 백분율로 지정
        */


        #e{
            border: 10px dashed rebeccapurple;
            background:url('../image/shop/14.jpg') no-repeat right top;
            background-size: contain;

        }

        #f{
            border: 10px groove blue;
            background:url('../image/shop/10.jpg');
            background-size: 40px;
            background-repeat: repeat;  /* x 방향만 반복 */
        }

    </style>
</head>
<body>
   <div class="box">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d">안녕하세요</div>
    <div id="e"></div>
    <div id="f"></div>
</div>
<div class="hello">배경 이미지에 대한 공부</div>
</body>
</html>
 
 
 
(실행 화면)

 

 

ex6_table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
        font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <caption><b>[표1]</b></caption>
        <tr height="50" bgcolor="orange">
            <!--th는 td와 달리 가운데속성에 굵게 속성이 적용된다-->
            <th width="100">이름</th>
            <th width="170">핸드폰</th>
            <th width="200">주소</th>
        </tr>
       
        <tr height="100" align="center"> <!--tr에서 정렬할 경우 행 전체에 적용-->
            <td bgcolor="pink">강호동</td>
            <td bgcolor="#aaccdd">010-111-2222</td>
            <td style="background-color: gray;color: yellow;"> 서울시 강남구</td>
        </tr>
        <tr height="100">
            <td valign="top">유재석</td>
            <td align="right" valign="bottom">010-333-2222</td>
            <td align="right" valign="top" bgcolor="yellow">서울시 영등포구</td>
        </tr>
        <!--4번째 줄은 3칸을 합쳐서 이미지 넣기-->
        <tr height="150">
            <td colspan="3" align="center" bgcolor="pink">
                <img src="../image/mainImage/K-036.png" width="200">
            </td>
        </tr>

    </table>
</body>
</html>



(실행 화면)

 

 

ex7_table.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
        font-size: 1.5rem;
        font-family: 'Single Day';
    }

        table.sawon_table{
            width: 500px;
            border: 5px inset gray;
            border-collapse: collapse;
        }

        table.sawon_table>thead>tr>th{
            border-bottom: 5px double gray;
            border-right: 1px dotted gray;
            background-color:greenyellow;
        }

        table.sawon_table tbody td{
            border: 1px solid gray;
        }

        table.sawon_table tbody img{
            width: 80px;
            height: 80px;
            border-radius: 100px;
        }

        table.sawon_table tbody tr:hover{
            background-color: black;
            color: white;
        }
       
    </style>
</head>
<body>
    <table class="sawon_table">
        <caption>사내 직원 현황</caption>
        <!--제목부분-->
        <thead>  
            <tr>
                    <th width="70">성별</th>
                    <th>이름</th>
                    <th>전공</th>
                    <th>사진</th>
            </tr>    
        </thead>
        <tbody>
            <tr>
                <td rowspan="2" bgcolor="#ffffcc">여자</td>
                <td>박신혜</td>
                <td>음악</td>
                <td align="center">
                    <img src="../image/moviestar/13.jpg">
                </td>
            </tr>
            <tr>
                <td>박보영</td>
                <td>컴퓨터공학</td>
                <td align="center">
                    <img src="../image/moviestar/12.jpg">
                </td>
            </tr>
        </tbody>

        <tbody>
            <tr>
                <td rowspan="3" bgcolor="#cffccc">남자</td>
                <td>최지우</td>
                <td>경영</td>
                <td align="center">
                    <img src="../image/moviestar/5.jpg">
                </td>
            </tr>
            <tr>
                <td>한채영</td>
                <td>중어중문</td>
                <td align="center">
                    <img src="../image/moviestar/6.jpg">
                </td>
            </tr>
            <tr>
                <td>황정음</td>
                <td>체육교육</td>
                <td align="center">
                    <img src="../image/moviestar/7.jpg">
                </td>
            </tr>
        </tbody>

       
    </table>
</body>
</html>




(실행 화면)

ex8_div.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body *{
        font-size: 1.5rem;
        font-family: 'Single Day';
    }
    </style>
</head>
<body>
    <div class="posa">
        <input type="button" value="alert이란?"
        onclick="alert('버튼1을 클릭했어요!')">

        <br><br>
        <button type="button"
        onclick="prompt('너 이름이 뭐니?','권현오')">prompt란?</button>


        <br><br>
        <button type="button"
        onclick="confirm('데이타를 저장할까요?')">confirm이란?</button>
    </div>
    <hr>
    <button type="button" onclick="test1()">메세지</button>
    <h3 id="result1"></h3>

    <script>
        function test1()
        {
            alert("오늘도 행복한 하루!!!");
            //이벤트 안에서 document.write로 출력시 다 지워지고 새로 출력된다.
            //document.write("버튼1을 클릭했어요");

            //innerHTML : html 태그가 적용되서 나타남
            //innerText: 글자만 출력( 즉 html 태그도 그냥 글자로 출력이됨)
            document.getElementById("result1").innerHTML="<b>버튼 1 클릭</b>";
        }
    </script>

    <button type="button" onclick="test2()">이름입력</button>
    <h2 id="result2"></h2>
    <script>
        function test2()
        {
            //이름을 입력받는다, 취소시 null값 반환
            var name=prompt("너의 이름은 뭐니?", "이효리");

            // 방법1
            // document.getElementById("result2").innerHTML="<b>내 이름은 "+name+"입니다</b>"


            //방법2
            document.getElementById("result2").innerHTML=
            `<b>내 이름은 <span style='color:green'> ${name}</span> 입니다`;
        }
    </script>

    <button type="button" onclick="test3()">컨펌</button>
    <h2 id="result3"></h2>
    <script>
        function test3()
        {
            var ans=confirm("데이타를 저장할까요?");
            console.log(ans);//크롬브라우저->검사->콘솔에서 확인 , true/false

            if(ans==true)
                document.getElementById("result3").innerText="데이타를 잘 저장했어요!"
            else  
                document.getElementById("result3").innerText="저장을 취소했어요!"
        }
    </script>

</body>
</html>



(실행 화면)

'학교 & 학원 이론 수업 > 네이버 클라우드 AIaaS 개발자 양성 과정' 카테고리의 다른 글

2023.02.08 수요일 - getElementById, 연산자, 반복문  (0) 2023.02.08
2023.02.07 화요일 - CSS, HTML, JavaScript  (0) 2023.02.07
2023.02.03 금요일 - HTML, CSS  (0) 2023.02.03
사전교육 3일차 (2023.02.02)  (0) 2023.02.02
사전교육 2일차 (2023.02.01)  (0) 2023.02.01

'학교 & 학원 이론 수업/네이버 클라우드 AIaaS 개발자 양성 과정' Related Articles

티스토리툴바