Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type = "text/css">
  .div
  {
  width:100%;
  height:300px;
  border:1px solid blue;
  padding:20px 50px;
    margin:10px 5px;
  }
  .item1
  {
  width:100px;
  height:100px;
    border-color:blue red green pink;
    border-style:solid dotted dashed hidden;
    border-width:1px 3px 5px 10px;
  background-color:aqua;
    
      }
     .item2
  {
  width:100px;
  height:100px;
    border-color:blue red green pink;
    border-style:solid dotted dashed hidden;
    border-width:1px 3px;
  background-color:aqua;
    position:absolute; top:30px;left:300px;
    
      }
  </style>
</head>
<body>
  <div class = "div">
    
    <div class = "item1">
      <pre>
      .item1
  {
  width:200px;
  height:100px;
  border-color:blue red green pink;
  border-style:solid dotted dashed hidden;
  border-width:1px 3px 5px 10px;
  background-color:aqua;
      }
      </pre>
      
    </div>
    <div style = "position:relative;">
    
    <div  style = "position:absolute; top:50px;">
    <pre>
    <font color = "blue"><b>큰 박스#######</b>
     .div
  {
  width:100%;
  height:300px;
  border:1px solid blue;
  padding:20px 50px;
  margin:10px 5px;
  }</font>
    </pre>
    </div>
    
    <div class = "item2">
      <pre>
        .item2
  {
  width:100px;
  height:100px;
  border-color:blue red green pink;
  border-style:solid dotted dashed hidden;
  border-width:1px 3px;
  background-color:aqua;
  position:absolute; top:170px;left:300px;
    
      }
      </pre>
    </div>
    </div>
  </div>
  
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x