4/30 HTML 수업 정리

• position : 위치 지정 스타일
• top, left, 
• z-index
• absolute  // 부모 기준
• relative// 상대적 위치 (원래위치기준) % 안됨
• fixed //화면 자체 (화면 기본값 기준)

.box{
   position: absolute;
}

<div class="red   box"> 1 </div>
<div class="green box"> 2 </div>
<div class="blue  box"> 3 </div>

• ctrl + /    //주석 처리
• * {} // 모든 태그

*{
   list-style: none;
   padding : 0;
   margin : 0;
}

 

• 선택자 
• transform: scale(1.2) // 
• transition: 0.5s; // img 에 넣
• overflow : hidden; // 넘치면 숨기

 

• display : flex  // 옆으로 배치
• justify-content: space-between;
• &nbsp 

 
 

•  onclick  // img 변경

 <div class="wrap">
      <ul  class="main2_menuBox">
         <li onclick="pic1.src='img/hamburger3.jpg'"> 경력 1</li>
         <li onclick="pic1.src='img/cat1.jpg'" > 경력 2</li>
         <li onclick="pic1.src='img/cat3.jpg'" > 경력 3</li>
         <li onclick="pic1.src='img/hamburger2.jpg'" > 경력 4</li>
      </ul>
      <div class="picture2">
         <img src="img/cat2.jpg" id="pic1"> 
      </div>
   </div>

• <script src="js/script.js"></script>    자바스크립트 연결
• document.getElementById("myBtn").onclick = displayDate;
• document.getElementById("myBtn").addEventListener("click", displayDate);