HTML/Term Project 3

[HTML] 자바스크립트로 동적 요소 추가하기

주제: 자바스크립트 활용 결과물 1. Right.js var image=['Dockericon.jpg', 'CSSicon.jpg', 'html5icon.jpg']; function imgchange(){ var img = image[Math.floor(Math.random() * 3)]; document.getElementById("img").src = img; } - css 당시에는 본문창에 있는 3개의 사진이 있었지만 그 이미지 들을 하나로 모았고 “이미지 변경”버튼을 누르면 imgchange()함수에서 random변수를 통해 해당 이미지들을 무작위로 돌려줍니다. - 이미지를 한쪽으로 몰아서 오른쪽 공간이 비어서 바로가기 메뉴 창을 만들었습니다. 2. clock.js const clock = docu..

HTML/Term Project 2022.07.06

[HTML] CSS로 디자인 변경하기

1. HTML기능의 적용목록 1) index.html - top.html, Menu.html, Right.html, bottom.html, Site.html을 모아놓은 html이다. - 이전에는 main.html이었지만 리눅스에 올릴 것을 고려해 index.html으로 바꾸어 주었다. - top.html, menu-Right-Site.html, bottom.html을 row를 써서 10%, 85%, 5%로 정렬하였다. - Menu.html, Right.html, Site.html은 cols를 이용해 10%, 75%, 15%로 정렬하였다. 2) top.html 코딩 초보의 웹사이트 1. body - css를 이용해서 body에 배경색은 #BBDEFB 설정했다. 2. h2 - 글자들을 중간정렬하고 itali..

HTML/Term Project 2022.07.06

[HTML] html을 이용한 도커 설명 홈페이지 만들기

1) Main.html - top.html, Menu.html, Right.html을 모아놓은 html이다. - 을 써서 top은 화면의 위쪽에 위치했다. - frameset을 이용하고 frameset의 열을 20%, 80%로 설정해서 왼쪽은 메뉴창은 Menu.html 본문창은 Right.html 설정했다. 2) Menu.html - body에 배경색을 설정해 #9de7d7로 했다. - font size=“4”로 글씨체는 4로 하였다. - 자기소개, 도커설명, 도커용어, 도커의 장점, 도커의 활용, 도커 설치하기 메뉴 6개를 만들고 a href를 이용해 하이퍼링크를 걸었다. 자기 소개 도커 설명 도커 용어 도커의 장점 도커의 활용 도커 설치하기 3) Right.html - body에 배경색은 “#74d1..

HTML/Term Project 2022.07.06