Self Study/응용3

• 

  [마우스 hover 이용한 효과 #2. 스타일시트 작성] - 스타일 시트 작성 - .box{ max-width: 2000px; // 전체적인 큰틀 의 이름 . width:100%; margin:0 auto; } ul{font-size: 0;}// ul 안의 비어있는 간격을 없앰 ul>li{ display: inline-block;// vertical-align: top;//인라인 블럭의 요소를 세로정렬 width:33%;// 사진의 느낌을 주기 위해 33.3% } ul>li>a { display: block; width: auto;// 사이즈가 유동적으로 변하게 text-decoration: none;// 링크 형태의 텍스트에 밑줄값을 없애줌 margin: 10px ; /* 사진 사이의 띄어놓는 값들 */ } ul>li> a .screen { position:.. Self Study/응용 2022. 5. 1.

• 

  [마우스 hover 을 이용한 효과 #1. html 뼈대 만들기] 목표 1. 세개의 다른 이미지 2. 사진 갤러리 처럼 옆으로 나란히 보여지게 3. 한개의 사진에 마우스를 올리면 텍스트가 나타나는 방식으로 4. 위 -> 아래로 내려오는 텍스트 1개 5. 아래 -> 위 올라오는 텍스트 1개 그렇게 해서 1개의 div 값에 총 2개의 class 가 넣어져 있어야 함 구역 나누기 1. 전체를 하나의 div 의 값으로 지정을 해준다 . 로 지정해 주었다. 2 . class box 안에 순서를 나타내는 의 값 그 안에 값을 넣어 주었다. 3. 태그 안에 를 넣어주고 한개의 이미지 안에 들어갈 텍스트를 전체로 생각하고 그 전체를 구역이라 생각한다. 그러면 1개의 사진에 나오는 전체 텍스트 div 값의 이름을 이라고 지정 4. 이제 이 screen 의 클래스 안에 상세 텍스트의 구.. Self Study/응용 2022. 4. 26.

• [ CSS애니메이션 / Animation1-1 응용 ] 1. keyfram 값에 각각의 transform 을 넣어 이곳 저곳 움직이는 공을 만들어보자 2. 움직이면서 색이 변하는 공을 만들어 보자. HTML 삽입 미리보기할 수 없는 소스 - % 마다 transform 의 값이랑 background 의 색을 다르게 하였다. - border-radius을 통해 원형의 값을 만들어 주고 크기를 퍼센트로 정하였다. - 안에 들어갈 텍스트 값은 .box 가 아닌 .circle 로 바꿔 넣었다. = 부족한점 = 최대한 배운것 안에서 원형을 만들어야 해서 매끄럽지 않다 . 원형이 튕기는듯 하다가 마지막 애니메이션에 느리게 원래 자리로 돌아간다. Self Study/응용 2022. 4. 5.