- 오늘 학습한 내용.
| CSS 선택자 종류 | |
| universal | * |
| type | tag |
| ID | # |
| class | . |
| state | : |
| Attribute | [] |
display
block : 화면에 보이도록 하는 고정.
none : 화면에서 숨기는 것. 렌더링 하지 않음.
null : 화면에 존재하나 보이지 않는다.
position
2020/06/23 - [코딩/위코드 코딩과제] - position 속성 - relative, absolute, fixed
position 속성 - relative, absolute, fixed
Position 속성 relative absolute fixed static(앞서 코딩학습 2일차에서 잘 안쓴다는 속성이 static이다.) static static은 기본값입니다. position: static;이 설정된 엘리먼트는 그다지 특별한 방식으로 위치..
kasumil.tistory.com
여기에 추가로 sticky가 있다.
sticky가 무엇이냐?
해당 위치에 고정되는 것은 같은데, 스크롤해도 그 위치에서 고정하면서 스크롤이된다.
fixed ↔ sticky의 차이는 무엇일까? 라고 볼수도 있다.
fixed는 해당 웹페이지 자체를 기준으로 진행되고, sticky는 해당 div안에서 작동된다.
내가 지정한 div 박스 안에서 하려면 sticky를 쓰도록 하자.
Flex Box
css-tricks.com/snippets/css/a-guide-to-flexbox/
해당 내용에 대한 자세한 설명.
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
자세한 설명은 여기로!
'코딩 > 자바스크립트' 카테고리의 다른 글
| css, scss, styled-component 현업에서 사용할때 느낀 점. (0) | 2021.07.16 |
|---|---|
| 비밀번호 정규식 일치여부 확인 방법 (0) | 2021.07.12 |
| [자바스크립트]자바스크립트 -Today I'm Learned (3)"동기 vs 비동기 함수" (0) | 2020.10.17 |
| [자바스크립트]자바스크립트 -Today I'm Learned (2)"내용 정리" (0) | 2020.10.16 |
| [자바스크립트]자바스크립트 -Today I'm Learned (1)"코딩의 기본" (0) | 2020.10.13 |