[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral..

[Day5] CSS 5 [11/16]

[롤오버효과]

  <button>마우스 롤오버효과</button>
  <button>마우스 롤오버효과</button>
  <button>마우스 롤오버효과</button>

//1. js 로 모든 button 요소 얻어와야 된다.
//var btns =  document.getElementsByTagName("button");
//alert( btns.length );
      
var btns = document.querySelectorAll("button");
// alert( "버튼 수 : " + btns.length );
      
// 2. 마우스를 올릴때( mouseover )   배경색 - 파랑 js 코딩.
for (var i = 0; i < btns.length; i++) {
  btns[i].onmouseover = function (){
  // console.log( "btn mouseover 이벤트 발생.");
  // 이벤트를 받은 버튼 객체 ? 
  event.srcElement.style.backgroundColor = "blue";
  }
  btns[i].onmouseout = function (){ 
    this.style.backgroundColor = "red";			 
  }
} // for

jquery

    /*
    $("button").mouseover(function() {
    	$(this).css("background-color", "blue");
    });
    $("button").mouseout(function() {
    	$(this).css("background-color", "red");
    });
    */
    // 체이닝
    /*
    $("button")
         .mouseover(function() {
		    	$(this).css("background-color", "blue");
		  })
          .mouseout(function() {
    	          $(this).css("background-color", "red");
          });
    */
    
    // jquery method -  hover() 메서드 
    $("button").hover(
    		  function (){  // mouseover
    			  $(this).css("background-color", "blue");
    		  }   , 
    		  function (){  // mouseout
    			  $(this).css("background-color", "red");
    		  }
    );

css 드롭다운 이미지

- 드롭다운 상자 안에 이미지 및 기타 콘텐츠를 추가하는 방법.

- 마우스 이미지 위로 올릴 때.. 처리

<style>
   .dropdown{
      position: relative;
      display: inline-block;
      
      left: 200px;
   }
   .dropdown-contnt{
       display: none;
       position: absolute;
       z-index: 1;
       
       background-color: #f9f9f9;
       min-width: 160px;
       box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);
       padding:12px 16px;       
   }
   .dropdown:hover .dropdown-contnt{
      display: block;
   }
</style>

<!-- .dropdown>span+.dropdown-contnt -->
<div class="dropdown">
	<img src="../images/img_5terre.jpg" alt=""  style="width: 100px;height:50px">
	<div class="dropdown-contnt">
	    <img src="../images/img_5terre.jpg" alt=""  style="width: 300px;height:150px">
	    <div class="desc">이미지 설명</div>
	</div>
</div>

메뉴바(nav bar) + 드롭다운 메뉴 2개

<style>
   ul{
       list-style-type: none;
       margin: 0;
       padding: 0;
               overflow: hidden;
       background-color: #333;        
   }
   li{
      float: left;
   }
   li a,  .dropbtn{
      color:white;
      display: inline-block;
      padding: 14px 16px;
      text-decoration: none;
      text-align: center;
   }
   li a:hover,  .dropbtn:hover{
      background-color: red;
   }
</style>
<style>
  li.dropdown{
      display: inline-block;
  }
  li.dropdown .dropdown-content{
     display: none;
     
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
     padding: 12px 16px;
     z-index:1;
  }
  li.dropdown:hover .dropdown-content{
     display: block;
  }
</style>
<style>
  .dropdown-content  a{
    display: block;
    text-decoration: none;
    color:black;
    padding: 12px 16px;
    text-align: left;
  }
  .dropdown-content  a:hover{
     background-color: #f1f1f1;
  }
</style>

<ul>
	<li><a href="#">Home</a></li>
	<li class="dropdown">
	  <a href="#" class="dropbtn">News</a>
	  <div class="dropdown-content">
	      <!-- a[href="#"]*3>{Link $} -->
	      <a href="#">Link 1</a>
	      <a href="#">Link 2</a>
	      <a href="#">Link 3</a>
	   </div>
	</li>
	<li class="dropdown">
	   <a href="#" class="dropbtn">DropDown</a>
	   <div class="dropdown-content">
	      <!-- a[href="#"]*3>{Link $} -->
	      <a href="#">Link 1</a>
	      <a href="#">Link 2</a>
	      <a href="#">Link 3</a>
	   </div>
	</li>
</ul>

<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quis autem laboriosam corporis fugiat dicta reiciendis optio rerum facere nobis officia nemo fugit adipisci sint dolores temporibus dolore consectetur maxime.</p>

timeline

<style>
* {
  box-sizing: border-box;
}

body {
  background-color: #474e5d;
  font-family: Helvetica, sans-serif;
}

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width:600px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  /* transparent  투명 */
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}
</style>

<div class="timeline">
  <div class="container right">
    <div class="content">
      <h2>2021</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2020</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>2019</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2012</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>2011</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2007</h2>
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
    </div>
  </div>
</div>

css 이미지 갤러리 + 반응형웹

<style>
  *{
     box-sizing: border-box;
  }
  div.gallery{
     border: 1px solid #ccc;
     width: 180px;
     margin:5px;
     
     float: left;
  }
  div.gallery:hover{
     border: 1px solid #777;
  }
  div.gallery img{
    width: 100%;
    height: auto;
  }
  div.gallery div.desc{
    padding: 15px;
    text-align: center;
  }
  
  .clearfix::after{
     content: "";
     clear: both;
     display: table;
  }
</style>
<style>
  @media only screen  and ( max-width:700px ){
       div.gallery{
           width:48%;
       }
   }
   
   @media only screen and ( max-width:500px ){
       div.gallery{
           width:100%;
       }
   }
   
   
</style>

<!-- .gallery*4>a[target=_blank]>img^.desc>{Add a description of the image here} -->
<div class="gallery">
	<a href="../images/img_5terre.jpg" target="_blank"><img src="../images/img_5terre.jpg" alt="" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a href="../images/img_forest.jpg" target="_blank"><img src="../images/img_forest.jpg" alt="" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a href="../images/img_lights.jpg" target="_blank"><img src="../images/img_lights.jpg" alt="" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
	<a href="../images/img_mountains.jpg" target="_blank"><img src="../images/img_mountains.jpg" alt="" /></a>
	<div class="desc">Add a description of the image here</div>
</div>
<div class="clearfix"></div>

<div style="padding:6px;">
  <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     Cupiditate recusandae quibusdam odit nulla excepturi laboriosam 
     veritatis aspernatur ab officiis voluptatibus deleniti rerum nemo 
     neque sit non nihil totam. Architecto quae.
  </p>
</div>

이미지 스프라이트(image sprites)

이미지 스프라이트 : 단일 이미지에 포함된 이미지 모음.

웹 페이지에 많은 이미지가 사용되는 경우 웹페이지 로드하는 데 시간이 오래 걸린다.

여러 서버 요청 일어난다.

단일이미지 : ../images/img_navsprites_hover.gif

<style>
  #navlist{
      position: relative;
  }
  #navlist li{
     position: absolute;
     top:0;
     
     margin: 0;
     padding: 0;
     list-style-type: none;
  }
  #navlist li, #navlist li a{
      height: 44px;
      width: 43px;
      display: block;
  }
  li#home{
      left:0;
      background: url('../images/img_navsprites_hover.gif') 0 0;
  }
  li#prev{
     left:63px;
     background: url('../images/img_navsprites_hover.gif') -47px 0;
  }
  li#next{
      left:129px;
      background: url('../images/img_navsprites_hover.gif') -91px 0;
  }
</style>
<style>
     li#home:hover{ 
      background-position:  0 -45px;
	  }
	  li#prev:hover{ 
	     background-position: -47px -45px;
	  }
	  li#next:hover{ 
	      background-position:  -91px -45px;
	  }
  
  /* js  li + background-position:  -91px -45px; */
</style>

<!-- ul#navlist>li[id]*3>a[href=#] -->
<ul id="navlist">
	<li id="home"><a href="#"></a></li>
	<li id="prev"><a href="#"></a></li>
	<li id="next"><a href="#"></a></li>
</ul>

css 속성 selector (선택자)

--> 1. [속성명] 속성값은 상관없이 속성명만 있으면

--> 2. [속성명=속성값]

--> 3. [속성명^=속성값]

--> 4. [속성명$=속성값]

--> 5. [속성명*=속성값]

--> 6. [속성명~=속성값]

7. [속성명|=속성값] X

<style>
   /* 1.  input{ */
   /* 2. input[type]{ */
   input[type=text]{
      width:200px;
      border:1px solid red;
   }
</style>
<style>
   /* a[title='flower']{  == where title = 'flower' */
  
   /* where title LIKE  'flower%' */
   /* a[title^='flower']{ */
   
   /* where title LIKE  '%flower' */
  /* a[title$='flower']{    */
  
  
  /* where title LIKE  '%flower%' */  
  /* a[title*='flower']{ */  
  
  /* flower 단어 */
  a[title~='flower']{
      color:red;
      background-color: yellow;
   }
</style>

<!-- a[href=#][title]*5 -->
<a href="#" title="klematis flower">naver</a><br>
<a href="#" title="flower">daum</a><br>
<a href="#" title="kbsflower">sist</a><br>
<a href="#" title="kbs-flower">taeyo</a><br>
<a href="#" title="flowers">admin</a><br>

<hr>

<input><br>
<input><br>
<input type="text" ><br>
<input type="text" ><br>
<input type="text" ><br>
<input type="submit" ><br>
<input type="reset" ><br>

first-child,last-child,nth-child(n) / ~ first-of-type

<style>
   /*
   li{
      color:red;
   }
   */
   
   /*
   li:first-child{
      color:red;
   }
   */
   /*
   li:first-of-type{
      color:green;
   }
   */
   
   /*
   li:nth-child(2){
      color:red;
   }
   */
   /*
   li:nth-of-type(2){
      color:red;
   }
   */
   
   /*
   li:nth-child(odd){
      color:red;
   }
   */
   
   /*
   li:last-child{
      color:red;
   }
   */
    li:last-of-type{
      color:red;
   }
</style>

<div>
     <!-- ul>li*5>lorem1 -->
     <ul>
     	<li>Lorem.</li>
     	<li>Rerum.</li>
     	<li>Autem?</li>
     	<li>Cupiditate.</li>
     	<li>Obcaecati.</li>
     </ul>
</div>

   /* 어떤 요소의 첫 번째 자식 == p */
   /* p:first-child{ */
   
   /* p:first-of-type{ */
   
   /* p:last-child{ */
   /* p:last-of-type{ */
   
   /* p:nth-child(5){ */
   p:nth-of-type(2){
       color:red;

<div>div1</div>
<div>div2</div>
<!-- p*5>lorem5 -->
<p>Lorem ipsum dolor sit amet.</p>
<dvi>div3</dvi>
<p>*** Impedit maxime distinctio iure voluptatum?</p>
<p>Sint corporis sequi voluptatum commodi.</p>
<p>Maiores illo molestiae dicta sequi!</p>
<p>Reprehenderit blanditiis temporibus eveniet ab.</p>

* first-child : 어떤 요소의 첫번째 자식이 -> p면 O

* p:first-of-type : 첫번째 p태그 (처음오는 p)

검색 스타일 지정

<style>
  input[type=text]{
     width: 30%;
     padding: 12px 20px;
     margin: 8px 0;
     
     box-sizing: border-box;
     
     border: 2px solid #ccc;
     background: white url('../images/searchicon.png') no-repeat 10px center;
     
     padding-left: 40px;
     
     /* 전환 */
     transition:width 0.5s ease;
  }
  
  input[type=text]:hover{
     width: 100%;
  }
</style>

<form action="">
   <input type="text"  name="search" placeholder="Search...">
</form>

테이블 체크

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
   table{
      width: 100%;
      border:1px solid #ddd;
      border-spacing: 0;
      border-collapse: collapse;
   }   
   th, td{
     text-align: center;
     padding: 16px;
   }   
   th:first-child,   td:first-child{
     text-align: left;
   }   
   tr:nth-child(even){
     background-color: #f2f2f2;
   }   
   .fa-check{  color:green }
   .fa-remove{  color:red }
</style>

<table>
	<tr>
		<th>Lorem.</th>
		<th>Quod?</th>
		<th>Laudantium.</th>
	</tr>
	<tr>
		<td>Sample text</td>
		<td><i class="fa fa-remove"></i></td>
		<td><i class="fa fa-check"></i></td>
	</tr>
	<tr>
		<td>Sample text</td>
		<td><i class="fa fa-check"></i></td>
		<td><i class="fa fa-check"></i></td>
	</tr>
	<tr>
		<td>Sample text</td>
		<td><i class="fa fa-remove"></i></td>
		<td><i class="fa fa-check"></i></td>
	</tr>
	<tr>
		<td>Sample text</td>
		<td><i class="fa fa-check"></i></td>
		<td><i class="fa fa-check"></i></td>
	</tr>
	<tr>
		<td>Sample text</td>
		<td><i class="fa fa-remove"></i></td>
		<td><i class="fa fa-check"></i></td>
	</tr>
</table>

평점

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
  .checked{
     color:orange;
  }
  
  span.fa{
     font-size: 25px;
  }

  span.heading{
     font-size: 25px;
     margin-right: 25px;
  }
</style>

<span class="heading">평점 : </span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star"></span>

css 특이성(특수성)

- 동일한 요소(a)를 css 선택자로 사용할 때 우선 순위

[특이성 수준을 나타내는 점수]

  1. inline css 적용방법 ( 1000점 ) > Internal, External  css 적용방법
  2.
     *     :  0점
     태그명, 의사요소   : 1점
     클래스명, 의사클래스명, 속성 선택자 : 10점
     아이디속성  : 100점

  예)

  #navbvar p#demo{}     100+1+100=201
  #demo{}     100

  3.   예외
     !important 규칙
     해당 요소의 특정 속성에 대한 모든 이전 스타일을 새로 재정의한다.

<style>
    div#mydiv p > a{  /*  1점 + 100점 + 1점 + 1점 = 103점 */
    }

    #mydiv p > a {        /* 100점 + 1점 + 1점=102점 */
        color:navy;
    }

    p > a.button{            /* 1점 + 1점 + 10점 = 12점 */
      color:blue;
    }

   a{               /* 1점 */
      color:yellow;
   }
   
   p > a{          /*  2점 */
       color:green;
   }
</style>
<style>
   a{              /* 1점 */
       color:red  !important;
   }
</style>

막대 그래프

 <style>
  *{    /* 0점 */
     box-sizing: border-box;
   }
   
   body{
      font-family: Arial;
     border:1px solid red;
     padding:20px;
     
     max-width: 800px;
     margin: 0 auto;
     height: 100%;
   }

   /* 10+1=11 */
   .row::after{
      content:"";
      clear:both;
      display: table;
   }
   .side{
     float: left;
     width:15%;
     margin-top:10px;
   }
   .middle{
     float: left;
     width:70%;
     margin-top:10px;
   }
   .middle .bar-container{
     width: 100%;
     background-color: #f1f1f1; 
     text-align: center;
     color:white;
   }
   .right{
     text-align: right;
   }
   
   /* 막패 그래프  */
  /* <div class="bar-1"></div> */
  .bar-1 {
     background-color: #f44336; 
     height: 18px;
     width: 20%; 
  }
  .bar-2{
     background-color: #3296F3; 
     height: 18px;
     width: 15%; 
  }
  .bar-3 {
     background-color: #00BCD4; 
     height: 18px;
     width: 75%; 
  }
  .bar-4 {
     background-color: #FF9800; 
     height: 18px;
     width: 86%; 
  }
  .bar-5 {
     background-color: #4caf50; 
     height: 18px;
     width: 40%; 
  }
</style>

<div class="row">
   
   <!-- bar start -->
   <div class="side">
   	<div>1 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
   	<div class="bar-container">   
   		<div class="bar-1"></div>
   	</div>
   </div> 
   <div class="side right">
   	<div>20</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
   	<div>2 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
   	<div class="bar-container">   
   		<div class="bar-2"></div>
   	</div>
   </div> 
   <div class="side right">
   	<div>15</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
   	<div>3 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
   	<div class="bar-container">   
   		<div class="bar-3"></div>
   	</div>
   </div> 
   <div class="side right">
   	<div>75</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
   	<div>4 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
   	<div class="bar-container">   
   		<div class="bar-4"></div>
   	</div>
   </div> 
   <div class="side right">
   	<div>86</div>
   </div>
   <!-- bar end -->
   
   <!-- bar start -->
   <div class="side">
   	<div>5 star</div>
   </div> 
   <!-- 막대그래프  -->
   <div class="middle">   
   	<div class="bar-container">   
   		<div class="bar-5"></div>
   	</div>
   </div> 
   <div class="side right">
   	<div>40</div>
   </div>
   <!-- bar end -->
   
</div>

프로필

<style>
 .card{
     width: 30%;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,   0.2);
     border-radius: 5px;
     display: inline-block;
  }
  .card:hover{
     box-shadow: 0 4px 16px 0 rgba(0,0,0,   0.2);
  }
  .card img{
     width: 100%;
     border-radius: 5px 5px 0 0;
  }
  .container{
     padding: 2px 16px;
     text-align: center;
  }
</style>

<!-- .card>img+.container>h4>b^p -->
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>
<div class="card">
	<img src="../images/img_avatar.png" alt="" />
	<div class="container">
		<h4><b>Hong Gil Dong</b></h4>
		<p>Java Developer</p>
	</div>
</div>

둥근모서리

border-radius 속성

<style>
   p{
       width: 200px;
       height: 200px;
       border:1px solid green;
       padding:20px;   
   }
   p:first-of-type{
      background-color: red;
      border-radius: 15px  50px 30px 5px;
   }
   p:nth-of-type(2){
     background:url('../images/paper.gif') left top repeat;
     border-radius: 0 50%;
   }
   p:last-of-type{
     border:2px solid #73da21;
     border-top-left-radius: 15px;
     border-bottom-right-radius: 15px;
   }
</style>

<p>Lorem ipsum dolor.</p>
<p>Sapiente consequatur natus.</p>
<p>Voluptatem nulla tempore.</p>

다중 배경이미지

여러 배경 이미지를 추가

1. background-size 속성

2. background-origin 속성

3. backgroud-clip 속성

background-image 속성 : url(), url(), url() ... 배경이미지 서로 위에 쌓인다.

첫 번째 배경이미지 사람에게 가장 가깝게 보인다.

  /* #demo{    100점 */
  div#demo{    /* 101점 */
  
       /* 
      background-image: url('../images/img_flwr.gif'), url('../images/paper.gif');
      background-repeat: no-repeat,                          repeat;
      background-position: right bottom, left top;
       */
       
       /* 배경이미지 약식 속성 */
       background:  url('../images/img_flwr.gif') no-repeat right bottom
        , url('../images/paper.gif') repeat left top;
  }

<!-- #demo>(h1>lorem4)+p*2>lorem -->
<div id="demo">
	<h1>Lorem ipsum dolor sit.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quibusdam voluptate consectetur porro assumenda praesentium explicabo molestiae voluptatem illo laborum vitae repellat nihil pariatur eos ducimus illum possimus rem hic?</p>
	<p>Tempore repellat deserunt tenetur odit quisquam recusandae cumque perferendis eum illo error ducimus voluptatibus aliquid aliquam temporibus ut nam in eaque quam fuga aspernatur officiis accusamus enim porro explicabo debitis.</p>
</div>

background-size 속성

- 배경 이미지의 크기를 지정할 수 있다.

- 크기 단위 : 길이, % + contain 또는 cover 두 키워드를 사용할 수 있다.

<style>
   div{ /*  1점 */
      border: 1px solid;
      padding:15px;
      background: url('../images/img_flwr.gif') no-repeat;
   }
   
   #demo1{  /*  100점 */
       background-size: 100px 80px;
   }
</style>

<img src="../images/img_flwr.gif">

<!-- #demo$*2>h1>lorem3^p*2>lorem -->
<div id="demo1">
	<h1>Lorem ipsum dolor.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi dolor amet quia aperiam totam quibusdam impedit reiciendis consequuntur magnam assumenda iure inventore magni eveniet quaerat modi officia eos eum!</p>
	<p>Reprehenderit enim sit sapiente perferendis magnam nobis omnis dolorem commodi architecto porro debitis vero saepe distinctio voluptates at minus animi vel ratione sint ea sequi possimus cum repellat tempora obcaecati!</p>
</div>
<div id="demo2">
	<h1>Magnam cum pariatur!</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum vel nihil corrupti dignissimos dolores laudantium nostrum cumque doloremque fugiat itaque quasi quo libero quis voluptatem eligendi maxime harum sunt iste!</p>
	<p>Perspiciatis tempora veniam dolorum laboriosam odio velit enim ullam suscipit adipisci inventore corporis itaque aliquam tempore molestiae aliquid fugiat molestias ab nam. Minima optio odio veritatis illo obcaecati dolorem iusto?</p>

background-size:contain or cover

- contain : 배경 이미지를 최대한 크게 조정한다. ( 단, 너비와 높이가 모두 콘텐츠 영역에 맞아야함.)

- cover : 콘텐츠 영역이 완전히 배경 이미지에 포함되도록 처리한다.

배경 이미지의 일부는 배경 위치 지정 영역에서 보이지 않을 수도 있다.

<style>
   div{
      width: 150px;
      height: 120px;
      border:1px solid;
      
      background: url('../images/img_flwr.gif') no-repeat;
   }
   
   #div2{
      background-size: contain;
   }
   #div3{
      background-size: cover;
   }
</style>

<img src="../images/img_flwr.gif" alt="" >

<!-- h3+#div1>p>lorem5 -->
<h3>contain, cover X</h3>
<div id="div1">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<h3>contain</h3>
<div id="div2">
	<p>Lorem ipsum dolor sit amet.</p>
</div>
<h3>cover</h3>
<div id="div3">
	<p>Lorem ipsum dolor sit amet.</p>
</div>

background-size cover 활용)

<style>
body{
   margin: 0;
   font-family: Arial;
}
.hero-image{
   height: 500px;
   background: url('../images/img_man.jpg') no-repeat;
   
   background-size: cover;  /*   */
   
   position: relative;
}
.hero-text{
   position: absolute;
   left:50%;
   top:50%;
   
   text-align: center;
   color:white;
   
   transform:translate(-50%, -50%);
}
</style>

<div class="hero-image">
	<div class="hero-text">
		<h1>I am Sam</h1>
		<h3>Lorem ipsum dolor sit.</h3>
		<button>Hire me</button>
	</div>
</div>

<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Facilis culpa amet accusantium doloremque veritatis autem 
 excepturi odio eum dicta eaque.</p>

html 여러 배경 이미지 설정 + 크기 설정 (사이즈 각각 조절)

  #demo1{
     background: url(../images/img_tree.gif) left top no-repeat
                        , url(../images/img_flwr.gif) right bottom no-repeat
                        , url(../images/paper.gif) left top repeat;
     background-size: 50px 150px, 130px,  auto;
  }

<!-- h3+#demo1>p>lorem5^p*2>lorem15 -->
 <div id="demo1">
 	<p>Lorem ipsum dolor sit amet.</p>
 	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eveniet optio necessitatibus nihil alias voluptatem autem animi vitae reprehenderit quo inventore soluta. Nam beatae rerum officiis animi molestiae molestias nihil.</p>
 	<p>Voluptates autem impedit consequuntur suscipit placeat ducimus amet repudiandae minus velit doloribus. Recusandae earum quod ut facilis quidem cumque asperiores aperiam in culpa laborum quo fuga veniam maxime nostrum consequuntur!</p>
 </div>

background-origin 속성

background-clip 속성

background-clip : [배경색이 그려질 위치]를 지정하는 속성

padding-box ( 기본값 )

border-box

content-box

1) background-position 속성 : [배경 이미지의 위치]를 지정하는 속성

예) left top, 10px 150px, 50% 50% 등등

2) background-origin 속성 : 배경 이미지의 위치를 지정하는 속성

1)과 차이점 ?

border-box, 테두리 왼쪽 상단

padding-box , (기본값) 패딩 왼쪽 상단

content-box 콘텐츠 왼쪽 상단

속성값을 사용.

div{
   border: 10px dotted black;
   padding:35px;
   background: yellow url('../images/img_flwr.gif') no-repeat;
}

#demo1{
   background-origin: padding-box;  /*  기본값 */
   background-clip: padding-box;   /* 기본값*/
}

#demo2{
  background-origin: border-box;
   background-clip:  border-box;
}

#demo3{
   background-origin: content-box;
   background-clip: content-box;  
}

<!-- (#demo$>h1>lorem5^p>lorem15)*3 -->
<div id="demo1">
	<h1>Lorem ipsum dolor sit amet.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil porro vel quis dicta inventore minima!</p>
</div>
<div id="demo2">
	<h1>Lorem ipsum dolor sit amet.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil porro vel quis dicta inventore minima!</p>
</div>
<div id="demo3">
	<h1>Lorem ipsum dolor sit amet.</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil porro vel quis dicta inventore minima!</p>
</div>

parallax == 사전적의미 ( 시차 )

시차 == 관측 위치에 따라 물체의 위치나 방향이 차이

   html, body{
      /* border:1px solid red; */
      height: 100%;
      
      margin: 0;
      padding: 0;
   }
   
   .parallax{
       border: 1px solid green;
       height: 100%;
       
       background: url(../images/img_parallax.jpg) no-repeat center fixed;
       background-size: cover;
   }

<div class="parallax"></div>
<div style="height:500px;background: fuchsia;font-size: 20px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae deleniti
     dignissimos similique nulla repellendus consequatur alias voluptate distinctio 
     aperiam eum quaerat nisi ipsum sequi sit quidem quae officia molestiae 
     soluta.
</div>
<div class="parallax"></div>

그라디언트(gradient) 효과

그림자 효과

1. 박스 그림자 효과( box-shadow)

2. 텍스트 그림자 효과( text-shadow)

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day1] JS 1 - 개요 (0)	2022.11.21
[Day6] CSS 6 - 텍스트효과, 웹글꼴, 2D 3D, 전환, 애니메이션, 툴팁, 뷰포트, 미디어쿼리 (0)	2022.11.18
[Day4] CSS 4 - overflow, 팝업폼, display, prev\|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운 (0)	2022.11.16
[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index (0)	2022.11.15
[Day2] CSS 2 - selector, 색상, 테두리, margin, padding(border-box), width/height, box model, 링크, 텍스트, 아이콘, 글꼴, active처리 (0)	2022.11.10

[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral..

[Day5] CSS 5 [11/16]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day5] CSS 5 [11/16]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바