CSS 박스 스타일 CSS 강좌 07강
이번 강좌에서는 margin, border, padding, float 속성을 사용하여 div 및 박스를 스타일링 해보겠습니다. 박스 역시 HTML 코딩을 하면서 아주 많이 사용하니 반드시 익혀야 하는 스타일 입니다.
※박스모델
▷HTML에서 특정 영역에 대한 경계.. 보통 사각형을 사용하는데 이것이 박스모델 입니다.
▷속성
(1)margin : 테두리를 기준으로 여백을 지정합니다.
(2)border : 테두리의 두께를 지정합니다.
(3)padding : 테두리와 콘텐츠의 간격을 지정합니다.
(4)content : 영역 안에 들어가는 내용을 의미합니다.
예제)
<div style="border:1px solid red">
<div style="width:200px; height:200px;padding:50px; border:2px solid blue;margin:50px;">
Content
</div>
</div>
※박스 마진겹침(margin collapsing)
각각의 div 박스가 두 개 있다고 가정하고 각각의 박스에 margin 값을 30px로 설정했을 경우..
각각 박스의 margin 값은 겹칩니다.
박스1의 margin값 + 박스2의 marginr 값 = 15 + 15 = 30
박스간 겹치는 부분이 발생하여 margin 값은 30이 됩니다.
예제)
<div style="margin:30px;border:1px solid red;width:50px;height:50px"></div>
<div style="margin:30px;border:1px solid blue;width:50px;height:50px"></div>
※박스모델 종류
▷블록레벨 엘리먼트(block-level element) : 한 줄에 하나의 엘리먼트만 표시되는 엘리먼트 입니다.
-종류 : DIV, H1~H6, P, FORM, UL, LI, ADDRESS, BLOCKQUOTE, FIELDSET, TABLE, HR 등
▷인라인 엘리먼트(inline element) : 한 줄에 여러개의 엘리먼트가 표시되는 엘리먼트 입니다.
-종류 : a, img, em, strong등
블록레벨 예제)
<ul>
<li>Go Learning!</li>
<li>Go Learning!</li>
<li>Go Learning!</li>
</ul>
인라인 엘리먼트 예제)
<ul>
<a href="#">Go Learning!</a>
<a href="#">Go Learning!</a>
<a href="#">Go Learning!</a>
</ul>
※박스모델 display
▷display:block 요소를 이용하여 인라인 엘리먼트를 블록레벨 엘리먼트로 변경이 가능합니다.
예제)
*스타일 요소
<style>
a{
display:block;
}
</style>
*HTML 요소
<body>
<ul>
<a href="#">Go Learning!</a>
<a href="#">Go Learning!</a>
<a href="#">Go Learning!</a>
</ul>
</body>
▷display:none 요소를 사용하면 엘리먼트를 화면에서 보이지 않게 합니다.
예제)
<ul>
<a href="#">Go Learning!</a>
<a href="#" style="display:none">Go Learning!</a>
<a href="#">Go Learning!</a>
</ul>
※float 속성
▷엘리먼트를 좌,우 원하는 위치로 이동시킵니다.
▷float 속성을 지정한 엘리먼트 이후에 나오는 엘리먼트는 float 속성을 지정한 엘리먼트 영역을 비켜갑니다.
예제)
*스타일 요소
<style>
img{
float:right;
}
</style>
*HTML 요소
<body>
<img src="test.jpg" width="300px" height="300px">
<p>나혼자 밥을먹고</p>
<p>나혼자 영활보고</p>
<p>나혼자 노래하고</p>
<p>이렇게 나 울고불고</p>
</body>
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 상속/우선순위 CSS 강좌 09강 (0) | 2016.03.10 |
|---|---|
| CSS 포지션 스타일 CSS 강좌 08강 (0) | 2016.03.10 |
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |