CSS BLOCK
in Programming on HTML/CSS
앞에서도 말했듯이, 박스 모델은 margin, border, padding , contents 영역으로 구성되어있다. 이 요소가 block 요소인지 inline 요소인지에 따라서 나열방법이 달라진다.
Display 속성
block 속성
block 요소일 경우, 요소1 아래에 요소2가 나열된다. 줄바꿈이 일어난다. 인라인 요소에 display : block으로 하면 요소들이 아래로 나열되고, 패딩, 마진, 너비 , 높이 등을 가질 수 있다.(예시는 생략 -☆)
<head> <style> div{ width: 150px; height : 50px; background: pink; padding-top: 20px; text-align:center; border: 1px solid gray; color: gray; }</style> </head> <body> <div> 첫번째 블록 요소 </div> <div> 두번째 블록 요소 </div> </body>
inline 속성값
inline 요소일 경우, 요소1 옆에 요소2가 나열된다. 컨텐츠 영역만큼만 자리를 차지한다. width, height 속성이 듣지를 않는다. padding 은 줄 수 있다.
<head>
<style>
span{
width: 150px;
height : 50px;
background: pink;
padding-top: 20px;
text-align:center;
border: 1px solid gray;
color: gray;
}</style>
</head>
<body>
<span>첫번째 인라인 요소</span>
<span>두번째 인라인 요소</span>
</div>
</body>
display 속성을 이용하면 block 요소를 inline으로, inline 요소를 block으로 바꿀 수 있다. display : none , block , inline , inline-block 등등이 있다.
display: table; table-layout: fixed; display: table-cell;
다음과 같이 블록 요소를 인라인 요소로 만들어 한줄에 배치할 수 있다.
div{ width: 150px; height : 50px; background: pink; padding-top: 20px;//inline 요소라도 padding은 먹는다. text-align:center; border: 1px solid gray; color: gray; display: inline; }그러나 inline 요소는, 너비나 높이, 마진, 플롯이 적용되지 않는다. inline-block은 이를 가능하게 해준다.
inline-block 속성값
inline-block은 너비와 높이, 마진, 플롯의 속성을 가질 수 있으면서 한줄을 차지 하지않고 다른 애들과 나눠쓴다.
div{
width: 150px;
height : 50px;
background: pink;
padding-top: 20px;
text-align:center;
border: 1px solid gray;
color: gray;
display: inline-block;
}
none 속성값
해당 요소를 화면에 아예 표시하지 않는다. visibility : hidden; 은 공간이라도 차지하는데 none은 공간도 차지하지 않는다.
기타 속성값
inherit, table, inline-table, table-row, table-row-group , table-header-group, table-footer-group, table-column, table-column-group, table-cell, table-caption , list-item 이 있다.
테두리 관련 속성
border-style
속성 값 에는 none, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid가 있다.
border-style : dashed
border-width
border-width : thick thin; //위 아래 굵게, 옆 얇게
border-color
border-color : red;
border 스타일 묶어서 주기
border : width style color; //이렇게 줄 수 있다.
border : thin solid black;
border-radius
border-radius: 20px 40px;
box-shadow
box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상;
수평거리가 양수면 오른쪽에, 음수면 왼쪽에 그림자가 생긴다.
수직거리가 양수면 아래쪽에, 음수면 위쪽에 그림자가 생긴다.
