[CSS] CSS PART.6(박스 속성, 테두리 속성, 배경 속성)

박스 속성

- 웹페이지의 레이아웃을 구성할 때 가장 중요한 스타일 속성

 

- width/height 속성

글자를 감싸는 영역의 크기를 지정하는 속성

div 태그는 원래 block형식으로 전체 폭을 사용하지만 width, height속성을 추가함으로써 영역을 조정하여 할당 할 수 있습니다.

 

 

 

 

- margin/padding 속성

 

. margin:마진의 너비를 지정하는 속성.

Margin : 경계선 밖의 간격 (위, 오른쪽, 아래, 외쪽 - 시계방향)

홍길동과 이순신의 간격은 15 + 5 = 20이 아니라 가장 큰 간격인 15로 간격을 가집니다.

 

 

순서와 상관없이 속성의 이름을 각각 부여해서 값을 넣을 수 있습니다.

 

 

 

 

padding: 패딩의 너비를 지정하는 속성.

Padding : 테두리와 텍스트 사이의 간격 (위, 오른쪽, 아래, 외쪽 – 시계 방향)

padding: 0px 10px; - 두개의 값을 넣으면 앞의 값은 상하, 뒤의 값은 좌우의 간격을 조정합니다.

 

순서와 상관없이 속성의 이름을 각각 부여해서 값을 넣을 수 있습니다.

 

 

 

 

- border 속성

- box-sizing 속성

. width 속성과 height 속성이 차지하는 범위를 지정.

Border – 테두리 (굵기, 모양, 색)

 

 

. 종 류

- content-box:기본으로 적용되는 키워드.

- border-box:width/height 속성이 테두리를 포함한 영역의 크기를 지정.

box-sizing: content-box; : default 값 입니다.

box-sizing: border-box; : margin 만 동일하게 가져가고, 가로를 width 로 세로를 height 로 영역을 구성하게 들어 줍니다.  (width : 100px, height : 100px)

 

 

 

 

border(테두리) 속성

- border-width 속성

. 테두리의 너비를 지정하는 스타일 속성.

. 크기단위:border-left[top/right/bottom]-width

. 키워드:medium/thick/thin...

테두리를 굵기를 px를 입력하여 넣을 수 있지만, 속성을 넣어서 선택할 수 있습니다.

 

 

이렇게 width를 넣기만 하면 테두리가 생기지 않습니다.

 

 

기본적으로 테두리의 색, 스타일, 크기를 지정해야 테두리가 출력됩니다.

border-width: thick; - 상하좌우 같은 값으로 출력.

border-style: dotted; - 상하좌우 같은 값으로 출력.

border-color: red; - 상하좌우 같은 값으로 출력.

 

각각의 위치에 맞춰서 조정해줄 수 있습니다.

border-left-width: thick;

border-right-width:thin;

border-top-width:medium;

border-bottom-width: 20px;

 

 

 

- border-style 속성

. 테두리의 형태를 지정하는 스타일 속성.

. border-left[top/right/bottom]-style

각각의 위치에 맞춰서 조정해줄 수 있습니다.  

border-left-style:dotted;

border-right-style:dashed;

border-top-style:solid;

border-bottom-style:groove;

 

 

- border-color 속성

. border-left[top/right/bottom]-color

각각의 위치에 맞춰서 조정해줄 수 있습니다.

border-left-color:aqua;

border-right-color:lime;

border-top-color:orange;

border-bottom-color:red;

 

 

키워드를 한번에 입력하는 방법 (순서는 상관없이 자동적용)

- 가장 보편적으로 사용하는 방법입니다.

 

 

- border-radius 속성

. CSS3에서 추가된 속성.

. 테두리가 둥근 사각형 또는 원을 만들 수 있습니다.

border-radius: 10px 20px 30px 40px 값이 커질수록 원에 가까워집니다.

 

 

 

배경속성

- 특정 태그의 배경이미지 또는 색상을 지정하는 스타일 속성.

 

위글에 추가적으로 배경속성을 넣어보겠습니다.

 

테두리의 개수가 여러 개인 이유는 전체 영역을 선택하였기 때문에 각각의 태그의 개수만큼 생성 된 것입니다.

 

 

 

1) background-image 속성

- 배경에 넣을 그림을 지정하는 스타일 속성.

- 속성에는 URL 단위 또는 그레이디언트를 입력.

 

배경으로 넣을 이미지 / 사진 : 4753 x 634 

 

배경으로 사진으로 넣었더니 반도 안나왔습니다.

 

 

 

2) background-size 속성

- 그림 크기를 조절할 때 사용하는 스타일 속성.

- CSS3에서 추가된 기능.

- 키워드 : contain/cover

. contain:너비를 100%로 지정한 것과 같은 효과.

. cover: 높이를 100%로 지정한 것과 같은 효과.

 

background-size: 100%; 를 넣어주면 사진의 전체를 넣어주고 반복해서 배경에 넣어줍니다.

 

 

 

3) background-repeat 속성

- repeat:이미지가 패턴을 이룸.

- 키워드:no-repeat/repeat/repeat-x/repeat-y/round/space

- repeat-x : x축 방향으로 이미지가 반복.

- repeat-y : y축 방향으로 이미지가 반복.

 

반복되는 것을 막는 방법

background-repeat: no-repeat; 를 넣어 반복되지 않도록 합니다.

 

 

 

4) background-attachment 속성

- 배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성.

- 키워드:fixed/scroll

- 속성의 기본 키워드 : scroll

- fixed : 스크롤을 이동해도 배경이미지 고정.

 

이미지의 위치를 고정하는 방법

background-repeat: no-repeat;

Scroll 을 내려도 배경사진의 위치는 그대로 입니다.

 

 

 

5) background-position 속성

- background-position:x축크기;

- background-position: x축크기 y축크기;

 

이미지의 좌표( x축, y축)

background-position: 10px 100px;

X축과 y축을 정의해준 자리에 배경 사진을 출력합니다.