3WSCHOOLS 튜토리얼 5-12 마토메

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

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

CSS background properties:

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

-background-color

body {background-color: lightblue;}

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

-background-image

body {background-image: url("paper.gif");}

-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;}

7.CSS Borders

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

4면에 각각의 벨류를 지정하고 싶을 때는(위 우 아래 좌)순서로

p.one {border-style: solid; border-width: 2px 10px 4px 20px;}

border-width: 보더라인의 두께를 정한다. thin, medium, thick/ px,cm 등등 선택 가능

Border Color: 특별한 내용 없음.

Border 코드는 다음 속성들을 shorthand property로 축약 할 수 있다

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

p {border: 5px solid red;}

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

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 이라고 이름 붙이고 디자인과 배열에 대해 이야기 할때 사용한다.

css박스모델은  근본적으로 모든 html 요소를 감싸고 있는 하나의 박스이다.

이 박스는 margin, borders, padding, actual contents로 구성되어있다.

(지금까지 배운 컨텐스, 보더, 마진, 패딩의 정의와 경계에 대한 설명)

12.CSS Outline

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

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

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

shorthand로

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