본문 바로가기

전체 글234

(28)명품 웹프로그래밍_5장_실전문제 [문제1] :(1)번문제# 알아야 할 개념 : X # 코드 :12345678910111213141516171819202122232425262728293031323334!DOCTYPE html>html lang="en"> head>  meta charset="UTF-8">  title>div/title>  style>    div {      display: inline-block;      width: 200px;      border: 1px solid greenyellow;    }  /style>/head> body>  h3>3 개의 div 활용/h3>  hr>   div>    캔퍼스에 이미지를 그리기 위해서는    이미지를 담을 객체가 먼저 필요하다.  /div>  div>    Image 객체.. 2024. 10. 12.
(27)명품 웹프로그래밍_5장_CSS3고급활용_3(출력장면은 없음 직접 코드 넣어서 해봐야 됨) # 범위 CSS만으로만 무한 반복 애니메이션 동작 구현 => @keyframe 동작이름 + animation - name / duration / iteration - countCSS만으로만 행위할 때만 작동하는 애니메이션 동작 구현 => transition : 변화할 속성명 동작 시간 + hoverCSS만으로만 회전,이동,크기 변화, 기울기회전 애니메이션 동작 구현 => transform : rotate() , translate() , scale() , skew()# 노트 , 코드 , 출력장면 :● 무한 반복 애니메이션 구현노트 :코드 :123456789101112131415161718192021222324252627282930!DOCTYPE html>html lang="en"> head>  meta c.. 2024. 10. 8.
(26)명품 웹프로그래밍_5장_CSS3고급활용_2(작성중) # 범위 메인 홈페이지 상단 메뉴바 만들기표 꾸미기입력 폼 꾸미기# 노트 , 코드 , 출력장면 :● 메인 홈페이지 상단 메뉴바 만들기 :노트 : 코드 :1234567891011121314151617181920212223242526272829303132333435363738394041424344454647!DOCTYPE html>html lang="en"> head>  meta charset="UTF-8">  title>메인 사이트 상단 메뉴바 만들기/title>  style>    #menubar{      background-color: gray;    }    #menubar ul{      margin : 0px;      padding : 0px;      width : 700px;    }   .. 2024. 10. 7.
(25)명품 웹프로그래밍_5장_CSS3고급활용_1(작성중) #복습하기 매우 좋은 코드 :[상황1_ 감싸진 블록 없이 등장인물 배치 상황] :● 코드 :1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283!DOCTYPE html>html lang="en"> head>  meta charset="UTF-8">  title>블록태그와 인라인태그 출력 차이/title>  style>    div{      background-color: yellow;      margin-bottom: 10px;      width: 700px;      he.. 2024. 10. 5.