position속성을 통해 html요소들의 위치를 정하는 방식을 지정할 수 있다. 가능한 방식은 다음과 같다.
값 | 의미 |
---|---|
static | 기준 없음 (배치 불가능 / 기본값) |
relative | 자기 자신의 static 위치 기준으로 배치 |
absolute | 가장 가까운 부모 요소를 기준으로 배치 |
fixed | 뷰포트 기준으로 배치한다 |
sticky | 스크롤 영역 기준으로 배치한다 |
top/left/bottom/right 속성을 통해 position이 static이 아닌 요소들의 위치를 직접 지정가능하다. 각각 기준이 되는 위치의 위/왼쪽/아랫쪽/오른쪽을 기준으로 얼마나 떨어져있는지 지정한다.
요소를 일반적인 문서흐름상 배치한다. 이후 자신의 위치를 기준으로 top/left/bottom/right 값 만큼 offset한다. 위치를 이동하면서 다른 요소에 영향을 주지 않는다. 문서 상 원래 위치가 그대로 유지된다.
예시:
요소를 일반적인 문서흐름상 배치한다. 이후 요소의 조상인 동시에 postion 속성이 static이 아닌 가장 가까운 요소의 위치를 기준으로 하여 위치를 조정한다.
문서 상 원래 위치를 잃어버린다. (문서상 아래에 있는 div가 해당 자리를 차지한다.)
조상 중 static이 아닌 Position을 가진 요소가 없다면 body태그
를 기준으로 삼는다. body태그
와 html태그
에도 position속성이 없을 시 뷰포트(브라우저 전체화면)을 기준으로 위치시킨다.
예시:
뷰포트를 기준으로 위치시킨다. 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 어떠한 공간도 배정하지 않아 뷰포트를 기준점으로 붙어있게 된다. 즉 화면에 계속해서 붙어있게된다.
스크롤 영역 기준으로 배치한다. 주변에 다른 요소가 없다면 fixed와 유사하게 브라우저 화면을 기준으로 배치된다. 부모요소중 스크롤이 되는 요소에 존재하면 해당 요소 경계에 부딪혀 스크롤된다. 부모가 body
일 경우 화면의 끝에 닿으면 끝에 달라붙어 화면밖으로 이동하지 않는다.
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];
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를 인지하지 못하기 때문에 발생하는 문제이다. 이를 방지하기 위해서는
window.onload = function(){
//실행할 내용
}
jQuery 선택자를 이용해 접근한 요소의 css 속성을 변화시키기 위해서는 다음과 같이 작성한다.
$('#_'+i).css("color","black");
1번 인수는 바꿀 속성, 2번 인수는 바뀔 값을 입력한다.
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) {}
}
접근이 허용된 Collaborator들이 Github 원격 레포지토리에 접근(push, pull)하기 위해서는 먼저 working directory가 들어가길 원하는 디렉토리에서 다음과 같은 명령어를 git bash에서 실행한다.
git clone [레포지토리 https 주소]
이후 레포지토리 소유자가 token을 발급해야한다.
tocken은 collaborator가 레포지토리에 접근할 때 자신의 github id와 함께 인증할때 pw로 사용된다.