5.CSS Colors

http://www.w3schools.com/css/css_colors.asp

색 지정에는 세가지 방법 있음

<h2 style="background-color:red"> :Color Names
<h2 style="background-color:rgb(255, 0, 0)"> :RGB
<h2 style="background-color:#FF0000"> :Hexadecimal Colors=rrggbb

6.CSS Backgrounds

body {background-color: lightblue;}

(글씨에 지정한느 백그라운드와는 다르다)

-Background Image - Repeat Horizontally or Vertically

default 상태에서는 가로 세로 모두 반복. 사이즈에 따라 어떤 이미지는 세로나 가로 한쪽으로만 반복.

+호리즌털리

body {background-image: url("gradient_bg.png");
    background-repeat: repeat-x;}
+버티컬리

body {background-image: url("gradient_bg.png");
    background-repeat: repeat-y;}

+반복 안하기

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

+세트 포지션

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

+스크롤 해도 배경이 사라지지 않고 고정되게 하려면(fixed position)

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

-Shorthand property

배경 속성으로 코드가 길어지는 것을 막기 위해 요약해서 작설할 수 있다. 쇼트핸드 프로퍼티라 함.

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

http://www.w3schools.com/css/css_border.asp

css border 속성은 스타일, 넓이 보더 요소의 색상을 특정짓도록 돕는다.

Border Style

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

한쪽 보더에만 특성을 부여하는 것도 가능

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

Rounded Borders: border-radius 속성을 사용한다.

p {border: 2px solid red; border-radius: 5px;}  <-인터넷 익스프롤러 8 이하는 지원 안함.

8. CSS Margins

http://www.w3schools.com/css/css_margin.asp

-css에서는 마진값을 4면에 각각 적용 할 수 있다.

p {margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;}

도 가능하며, shorthand로 작성시

p {margin: 100px 150px 100px 80px;}

도 가능하다.

-가로로 정 중앙에 오게 하려면 auto 값을 갖게 하면 된다.

div {width: 300px; margin: auto; border: 1px solid red;}

-Margin Collapse

한 보더의 아랫면, 한 보더의 윗면이 나란히 세로로 맞닿아 있을 경우 마진 콜레입스로 더 큰 값만이 적용 되기도 한다.

9.CSS Padding

http://www.w3schools.com/css/css_padding.asp

컨텐츠를 둘러싼 여백 설정(보더의 안쪽). 마찬가지로 css에서는 4면 모두 설정 가능.

p {padding: 50px 30px 50px 80px;} 로 축약 표헌 가능.

10.CSS Height and Width

http://www.w3schools.com/css/css_dimension.asp

박스의 높이, 너비등을 설정할때 사용한다.

높이 너비중 한쪽을 정하고, 디폴트로 두면 나머지 값은 브라우저의 오토값으로 정해진다.

지정된 높이, 너비 값이 브라우저의 가로 세로 길이를 초과하면 스크롤 바가 생성된다.

이것을 해결하고 싶으면 max-width를 사용하면 된다.

div {max-width: 500px;
    height: 100px;
    background-color: powderblue;}

11.CSS Box Model

http://www.w3schools.com/css/css_boxmodel.asp

모든 html요소는 박스로 간주할 수도 있다. css에서는, 그것은 box model 이라고 이름 붙이고 디자인과 배열에 대해 이야기 할때 사용한다.

outline 은 border 바깥쪽을 뜻한다. 보더라인 바깥에 그려져 특정 요소를 두드러져 보이게 만들어 준다.

{outline-style} 을 사용하며 보더와 비슷한 밸류을 갖는다.(하지만 보더와 겹치지 않고 보더 바깥에 또한겹 표시된다)

shorthand로

p {border: 1px solid black;
    outline: 5px dotted red;} 와 같이 표현 가능함.