1. CSS: 위치 지정하기 - position, top/left/bottom/right
position속성을 통해 html요소들의 위치를 정하는 방식을 지정할 수 있다. 가능한 방식은 다음과 같다.
| 값 | 의미 |
|---|---|
| static | 기준 없음 (배치 불가능 / 기본값) |
| relative | 자기 자신의 static 위치 기준으로 배치 |
| absolute | 가장 가까운 부모 요소를 기준으로 배치 |
| fixed | 뷰포트 기준으로 배치한다 |
| sticky | 스크롤 영역 기준으로 배치한다 |
top/left/bottom/right 속성을 통해 position이 static이 아닌 요소들의 위치를 직접 지정가능하다. 각각 기준이 되는 위치의 위/왼쪽/아랫쪽/오른쪽을 기준으로 얼마나 떨어져있는지 지정한다.
1-1. Relative
요소를 일반적인 문서흐름상 배치한다. 이후 자신의 위치를 기준으로 top/left/bottom/right 값 만큼 offset한다. 위치를 이동하면서 다른 요소에 영향을 주지 않는다. 문서 상 원래 위치가 그대로 유지된다.
예시:
1-2. Absolute
요소를 일반적인 문서흐름상 배치한다. 이후 요소의 조상인 동시에 postion 속성이 static이 아닌 가장 가까운 요소의 위치를 기준으로 하여 위치를 조정한다.
문서 상 원래 위치를 잃어버린다. (문서상 아래에 있는 div가 해당 자리를 차지한다.)
조상 중 static이 아닌 Position을 가진 요소가 없다면 body태그를 기준으로 삼는다. body태그와 html태그에도 position속성이 없을 시 뷰포트(브라우저 전체화면)을 기준으로 위치시킨다.
예시:
1-3. Fixed
뷰포트를 기준으로 위치시킨다. 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 어떠한 공간도 배정하지 않아 뷰포트를 기준점으로 붙어있게 된다. 즉 화면에 계속해서 붙어있게된다.
1-4. stickey
스크롤 영역 기준으로 배치한다. 주변에 다른 요소가 없다면 fixed와 유사하게 브라우저 화면을 기준으로 배치된다. 부모요소중 스크롤이 되는 요소에 존재하면 해당 요소 경계에 부딪혀 스크롤된다. 부모가 body일 경우 화면의 끝에 닿으면 끝에 달라붙어 화면밖으로 이동하지 않는다.
2. CSS: 부드럽게 움직이기-transition
transition은 hover 등으로 인해 CSS 클래스의 속성을 변화시킬 때 즉각적으로 변하지 않고 원하는 속도로 변하게 하는 속성이다.
transition-property:전환의 대상이 되는 속성 지정
transition-delay: 전환이 시작되기 전에 딜레이 지정
transition-duration: 전환속도(시간) 지정
transition-timing-function:전환되는 속도의 변화를 지정한다.(linear, ease, ease-in, ease-out, ease-in-out, steps, cubic-bezier(.72,.03,1,.22), ...)
예시:
여러 속성들을 서로 다른 속도와 딜레이로 변화시키고 싶을 때는 다음과 같이 작성한다.
transition:
[property1] [duration1] [delay1] [timing-function1],
[property2] [duration2] [delay2] [timing-function2];3. 기초: 파일분리하기와 유의사항(js, css)
html에서 style와 script안의 내용은 별도의 css, js파일로 분리할 수 있으며 이렇게 분리하여 관리하는것이 관리에 용이하다. js와 css는 프로젝트 폴더 안에 static 폴더안에 분리하여 보관하고 html파일은 templates에 저장한다. html에서 각 분리된 파일을 불러올땐 다음과 같이한다.
<link rel="stylesheet" href="../static/[css파일명]">
<script src="../static/[js파일명]"></script>이때 js의 경우 head 태그안에 불러오는 내용을 작성할 하고, js파일을 다음과 같이 입력할 경우 오류가 발생할 수 있다.
var hw = document.getElementById('hw');
hw.addEventListener('click', function(){
alert('Hello world');
}) 이는 html이 javascript를 먼저 실행하여 body에 존재하는 id를 인지하지 못하기 때문에 발생하는 문제이다. 이를 방지하기 위해서는
- 함수를 선언하고 html에 onclick등의 속성을 통해 호출하여 body이전에 실행되지 않게 한다.(배운 내용)
- script 부분을 body 이후에 위치시킨다.(권장)
- 다음과 같이 js를 작성한다. 이는 페이지가 모두 load 된 이후에 실행하도록 지정한다.
window.onload = function(){
//실행할 내용
}4. JS: jQuery로 CSS변경하기
jQuery 선택자를 이용해 접근한 요소의 css 속성을 변화시키기 위해서는 다음과 같이 작성한다.
$('#_'+i).css("color","black");1번 인수는 바꿀 속성, 2번 인수는 바뀔 값을 입력한다.
5. JS: 동기, 비동기 실행일시정지
js는 sleep함수(프로세스 일시정지)를 지원하지 않는다. 유사한 함수로 setTimeout()를 제공한다. 그러나 이는 javascript특유의 비동기 실행방식으로 인해 다음과 같이 실행 순서가 뒤바뀔 수 있다.
입력:
console.log("a");
setTimeout(() => console.log("b"), 3000);
console.log("c");
출력:
a
c
b동기 지연(모든 프로세스가 실행되는 것을 막음)을 구현하기 위해선 다음과 같은 반복문을 사용할 수 있다.
function sleep(milliSec) {
const wakeup = Date.now() + milliSec;
while (Date.now() < wakeup) {}
}6. 기초: token발급으로 github 협업
접근이 허용된 Collaborator들이 Github 원격 레포지토리에 접근(push, pull)하기 위해서는 먼저 working directory가 들어가길 원하는 디렉토리에서 다음과 같은 명령어를 git bash에서 실행한다.
git clone [레포지토리 https 주소]이후 레포지토리 소유자가 token을 발급해야한다.
- 오른쪽 위 프로필 사진을 눌러 settings 진입
- 왼 하단 developer settings 진입
- generate new token(classic) 선택
- token 이름 입력, 권한 설정 후 토큰 생성
- 생성된 token을 복사하여 잘 보관해두고, collaborator들에게 알려준다.
tocken은 collaborator가 레포지토리에 접근할 때 자신의 github id와 함께 인증할때 pw로 사용된다.
