본문 바로가기
웹프로그래밍 기초/A반소스자료

실습소스

by 이데렐라 2023. 5. 12.
반응형
<!DOCTYPE html>
<html>
    <head>
        <title>20230203 홍길동</title>
        <style>
            body{margin:0px;}
            a{text-decoration: none; color:black;}
            h1,h2,h3{display: inline-block;}

            section{width:500px; height:200px; 
                border-bottom: 1px solid #333;
                margin: 0 auto; /*가운데 맞추기*/
            }
            .info div{width:50%;}
            .header{width:100%;}
            .header div{width:33%; height: 150px; text-align: center;
            /* 정렬방법 1 : 줄높이 */
            display:inline-block;
            line-height: 150px;
            
            /* 정렬방법 2 : flex */
            display: inline-flex;
            text-align: center;
            align-items: center;
            justify-content: center;
            }
            .header div:nth-child(1){background-color: rebeccapurple;}
            .header div:nth-child(2){background-color: green;}
            .header div:nth-child(3){background-color: red;}

            .header div a{text-decoration: none; color:blue;}

            .pop{width:150px; height:300px; background-color: #ccc; 
            position:absolute; top:0px; right: 0px;display: none;}

            
        </style>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#pop_open").on("click",function(){
                    //$(".pop").css("display","block");
                    //  보여주기
                    $(".pop").show();
                    
                    //숨기는 경우
                    //$(".pop").hide();
                });
            });
        </script>
        <style>
            .menu div{display: inline-block;width:33%; text-align: center;}
            .menu div:nth-child(1){color: red;}
            .menu div:nth-child(2){color: blue;}
            .menu div:nth-child(3){color: #333;}
        </style>
    </head>
    <body>
        <div class="menu">
            <div>소개</div>
            <div>갤러리</div>
            <div>상품리스트</div>
        </div>
        <div class="header">
            <div>Home</div>
            <div>Profile</div>
            <div id="pop_open" class="pop_open">Contact</div>
        </div>
        <div class="pop">
            연락처 : 010-0000-0000<br/>
            메일 : <a href="mailto:cs@mail.com">cs@mail.com</a>
        </div>
        
        <section>
            <iframe width="800" height="200" src="https://www.dongyang.ac.kr/dongyang/index.do"></iframe>
        </section>
        <section>
            <div class="info">
                <div class="img"></div>
                <div class="desc">안녕하세요. 동양미래대학교 20230203학번
                    홍길동 입니다.
                </div>
            </div>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>C#</li>
                <li></li>
            </ul>
        </section>
        <section>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.334130411428!2d126.8654263763785!3d37.50003682793771!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9de1fee16d79%3A0x1ab4872c13dbfeaf!2z64-Z7JaR66-4656Y64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1683872295367!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </section>
    </body>
</html>

mySite.html
0.00MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

scroll 에 애니메이션 넣기  (3) 2023.05.25
위치속성과 변형/애니메이션  (0) 2023.05.11
디스플레이속성 과 폰트속성  (1) 2023.04.27
CSS 테스트  (0) 2023.04.06
레이아웃 & CSS  (3) 2023.03.30

댓글