'내용물'에 해당되는 글 1건

  1. 2021.11.02 css 정리

css 정리

카테고리 없음 2021. 11. 2. 11:30

css 박스 모델




웹브라우저는 각 요소를 박스로 간주하거 화면에 배치한다.

컨텐츠(content) : 박스의 내용물, 텍스트와 이미지가 나타나는 부분이다.
패딩 (padding) : 콘텐츠 주위의 영역, 패딩은 투명 하다
경계(border) : 패딩과 내용물을 감싸는 경계, 경계는 박스의 경계색에 의하여 영향을 받는다.
마진(margin) : 경계 주위의 영역, 마진은 투명 하다.

경계선 스타일
border-style 상 하 좌 우 선택 가능
none
dotted
dashed
solid
double
groove
ridge
inset
outset

경계선의 폭
border-width 상 하 좌 우 선택 가능
thin
medium
thick

경계선 컬러
border-color
색상(green)
rgb(0, 255, 0)
"#00ff00"

둥근 경계선
border-raius 둥근 코너의 반지름
25px

경계선의 그림자
box-shadow 가로오프셋 세로오프셋 번지는정도 그림자색

경계 이미지
border-image
-webkit-border-image : url() 30 30 round /* safari 5 */
-o-border-image : url() 30 30 round /* opera */
border-image : url() 30 30 round /* chrome */

마진과 패딩

요소 크기 설정
css 에서는 모든 요소의 크기를 width 와 height 속성을 이용해 설정 할 수 있다

요소 크기 변경
resize 속성을 이용할 경우 양방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정할 수 있게 한다.
resize 의 깂은 both, horizontal, vertical, none

마진 설정 하기
auto : 브라우저가 마젠을 계산 한다.
length : 마진을 px, pt, cm 단위로 지정할 수 있다, 디폴트 0pz
% : 미진을 요소 폭의 퍼센트로 지정 한다.
inherit : 마진이 부모 요소로부터 상속된다.

마진의 각 변을 별도로 지정 하는 방법
margin-top : 10px
margin-right : 10px
margin-bottom : 10px
margin-left : 10px

margin : top right bottom left

패딩 설정 하기
패딩은 콘텐츠와 경계 사이의 간격 이다.
length : px, pt, em 단위로 패딩응 설정한다.
% : 패딩을 내용물의 퍼센트로 지정 한다.

마진의 각 변을 별도로 지정하는 방법
padding-top : 10px
padding-right : 10px
padding-bottom : 10px
padding-left : 10px

한 줄에서 모든 변에 대한 값을 지정 하는 방법
padding : top right bottom left

마진과 패딩의 값을 설정할때 음수로 설정 할 수 있다
이 경우 요소가 겹쳐서 보이게 된다.
웹디자인 에서 이것을 고의적으로 이용하는 경우도 많다.
특히 이미지와 텍스트를 나란히 표시할 때 사용한다.

박스의 크기계산
css 를 통하여 요소의 width, height 속성을 설정하면 요소 안에서 콘텐츠 영역의 크기가 설정된다.
요소의 전체 크기를 계산하려면 여기에 패딩, 경계, 마진을 더해야 한다.

ex)
#target {
width:200px;
padding:10px;
border: 5px solid red;
margin : 20px;
}

마진 20+ 20
경계 5+ 5
패딩 10 + 10
내용물 200

으로 270 이다.

margin 속성을 이용한 수평 정렬
어떤 HTML 요소를 화면의 중앙에 위치시키고자 하면, align='center' 로 하면 되었다.
html5 에서 align 속성을 삭제 하였다.
css만을 사용하여 어떤 요소를 중앙 정렬하려면 어떻게 해야 하는가?

- 인라인요소
테스트나 <em>과 같은 인라인 요소를 컨테이너의 중앙에 놓으려면 컨테이너의 text-align 속성을 사용하면 된다.
그렇게 하면 블록 수준의 컨테이너 안에서 인라인 요소가 중앙 정렬된다.
예를 들어 <em> 요소를 <p> 안에서 중앙 정렬 해보자.
ex) p, em, strong, div { border: dotted 3px red; }
style="text-align : center"

- 블록요소


Posted by 블로그하는프로그래머
,