-
[명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 연습문제 01 - 실습문제💻 Computer Science/WEB 2021. 3. 4. 20:22
1. 다음 HTML5 페이지는 간단한 오류를 포함하고 있다. https://html5.validator.nu/ 와 http://www.css-validator.org/validator.html.ko 사이트를 활용하여 오류를 수정하라.
2번 실습 문제도 동일하다.
3. 본문에 있는 그림 1-13의 test2.html을 수정하여 다음과 같이 <span> 태그에 둘러싸인 글자색을 violet으로 수정하고 <hr>태그에 의해 출력되는 수평선의 두께를 10px로 변경하라.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>웹 페이지의 구성 요소</title> <style> body { background-color : linen; color : green; margin-left : 40px; margin-right : 40px;} h3 {text-align : center; color : darkred;} hr {height : 10px; border:solid grey; // hr 태그에 의해 출력되는 수평선 두께 10px 변경 background-color : grey; } span {color : violet; font-size : 20px; } // span 태그 violet 수정 </style> </head> <body> <h3>Elvis Presley</h3> <hr> He was an American singer and actor. In November 1956, he made his film debut in <span>Love Me Tender</span>. He is often referred to as "<span>the King of Rock and Roll</span>". </body> </html>
4. 본문에 있는 그림 1-14의 test3.html을 자세히 들여다보고 <span>Love Me Tender</span>에 의해 출력된 텍스트 위에 마우스를 올리면 엘비스 프레슬리의 사진 대신 자신의 사진이 출력되도록 수정하라. 사진 이미지는 test3.html 파일이 있는 폴더에 두면 된다.
ooiillppaaiinntt.tistory.com/49?category=967145
블로그 코드를 참고하면 된다.
document.getElementById("fig").src="me.jpg";
src = "해당 사진"을 넣으면 끝!
'💻 Computer Science > WEB' 카테고리의 다른 글
[명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 연습문제 01 - 이론문제 (0) 2021.03.04 [명품 HTML5 + CSS3 + Javascript 웹 프로그래밍] 오픈챌린지 01 - 자기 소개 HTML 페이지 만들기 (0) 2021.03.04