[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index

[Day3] CSS 3 [11/14]

JS로 동적버튼 생성 - DOM 메서드 사용

     // 1. 버튼 [요소를 생성] - createElement() 메서드
     var btn =  document.createElement("button");
     
     // 2. <button>회원가입</button>   텍스트노드
     // 컬렉션 클래스 - LinkedList : node
     // var textNode =  document.createTextNode("버튼 - 1");
     // btn.appendChild(textNode);
     // 2-2.  <시작태그>Content(내용)</종료태그>
     //         <button>버튼 - 1   innerText 속성</button>
     btn.innerText = "버튼 - 1";
     
     // 3.  동적 생성한 버튼을  클릭 이벤트 처리.
     btn.onclick = function (){
    	 alert(" 버튼 - 1 클릭");
     }

     // js == java  명령종결연산자        ;  세미콜론 붙인다. ( 생략 가능 )
     // 4. 생성된 버튼을 [부모요소 body]에 추가
     // document.getElementById(id)
     // document.querySelector("body")
     document.body.appendChild(btn);

* 마지막 자식요소 = script

마지막 자식 요소에 추가 -> button 추가됨 (이름이 없기 때문에 작게 나옴)

<button id="btnExec"  style="width:150px;">실행 버튼</button> 
<!-- <button id="btnExec"  width="150px">실행 버튼</button> -->

<!-- p#demo -->
<p id="demo">XXX</p>

<script>
        // document.getElementById("btnExec");
        document.querySelector("#btnExec").onclick = function (){
            var pEle = document.querySelector("#demo");
         
            // <p></p>
            // button*10, br*10    모든 자식 요소 제거
            pEle.innerText = "";
            
            //alert(" 잠시 멈춤 ");
            
        	// 버튼 * 10 => p 추가
        	for (var i = 1; i <= 10; i++) {
        		 var btn =  document.createElement("button"); 
        		 
        		 // 버튼의 너비 : 150px
        		 // js  ?  style="width:150px;"
        		 //         style 속성  "width:150px;" 속성값
        		 // btn.setAttribute(name, value);
        		 // value = btn.getAttribute(name);
        		 
        		 // js 코딩 -> F12 디버깅.
        		 // btn.setAttribute("style", "width:150px;");
        		 btn.style.width = "150px";  //  px 단위 꼭 붙이자.     
        		 
        		 //btn.setAttribute("width", "150px");  // X
        		 //btn.width = "150px;"                               X
        		 
        	     btn.innerText = "버튼 - "+ i; 
        	     btn.onclick = function (){
        	    	 // [***** js 클로저 *****] 
        	    	 // *** alert(" 버튼 - "+i+" 클릭");
        	    	 
        	    	 // js에서 이벤트가 발생하면 모든 이벤트 정보를 저장하는 객체 : event 객체
        	    	 alert(  event.srcElement.innerText );
        	    	 
        	     };
        	     pEle.appendChild(btn);
        	     
        	     // <button> 인라인 모드
        	     pEle.appendChild( document.createElement("br") );
        	     
			} // for
        };
</script>

* p 태그의 자식 안에다 집어넣어야함 -> document.body.appendChild(btn) -> pEle.appendChild(btn);

* js 클로저!!! (중요)

-> event 담겨져있음

* button 속성에 width 속성없..?

* 실행버튼 누를때마다 버튼생기는거 초기화 -> 클릭할때 제거하기

jQuery로 수정

<script>
   $("#btnExec").click( function (){
	   $("#demo").text("");   // js innerText="" 속성 = jquery text("") 메서드 , html() 메서드
	   for (var i = 1; i <= 10; i++) {
		    var btn =  $("<button>버튼 - " + i + "</button>");
		    // style 속성 
		    // jquery method : css();
		    btn.css("width", "150px");
		    
		    // js의 라이브러리 : jquery
		    btn.click(function() {
		    	// alert(" 버튼  클릭됨!! ");
		    	alert(  $(this).text()  );
		    	// alert( event.srcElement.innerText );
		    });    
		    
		    //$("#demo").append(btn);
		    //$("#demo").append($("<br>"));
		    
		    // 체이닝
		    $("#demo")
		              .append(btn)
		              .append($("<br>"));
	   } // for
   });
</script>

* ex02_02 실습 해보기

css 페이징 처리

<style>
  *{
     box-sizing: border-box;
  }
  
  /* 저는 직접 코딩을 하더라도 여러분들은 아이디명, 클래스명 등등 복사 붙이기 */
  .pagination{
    /* background-color: red; */
    width: 50%;
    margin: 0 auto;  /*  0 t/b   auto l/r    가운데 정렬*/
    
    overflow: auto;
  }
  
  .pagination a{
      color:black;;
      text-decoration: none;
      
      /* padding: 5px; */
      /* margin: 3px; */
      float:left;
      width: 8.3%;
      text-align: center;
  }
  
  .pagination a:hover{
      background-color: #ddd;
  }
  
  .pagination a.active{
      background-color: dodgerblue;
      color:white;
  }
</style>

<!-- .pagination>a[href=#]*12>{$} -->

<div class="pagination">
   <a href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#" class="active">7</a>
   <a href="#">8</a>
   <a href="#">9</a>
   <a href="#">10</a>
   <a href="#">&gt;</a>
   <a href="#">&raquo;</a>
</div>

<script>
   $(".pagination a").click(function (event){
	   // not()
	   $(".pagination a").not(this).removeClass("active");
	   $(this).addClass("active");  // [ajax( 에이작스 ) 사용]
   });
</script>

css 목록 : ul, ol , li , dl, dd, dt

<style>
  ul, ol{
     background-color: yellow;
     border:1px solid red;
  }
  
  ul.first{
     /* list-style-type: upper-roman; */
     
     /* 항목 마커의 위치 : li 태그 안에 */ 
     list-style-position: inside;
  }
  
  ol.second{
     /* list-style-type: disc; */
     /* 항목 마커의 위치 : li 태그 밖에 ( 기본 ) */ 
     list-style-position: outside;
  }
  
  li{
     /* background-color: green; */
  }
  
  ul, ol{
     list-style-type: none;
     
     margin: 0;
     padding: 0;
  }
</style>

<style>

  ul{
    /*
     list-style-type: upper-roman;
     list-style-position: inside;
     list-style-image: url();
     */
     
     /* 약식 속성 */
     /* list-style: type postion image; */
     list-style-image: url('../images/arr.gif');
  }
  
  ul li{
     border-bottom: 1px solid red;
  }
 
  /* li 태그 중에 마지막 li 태그는 border-bottom을 제거 */
  /* ul li:nth-child(5){ */
  ul li:last-child{
      border-bottom: none;
  }

</style>

<body>
<!-- ul.first>li*5>lorem1 -->
<ul class="first">
	<li>Lorem.</li>
	<li>Autem!</li>
	<li>Minus!</li>
	<li>Doloribus!</li>
	<li>Molestias.</li>
</ul>

<ol class="second">
	<li>Lorem.</li>
	<li>Autem!</li>
	<li>Minus!</li>
	<li>Doloribus!</li>
	<li>Molestias.</li>
</ol>
</body>

css 테이블

<style>
   table{
      width: 100%;
      border-collapse: collapse;
   }
   caption{
      font-weight: bold;
      text-transform: uppercase;
      caption-side: bottom;
   }
   th, td{
      border-bottom: 1px dotted red;
   }
   th{
      width: 100px;
      height: 70px;
   }
   td{
       height: 30px;
       text-align: center;
       vertical-align: middle;
   }
   
   tr:nth-child(even) {
	  background-color: #f2f2f2;
  }
  
  /* not()        jquery method */
  /* :not()      css selector  */
  tr:hover:not( :first-child ){
    background-color: #4caf50;
  }
</style>

<!-- table>caption+tr*3>td*4>{$} -->
  <table>
  	<caption>table sample</caption>
  	<!-- tr>th*4>{컬럼명$} -->
  	<tr>
  		<th>컬럼명1</th>
  		<th>컬럼명2</th>
  		<th>컬럼명3</th>
  		<th>컬럼명4</th>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>2</td>
  		<td>3</td>
  		<td>4</td>
  	</tr>
  </table>

css 반응형 테이블

- 화면이 너무 작아서 전체 테이블을 표시할 수 없는 경우

- 반응형 테이블에 가로 스크롤 막대가 표시되도록하는 것.

- overflow:auto 컨테이너 요소에 자식요소를 추가하여 반응형 으로 만들 때 사용하는 속성

<style>
   table{
       width: 100%;
       border-collapse: collapse;
   }
   
   th, td{
      text-align: left;
      padding: 8px;
   }
   
   tr:nth-child(even){
      background-color: #f2f2f2;
   }
   
   div{
     border: 1px solid red;
     
     overflow-x:auto; 
   }
</style>

 <!-- table>(tr>th*10>lorem1)+(tr>td*10>lorem1) -->
 
 <div>
 
 <table>
 	<tr>
 		<th>Lorem.</th>
 		<th>Aut.</th>
 		<th>In.</th>
 		<th>Ea.</th>
 		<th>Dolore.</th>
 		<th>Soluta.</th>
 		<th>Eligendi.</th>
 		<th>Nam.</th>
 		<th>Quasi.</th>
 		<th>Iusto!</th>
 	</tr>
 	<tr>
 		<td>Lorem.</td>
 		<td>At!</td>
 		<td>Provident?</td>
 		<td>Ducimus.</td>
 		<td>Ratione.</td>
 		<td>Placeat?</td>
 		<td>Amet.</td>
 		<td>Nihil!</td>
 		<td>Sunt!</td>
 		<td>Dolor.</td>
 	</tr>
 </table>
 
 </div>

display 속성

1. 레이아웃을 제어하는 가장 중요한 CSS 속성

2. 기본값 : inline / block

3. 요소가 표시되는지 여부를 지정하는 속성.

<!-- 블럭모드 : div, hn,  p, header, footer, section,등등-->
<!-- ul>li*3>a[href="#"]>lorem1 -->
<ul>
	<li><a href="#">Lorem.</a></li>
	<li><a href="#">Praesentium.</a></li>
	<li><a href="#">Temporibus.</a></li>
</ul>
<!-- 인라인모드 : a, span, img -->

<!-- span*3>lorem1 -->
<span>Lorem.</span>
<span>Error?</span>
<span>Commodi?</span>

ex)

display:none/block, visibility:hidden/visible 속성의 차이점

<style>
   .imgbox{
      width: 120px;
      border:1px solid gray;
      padding: 6px;
      text-align: center;
      
      float: left;      
   }
   
   .imgbox img, imgbox button{
     width: 100%;
   }
</style>
<style>
    #imgbox1{
        /* display: none;        영역차지 X */
        /* visibility: hidden;   영역차지 O( 유지 ) - 레이아웃 영향 끼친다.  */
    }
</style>

<div id="imgbox1" class="imgbox">
   Box1
   <img src="../images/img_5terre.jpg" alt="" />
   <button onclick="remove();">Remove</button>
</div>
<div id="imgbox2" class="imgbox">
   Box2
   <img src="../images/img_5terre.jpg" alt="" />
   <button onclick="hide('imgbox2');">Hide</button>
</div>
<div id="imgbox3" class="imgbox">
   Box3
   <img src="../images/img_5terre.jpg" alt="" />
   <button onclick="resetAll();">ResetAll</button>
</div>

<script>
   function remove() {
	   // 영역 유지 X -  숨김    display=none
	   // js   단위 생략(주의),  속성값은 문자열로 설정..(주의)
	   document.querySelector("#imgbox1").style.display = "none";
   }
   function hide(id) {
		// 영역 유지 O -  숨김   visibility=hidden
		document.getElementById(id).style.visibility = "hidden";
   }
   function resetAll() {
		// 숨김 - 보이도록...
	   document.querySelector("#imgbox1").style.display = "block";
	   document.getElementById("imgbox2").style.visibility = "visible";
   }
</script>

jquery

<script>
  $("#imgbox1 button").click(function (){
	  // alert("test")
	  // 영역 유지 X +  숨김
	  // display=none
	  
	  // $("#imgbox1").css("display","none");  // jquery css() 메서드 
	  $("#imgbox1").hide();  // jquery hide() 메서드
	  
  });
  $("#imgbox2 button").click(function (){
	  // alert("test")
	  $("#imgbox2").css("visibility", "hidden"); 
  });
  $("#imgbox3 button").click(function (){
	  // alert("test")
	  $("#imgbox1").show();
	  $("#imgbox2").css("visibility", "visible"); 
  });
</script>

ex2)

<style>
 #panel, .flip{
    font-size: 16px;
    padding: 10px;
    background-color: #4acf50;
    color:white;
    text-align: center;
    margin:auto;
    border:1px solid #a6d8a8;
 }
 
 #panel{
     display: none;
 }
 
 .flip:hover{
    cursor: pointer;
    color:red;
 }
</style>

<!-- p.flip>{Click to show panel}^#panel>p*3>lorem -->
<p class="flip">Click to show panel</p>
<div id="panel">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo sit repudiandae totam rem numquam velit architecto libero unde ratione dignissimos molestiae deserunt amet doloremque aliquid nostrum similique reprehenderit fugit culpa!</p>
	<p>Modi blanditiis nemo ducimus saepe ipsum dignissimos repudiandae eos atque. Nihil quisquam rerum vel voluptatem voluptas harum dicta laborum culpa asperiores dolore natus illum laudantium doloribus. Expedita delectus at sint!</p>
	<p>Beatae numquam totam accusantium placeat doloremque consectetur iusto dolores esse facere quo impedit facilis sunt delectus commodi ducimus iure vel sequi velit et eum! Accusantium pariatur tenetur soluta mollitia adipisci.</p>
</div>

<script>
    var sw = false;  // 스위치변수, 전역변수

    document.querySelector("p.flip").onclick = function (){
    	// alert("Test");
    	/*
    	if (  !sw  ) {
    		document.getElementById("panel").style.display = "block";
    		//sw = true;
		} else {
			document.getElementById("panel").style.display = "none";
			//sw = false;
		}
    	*/
    	
    	// js  -  if ~ else ,    삼항연산자 ? :
    	document.getElementById("panel").style.display =  sw ? "none" : "block";    		
    	sw = !sw;	
    }
</script>

jquery

<script>     
     // sw변수 선언. X
    $("p.flip").click( function (){
    	// alert("test")
    	// alert(  $("#panel").css("display") );  // "none"   속성의 값을 얻어왔다. 
    	/*
    	if( $("#panel").css("display") == "none"){
    		$("#panel").show();
    	}else{
    		$("#panel").hide();
    	}
    	*/
    	
    	// jquery method -  toggle() 토클 메서드
    	// $("#panel").toggle(); // hide-> show,   show -> hide
    	
    	// jquery method - slideToggle() 
    	$("#panel").slideToggle(5000);  // slow, fast  1000ms
    } );
</script>

width, max-width, min-width 속성

<style>
   div{
      border: 3px solid #73ad21;
   }
   
   .ex01{
      width: 500px;
   }
   .ex02{
     /* width:100%;  기본값 */
     max-width: 500px;
   }
</style>

<!-- .ex$$*2>lorem5 -->
<div class="ex01">Lorem ipsum dolor sit amet.</div>
<br>
<div class="ex02">Eaque sint consequatur sit tenetur.</div>

레이아웃 관련 위치 : position 속성 *****

[ position 속성 - 요소의 위치 지정 방법]

1. static ( 정적, 기본값 ) - top,bottom,left, right 속성 X

2. relative ( 상대좌표) - 기준

3. fixed ( 고정 )

4. absolute ( 절대 좌표 ) - 가장 가까운 부모(조상)요소를 기준으로 배치

5. sticky ( 사전적의미 : 끈적끈적한 ) - 사용자의 스크롤 위치에 따라 배치

- postion 속성을 먼저 설정하지 않으면 t/b/l/r 속성을 적용되지 않는다.

- top, bottom, left, right 속성을 사용해서 배치

ex1)

<style>
   .box{
     border:1px solid gray;
     width:100px;
     height:100px;
     text-align: center;
   }
</style>

<style>
  /* :nth-of-type(1) , :nth-child(1) */
  div:nth-of-type(1){
    position:static;
    background-color: red;
  }
  div:nth-of-type(2){
    position:relative;
    left:30px;
    top:30px;
    
    background-color: green;
  }
  div:nth-of-type(3){
    /* Box - 4 의 위치가  Box-3 위치*/
    position:fixed;
    right:10px;
    bottom:10px;
    
    background-color: blue;
  }
  
  div:last-of-type{
     background-color: yellow;
     
     position: absolute;  /* 절대좌표 */
     left:30px;
     top:30px;
     
     z-index: -1;
  }
</style>

<script>
   // js로 div 요소 5개를 동적 추가.
   for (var i = 1; i <=5 ; i++) {	   
	   var div =  document.createElement("div");
	   div.innerText = "Box - " + i;
	   
	   /*
	   div.style.border = "1px solid gray";
	   div.style.width = "100px";
	   div.style.height = "100px";
	   // div.style.text-align = "center";
	   div.style.textAlign = "center";
	   */
	   
	   /* <style>  .box 클래스명  </style>   -> js 클래스 속성 설정. */
	   // div.className = "box";
	   div.classList.add("box");  	   
	   
	   document.body.appendChild(div);	
   } // for
   
   // jquery로 p 요소 50개 동적 추가.
   for (var i = 1; i <=50 ; i++) {
	 $("body").append(  $("<p>.</p>") );
	 // $("body").append(  $("<p></p>").text(".") );
   } // for

</script>

postion:sticky;

- IE 지원하지 않는 속성.

- Safari : webkit- 접두사를 붙인다.

- left, right, bottom, top 적어도 하나는 지정해야 된다.

ex1)

<style>
   div.stick_test{
      border:2px solid #4caf50;
      background-color: #cae8ca;
      padding: 3px;
      text-align: center;
      
      /* 사용자의 스크롤 위치에 따라 배치 */
      position: sticky;
      position: -webkit-sticky;   /* Safari */   
      top:0;
   }
   
   div:last-of-type{
     /* 스크롤바를 길게 생기도록 하기 위해  */
      padding-bottom: 2000px;
      border:1px solid gray;
   }
</style>

<!-- p>lorem -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Magnam sit deleniti ducimus consequuntur fuga perferendis doloribus 
facere assumenda porro amet dicta eum sequi iusto rerum in eligendi 
quod consequatur impedit!
</p>

<!-- .stick_test -->
<div class="stick_test">hello world</div>

<!-- div>p*3>lorem -->
<div>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
	Cumque aspernatur enim odio voluptas quo non est eius officia 
	rerum minima molestiae suscipit ad omnis deleniti accusantium 
	repellat perferendis distinctio quos.
	</p>
	<p>
	Expedita dignissimos laborum odio ea quisquam tempore
	 alias vel iste odit. Aliquid dolore itaque modi fuga harum molestiae 
	 eaque libero architecto rem! Reiciendis harum dolore corporis 
	 earum culpa tempore dolores!
	 </p>
	<p>
	  Ex odio est cupiditate nemo quia vero quo? Fuga culpa ullam
	 officia dolores harum ab ducimus quidem nostrum deserunt sunt
	  accusamus consequuntur quisquam fugiat. Iusto reiciendis dolore
	   ipsa sunt laboriosam.
	  </p>
</div>

ex2)

<style>

body{
   margin: 0;
   padding: 0;
   font-size: 28px;
   font-family: Arial, sans-serif;
}

header{
   background-color: #f1f1f1;
   text-align: center;
   padding:30px;
}

</style>
<style>
 
#navbar{
   background-color: #333;
   overflow: auto; 
   
   position: sticky;
   position: -webkit-sticky;
   top:0; 
   /* 
   width: 50%;
   border:1px solid red;
    */
}
#navbar a{
   color:#f2f2f2;
   display: block;
   font-size: 17px;
   text-decoration: none;
   padding: 14px 16px;
   text-align: center;
   
   /*   */
   float:left;
}

/*
#navbar::after{   
}
*/

#navbar a:hover{
   color:black;
   background-color: #ddd;
}
#navbar a.active{
   color:white;
   background-color: #4caf50;
}
 
</style>

v<!-- (header>h3+p>lorem5)+(nav#navbar>a[href='#']*3)+(section.content>h3+p*15>lorem) -->
<header>
	<h3>TOP</h3>
	<p>Lorem ipsum dolor sit amet.</p>
</header>
<nav id="navbar">
	<a href="#" class="active">Home</a>
	<a href="#">News</a>
	<a href="#">Contact</a>
</nav>

<section class="content">
	<h3>Sticky Test</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ipsam ad dolore eius consectetur odit sunt odio omnis soluta ipsum sed beatae? Aliquid temporibus minima quam beatae asperiores aspernatur ad.</p>
	<p>Sequi cumque veniam maiores repellat incidunt sed assumenda iure nihil inventore tempora quia ipsam delectus quisquam voluptatum esse officiis sunt magni error corporis enim. Omnis veritatis exercitationem mollitia distinctio perferendis?</p>
	<p>Dolorem quis libero impedit numquam quibusdam delectus architecto minus consectetur deleniti tempora. Error consectetur ipsam aut debitis ducimus reprehenderit quasi soluta explicabo. Adipisci et esse aliquam voluptatibus sint quaerat doloribus.</p>
	<p>Veniam libero deserunt dignissimos sunt porro maiores eligendi aperiam sint nihil magnam id ut incidunt. Quaerat ab temporibus corrupti perferendis quam sit. Maxime placeat excepturi odit illum atque dignissimos sapiente.</p>
	<p>Laudantium cupiditate provident quas error quis eos repellat ducimus quia accusamus tenetur quaerat nesciunt voluptas eaque enim aliquid quisquam ipsum. Dolorem vitae ab ipsam hic nisi animi ut ullam voluptas.</p>
	<p>Quam cupiditate perspiciatis incidunt voluptates placeat at deleniti est debitis necessitatibus molestias consectetur sed rerum distinctio quos commodi ratione aut atque qui eos animi corrupti maiores mollitia fugiat voluptatum minima?</p>
	<p>Odio ea provident quia amet sunt iste tempore dignissimos quidem exercitationem debitis magnam soluta ex ab assumenda iusto maxime beatae possimus iure natus a nemo voluptatibus illo eveniet pariatur enim.</p>
	<p>Quia ipsam ea iste rem commodi perspiciatis culpa velit adipisci deserunt placeat vitae suscipit modi obcaecati doloremque iusto accusantium animi? Sit blanditiis minus porro fugit cumque laboriosam error numquam et!</p>
	<p>Dignissimos modi veritatis aliquam molestiae est sint provident placeat ab fugiat animi ullam ut dicta dolor aperiam reiciendis reprehenderit impedit quasi tempore in eos vitae unde libero amet esse saepe.</p>
	<p>Voluptatum perferendis molestias sapiente dolorum assumenda. Nam ut totam eos doloribus rerum fuga voluptatem eligendi incidunt enim excepturi officiis sed exercitationem voluptas porro veritatis asperiores tempora officia! Earum ea tempora.</p>
	<p>Vitae cum culpa ea officiis dignissimos animi totam reprehenderit ipsum nemo. Distinctio exercitationem at nisi sapiente neque quae culpa porro voluptatibus mollitia quod nostrum quasi fugiat velit! Nemo laudantium praesentium!</p>
	<p>Alias in amet sapiente soluta iste dolorem omnis cum commodi veritatis error ratione ullam. Commodi quos eos nostrum consequatur laboriosam accusantium enim tempora velit fugiat nemo praesentium atque possimus doloribus.</p>
	<p>Dignissimos sint unde fuga porro ab cumque molestiae quasi maxime explicabo adipisci perspiciatis quae consequatur itaque harum dolore quibusdam deleniti atque hic neque nesciunt id ut assumenda illo consequuntur optio.</p>
	<p>Dolorem rem blanditiis ad voluptates nam rerum fuga deleniti modi impedit quaerat eius eaque hic repellendus saepe harum voluptas unde soluta ratione dolor totam consequuntur eveniet obcaecati explicabo error minima.</p>
	<p>Quam natus quo impedit voluptas necessitatibus vero distinctio consequuntur voluptates earum culpa quis tempora repellendus harum veritatis optio aliquid tempore nostrum iure tenetur deserunt magni quod animi minima et dolorem!</p>
</section>

position:absolute 설명 (중요)

<style>
   .out{
      width: 400px;
      height: 200px;
      border:3px solid #73ad21; 
      
      /* ***** */
      position: relative;
   }
   
   .in{
      width: 200px;
      height: 100px;
      border:3px solid #73ad21; 
      
      /* 가장 가까운 부모요소 :  .out,  body  */
      /* div.out  position:static X  */
      position: absolute;
      right: 50px;
      bottom: 30px;
   }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Placeat possimus quos qui tempora modi explicabo perspiciatis 
excepturi sit perferendis repellat tempore inventore. Consequatur
 sapiente qui consequuntur voluptatem ipsa atque nisi!</p>
 
 <!-- .out>lorem7+.in>{in} -->
 <div class="out">
    Lorem ipsum dolor sit amet, consectetur adipisicing.
 	<div class="in">in</div>
 </div>

- 가장 가까운 부모

- 부모의 position이 static은 부모가 될 수 없음

<style>
div{
  width: 80%;
  height:100px;
  border:1px solid gray;
  text-align: center;
  margin: 0 auto;
}
</style>
<style>
   .prev, .next{
      width:50px;
      height:50px;
      
      border: 1px solid red;
      border-radius: 25px;
      
      position: absolute;
   }
   
   .prev{
     left: -25px;
     top:25px;
   }
   .next{
     right:-25px;
     top:25px;
   } 
</style>

<div></div>
<div></div>
<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>
<div></div>
<div></div>
<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>
<hr>
<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>

<style>

div{
  width: 80%;
  height:100px;
  border:1px solid gray;
  text-align: center;
  margin: 0 auto;
}

</style>
<style>
 
   .prev, .next{
      width:50px;
      height:50px;
      
      border: 1px solid red;
      border-radius: 25px;
      
      position: absolute;
   }
   
   .prev{
     left: -25px;
     top:25px;
   }
   .next{
     right:-25px;
     top:25px;
   }
 
</style>

<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>
<div></div>
<div></div>
<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>
<hr>
<div style="position: relative;">
   <div class="prev">&lt;</div>
   <div class="next">&gt;</div>
</div>

z-index 속성

<style>
  .container{
     position: relative;
     border:1px solid black;
  }
  .red-box{
     background-color: red;
     height: 100px;
     margin: 30px;
     
     position: relative;
     
     z-index: 100;
  }
  .green-box{
      background-color: green;
      width: 70%;
      height:60px;
      
      position: absolute;
      left:50px;
      top:50px;
      
      z-index: 10;
      
  }
  .blue-box{
     background-color: blue;
     width:35%;
     height: 100px;
     
     position: absolute;
     left:270px;
     top:-15px;
     
     z-index: -1;
  }
</style>

<div class="container">
	<div class="red-box">red-box</div>
	<div class="green-box">green-box</div>
	<div class="blue-box">blue-box</div>
</div>

<style>

#mySidenav a{
    background-color: #111;
    color:white;
    padding: 13px;
    text-decoration: none;
    font-size: 20px;
    border-radius: 0 5px 5px 0; 
    
    position: absolute;   /*  부모요소 body */
    width:100px;
    left:-84px;
    text-align: center;
    
    /* 전환 : 다른 상태,조건으로 변경(이행)*/
    /* left값이 -84 -> 0 전환 */
    transition:0.5s ease;
}
#mySidenav a:hover{
   left:0;
}
#home{  top:20px; }
#services{ top:80px; }
#clients{ top:140px;}
#contact{ top:200px;}

#content{
  margin-left:120px;
}
</style>

<div id="mySidenav" class="sidenav">  
  <a href="#" id="home">Home <i class="fa fa-fw fa-home"></i></a>
  <a href="#" id="services">Service<i class="fa fa-fw fa-wrench"></i></a>
  <a href="#" id="clients">Clients<i class="fa fa-fw fa-user"></i></a>
  <a href="#" id="contact">Contact<i class="fa fa-fw fa-envelope"></i></a>
</div>
<div id="content">
   <h2>Lorem ipsum dolor sit amet.</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam beatae!</p>
</div>

저작자표시

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

[Day5] CSS 5 - 롤오버, 메뉴바, 타임라인, 이미지 갤러리, 이미지 스프라이트, 선택자, 검색스타일, 평점, 특이성(점수), 막대그래프, 프로필, 둥근모서리, 다중배경이미지, background image, paral.. (0)	2022.11.17
[Day4] CSS 4 - overflow, 팝업폼, display, prev\|next, 레이아웃배치(수직수평), css결합자, 의사클래스, 의사요소, 불투명, 탐색모듬, 드롭다운 (0)	2022.11.16
[Day2] CSS 2 - selector, 색상, 테두리, margin, padding(border-box), width/height, box model, 링크, 텍스트, 아이콘, 글꼴, active처리 (0)	2022.11.10
[Day1] CSS 1 - 개요, 스타일 적용 방법 (0)	2022.11.10
[Day6] HTML 6 - div 페이지, 반응형웹, form, canvas,svg, 멀티미디어, youtube (0)	2022.11.10

[Day3] CSS 3 - 속성값 설정, button, paging처리, display, 목록,테이블, position, z-index

[Day3] CSS 3 [11/14]

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

전체 카테고리

블로그 인기글

티스토리툴바

[Day3] CSS 3 [11/14]

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

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바