CSS 박스 모델과 응용

박스 모델

기본적으로 HTMl 요소를 감싸는 가상적인 박스 웹 브라우저는 각 요소를 박스로 간주하고 화면에 배치

각 박스는 마진, 경계 패딩을 가진다 이것을 이해해야만 깔끔한 디자인을  할 수있다.

컨텐츠 : 박스의 내용물이다.택스트와 이미지가 나타나는 부분이다

패딩 : 컨텐츠 주의위 영역이다. 패딩은 투명하다.

경계 : 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계석에 의하여 영향을 받는다.

마진 : 경계 주위의 영역이다. 마진은 투명하다.

경계선

border-style로 설정할 수 있다. 

경계선 스타일

<p style="border-style: none">none</p>

<p style="border-style: dotted">dotted</p>

<p style="border-style: dashed">dashed</p>

<p style="border-style: solid">solid</p>

<p style="border-style: double">double</p>

<p style="border-style: groove">groove</p>

<p style="border-style: ridge">ridge</p>

<p style="border-style: inset">inset</p>

<p style="border-style: outset">outset</p>

각 경계선의 상하 좌우를 다르게 변경가능 

예) <p style ="border-top-style: dotted ;

border-right-style:solid ;

border-bottom-style: double ;

border-left-style: dashed" ;

</p>

위와 같은 설정은 한줄로도 가능하다.

border-style: dotted solid double sashed;

경계선의 폭

border-width 속성으로 경계선의 폭을 지정한다. 단위는 픽셀이거나 thin,medium,thick중에 하나다.

border-style 이설정되어 있어야 동작한다.

예) <style>

          p.think {

               border-style: solid;

               border-style:thick;

}

 

<p class="think"> 경계선이 thick으로 설정되어 있음</p>

경계선 색상

border-color로 지정 

다음과 같은 형식으로 지정가능

"green"

"rgb(0,255,0)

"#00ff00"

 

둥근경계선 border-radius :25px;

                                           반지름

그림자 경계선 box-shadow:20px  10px  5px  #666666:

                                         가로오프셋  세로오프셋  번지는정도  그림자색

경계 이미지 border-image 

 

경계선 한 줄 정의

border: 5px    solid    red:

            두께   스타일   색상

마진과 패딩

요소 크기 설정

css 에서는 모든 요소의 크기를 width와 height 속성을 이용하여 설정가능

#target { 

        width: 100px;

        height:50px;

        background-color: yellow;

}

<p id="target1">이것은 p요소입니다.</p>

요소 크기 변경

resize 속성을 both 라고 설정하면 양방향 매커니즘으로 사용자요소의 높이와 너비 조정 가능

resize의 값은 both,horizontal,vertical,none등

마진 설정하기

auto 브라우저가 마진을 계산

length 마진을 px,pt,cm단위로 지정가능 디폴트는 0px

% 마진을 요소 폭의 퍼센트로 지정

inherit 마진이 부모 요소로부터 상속됨

 

#target {

          width:200px;

          padding:10px;

          border: 5px solid red;

          margin: 20px

}

일경우 요소 전체 크기는 270px가 된다

박스 모델

기본적으로 HTMl 요소를 감싸는 가상적인 박스 웹 브라우저는 각 요소를 박스로 간주하고 화면에 배치

각 박스는 마진, 경계 패딩을 가진다 이것을 이해해야만 깔끔한 디자인을  할 수있다.

컨텐츠 : 박스의 내용물이다.택스트와 이미지가 나타나는 부분이다

패딩 : 컨텐츠 주의위 영역이다. 패딩은 투명하다.

경계 : 패딩과 내용물을 감싸는 경계이다. 경계는 박스의 경계석에 의하여 영향을 받는다.

마진 : 경계 주위의 영역이다. 마진은 투명하다.

경계선
border-style로 설정할 수 있다. 

경계선 스타일
<p style="border-style: none">none</p>

<p style="border-style: dotted">dotted</p>

<p style="border-style: dashed">dashed</p>

<p style="border-style: solid">solid</p>

<p style="border-style: double">double</p>

<p style="border-style: groove">groove</p>

<p style="border-style: ridge">ridge</p>

<p style="border-style: inset">inset</p>

<p style="border-style: outset">outset</p>

각 경계선의 상하 좌우를 다르게 변경가능 

예) <p style ="border-top-style: dotted ;

border-right-style:solid ;

border-bottom-style: double ;

border-left-style: dashed" ;

</p>

위와 같은 설정은 한줄로도 가능하다.

border-style: dotted solid double sashed;

경계선의 폭
border-width 속성으로 경계선의 폭을 지정한다. 단위는 픽셀이거나 thin,medium,thick중에 하나다.

border-style 이설정되어 있어야 동작한다.

예) <style>

          p.think {

               border-style: solid;

               border-style:thick;

}



<p class="think"> 경계선이 thick으로 설정되어 있음</p>

경계선 색상
border-color로 지정 

다음과 같은 형식으로 지정가능

"green"

"rgb(0,255,0)

"#00ff00"



둥근경계선 border-radius :25px;

                                           반지름

그림자 경계선 box-shadow:20px  10px  5px  #666666:

                                         가로오프셋  세로오프셋  번지는정도  그림자색

경계 이미지 border-image 



경계선 한 줄 정의
border: 5px    solid    red:

            두께   스타일   색상

마진과 패딩
요소 크기 설정

css 에서는 모든 요소의 크기를 width와 height 속성을 이용하여 설정가능

#target { 

        width: 100px;

        height:50px;

        background-color: yellow;

}

<p id="target1">이것은 p요소입니다.</p>

요소 크기 변경

resize 속성을 both 라고 설정하면 양방향 매커니즘으로 사용자요소의 높이와 너비 조정 가능

resize의 값은 both,horizontal,vertical,none등

마진 설정하기

auto 브라우저가 마진을 계산

length 마진을 px,pt,cm단위로 지정가능 디폴트는 0px

% 마진을 요소 폭의 퍼센트로 지정

inherit 마진이 부모 요소로부터 상속됨




#target {

          width:200px;

          padding:10px;

          border: 5px solid red;

          margin: 20px

}

일경우 요소 전체 크기는 270px가 된다