03_CSS속성,박스모델

오늘은 박스모델에 대한 속성들에 대해 공부하였다.

 

width

block
기본 : 100% 
inline
기본 : 0

heght

block
기본 : 0px
inline
기본 0

>> 인라인요소는 가로세로를 설정해도 적용이 되지 않는다.

 

 

max-width
요소의 최대 가로넓이
min-width
요소의 최소 가로넓이
max-height
요소의 최대 세로넓이
min-width
요소의 최소 세로넓이


>> 기본값이 none

자식요소는 부모요소의 값을 %로 받아온다는 것이 차이


margin
요소의 외부(바깥) 여백을 지정 _단축특성

단축특성??
top,left,right,bottom 을 아우를수 있는 속성이다

음수의 값도 사용할 수 있다

margin : 10 px 20 px 30 px 40 px
위 우 아래 좌
margin : 10 px 20 px 30 px
위 [좌,우] 아래
margin : 10 px 20 px
[위,아래] [좌,우]
margin : 10 px
[위,아래,좌,우

>>시계방향임을 알수있다

개별특성으로 적는방법 : margin-bottom식으로 사용

margin

margin이 위 부모요소의 가로넓이에서 따온다는 것을 알 수 있다.

마진중복(병합,Collapse)

마진의 특정 값들이 중복되어 합쳐지는 현상
ex. 형제 요소의 margin-top과 margin-bottom이 만날때
부모요소의 amrgin-top과 자식요소의 margin-top이 만났을 때
부모요소의 margin-bottom과 자식요소의 margin-bottom이 만났을 때

형제요소 양옆으로는 margin중복 x

margin-top과 margin-bottom이 만났다는 것을 알 수 있음

마진 중복 계산법

조금 어렵다고 생각할수도있긴한데, 부모와 자식간의 관계일때 중복이 위 그림처럼 겹쳐서 만나지게 될때 마진중복 현상이 일어나게 된다!

 

둘다 양수 > 더 큰값으로 중복
둘다 음수 > 더 작은값으로 중복
각각 양수 > 두 마진의 합





padding
요소의 '내부여백'을 지정

마진과 위,우,아래,좌 쓰는방법이 동일하다.

padding 예시

border
요소의 테두리선을 지정

마진,패딩과 같은 방식으로 상하좌우 선택이 가능
> 각 개별 특성들도 가능하다.

border-width : 선의 두께
border-style : 선의 종류

none : 선없음
hidden : 선 없음
solid : 실선
dotten : 점선
dashed : 파선
double : 두줄선
groove :홈이 파여있는 모양
ridge : 솟은 모양
inset : 요소 전체가 들어간 모양
outset : 요소 전체가 나온 모양

border-color : 선의 색상

>>border를 추가하면 크기가 선의 크기만큼 커진다!

border

위의 그림을 한번보면 이해가 편할것이다. transparent는 배경색과 같다고 생각하면된다 즉, 세로로 10px가 길어진 상태

 

boxsizing
요소의 크기계산 기준을 지정
content-box : 너비,높이만으로 요소크기를 계산
border-box : 너비,높이에 padding,border을 포함하여 요소의 크기를 계산

display
요소의 박스타입(유형) 결정
block
inline
inline-block ( input 등) // 인라인 요소지만, 가로세로,마진패딩 등을 사용 가능
기타 : table,table-cell,flex
none : 요소의 박스 타입이 없음 >> 화면에서 요소가 사라짐

display 예시

 

display : none

display를 none으로 설정하면 사라저버리게 하는것이 가능하다.

 

 

overflow
요소의 크기 이상으로 내용이 넘쳤을 때, 내용의 보여짐을 제어
visible : 그대로 표시
hidden : 넘친부분을 잘라냄
scroll : 강제적으로 스크롤바를 만듬
auto : 넘치는 부분이 있는 경우에만 스크롤바를 만듬

 

opacity : 투명도를 설정