5일차

|

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*Clear:both를 사용한 레이아웃*/
	body{
    	width: 960px;
        margin: 0 auto;
    }
    
    .clear{ /* 구역을 상하로 구분할 필요가 있을 때*/
    	claer: both; // float 적용을 여기서부터 취소한다.
    }
    
    #aside{
    	float: left; // 태그를 왼쪽에 붙인다.
        width: 260px;
    }
    
    #section{
    	float: right; // 태그를 오른쪽에 붙인다.
        width: 700px;
    }

</style>
</head>
<body>

	<div id="header"><h1>Header</h1></div>
    <div id="navigation"><h1>navigation</h1></div>
	<div class="clear"></div>
    <div id="aside">
    	<h1>Aside</h1>
        <p>Aside</p>
    </div>
    <div id="section">
    	<h1>section</h1>
    </div>
    <div class="clear"></div>
    <div id="footer"><h1>Footer</h1></div>
    <div class="clear"></div>

</body>
</html>
------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*그림자 속성 예제1*/
/*text-shadow : 글자에 그림자를 부여 */
/*box-shadow : 박스에 그림자를 부여 */
/* -- 오른쪽 아래 흐림도 색상 -- */
	body{
        margin: 0px;
    }
    
    p{
    	margin: 20px;
        padding: 20px 0px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Arial Black", sans-serif;
        font-size: 60px;
        font-weight: bold;
    }
    
    .s1{
    	background-color: #666666;
        color: #222222;
        text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.2);
        /* -- 오른쪽 아래 흐림도 색상 -- */
    }
    
    .s2{
    	background-color: #E1F5FE;
        color: #ffffff;
        text-shadow: 4px 4px 0px #bdbdbd;
    }
    
    .s3{
    	background-color: #F44336;
        color: #ffffff;
        text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -3px 20px rgba(255, 255, 255, 0.4);
        // 그림자를 다중으로 넣음.
    }


</style>
</head>
<body>

	<p class="s1">박지성1</p>
    <p class="s2">박지성2</p>
    <p class="s3">박지성3</p>
    

</body>
</html>

/*Clear: both를 사용한 레이아웃*/

/*그림자속성예제1*/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*그림자 속성 예제2*/
	div{
    	width: 600px;
        margin-bottom: 20px;
        padding: 10px 30px;
        background-color: yellow;
    }
    
    .a{
    	box-shadow: 5px 5px;
    }
    
    .b{
    	box-shadow: 5px 5px 5px;
    }
    
    .c{
    	box-shadow: 5px 5px 5px 5px;
    }
    
    .d{
    	box-shadow: 5px 5px 5px 5px gray;
    }
    
    .e{
    	box-shadow: 5px 5px 5px 5px gray inset;
    }
    

</style>
</head>
<body>

	<div class="a">
    	<p><code>box-shadow: 5px 5px;</code></p>
    </div>
    <div class="b">
    	<p><code>box-shadow: 5px 5px 5px;</code></p>
    </div>
    <div class="c">
    	<p><code>box-shadow: 5px 5px 5px 5px;</code></p>
    </div>
    <div class="d">
    	<p><code>box-shadow: 5px 5px 5px 5px gray;</code></p>
    </div>
    <div class="e">
    	<p><code>box-shadow: 5px 5px 5px 5px gray inset;</code></p>
    </div>
        

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*그레디언트 예제*/
/* 2가지 이상의 색상을 혼합해서 채색하는 기능 */
/* -- direction, color1, color2 -- */
/* direction 방향으로 color1 에서 color2로 */
/* direction : to bottom, to top, to left, to right */
/* ndeg : n도의 방향으로 그라데이션을 만든다. */
	div{
    	width: 100%;
        height: 100px;
        margin-bottom: 10px;
    }
    
    .jbGrad01{
    	background: linear-gradient( to right, yellow, red, purple, blue);
    }
    
    
    .jbGrad02{
    	background: linear-gradient( to right, yellow 50%, red, purple, blue);
    }
    
    .jbGrad03{
    	background: linear-gradient( to right, yellow 50%, red 60%, purple, blue);
    }
    
    .jbGrad04{
    	background: linear-gradient( to right, yellow 50%, red 300px, purple 90%, blue);
    }
    

</style>
</head>
<body>

	<div class="jbGrad01">to right, yellow, red, purple, blue</div>
    <div class="jbGrad02">to right, yellow 50%, red, purple, blue</div>
    <div class="jbGrad03">to right, yellow 50%, red 60%, purple, blue</div>
    <div class="jbGrad04">to right, yellow 50%, red 300px, purple 90%, blue</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*CSS 통합 예제 */
	*{ /*전체간격 - 줄이기*/
    	margin: 0;
        padding: 0;
    }
    
    body{
    	font-family: 'Times New Roman', serif;
    }
    
    li{
    	list-style: none;
    }
    
    a{ /*a태그 밑줄 없애기*/
    	text-decoration: none;
    }
    
    
    img{
    	border:0;
    }

/*헤더*/
	#main_header{
    	/*중앙 정렬*/
        width: 960px; margin:0 auto;
        
        /*절대 좌표*/
        height: 160px;
        position: relative;
    }
    
    #main_header > #title{
    	position: absolute;
        left: 20px; top: 30px;
    }
    
    #main_header > #main_gnb{ // gnb : 최상위
    	position: absolute;
        right: 0; top: 0;
    }
    
    #main_header > #main_lnb{ // lnb : 서브메뉴 (snb : 사이드메뉴 // fnb : 하단메뉴)
    	position: absolute;
        right: 0; bottom: 10px;
    }
    
/*타이틀*/    
	#title{
    	font-family: 'Coiny', cursive;
    }
    
/*메뉴(1)*/    
	#main_gnb > ul {
    	overflow: hidden; // 자손의 float 속성을 적용하려면 부모의 overflow 속성에 hidden 키워드를 적용
    }
    
    #main_gnb > ul > li {
    	float: left;
    }
    
    #main_gnb > ul > li > a {
    	display: block;
        padding: 2px 10px;
        border: 1px solid black;
    }
    
    #main_gnb > ul > li > a:hover { /*마우스가져가면 변화*/
    	background: black;
        color: white;
    }
    
    #main_gnb > ul > li:first-child > a {
    	border-radius: 10px 0 0 10px;
    }
    
    #main_gnb > ul > li:last-child > a {
    	border-radius: 0 10px 10px 0;
    }
    
/*메뉴(2)*/    
	#main_lnb > ul {
    	overflow: hidden;
    }
    
    #main_lnb > ul > li {
    	float: left;
    }
    
    #main_lnb > ul > li > a {
    	display: block;
        padding: 2px 10px;
        border: 1px solid black;
    }
    
    #main_lnb > ul > li > a:hover { /*마우스가져가면 변화*/
    	background: black;
        color: white;
    }
    
    #main_lnb > ul > li:first-child > a {
    	border-radius: 10px 0 0 10px;
    }
    
    #main_lnb > ul > li:last-child > a {
    	border-radius: 0 10px 10px 0;
    }    
    
    
/*콘텐츠*/
	#content{
    	/*중앙 정렬*/
        width: 960px; margin: 0 auto;
        
        /*수평 레이아웃 구성*/
        overflow: hidden;
    }
    
    #content > #main_section{
    	width: 750px;
        float: left;
    }
    
    #content > #main_aside{
    	width: 200px;
        float: right;
    }
    
/*본문*/    
	#main_section > article.main_article{
    	margin_bottom: 10px;
        padding: 20px;
        border: 1px solid black;
    }
    
    
/*사이드*/    
	/*첫번째 탭*/
    input:nth-of-type(1){
    	display: none;
    }
    input:nth-of-type(1) ~ div:nth-of-type(1){
    	display: none;
    }
    input:nth-of-type(1):checked ~ div:nth-of-type(1){
    	display: block;
    }
    
    /*두번째 탭*/
    input:nth-of-type(2){
    	display: none;
    }
    input:nth-of-type(2) ~ div:nth-of-type(2){
    	display: none;
    }
    input:nth-of-type(2):checked ~ div:nth-of-type(2){
    	display: block;
    }
    
/*탭 모양 구성*/    
	section.buttons{
    	overflow: hidden;
    }
    section.buttons > label{
    	/*수평 정렬*/
        display: block;
        float: left;
        
        /*크기 및 글자 위치 지정*/
        width: 100px; height: 30px;
        line-height: 30px;
        text-align: center;
        
        /*테두리 지정*/
        box-sizing: border-box;
        border: 1px solid black;
        
        /*색상 지정*/
        background: black;
        color: white;
    }
    
    input:nth-of-type(1):checked ~ section.buttons > label:nth-of-type(1){
    	background: white;
        color: black;
    }
    input:nth-of-type(2):checked ~ section.buttons > label:nth-of-type(2){
    	background: white;
        color: black;
    }
    
/*목록*/    
	.item{
    	overflow: hidden;
        padding: 10px;
        border: 1px solid black;
    }
    .thumbnail{
    	float: left;
    }
    .description{
    	float: left;
        margin-left: 10px;
    }
    .description > strong{
    	display: block;
        width: 120px;
        /* 밑에 3줄은 글자생략시 사용 - 암기해라*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
/*푸터*/    
	#main-footer{
    	/*중앙 정렬*/
        width: 960px; margin: 0 auto;
        margin-bottom: 10px;
        
        /*테두리*/
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid black;
        
        /*글자 정렬*/
        text-align: center;
    }
    

</style>
</head>
<body>

    <header id="main_header">
        <div id="title">
            <h1>Rint Development</h1>
            <h2>HTML5 + CSS3 Basic</h2>
        </div>
        <nav id="main_gnb">
            <ul>
                <li><a href="#">Web</a></li>
                <li><a href="#">Mobile</a></li>
                <li><a href="#">Game</a></li>
                <li><a href="#">Simulation</a></li>
                <li><a href="#">Data</a></li>
            </ul>
        </nav>
        <nav id="main_lnb">
            <ul>
                <li><a href="#">HTML5</a></li>
                <li><a href="#">CSS3</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Node.js</a></li>
            </ul>
        </nav>
    </header>
    <div id="content">
        <section id="main_section">
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
            <article class="main_article">
                <h1>Main Article</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
            </article>
        </section>
        <aside id="main_aside">
            <input id="first" type="radio" name="tab" checked="checked" />
            <input id="second" type="radio" name="tab" />
            <section class="buttons">
                <label for="first">First</label>
                <label for="second">Second</label>
            </section>
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Canvas</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Audio</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Video</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>HTML5 Semantic Web</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                </ul>
            </div>
            <div class="tab_item">
                <ul>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Transition</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Animation</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Border</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                    <li class="item"><a href="#">
                        <div class="thumbnail">
                            <img src="http://placehold.it/45x45" />
                        </div>
                        <div class="description">
                            <strong>CSS3 Box</strong><p>2012-03-15</p>
                        </div>
                    </a></li>
                </ul>
            </div>
        </aside>
    </div>
    <footer id="main_footer">
        <h3>HTML5 + CSS3 Basic</h3>
        <address>Website Layout Basic</address>
    </footer>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>

/*text-overflow예제*/
  div{width:300px; height: 30px;background-color:yellow; border:1px solid black;padding:5px;}
  #one{overflow: hidden;white-space: nowrap; text-overflow:clip;}
  #two{overflow: scroll; white-space: nowrap; text-overflow: ellipsis;}
  #three{overflow: auto;white-space: nowrap; text-overflow: ellipsis;}
  
</style>
</head>
<body>
  <h3>text-overflow: clip</h3>
  <div id="one">
  It took me a long time to learn where he came from. 
  The little prince, who asked me so many questions,   
  </div>
  <h3>text-overflow: ellipsis</h3>
  <div id="two">
  It took me a long time to learn where he came from. 
  The little prince, who asked me so many questions,   
  </div>
  <h3>text-overflow: ellipsis2</h3>
  <div id="three">
  It took me a long time to learn where he came from. 
  The little prince, who asked me so many questions,   
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>
    
    /*white-space예제*/
      p {
        font-family: Consolas;
        font-size: 16px;
      }
      .t {
        font-weight: bold;
        color: #009688;
      }
      .a {
        white-space: normal;
      }
      .b {
        white-space: nowrap;
      }
      .c {
        white-space: pre;
      }
      .d {
        white-space: pre-wrap;
      }
      .e {
        white-space: pre-line;
      }
    </style>
</head>
<body>
    <p class="t">white-space: normal;</p>
    <p class="a">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: nowrap;</p>
    <p class="b">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre;</p>
    <p class="c">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-wrap;</p>
    <p class="d">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-line;</p>
    <p class="e">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>
    
    /*dropdown예제*/
 .dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;
 }

 .dropdown {
   position: relative;
   display: inline-block;
 }

 .dropdown-content {
    display: none;
    position:absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }

 .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
 }

 .dropdown-content a:hover {background-color:#f1f1f1}

 .dropdown:hover .dropdown-content
 {display: block;}

 .dropdown:hover .dropbtn {
   background-color: #3e8e41;
 }
 
    </style>
</head>
<body>
    
    <h2>Dropdown Menu</h2>
 <p>Move the mouse over the button to open the dropdownmenu.</p>
 <div class="dropdown">
   <button class="dropbtn">Dropdown</button>
   <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </div>
 </div>
 <p><strong>Note:</strong> We use href="#" for test links. In areal web site this would beURLs.</p>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>

/*css Button 예제*/
 .button {
 display: inline-block;
 border-radius: 4px;
 background-color: #f4511e;
 border: none;
 color: #FFFFFF;
 text-align: center;
 font-size: 28px;
 padding: 20px;
 width: 200px;
 transition: all 0.5s;
 cursor: pointer;
 margin: 5px;
}

.button span {
 cursor: pointer;
 display: inline-block;
 position: relative;
 transition: 0.5s;
}

.button span:after {
 content: '\00bb';
 position: absolute;
 opacity: 0;
 top: 0;
 right: -20px;
 transition: 0.5s;
}

.button:hover span {
 padding-right: 25px;
}

.button:hover span:after {
 opacity: 1;
 right: 0;
}
 
    </style>
</head>
<body>
    
    <h2>Animated Button</h2>
 <button class="button" style="vertical-align:middle"><span>Hover</span></button>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>

/*css Paging 예제*/
 .pagination {
   display: inline-block;
 }

 .pagination a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color .3s;
   border: 1px solid #ddd;
 }

 .pagination a.active {
   background-color: #4CAF50;
   color: white;
   border: 1px solid #4CAF50;
 }

 .pagination a:hover:not(.active) {background-color: #ddd;}
 
    </style>
</head>
<body>
    
<h2>Pagination with Borders</h2>
 <div class="pagination">
   <a href="#">&laquo;</a>
   <a href="#">1</a>
   <a href="#"class="active">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">&raquo;</a>
 </div>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
/*1번 - DropDown - 이미지에 마우스 Over하면 확대 이미지가 보여지도록 구현하시오
(사용Color: #f9f9f9, rgba(0,0,0,0.2)) */

	.dropdown{ // 작은 사진
	   position: relative;
	   display: inline-block;
	}
	
	.dropdown-content{ // 큰사진 - 초기값 안보이게
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dropdown:hover .dropdown-content{ // .dropdown 마우스오버롤시 .dropdown-content 같이보이게
		display: block;
	}
	
	.desc{ // 큰사진 아래 설명
  		padding: 15px;
  		text-align: center;
 	}
 	

/*2번 - DropDown -아래 이미지처럼 downdown에 마우스Over하면 Downdown 메뉴가 나오도록 구현하시오
     (사용Color: #333, #f9f9f9, rgba(0,0,0,0.2), #f1f1f1)*/
     
     ul{
     	list-style-type: none;
     	margin: 0;
     	padding: 0;
     	overflow: hidden;
     	background-color: #333;
     }
     
     li{
     	float: left;
     }
     
     li a, .dropbtn{
     	display: inline-block;
     	color: white;
     	text-align: center;
     	padding: 14px 16px;
     	text-decoration: none;
     }
     
     li a:hover, .dropdown:hover .dropbtn{
     	background-color: red;
     }
     
     li.dropdown{
     	display: inline-block;
     }
     
     .dropdown-content{
     	display:none;
     	position: absolute;
     	background-color: #f9f9f9;
     	min-width: 160px;
     	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     	z-index: 1;
     }
     
     .dropdown-content a{
     	color: black;
     	padding: 12px 16px;
     	text-decoration: none;
     	display: block;
     	text-align: left;
     }
     
     .dropdown-content a:hover{
     	background-color: #f1f1f1;
     }
     
     .dropdown:hover .dropdown-content{
     	display: block;
     }*/
     
/*3번 - ToolTip - 마우스 Over시 Tooltip이 뜨도록 구현하시오*/

	.tooltip{
		position: relative;
		display: inline-block;
		border-bottom: 1px dotted black;
	}
	
	.tooltip .tooltiptext{
		visibility: hidden;
		width: 120px;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		
		/*Position thetooltip*/
		position: absolute;
		z-index: 1;
		top: -5px;
		left: 105%;
	}     
	
	.tooltip:hover .tooltiptext{
		visibility: visible;
	}
	
</style>
</head>
<body>
<!-- 1번 -->
    <h2>Dropdown Image</h2>
	<p>Move the mouse over theimage below to open the dropdown content.</p>
	<div class="dropdown">
	 <img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
	 <div class="dropdown-content">
	 <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
	 <div class="desc">Beautiful Cinque Terre</div>
	 </div>
	</div>
	
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	
<!-- 2번 -->
	<!--<ul>
	 <li><a href="#home">Home</a></li>
	 <li><a href="#news">News</a></li>
	 <li class="dropdown">
	   <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
	   <div class="dropdown-content">
	      <a href="#">Link 1</a>
	      <a href="#">Link 2</a>
	      <a href="#">Link 3</a>
	   </div>
	 </li>
	</ul>
	<h3>Dropdown Menu inside aNavigation Bar</h3>
	<p>Hover over the"Dropdown" link to see the dropdown menu.</p>

<!-- 3번 -->
	<h2>Right Tooltip</h2>
	<p>Move the mouse over thetext below:</p>
	<div class="tooltip">Hover over me
	 <span class="tooltiptext">Tooltip text</span>
	</div>

</body>
</html>

 

 

'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글

6일차 실습  (0) 2019.09.04
JavaScript - 자료형  (0) 2019.09.03
4일차 실습  (0) 2019.09.02
3일차  (0) 2019.08.30
3일차 실습  (0) 2019.08.30
And