본문 바로가기
Learning/HTML&JavaScript

DOM, BOM

cozy coding 2020. 8. 4. 10:06

  • 문서 객체 모델(Document Object Model, DOM)

  • 객체를 사용해 문서를 해석. 웹 문서의 요소를 부모/자식으로 구분. 

 

 

  • 인터넷 상품 페이지 (작은 사진 클릭하면 크게 보이기, 상세 설명 보기)

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

</head>

<body>

    <div id="container">

        <h1 id="heading">에디오피아 게뎁</h1>

        <div id="prod-pic">

            <img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">

            <div id="small-pic">

                <img src="images/coffee-pink.jpg" class="small">

                <img src="images/coffee-blue.jpg" class="small">

                <img src="images/coffee-gray.jpg" class="small">

            </div>

        </div>

        <div id="desc">

            <ul>

                <li>상품명: 에디오피아 게뎁</li>

                <li class="bluetext">판매가: 9,000원</li>

                <li>배송비: 3,000원<br>(50,000원 이상 구매 시 무료)</li>

                <li>적립금: 180원(2%)</li>

                <li>로스팅: 2019.06.17</li>

                <button>장바구니 담기</button>

            </ul>

            <a href="#" id="view">상세 설명 보기</a>

        </div>

        <div id="detail">

            <hr>

            <h2>상품 상세 정보</h2>

            <ul>

                <li>원산지: 에디오피아</li>

                <li>지  역: 이르가체프 코체레</li>

                <li>농  장: 게뎁</li>

                <li>고  도: 1,950~2,000</li>

                <li>품  종: 지역 토착종</li>

                <li>가공법: 워시드</li>

            </ul>

            <h3>Information</h3>

            <p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철저한 관리를 통해 스페셜티 커피를 생산 합니다.</p>

            <h3>Flavor Note</h3>

            <p>은은하고 다채로운 꽃향, 망고, 다크 첼리, 달달함이 입안 가득.</p>

        </div>

    </div>

    <script src="js/dom.js"></script>

</body>

</html>

 

 

  • dom.css

 

#container{

    width: 600px;

    margin: 0 auto;

}

#prod-pic, #desc{

    float: left;

}

#prod-pic{

    margin: 20px 20px auto 10px;

    padding: 0;

}

#cup{

    box-shadow: 1px 1px 2px #eee;

    outline: 1px dashed #ccc;

    outline-offset: -7px;

}

.small{

    width: 60px;

    height: 60px;

}

#small-pic{

    list-style: none;

    margin-top: 20px;

    padding: 0;

}

#small-pic>li{

    float: left;

    margin-right: 10px;

}

#small-pic img:hover{

    cursor: pointer;

}

#desc{

    width: 300px;

    padding-top: 20px;

    margin-bottom: 50px;

}

.bluetext{

    color: blue;

    font-weight: bold;

}

#desc button{

    margin-top: 20px;

    margin-bottom: 20px;

    width: 100%;

    padding: 10px;

}

#desc ul{

    list-style: none;

}

#desc li{

    font-size: 0.9em;

    line-height: 1.8;

}

#desc a{

    text-decoration: none;

    font-size: 0.9em;

    color: blue;

    padding-left: 40px;

}

hr{

    clear: both;

    border: 1px dashed #f5f5f5;

}

#detail{

    padding-top: 10px;

    display: none;

}

#detail li{

    font-size: 0.9em;

    line-height: 1.4;

}

h1{

    font-size: 2em;

}

h2{

    font-size: 1.5em;

    color: #bebebe;

    font-weight: normal;

}

h3{

    font-size: 1.1em;

    color: #222;

}

p{

    font-size: 0.9em;

    line-height: 1.4;

    text-align: justify;

}

 

 

  • dom.js

var bigPic=document.querySelector("#cup"); //큰 이미지 가져오기

var smallPic=document.querySelectorAll(".small"); //작은 이미지 가져오기



for(var i=0;i<smallPic.length;i++){

    // var newPic=this.src; //클릭 이벤트가 발생한 대상의 src 속성 저장

    // bigPic.setAttribute("src", newPic); //newPic 값을 큰 이미지의 src 속성에 할당

    // smallPic[i].onclick=changePic;



    smallPic[i].addEventListener("click", changePic);

}



function changePic(){

    var newPic=this.src;

    bigPic.setAttribute("src",newPic);

}



var isOpen=false;

var view=document.querySelector("#view");

view.addEventListener("click",function(){

    if(isOpen==false){

        document.querySelector("#detail").style.display="block";

        view.innerText="상세 설명 닫기"

        isOpen=true;

    }else{

        document.querySelector("#detail").style.display="none";

        view.innerText="상세 설명 보기"

        isOpen=false;

    }

});

 

 

 

 

 

  • 브라우저 객체 모델 (Browser Object Model, BOM)

  • Window, Navigator, history, location, screen

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script>

        var info=navigator.userAgent.toLowerCase();

        var osImg=null;



        if(info.indexOf('windows')>=0){

            osImg="windows.png";

        }else if(info.indexOf('macintosh')>=0){

            osImg="macintosh.png";

        }else if(info.indexOf('iphone'>=0)){

            osImg="iphone.png";

        }else if(info.indexOf('android')>=0){

            osImg="android.png";

        }

        document.write("<img src=\"../0803/images/"+osImg+"\">","<br>");

        var scr=screen;

        var sc_w=scr.width;

        var sc_h=scr.height;



        document.write("모니터 해상도 너비:"+sc_w+"px","<br>");

        document.write("모니터 해상도 높이:"+sc_h+"px","<br>");

    </script>

</head>

<body>

</body>

</html>

 

 

 

  • 팝업창 뜨도록 함

  • bom2.html

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <p>이 문서가 열리면 자동으로 팝업 창이 표시 됩니다.</p>

</body>

    <script src="js/pop.js"></script>

</html>

 

 

  • pop.js

function openPop(){

    var newWin=window.open("popup.html","","width=400, height=400");

    if(newWin==null){

        alert("팝업이 차단되어 있습니다. 차단을 해제하고 새로고침을 하세요.");

    }

}

window.onload=openPop;

 

  • popup.html

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8" />

    <title>location 객체</title>   

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

</head>

<body>

    <div id="content">

        <h1>공지사항</h1>

        <p>팝업 창에 표시되는 내용</p>

        <p>팝업 창에 표시되는 내용</p>

        <p>팝업 창에 표시되는 내용</p>

        <p>팝업 창에 표시되는 내용</p>

        <p>팝업 창에 표시되는 내용</p>

        <button id="detail"><a href="#">자세히 보기</a></button>   

        <p id="close"><a href="javascript:window.close();">창닫기</a></p>

    </div>

</body>

</html>

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Learning > HTML&JavaScript' 카테고리의 다른 글

과제-반응형 웹 만들고 이력서와 회원가입 페이지 연결하기  (0) 2020.08.04
반응형 웹 디자인  (0) 2020.08.04
자바스크립트 함수 2  (0) 2020.08.03
자바스크립트 함수 1  (0) 2020.07.31
자바스크립트 객체  (0) 2020.07.31

'Learning/HTML&JavaScript' Related Articles

티스토리툴바