1) 학습한 내용
오전 회의(10시 30분)
클론 홈페이지 점검이 있었다. 클론 홈페이지는 원본 홈페이지와 비슷하게 나올 거라는 생각과는 다르게 좋게 말해서 어레인지 되어서 홈페이지가 만들어 졌었다. 그러나, 회의 결과 원본과 똑같이 하는 것이 맞다는 결론을 내렸고 이후, 각자가 맡은 파트를 토대로 소스 코드 점검이 이뤄졌었다. 이후, 미디어 쿼리에 관한 점검이 이뤄졌었고 다음 주에 있을 다음 홈페이지 제작에 관한 대화가 있었다.
월요일 발표(예정)
월요일에는 각자가 맡은 부분들을 중점적으로 프레젠테이션이 있을 것이라고 했었다. 나는 카카오 지도 API와 지도 옆에 나타나는 글자들이 서서히 나타나는 애니메이션과 미디어 쿼리를 맡기로 했었다.
내가 맡은 카카오 API에서 설명해야 할 부분으로는
- 지도 api와 옆에 있는 글이 서서히 나타나는 효과
- 카카오 지도 api 소스코드 및 파일, 적용방법
- 미디어 쿼리 적용법
으로 정했다. 그리고, 다음 주 월요일에 있을 클론 코딩 미팅 시간은 오전 10에서 오후 12시까지로 변경되었다.
그외 것 들
- wow.min.js : 자바스크립트 라이브러리 중의 하나로 영국의 matthieua라는 유저가 만들었다.
사용법은 html 파일로 가서 head 태그 안에서 다음과 같이 작성하면 된다.
<script src="./js/wow.min.js"></script>
<script>
new WOW().init();
</script>그리고, 아래는 wow.min.js를 적용시키는 예이다.
<img src="./img/메인뇌.png" alt class="wow fadeInRight" data-wow-delay="0.5s"
style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInRight;">직접 html 문서의 태그 안에 작성해서 애니메이션 효과를 적용시키는 것이다.
- javascript:void(0)
javascript:void(0)은 void(0)를 사용할 경우에는 스크립트의 평가 결과로 undefined가 반환되어 무시되므로 현재 페이지가 유지된다. 만약에 javascript가 지원되지 않거나 무효화 되어있는 브라우저의 경우에는 마찬가지로 현재 페이지가 유지된다.
<a href="javascript:void(0):">- keyframe(키프레임)
키프레임에 관한 설명을 하자면, 애니메이션의 중간상태를 말한다. 말하자면, 애니메이션의 진행 상태를 정의하는 것이 키프레임이다.
예시
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 2s infinite;
}
@keyframes mymove {
0% {
top:0px;
}
50%{
top:100px;
}
100
top:0px;
}
}
</style>
</head>
<body>
<h1>The @keyframes Rule</h1>
<div></div>
</body>
- 미디어 쿼리
미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.
CSS 코드 내부에서 분기하는 방법
CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.
@media only all and (조건문) {실행문}@media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 , 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다.
(조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 and 키워드 또는 콤마 , 기호로 연결해야 한다.
{실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}2) 학습내용 중 어려웠던 점
이번에는 개발에 있어서 테스트가 있었고 점검을 거쳤다. 비디오 게임으로 치면 제품을 다 만든 다음에 버그 혹은 구현이 안되는 것, 오류가 무엇인지 검사를 하는 과정으로 보면 된다. 이전에 들었던 개발 지옥이라는 말이 있는데 개발 지옥은 보통 제대로 된 로드맵 없이 개발을 함으로써 혹은 개발자의 개발 실력의 부족으로 인해 벌어지는 것을 말한다.
3) 해결방법
완성되었다 하더라도 계쏙해서 테스트를 거쳐가면서 다듬어야 하는 것이라 시간은 좀 걸릴 것이라 극정적으로 보면 내일이면 완성될 것으로 보인다.
4) 학습소감
개발자들이 무언가를 만들 때 제품을 구상하고 제품을 제작한 다음에 그것을 검사하고 발매한다는 것을 겪었다. 내가 겪는 것은 완성 이후 테스트와 품질 검사 단계에 들어갔다고 보면 된다. 비디오 게임으로 치면 비디오 게임을 완성하고 난 다음에 버그 여부를 체크하고 이를 수정하거나 없앤 다음에 외형을 다듬고나서 발매를 하는 것이라고 보면 된다. 팀 프로젝트라는 걸 하면서 느낀 것이다.
