CSS의 활용

---

Color

글자색을 지정한다

footer{
    background-color:#666; color:white;
    text-align: center;
}

Backgrounds

배경색을 지정한다.

Background Image

배경이미지를 지정한다. 기본값으로 반복이 설정되어 있어서 해당 요소를 반복해서 채우게 된다. 배경으로 이미지를 쓸 때는 텍스트를 가리지 않는 이미지를 선택하도록 한다.

header>h1>a.logo{
    background-image: url('../images/logo.png');
    background-repeat: no-repeat;
    background-size: 43px auto;
    display: block;
    height: 100%;
    overflow: hidden;
    text-indent: -20000px;
    width: 100%;   
}

Background Image Repeat

• repeat-x;
  수평방향으로 반복한다.

body {
	background-image: url('../images/logo.png');
  	background-repeat: repeat-x;
}

• repeat-y;
  수직방향으로 반복한다.

body {
	background-image: url('../images/logo.png');
  	background-repeat: repeat-y;
}

• background-repeat: no-repeat
  반복하지 않는다

Background Position

특정한 위치에 이미지를 위치 시킨다

body {
  	background-image: url("img_tree.png");
  	background-repeat: no-repeat;
  	background-position: right top;
}

Background Attachment

fixed;

이미지를 고정시킨다. 웹페이지를 스크롤해도 이미지는 고정된다.

body {
  	background-image: url("img_tree.png");
  	background-repeat: no-repeat;
  	background-position: right top;
  	background-attachment: fixed;
}

scroll;

이미지를 스크롤 가능케한다. 웹페이지를 스크롤하면 이미지가 같이 스크롤된다.

body {
  	background-image: url("img_tree.png");
  	background-repeat: no-repeat;
 	background-position: right top;
  	background-attachment: scroll;
}

Background Shorthand

코드를 좀 더 간결하게 쓰고 싶을 때 사용한다. 작성할 때, 순서가 있다.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

작성할 때, 값을 넣지 않아도 문제되지 않지만, 순서에 맞춰서 넣어야 한다.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Borders

• Border Style
• Border Width
• Border Color
• Border Sides
• Border Shorthands

header>nav>ul>li:hover{
    border-style: solid;
    border-width: 5px;
    border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
    border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
    border-color: red;

Border Sides

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Border Shorthand

순서에 맞춰 작성한다.

• border-width
• border-style (required)
• border-color

p {
  border-left: 6px solid red;
}

위와 같이 테두리의 상하좌우를 지정할 수 있다.

Rounded Borders

둥근 테두리를 만들 때 사용한다.

p {
  border: 2px solid red;
  border-radius: 5px;
}