CSS

div 복습

paintover23 2023. 7. 8. 11:56
728x90

Shadow 기능

.white-box {
box-shadow: 0.5px 0.5px 2px 1px #eee;

--> 1번째 2번째 값: 그림자의 x,y 축 이동량
--> 3번째 값: blur
--> 4번째 값: spread

테이블 박스 테두리를 왼쪽만 주고 싶으면 CSS로 border-left : 1px solid black 이런거 넣으면 됩니다.

[div의 속성-복습]
ㅇ div는 가로행을 전부 차지한다. (display: block의 속성)
ㅇ 기본 정렬은 왼쪽 정렬이다.

<div>111</div>
<div>222</div>
<div>333</div>

따라서, 화면에서 이렇게 보임.
111
222
333

따라서, bootstrap을 활용해 이렇게 코드 짜면

 <div class="row">
            <div class="col-md-8">1111</div>
            <div class="col-md-4">2222</div>
 </div>

md 사이즈 이하일 때는,
1111
2222

md 사이즈 이상일 때는 이렇게 보인다.
1111 2222 (화면에서 8:4 비율로 배분)

728x90
반응형

'CSS' 카테고리의 다른 글

오해하기 쉬운 문법  (0) 2023.07.08
CSS 덮어쓰기, 좋은 코드의 원칙  (0) 2023.07.07
Bootstrap 레이아웃(2)  (0) 2023.07.07
Bootstrap 레이아웃  (0) 2023.07.07
Bootstrap  (0) 2023.07.07