Advanced HTML - CSS
Everything is a BOX
Box-sizing
developer.mozilla.org/ko/docs/Web/CSS/box-sizing
- border box : the way we calculate the box size is just a/c the content
- { // * : everything
box-sizing: border-box;
}
- { // * : everything
Position
developer.mozilla.org/ko/docs/Web/CSS/position
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.
- position : static / relative / absolute / fixed
static: default
요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.relative: have elements
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.- sticky:
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 “스크롤 동작”(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 “끈끈한” 동작을 보이지 않는 점에 주의하세요.
- sticky:
absolute: relative to its first position parent(e.g. body), not static, everything opposite to static
not affected to the scrolling
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.fixed: 스크롤을 하더라도 fixed된 top-left-right-bottom 위치에 고정
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다.
- class => CSS, id => JavaScript
Display
- display: block / inline / inline-block / dom / flex
- block : vertical alignment, take as much as horizontal place they can
- inline : take the CONTENT as horizontal alignment, ignore any width value
- inline-block :
- Compared to ‘display: inline’, the major difference is that ‘display: inline-block’ allows to set a width and height on the element.
- Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
- dom : can check the dom (test) but not rendered inside the dom
- flex (Flexbox) : This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
css-tricks.com/snippets/css/a-guide-to-flexbox/> start / center / space-between / space-around / space-evenly
developer.mozilla.org/en-US/docs/Web/CSS/justify-content
- order : arbitrarily set the orders
.box:first-child {
order: 3
}
.box:last-child {
order: 1
}
Units
- percentages / absolute
- percentages
- vw : Viewpoint Width
- vh : Viewpoint Height
- em : Relative to the font-size of the element (2em means 2 times the size of the current font)
- rem : Relative to font-size of the root element
- absolute
- px : pixels
- pt : 72pts = one inch
Z-index
control overlapping -> no need for static (which considers content layouts)
DIV num 따라 구조화 하고 -> DIV에 포함된 DIV의 z-index는 소수점으로 판단된다!
=> DIV
#1 : 5
#2: 2
#3: 4
- #4: 4.6
- #5: 4.1
- #6: 4.3
Vendor Prefixes
- webkit
WebKit is a web browser engine used by browsers such as Safari and Chrome. You can make use of WebKit features such as animation, transform, transition, and more through the use of the -webkit prefix in your CSS
Transformations
Animations
@keyframes [name] {
}
Transition
:hover : not switch, interpolating
Responsive Web
Media queries
CSS Preprocessors
SASS
CSS with Super-power