우주코딩
CSS - 2 본문
float
태그가 출력되는 현재 위치에서 공중부양시킨다.
다음 태그가 현재 태그의 자리를 차지할 것이다.left 또는 right 정렬만 가능하다.
float일 때 유의할 점
1) width와 height를 지정하지 않으면, inline 처럼 콘텐츠의 크기에 따라 너비, 높이가 결정된다.
2) margin이 서로 겹치지 않고 그대로 유지한다.일반적인 경우 위,아래 margin은 서로 겹쳐 표현한다.
어떤 속성은 자식태그에까지 영향을 끼치고 어떤 속성은 자식태그에 영향을 끼치지 않는다.
position: absolute
가장 가까운 조상 중에 absolute나 relative, fixed 타입 조상이 있으면 그 조상을 기준으로 자신의 위치를 조정한다.
테두리 안쪽을 기준으로 위치를 계산한다.
만약 조상 중에 absolute나 relative, fixed가 없다면, 문서 가장자리를 기준으로 자신의 위치를 조정한다.
absolute 태그는 width, height를 지정하지 않으면 콘텐츠의 크기에 맞춘다. 기준이 되는 태그가 움직이면 자신도 같이 움직인다.
clear 는 플롯일 때만 사용가능
컨텐츠는 min-height(최소 높이 고정) 써야 clear 효과를 받을 수 있다.
그냥 height는 틀이 고정되어있어서 콘텐츠가 늘어나도 사이즈가 늘어나지 않는다.
position: fixed
웹브라우저의 클라이언트 영역을 기준으로 위치를 지정한다.
클라이언트 영역?
웹브라우저의 툴바 아래에 위치한 내용이 출력되는 화면이다. 내용을 위,아래로 스크롤하더라도 fixed 타입의 태그를 움직이지 않는다. 화면 스크롤과 상관없이 웹브라우저의 특정 영역에 내용을 띄우고 싶을 때 사용한다
position: relative
absolute나 fixed와 달리 공중부양시키지 않는다.
현재 자리를 유지한 상태에서 상,하,좌,우로 위치를 조정하고 싶을 때 사용한다.
absolute 타입의 자식 태그의 기준으로 만들고 싶을 때 부모 태그를 relative로 지정한다.
CDN(Content Delivery Network) 방식 사용
웹 브라우저는 서버 별로 다운로드 받은 파일을 캐시에 보관해서 관리하기 때문에 기존에 콘텐츠 공유 서버(Content Delivery 서버)에서 다운받은 css 파일을 사용하여 여러 html에서 사용 가능하다. 즉 같은 서버의 같은 파일을 중복해서 다운로드 받지 않는다.
NodeJS
Desktop(consolse) 용 JavaScript Runtime(실행시켜주는 프로그램)
웹 브라우저 - HTML , Rendering, Engine / JavaScript Engine (V8)
Node - V8, JavaScript Engine + JavaScript Library
JS 소스파일 (*.js) -> 실행 -> Node
'Front & Web' 카테고리의 다른 글
| JavaScript (0) | 2021.11.07 |
|---|---|
| CSS (0) | 2021.11.07 |