[웹개발] CSS 배경 설정 및 테두리 설정하기

안녕하세요

로로봉입니다 : )

오늘은 CSS를 이용해 배경 설정 및 테두리를 설정하는 방법을 알아보도록 하겠습니다.

---

1) 배경 설정하기

웹 페이지의 body 또는 HTML 요소들의 배경색이나 배경 이미지를 설정할 수 있습니다.

배경 설정에 사용되는 속성은 아래 5가지가 있습니다.

속성명	기능 설명
background-color	배경색을 설정합니다.
background-image	배경 이미지를 설정합니다. url("이미지 경로")
background-repeot	배경 이미지의 반복을 설정합니다.  repeat-x : 배경 이미지를 가로로 반복합니다.  repeat-y : 배경 이미지를 세로로 반복합니다.  no-repeat : 배경 이미지를 한번만 출력합니다.
background-position	배경 이미지를 반복하지 않을 경우 배경의 이미지를 설정합니다.  띄워쓰기를 이용해 수평, 수직 위치 순서로 설정합니다.  background-position:100px 100px;
background-attachment	배경 이미지를 고정하여 스크롤을 이동하여도 그자리에 있도록 합니다.  background-attachment:fixed;

<style>
　　body {
　　　　background-image:url("image.png");
　　　　background-repeat:no-repeat;
　　　　background-position:100px 100px;
　　　　background-attachment:fixed;
　　}
</style>

background-repeat 설정을 해주지 않는다면 body 부분에 이미지가 반복되며, 위와 같이 no-repeat 설정을 하면 한번만 표시되게 됩니다.

---

2) 테두리 설정하기

HTML 요소의 테두리 스타일을 적용하여 모양이나 색상 두께등을 설정할 수 있습니다.

속성명	기능 설명
border-style	테두리의 모양을 설정합니다. 설정 값은 dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden 이 있습니다.
border-width	테두리의 두께를 설정합니다. 4면을 한번에 설정하는 경우는 수치를 1개만 입력하며, 각각 설정을 원하는 경우에는 위 오른쪽 아래 왼쪽 순으로 입력합니다. border-width : 2px; border-width: 1px 2px 3px 4px;
border-color	테두리의 색상을 설정합니다.
border	테두리 모양, 두께, 색상을 한번에 설정가능합니다. border:2px solid red;

 

좋아요♥ + 구독 부탁드립니다 : )