728x90
1. 공부시간 - 11:10 ~ 20:10 (9시간)
2. 공부내용
- 코드잇 데이터사이언스 소단원 2챕터
- 코드잇 JavaScript 기존에 나갔던 부분 진도 다끝내고 소단원 2챕터
- 위키독스 파이썬300제 151~300번 다풀기
- Django 복습하기
<!DOCTYPE html>
<html>
<head>
<title>Travel Website</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<img id="logo" src="images/logo.png" width="165" height="58">
<div id="menu">
<a id='home' onclick="clickHome();">Home</a>
<a id='seoul' onclick="clickSeoul();">Seoul</a>
<a id='tokyo' onclick="clickTokyo();">Tokyo</a>
<a id='paris' onclick="clickParis();">Paris</a>
</div>
<img id="photo" src="images/home.png" width="90%">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script>
// 사진을 바꿔주는 함수 (jQuery 이용)
function clickHome() {
$('#photo').attr('src', 'images/home.png');
$('#home').css('font-weight', 'bold');
$('#seoul').css('font-weight', 'normal');
$('#tokyo').css('font-weight', 'normal');
$('#paris').css('font-weight', 'normal');
}
function clickSeoul() {
$('#photo').attr('src', 'images/seoul.png');
$('#home').css('font-weight', 'normal');
$('#seoul').css('font-weight', 'bold');
$('#tokyo').css('font-weight', 'normal');
$('#paris').css('font-weight', 'normal');
}
function clickTokyo() {
$('#photo').attr('src', 'images/tokyo.png');
$('#home').css('font-weight', 'normal');
$('#seoul').css('font-weight', 'normal');
$('#tokyo').css('font-weight', 'bold');
$('#paris').css('font-weight', 'normal');
}
function clickParis() {
$('#photo').attr('src', 'images/paris.png')
$('#home').css('font-weight', 'normal');
$('#seoul').css('font-weight', 'normal');
$('#tokyo').css('font-weight', 'normal');
$('#paris').css('font-weight', 'bold');
}
// 사진을 바꿔주는 함수 (함수 그대로 사용. jQuery 사용하기 이전에 썼던 코드들이므로 주석처리)
// function clickHome() {
// document.getElementById('photo').src = 'images/home.png';
// document.getElementById('home').style.fontWeight = 'bold';
// document.getElementById('seoul').style.fontWeight = 'normal';
// document.getElementById('tokyo').style.fontWeight = 'normal';
// document.getElementById('paris').style.fontWeight = 'normal';
// }
// function clickSeoul() {
// document.getElementById('photo').src = 'images/seoul.png';
// document.getElementById('home').style.fontWeight = 'normal';
// document.getElementById('seoul').style.fontWeight = 'bold';
// document.getElementById('tokyo').style.fontWeight = 'normal';
// document.getElementById('paris').style.fontWeight = 'normal';
// }
// function clickTokyo() {
// document.getElementById('photo').src = 'images/tokyo.png';
// document.getElementById('home').style.fontWeight = 'normal';
// document.getElementById('seoul').style.fontWeight = 'normal';
// document.getElementById('tokyo').style.fontWeight = 'bold';
// document.getElementById('paris').style.fontWeight = 'normal';
// }
// function clickParis() {
// document.getElementById('photo').src = 'images/paris.png';
// document.getElementById('home').style.fontWeight = 'normal';
// document.getElementById('seoul').style.fontWeight = 'normal';
// document.getElementById('tokyo').style.fontWeight = 'normal';
// document.getElementById('paris').style.fontWeight = 'bold';
// }
</script>
</body>
</html>
<!--
1. 기존에 누를 때마다 다른 웹페이지로 이동되도록 하여 4개의 html 파일을 만들었던 것을 간소화
2. 누르면 '해당 글씨 볼드체 + 이미지 변화'를 css를 이용하지 않고 JS만으로 html파일 내에서 전부 해결
3. jQuery를 사용하여 '누르면 해당 글씨 볼드체 + 이미지 변화'를 이끌어 내는 과정 (이 과정에서 function click~를 전부 주석처리 하게 되었음)
-->기존에 CSS를 공부할 때 만들었던 여행 페이지를 JavaScript화 하는 과정을 공부했는데, 재밌다. 지독하게 하기싫었던 전공공부를 하다가 코딩공부를 하게되니 이렇게 재밌을수가 없는 것 같다.
https://github.com/steadily-worked에 해당 페이지의 이미지, css파일까지 올려두려고 한다.
'today i learned' 카테고리의 다른 글
| today i learn 7/10 (0) | 2020.07.10 |
|---|---|
| today i learn 7/9 (0) | 2020.07.09 |
| today i learn 7/7 (0) | 2020.07.07 |
| today i learned 7/6 (0) | 2020.07.06 |
| today i learned 7/5 (0) | 2020.07.05 |
