[CSS] 04. 레이아웃 포지셔닝

박스 모델 

1) 블록 레벨 

블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지

 

2) 인라인 레벨 

박스 모델으로 구성되고 표처럼 사각형 같은 형태로 만들어짐 

 

 

width, height 계산

magin, border, padding 을 합산해줘야 함 

 

width

안에는 선의 두께와 padding이 포함되어 있음으로 이를 감해야 함 

연산은 훨씬 쉬움 

margin은 포함되지 않는다. 

 

 

min-height

min-width

자동으로 contet의 높이가 늘어남 

알아 둘 것 

 

그냥 height를 주면 높이보다 많은 내용을 담으면 넘친다는 문제가 있음 

 

 

<span>은 width, height 속성은 무시되며, padding은 반영되고,

margin은 좌우 간격만 반영이 되고 상하 간격은 반영이 되지 않는다

 

inline-block 는 인라인 블록인데 블록의 속성을 쓸 수 있도록 만들어주는 것 

 

 

display

 

display:none

영역 없어짐,

<div class="box" style ="display:none" >display:none</div>

 

visibility:hidden

영역 없어지지 않음

<div class="box" style ="visibility:hidden" >visibility: hidden</div>

댓글 더보기 등에 사용된다

 

 

Overflow

.visible { overflow : visible; }
.hidden { overflow : hidden; }
.scroll { overflow : scroll; }
.auto  { overflow : auto; }

scroll auto 차이

scroll은 내용이 짧아도 스크롤이 있음 

auto는 스크롤이 필요할 때만 보임 

 

resize

.b { resize: both;}
.h { resize: horizontal;}
.v { resize: vertical;}
.n { resize: none;}

 

 contenteditable = "true"

 텍스트 상자로 사용 가능  

 

opacity

opacity : 오패서티는 요소의 불투명도를 설정. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도

.light { opacity :0.2; }
.medium { opacity :0.5; }
.heavy { opacity :0.9; }

 

.box:hover, .img:hover{ opacity: 1.0; }

hover을 이용하여 마우스 커서가 위치함에 따라 투명/불투명하도록 조절할 수 있음 

 

 

border-style

테두리 네 면의 스타일을 지정

.bs1{ border-style: solid; border-color: red green; }
.bs2{ border-style: dotted; border-color: red green; }
.bs3{ border-style: dashed; border-color: red green; }
.bs4{ border-style: double; border-color: red green; }
.bs5{ border-style: groove; border-color: red green; }
.bs6{ border-style: ridge; border-color: red green; }
.bs7{ border-style: inset; border-color: red green; }
.bs8{ border-style: outset; border-color: red green; }

 

 

 

border-radius

레이디어스 속성은 요소의 바깥 테두리 경계의 모서리를 둥글게 만듦

.br1 { border-radius: 30px; }
.br2 { border-radius: 30px 0; }
.br3 { border-radius: 150px; }

 

 

box-shadow

요소의 테두리를 감싼 그림자 효과를 추가

.bs1 { box-shadow: 10px 10px 10px tomato; }
.bs2 { box-shadow: 0px 0px 20px tomato; }
.bs3 { box-shadow: 0px 0px 10px tomato inset; }