FRONT/CSS & BootStrap
BootStrap 정리 + css 조금
Garonguri
2022. 3. 21. 02:13
728x90
- 부트스트랩의 Grid System
- 페이지에 최대 12개의 열을 허용한다.
- 열을 그룹화 할 수 있다.
- col
- col-()-num
- xs, x, m, l, xl로 나뉜다.
CSS position 속성
-> top, left, bottom, right 속성과 함께 사용된다. (4속성)
1. static : 원래 있어야 하는 위치. static이면 4속성 무시. 가로로 배열된다.
2. relative : 원래 있어야 하는 위치를 기준으로 '상대적'으로 배치한다.
3. absolute : position 속성이 static 이 아닌 첫 번째 상위 요소가 배치 기준이 된다. 4속성을 적용해야 한다.
absolute의 부모 속성을 relative로 지정해 주는 것이 좋다.
4. fixed : 항상 고정된 위치에 지정할 수 있다.
CSS display 속성
-> none, bolck, inline, inline-block 이 있다.
1. none : 영역을 차지하지 않는다.
2. block : div, p, h, li 태그 등이 해당된다. 기본적으로 가로 영역을 모두 채우며, 이 요소 다음에 등장한다면 줄바꿈 된 것처럼 보인다. weight, height 속성 지정이 가능하다. 항상 다음 줄에 랜더링된다.
3. inline : span, bm i, a 태그가 해당된다. 줄 바꿈이 되지 않고, width, height를 지정할 수 없다. 바로 오른쪽에 표시된다.
4. inline-block : 줄 바꿈은 되지 않지만(inline), 크기를 지정할 수 있다.(block)
728x90