[CSS] Learn CSS by myself from W3school 1
1. What is CSS?
- Cascading Style Sheets를 위한 표준이다.
- 어떻게 HTML 요소들이 스크린에 보여지는지 설명한다.
- 한번에 다양한 웹 페이지들의 레이아웃을 관리할 수 있기 때문에 많은 작업을 줄여준다.
- 외부 스타일시트를 저장한다.
2. Syntax 문법
- the id Selector 아이디 선택자 : ‘#’ + 아이디
- the class Selector 클래스 선택자 : ‘.’ + 클래스명
- the element Selector 요소 선택자 : 요소명 (e.g. p, h1, div, body, …)
@ CSS 삽입 방법
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<head>
<style>
body {
background-color: linen;
}
</style>
</head>
<h1 style="color: blue;">This is a heading</h1> /* Inline style */
@ Cascading Order 우선 순위 적용
- Inline style
- Head에 선언된 스타일
- 브라우저
@ Colours : RGB’A’를 사용하면 투명도 opacity 까지 설정할 수 있다.
3. Backgrounds 배경
- background-image 속성의 기본값은 수직적, 수평적으로 반복한다.
background-repeat: repeat-x;를 적용하면 수평적으로만 반복한다.
4. Box Model 박스 모델
@ 특이사항
- outline 은 border보다 바깥에 있으면서 margin보다 안에 있다.
- outline-offset 속성은 outline과 border 사이에 빈 공간을 만든다.
5. Tables 테이블
- tr : table row / th : table head / td : table column
6. Display 디스플레이
- Block-level Elements : div, h1~h6, p, form, header, footer, section
- Inline Elements : span, a, img (
display: block;으로 block-level처럼 보이게 할 수 있다. ) #### display: none;: 해당 요소에 포함된 것이 마치 원래 없었던 것처럼 보인다.visibility: hidden;: 해당 요소에 포함된 것이 보이지는 않지만, 공간은 그대로 차지한다.
7. Viewport 뷰포트
- 웹 페이지의 사용자 가시 영역으로, 장치의 화면에 맞게 전체 웹 페이지를 축소/확대할 수 있다.
- 사용법 ```javascript
```
- 따라야 할 규칙
- 큰 값으로 넓이 요소를 고정하지 않는다.
- 렌더링을 잘하기 위해 content를 특정 뷰포트 넓이에 의존하지 않도록 한다.
- 크고 작은 스크린에 맞는 서로 다른 스타일을 적용하는 CSS 미디어 쿼리를 사용한다.