개발/HTML&JS20 html 회전 작업 결과물1 body, CSS 작업 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Document #ball{ position: absolute;/*부모 태그를 기준으로 한 위치, 현재 부모는 body*/ left: 200px; top: 150; /* 사용할 애니메이션에 대한 호출 */ animation-name: ball-rotate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; } /* 애니메이션 정의하기 */ @keyframes ball-rotate{ f.. 2021. 3. 10. html Layout과 position 작업 결과물1 body작업 우선 라는 class가 wrapper인 큰 사각형 틀 안에 총 4가지 div가 들어가있고 top-div라는 id를 가진 div안에 cs라는 div가 들어가있다. 대략 그림으로 표현해보자면 아래와 같다. (이제 하단에서 CSS로 사이즈를 구현해보자) 추가로 태그를 이용하여 hypereference 즉 href를 추가하여 링크가 가능하게 구현하였다 ("#"대신 웹 주소를 넣게되면 클릭시 그 주소로 이동가능) CSS작업 * 우선 각 div별로 크기를 지정한 뒤 색상을 넣어준다. 태그 특성상 div가 있는 전체공간은 하나의 div가 차지하기 때문에 아무런 속성없이는 공존할 수가 없다. * 이때 float이라는 요소를 추가하여 서로 좌우로 공존이 가능하게된다. footer-div의 cl.. 2021. 3. 8. html frame 작업 결과물1 frameset/frame * : 프레임크기를 cols와 rows를 이용하여 지정함 * : 프레임 을 생성 src : 해당프레임에서 보여줄 문서의 경로와 파일이름 지정 name : 해당프레임의 이름을 지정, 주로 링크시킬때 target 대상으로 사용 scrolling : 프레임에 스크롤바가 나타나게 할것인지 지정 (yes/no) noresize : 프레임의 경계선의 크기를 마우스로 조절하는 것을 방지 작업 결과물2 iframe iframe은 웹문서를 특정위치에 또는 다른 웹문서를 불러올수 있는 기능 작업 결과물3 날짜별로 배운 결과물들을 하나의 창에서 확인할수 있게 되었다 iframe name~target 활용 main 창에 frame의 이름을 rightFrame 으로 지정한다 * main.. 2021. 3. 8. html 회원가입 창 만들기 작업 결과물 두둥.....(탁)! body 작업 : 행을 구성 : 열을 구성 즉 tr안에 td를 구성함으로서 한줄에 여러가지 요소를 넣을 수 있게된다. colspan="2" : 열2개를 합친다 : text 형식의 입력란을 만들고 아이디를 입력하라는 도움글자 (placeholder)를 생성한다. : password 형식의 입력란을 생성하면 비밀번호 입력시 숨김 처리되면서 입력된다. : 선택란을 생성 gmail.com : 선택할수 있는 옵션생성 node.js : 체크박스형태의 입력란 생성 Yes : o, x 처럼 한가지만 선택할 수 있는 형태의 입력란 생성 name 으로 하나의 그룹으로 묶어줘야함 CSS 작업 .title_style{ text-align: center; -> class 로 지정해준 부분에 대.. 2021. 3. 7. html 기본태그 html, head, title, meta, body 새로운 html 파일을 생성하고 html 태그를 입력하면 //문서의 버전에 관한 정보를 나타낸다. 본 문서가 HTML5 라는 것을 명시함. //html 파일임을 정의. html 태그는 head 태그와 body 태 그로 이루어짐. //본문의 내용을 담는 공간이다. 이러한 기본 형식의 태그가 생성된다. div html 문서에서 부분 또는 섹션을 정의한다. div 요소는 css로 스타일을 지정하거나 JavaScript로 특정 작업을 수행하기 위해 다른 html 요소의 컨테이너로 자주 사용 된다. This is a heading This is a paragraph. a a 태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼 링크를 정의힌다. a .. 2021. 3. 7. 이전 1 2 3 4 다음 반응형
