Cascading Stylesheet
어떤 것 다음에 다른게 오는 체계
브라우저가 css코드를 읽을 때 위에서부터 순서대로 읽는다.
→같은 대상에 중복해서 태그 되었을 경우, 실제 적용되는건 가장 마지막에 있는 코드이다.
아래와 같이 html파일 안 head에 style 태그를 만들어서 디자인한다.
<head>
<style></style>
</head>
html파일과 css파일을 따로쓴다.
<head>
<link href="styles.css" rel="stylesheet"/>
</head>
옆에 다른 요소가 올 수 없다.
block은 box이고 box의 속성 세가지는 margin, padding, border이다.
ex.div header main footer section article
단, 어떤 요소가 inline이면 그 요소는 높이와 너비를 가질 수 없다. 그래서 inline은 어떤 면이든 padding을 가질 수 없고 margin은 위아래는 가질 수 없다.
→inline에 위, 아래 margin 값을 주고 싶다면 block으로 바꿔줘야 한다.
이런 경우에 필요한게 display:block;
과 display:inline;
이다.
각각 inline은 block으로, block은 inline으로 바꿔준다.
box의 경계(border)의 바깥에 있는 공간.
body는 디폴트값으로 margin을 갖고있다.
margin값이 한개면 사방에, 2개면 순서대로 상하/좌우, 4개면 위에서부터 시계방향 순으로 할당된다.
요소(박스) 2개가 겹쳐져서 2개의 위아래 경계가 같다면, 이 두 margin은 하나로 취급되어 같이 움직인다.