Today I Learned
- Git, 소스트리
- 미니프로젝트 메인 화면 구현
- 내 페이지 수정
Git 강의 정리
미니프로젝트
1. 웹페이지 음악 넣기
<body>
<aside id=”aside”>
<a href="#" class="play"> </a>
</aside>
</body><style>
.play {
width: 30px;
height: 30px;
background-image: url("img url");
background-position: center;
background-size: cover;
border-radius: 3px;
}
</style><script>
$(function () {
var audio_source = new Audio('url');
var audio_state = 0;
$('#aside .play').click(function (e) {
e.preventDefault();
if (audio_state == 0) {
audio_source.volume = 0.7;
audio_source.play();
audio_state = 1;
} else if (audio_state == 1) {
audio_source.pause();
audio_state = 0;
}
})
})
</script>2. 이미지 복사 & 우클릭 안되게 하는 법
-
CSS
<style> . class { pointer-events: none; } </style> -
HTML
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false"> </body>
3. 페이지 템플릿 렌더링 기능 (서버)
재원님이 한건데 계속 보면서 익히려고 쓴 것
@app.route('/')
def home():
return render_template('index.html')
@app.route("/members", methods=["GET"])
def members():
parameter_dict = request.args.to_dict()
name = parameter_dict['name']
return render_template(f'members/{name}.html')4. image 크기 줄어들어도 변동 없게 하는 것
태훈님이 알려주신 방버
<style>
. class {
background-size: contain;
background-repeat: no-repeat;
}
</style>이것 외에도 한번씩 찾아만 본 vw, em, position: absolution; 등 시간이 날 때 혹은 주말 복습할 때 조금 더 자세히 찾아보기
오늘은 진짜 git이 너무 힘들었다.
자꾸 자꾸 하라는데로 해도 에러가 떴는데 다행히 태훈님이 도와주셔서 잘 마무리가 됐다.
내가 찾아보고 마무리하고 해야 하는데 아직은 극초반이니 이렇게 하면서 구글링 하는 요령 배운다 생각하면서 마무리 해야지..
또 Index.html 파일은 틀을 내가 잡았는데 뭔 이미지에 맞게 글씨도 줄이려고 계속 찾아보다가
어차피 그냥 GIF 파일 만들어서 적용했다.
그렇게 파일 만들어서 할거였으면 시간 낭비하지 말걸 싶지만 이것도 구글링 요령 배운다 생각해야겠다.
끝!Tomorrow
- 팀원들 메인 페이지에 적용할 블로그, 깃허브 링크 받아 적용
- 다시 한번 더 메인 및 개인페이지 수정할 부분 찾아보고 수정하기
- Git 강의(시간이 된다면)
