<맨 위로>

DIV를 겹쳐쓸수 있나요?

<style type="text/css">
 #a{
  border: solid 1px #000;
  background-color: #f00;
  z-index: 90;
 }
 #b{
  border: solid 1px #000;
  background-color: #b00;
  position: absolute; /*절대좌표*/
  left: 100px;
  top: 20px;
  z-index: 100;
 }
</style>
<div id="a">
 a
</div>
<div id="b">
 b
</div>a
``

---

# 페이지 내에서 이동하기(책갈피) 
```html
<style type="text/css">
 .space{
  height:200px;
 }
</style>
<a href="#target1">target1</a>
<a href="#target2">target2</a>
<a href="#target3">target3</a>
<h2 id="target1">title1</h2>
<div class="space"></div>
<h2 id="target2">title2</h2>
<div class="space"></div>
<h2 id="target3">title3</h2>
<div class="space"></div>

마우스 오버시 그림 바꾸기

<style type="text/css">
 #nom{
  width:300px; height:300px;
  background-image: url("/kaywon/sub/img/omnom_sad.jpg");
  background-size: 300px;
 }
 #nom:hover{
  background-image: url("/kaywon/sub/img/omnom_smile.jpg");
  background-size: 300px;
 }
</style>
<div id="nom"></div>

네비게이션 서브페이지

<style type="text/css">
 .depth1{
  width:400px;
 }
 .depth1>div{
  width:400px;
  display: none;
 }
 .depth1:hover>div{
  width:400px;
  display: block;
 }
</style>
<div id="navigation">
 <div class="depth1">main1
  <div>
   sub1 sub2 sub3 sub4 sub5
  </div>
 </div>
 <div class="depth1">main2
  <div>
   sub1 sub2 sub3
  </div>
 </div>
</div>

앵커 태그 글씨색과 밑줄 지우기

<style type="text/css">
a{
 text-decoration: none;
 color : #000;
}
</style>
<a href="">test</a>

select option 태그를 이용한 페이지 이동하기

<select onChange="window.location.href=this.value">
    <option value="www.google.com">A</option>
    <option value="www.aol.com">B</option>
</select>

링크 타겟 변경

// Code by @qiao
var a = document.createElement('a')
a.href = 'http://www.google.com'
a.target = '_blank'
document.body.appendChild(a)
a.click()
// Added code
document.body.removeChild(a)```

 width step 
```html$.fn.widthStep = function(step)
{
    var width = $(this).width();
    $(this).css('max-width', width - width%step);
}
  • width: calc((100% - 20px * 3) / 3);

고정되어 있는 버튼 만들기

<style>
    #fix{
        position:fixed;
        left:150px;
        top:150px;
    }
    #two{
        width: 300px;
        height: 1500px;
    }
</style>
<div id="fix">
    fixed
    <a href="http://www.naver.com">버튼</a>
</div>
<div id="two"> two</div>

audio를 별도로 제어 할 수 있나요?

  • audio를 별도로 제어할 수 있어야 버튼에 CSS를 이용하여 스타일링 할 수도 있습니다.
<audio id="my_audio">
    <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg"/>
</audio>
<div onclick="play_func()">play</div>
<div onclick="pause_func()">pause</div>
<div onclick="stop_func()">stop</div>
<div onclick="on_func()">sound_on</div>
<div onclick="off_func()">sound_off</div>
<input id="my_slider" type="range" min="0" max="100" value="100">
<script>
    var myAudio = document.getElementById("my_audio");
    var mySlider = document.getElementById("my_slider");
    function play_func(){
        myAudio.play();
    }
    function pause_func(){
        myAudio.pause();
    }
    function stop_func(){
        myAudio.pause();
        myAudio.currentTime = 0;
    }
    function on_func(){
        myAudio.volume = 1;
    }
    function off_func(){
        myAudio.volume = 0;
    }
    mySlider.addEventListener("input", onInput, false);
    function onInput(){
        myAudio.volume = mySlider.value / 100;
    }
</script>

layout 샘플

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            body{
                margin: 0px;
            }
            .left{
                float:left;
                background-color:red;
                width: 20%;
                height: 1000px;
            }
            .center{
                float:left;
                background-color:green;
                width:60%;
                height: 1000px;
            }
            .right{
                float:right;
                background-color:blue;
                width :20%;
                height: 1000px;
            }
            .clear{ clear:both; height:0; overflow:0;}
        </style>
    </head>
    <body>
        <div>
            <div class="left">left
            </div>
            <div class="center">
                <div>c1</div>
                <div>c2</div>
                <div>c3</div>
                <div>c4</div>
            </div>
            <div class="right">right</div>
            <div class="clear"></div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            body{
                margin: 0px;
            }
            .center{
                background-color:green;
                width:60%;
                height: 1000px;
                margin-left:auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="center">
                <div>c1</div>
                <div>c2</div>
                <div>c3</div>
                <div>c4</div>
            </div>
        </div>
    </body>
</html>