Yeonee's Story

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 애니메이션 관련 스타일 .anitest1:checked+div{ width:200px; animation-name:ani; animation-duration:2s; animation-direction:alternate; animation-iteration-count: infinite; } .check-anitest2:checked+div{ animation : ani2 5s infinite alternate; } @keyframes ani{ from{ background-color: green; border: 1px solid black; } to{ background-color: yellow; border-radius: 50%;..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 트랜지션 관련 스타일 img{ margin-left:200px; width: 200px; height: 200px; } .translate:hover{ transform:translate(200px, 200px); } .transx:active{ transform:translateX(500px); } .transy:active{ transform: translateY(500px); } .transz:active{ transform: perspective(300px) translateZ(100px); } .scale:hover{ transform:scale(1.5); } .scalex:hover{ transform: scaleX(1..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 레이아웃관련스타일2 .positioning{ border: 1px solid black; } .outer{ border : 1px solid blue; position : relative; /* 기준이 되는 요소에 position:relative로 기준점을 줘서 절대적인 배치가 가능하게 함 만약 기준점을 바로 위의 부모요소에 지정하지 않는다면 기준점이 body로 잡힘 지정된 요소 내부에 다른요소가 상대적인 위치를 지정할 수 있도록 기준이 되어줌. 내부에 작성되는 후손요소에 top, bottom, left, right속성을 쓸수가 잇음 */ } #first{ width: 300px; height: 300px; background-c..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 레이아웃관련스타일 body{ margin:0; } .size-test{ border : 10px solid red; } #test1{ width: 400px; height: 200px; } #test2{ width:50%; height: 150px; } .display-test{ border: 1px solid black; width: 150px; height: 150px; } .red{ background-color: red; } .yellow{ background-color: yellow; } .pink{ background-color: pink; } .green{ background-color: green; } .purple..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> 배경관련스타일 body{ background-color:skyblue; } #div-bg{ background-color: white; border: 30px solid blue; padding : 20px; width:50%; /* div의 content의 가로길이는 부모요소의 50%만큼 지정하겠다 라는 뜻. */ box-sizing: border-box; /* 가로길이를 border까지 포함해서 지정*/ } .div-test{ margin:30px; border:10px dashed; padding:20px; background-color: yellow; /* 배경색이 border까지 확장되어있음을 확인 */ } #div1{ ..