CSS 의미, 정의

cascade styling sheet

cascade : 폭포. 작성한 값이 있다면 쓰고, 없다면 브라우저 기본값 등 다음 우선순위로 적용하는 방식이기 때문에 해당 단어를 쓴다.

우선순위 1 : Author style -> 개발자가 정의한것
우선순위 2 : User style -> 사용자가 지정한 스타일
우선순위 3 : Brower -> 브라우저 기본

예외: !important

cascade 순위를 무시하는 옵션인데, 위험할수 있으므로 잘 사용하지 않는다.

선택자(selectors)

어떤 html 태그를 쓸 것인지 규정하는 문법.
1. Universal(*) : 모든 태그들을 고름
2. type(Tag명) : 태그를 고름. div를 쓰면 div 태그를 다 고름
3. id(#id) : 해당하는 id만 고름
4. Class(.class) : 클래스는 .을 이용
5. State(:)
6. Attribute( [] ) : 해당하는 속성값들만 고름

/* 기본 css 문법
selector {
 property: value;
} */

/* universal. 모든 태그를 초록색으로 */
* {
	color: green;
}

/* type. 작성한 타입명 li(list)를 파란색으로 */
li {
	color: blue;
}

/* id 명 'special'을 지정하여 핑크색으로 */
#special{
	color: pink;
}
/* 동일 아이디 더라도 li에 해당하는 경우만 지정*/
li#special{
	color: pink;
}

/* class 명 'redclass'을 지정하여 노란색으로. 비어있으므로 div의 사이즈 지정. */
.red{
	width: 100px;
    height: 100px;
    background: yellow;
}

/* state. button에 ":"으로 hover 상태를 추가하여 마우스 오버시 빨간색으로 표시 */
button:hover{
	color: red;
    background: beige;
}

/* Attribute. 해당하는 ancher 태그 중 속성값이 href이고 naver로 시작하면 노란색으로 바꾼다. href$ = .com으로 뒤에 값지정도 가능 */ 
a[href^="naver"] {
	color: purple;
}

CSS 박스 모델(box-model)

position, margin, border, padding, content 순입니다. 바로 이게 박스 모델입니다. position은 없을 수도 있습니다.

1. content: 보통 태그가 차지하는 공간이 content

<span style="background: yellow">content</span>

2. padding: content 영역과 border(테두리) 사이의 공간
   padding에 10px를 주면 상하좌우 모두 10px의 패딩이 추가됨.
   오른쪽에만 패딩을 주고 싶다면 padding-right: 10px; 이렇게 해도 되고, padding: 0 10px 0 0; 이렇게 해도 됨
   스크롤바는 padding 공간 안에 생성

<span style="background: yellow; padding: 10px;">content</span>

3. border: border은 테두리. padding이 없어도 border는 있을 수 있기 때문에 padding을 넣지 않을 수도있음

<span style="background: yellow; padding: 10px; border: 1px solid black">border with padding</span>
<span style="background: yellow; border: 1px solid black">border without padding</span>

4. margin: margin은 다른 태그와의 거리

<span style="background: yellow; margin: 10px">left</span>
<span style="background: green">right</span>

정리, 주의점

1. 위 오른쪽 아래 왼쪽(top right bottom left) 순으로 속성값을 준다.
2. box-sizing: content-box
   - 기본값. width와 height는 content의 너비이다.
   padding과 border, margin이 width에 포함되지 않는다.
   - 만약 width가 50px, height가 30px이고
   padding이 10px, border가 10px이면,
   실제로 화면에서 width는 90(50 + 20 + 20)px, height는 70(30 + 20 + 20)px 로 보일것이다.
3. box-sizing: border-box
   padding과 border이 width에 포함된다. margin은 포함되지 않는다.