2. property : you'd like to style of that element (size, color, etc) value는 18px for size, blue for color
property는 무조건 소문자. 공백없고 value마지막에 세미콜론!
그리고 이 seletor은 div {} header{} footer{} P{} 다 됨. ID나 class도 다 됨. ID의 경우 샵써주고 아이디이름뒤에 쓰기 : # name of the ID {} ,
class의 경우 .name앞에 class이름 써주기 : name ot the class.name
태그랑 클래스를 섞게 되면 태그.Class형식으로 ex) h1.name{}
Mixing CSS with HTML
두가지 방법. 1) inline : css파일 따로 만들지 않고 각 html파일에서 head에 <style> </style> 을 삽입하는 방법
ex)
body의 배경색을 red로 해.
<style>
body{
background-color: red;
}
</style>
근데, 이건 cool하지 않음, 왜냐하면 각각의 html의 head파트마다 넣어야 적용됨, 만약 페이지가 여러개 있는 웹사이트라면, 공통적용이 안됨.
2) external
style.css 라는 파일을 따로 만들어주기.
그리고 html파일에서 head안에 css랑 연결시키는 코드를 작성시켜주면 됨.
<link href="styles.css" rel="stylesheet">
BOX MODEL
CSS를 배울 때 이해해야 할 것은 많은 element들이 네 개의 요소로 이루어진 박스라는 사실. All HTML elements can be considered as boxes. InCSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
The width and height properties set the width and height of the content box, which is the area in which the content of the box is displayed — this content includes both text content sat inside the box, and other boxes representing nested child elements.
Note: Other properties exist that allow more subtle ways of handling content box size — setting size constraints rather than an absolute size. This can be done with the properties min-width, max-width, min-height, and max-height.
Padding refers to the inner margin of a CSS box — between the outer edge of the content box and the inner edge of the border. The size of this layer can be set on all four sides at once with the padding shorthand property, or one side at a time with the padding-top, padding-right, padding-bottom and padding-left properties.
padding-top : 50px; 식으로 하나하나 해도 되지만, padding : 40px; 처럼 상하좌우를 모두 같은 크기로 주거나, padding : 20px 40px 5px 2px; 라고 하면 시계방향으로 위 오른쪽 아래 왼쪽 마진을 각각 다르게 줄 수 있음. padding : 20px 40px; 이렇게 두개만 작성하는 경우는 상하 20, 좌우 40을 주라는 뜻, margin에도 동일하게 적용됨.
The border of a CSS box sits between the outer edge of the padding and the inner edge of the margin. By default the border has a size of 0 — making it invisible — but you can set the thickness, style and color of the border to make it appear. The bordershorthand property allows you to set all of these on all four sides at once, for example border: 1px solid black. This can be broken down into numerous different longhand properties for more specific styling needs:
The margin surrounds a CSS box, and pushes up against other CSS boxes in the layout. It behaves rather like padding; the shorthand property is margin and the individual properties are margin-top, margin-right, margin-bottom, and margin-left.
참고하면 좋은 사이트 : http://www.beautifulcss.com/archives/1136
