CSS

태그, 속성값 호환성 체크 웹 사이트

Can I use? https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com

position 속성

relative -원래 있는 자리에서 움직임 position: relative position - 부모 박스를 기준으로 움직임 position: absolute; fixed - 상자를 벗어나 웹페이지에서 움직임 position: fixed; sticky - 원래 있는 자리에 그대로 있으면서 스크롤을 내려도 따라온다 position: sticky

div 태그와 span 태그의 차이

inline 물건 inline-block 상자 - 한줄에 여러개가 표시될 수 있음 block 한줄당 하나씩 들어가는 상자 div 태그는 block 속성을 가지고 있다. (빨간 박스) box 를 조정 span은 inline-block 속성을 가지고 있다. (파란 content)물건. display 태그로 속성을 변경할 수 있다. display: inline, inline-block, block

css의 display flex 개념 익히기

부모 요소에 적용하는 속성 display : flex; .container { display: flex;/* 아이템 크기만큼 가로(기본값)로 배치*/ display: block; /* 가로 넓이만큼 세로로 배치*/ display: inline-flex; /*컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값 */ } 자식 요소에 적용하는 속성 flex-direction : row (기본값), column , row-reverse , column-reverse row : 가로 방향으로 배치 column : 세로 방향으로 배치 row-reverse : 역순으로 가로 배치 column-reverse : 역순으로 세로 배치 flex-wrap : nowrap(기본값) , wrap nowrap(기본값) : 줄바..