CSS?
CSS는 웹사이트이 실제 표현되는 방법을 기술하기위한 스타일 언어(style sheet language)이다.
요소의 브라우저 스타일링인 가장 위에서부터 순차적으로 스타일링이 적용되는 모습을 따라 Cascading Style Sheets라고 지었다. CSS는 Cascading Style Sheets의 약자이다.
순차적으로 스타일링? (Cascading Styling)
cascade
1. [명사] 작은 폭포
2. [명사] 폭포처럼 쏟아지는 물
3. [동사] 폭포처럼 흐르다
4. [동사] 격식 풍성하게 늘어지다(매달리다)출처: 네이버 사전
✅ 예시
<p class="text lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
위의 예시에서 <p>는 다음과 같은 순차적인 스타일링이 적용된다.
1. <p>태그에 대한 사용자 브라우저 스타일
2. p {} 타입 선택자의 스타일
3. .text {}
4. .text.lorem {}
css 문법
css는 다음과 같은 문법으로 작성한다.
selector(선택자) : { property(속성): value(값); }
✅ 예시
a{ background-color: orange; }CSS의 기본 개념
initial value
- initial value(초기값), 각각의 속성마다 기본으로 지정되어있는 초기값이 존재한다.
- value에
initial을 넣으면 속성의 기본값이 적용된다.
각 속성의 initial value
initial value는 속성의 값을 따로 주지 않았을 때 자동으로 지정된다.
- margin: initial => 0
- width: auto => 부모 너비 기준으로 가득찬다.
- height: auto => 자식요소 기준으로 조절된다.
- box-sizing: content-box
inheritance
- inheritance(상속), 부모에게 지정된 몇몇의 속성이 자식요소에게 값이 전달된다.
- value에
inherit을 넣으면 해당 속성은 부모의 값을 받아와 적용한다.
User-agent Stylesheet
- 사용자가 사용하는 브라우저의 기본 스타일로 브라우자가 각각 태그에 미리 지정한 스타일이다.
- 원하는 스타일을 적용하기 위해 해당 요소의 브라우저 스타일링이 적용되지 않은 모습으로 만들기 위한 reset.css이 있다.
Box-model
요소가 브러우저에 렌더링 될 때 box 모양으로 표현된다.
- content: 실질적인 텍스트, 이미지가 들어가는 영역이다.
- width(너비), height(높이)로 크기를 지정한다.
- 이때 width와 height에 값을 지정해 주지 않으면 auto로 정해지며,
width는 부모요소 기준으로 가득차고 height는 자식요소 기준으로 적용된다.
- padding: 안쪽 여백으로 width, height에 padding 값이 더해진다.
- border: content와 padding을 감싸는 테두리로 width, height에 border-width 값이 더해진다.
- margin: 바깥여백으로 인근 요소와의 여백을 줄 수 있다.
margin의 auto 값
사용할 수 있는 남는 공간을 자동으로 여백으로 지정한다.
box-sizing 속성
- content-box
box-sizing 속성의 기본 값으로 width, height, padding, border 값으로 요소의 크기가 정해진다. - border-box
요소의 크기가 width, height의 값으로 지정된다.
padding, border에 값을 주어도 요소의 크기는 지정한 width, height의 값으로 유지된다.
Selectors(선택자)
- 전체 선택자(Universal Selectors): 모든 요소에 스타일을 적용한다.
* {
} - 타입 선택자(Type Selectors): 해당 요소에 스타일을 적용한다 =>
요소{}
div {
}- 클래스 선택자(Class Selectors)
요소에 지정한 클래스 이름으로 스타일을 적용한다. =>요소.클래스명{}
요소를 생략하고 클래스 명만 적을 수 있다. =>.클래스명{}
div.wrapper {
}
.wrapper {
}- 하위 선택자(Descendant Selectors)
부모요소 다음에 공백(
이때 공백은 자손결합자(Descendant Combinator)로 이외의 다른 결합자도 있다.
div h2 {
} selector specificity(CSS 명시도)
css는 얼마나 구체적인지에 대한 우선순위를 정하여 해당 속성에 우선순위가 가장 높은 선택자가 적용된다.
명시도 점수
명시도에 대한 점수는 다음과 같다.
(0,0,0) 전체 선택자 => *
(0,0,1) type 선택자 => div, p, ul...
(0,1,0) class 선택자 => .class-name
(1,0,0) id 선택자 => #idName
(1,0,0,0)< div style="">태그에 바로 스타일을 적용하는 경우
(1,0,0,0,0) !important
- 명시도가 동일하다면 마지막에 쓴 스타일이 적용된다.
- 명시도에 대한 우선 순위 점수는 (금, 은, 동)이런식으로 생각하면 이해하기 쉽다.
- 전역 선택자(*), 조합자(+, >, ~, ' ', || ) 및 부정 의사 클래스(:not())는 명시도에 영향을 주지 않는다.
element따른 표현 방식
Block-level elements
블럭레벨요소는 box-model이 적용된다.(div, p, ul, li...)
Inline elements
인라인 요소는 box-model이 부분적으로 적용된다.(span, i, em, strong...)
- width, height: 적용 안됨
- margin
- 상하: 적용 안됨
- 좌우: 적용 됨
- padding
- 상하: 적용되지만 부모의 공간을 넘는다.
- 좌우: 적용됨
- border: 적용되지만 요소가 다음 줄로 넘어가면 테두리가 또 생긴다.Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis consequuntur rerum facere soluta, cupiditate animi asperiores a autem ipsum odit laborum nostrum voluptate doloremque natus veniam fugiat at odio! Perspiciatis.
display: inline-block;
block과 inline의 장점을 가지고 있는 display속성의 값이다.
- inline
- 컨텐츠 영역에 들어가는 양만큼 넓이 값이 자동으로 조절된다.
- 부모요소의 text-align속성에 영향 받는다.
- vertical-align속성에 영향 받는다.
- block
- width, height값을 지정할 수 있다.
- box-model이 적용된다.
