3 LEARNING CSS
3.0 How to Add CSS to HTML
- HTML에 css파일을 적용시키는 방법은 두가지가있다
- 첫번째는 같은 html파일에 html코드와 css코드를 놓는 방법
- 두번째는 css를 파일을 만들고 link태그로 연결한다.
selectors가르키는 대상{
property속성:value값;
}
3.1 Writing Our First CSS Lines
- CSS가 하는 일은 HTML 태그를 가리키는 일이다
- CSS 작성에선 띄어쓰기를 하지 않는다.
- font-size:20px; 과 같이, 속성 다음 콜론(:), 값 다음 세미콜론(;)으로 닫아줘야 한다.
- 속성이름:속성값;
- css 또한 어떤 값이든 쓸 수 있다. 하지만 속성에 맞는 값을 써야 브라우저에서 적용이 된다.
- css 또한 모든 속성을 일일이 다 기억할 필요 없다. 기본적으로 어떻게 동작하는지만 기억하면 된다.
3.2 What Does Cascading Mean
- 브라우저는 css를 읽을 때 위에서부터 순서대로 읽는다
-CSS를 직접 적는 것을 inline CSS, CSS 파일을 include 하는 것을 external CSS라고 한다.
- 만약 같은 selector를 가리키는 CSS가 여러개이면, 가장 마지막 스타일이 적용된다
3.3 Blocks and Inlines
- div는 옆에 다른 div가 오지 않는다.
- span은 옆에 다른 span이 올 수 있다.
- link는 옆에 올 수 있다.
- p는 옆에 올 수 없다.
- 옆에 다른 요소가 못 오는걸 block
- 올 수 있는걸 inline라고 한다. (in the same line)
- inline의 대표적인 태그 span, link, img
3.4 Margin Part One
- block의 특징 (inline에는 없음)
- inline block 서로 바꿀 수 있다. (display속성이라고 함)
- 어떤 요소가 inline 이면, 높이와 너비를 가질 수 없다.
- block는 높이와 너비가 있다.
- block의 특징 margin, padding, border
- 브라우저는 기본적으로 style 속성을 준다.
- margin - 경계의 바깥에 있는 공간 (border보다 바깥)
3.5 Margin Part Two
- 방향 설정 없이 margin 하나를 주면 사방에 전부 다 적용된다.
두 개를 줄 경우 상하, 좌우 이다.
네 개를 줄 경우 시계방향 순으로 적용된다. (상 우 하 좌)
Collapsing margin 현상 (상하에서만 발생함)
div margin이 body margin과 같을 때 발생하고 body 와 div margin은 하나로 취급된다.
