Casacading Style Sheet의 줄임말로 Html이 페이지의 구조를 설계했다면 페이지의 스타일 담당하는 부분이다.
- 담당하는 내용
font / background-color / width,height ...etc
Html에 style을 적용하는 방법은 다양하다.
- 인라인 스타일: Html파일 안에서, 태그에 style속성을 직접 추가하기
- 스타일 태그: Html파일 안에서, style 태그를 분리해서 적용
- 문서 간의 연결 CSS 파일을 별도로 만들어, 필요한 Html 파일에 연결
처음에는 1,2번 방법으로 했다가 Html 파일이 너무 길어지고, 코드의 재사용과 유지보수가 어려웠다.
CSS의 속성들도 제대로 이해할 겸 복습을 해보자.
모든 요소들을 선택 적용
* { color : red; }
특정 tag에만 선택 적용
p { color : red; }
특정 class에만 선택 적용
.text { color : red; }
특정 id에만 선택 적용
#text { color : red; }
id는 고유한 식별자 기능으로 중복 사용이 불가능하다!!
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
쉼표(,)를 이용해 선택자를 그룹화한다.
h1, p, div { color : red; }
p { color : red; } //정의했는데
p { color : black; } //밑에서 또 정의한 경우 뒤에 것을 적용
p { color : red; }
#board { color : black; } //우선 순위에 따라 id 선택자에서 정의한 속성이 적용
- 선택자 우선순위
id 선택자 > class 선택자 > tag 선택자
* {
font-family : Times, monospace, serif; //여러개 지정시 우선순위 적용 가능!
font-size : 16px;// px,rem,em 단위가 있다.
text-aling : left; // left,right: 좌우정렬 center : 가운데 justify : 양끝 정렬
color : red;
}
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
div, p, h1
자기에게 필요한 만큼의 공간만 차지
span, a
해당 부분을 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의해 속성을 변경할 수 있다.
//블록 레벨 요소인 div 요소를 인라인으로 만들기
div { display: inline; }
//인라인 요소인 a 요소를 블록 레벨로 만들기
a { display: block; }
이외에 inline-block, none 등 다양한 요소들이 있다.
inline의 경우, content의 내용에 따라 자동으로 너비와 높이가 결정되므로 수정이 불가능하다. 이런 경우 inline-block으로 display속성을 변경해주면 설정이 가능하다
브라우저가 요소를 Rendering할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다.
이 영역을 'Box'라고 표현하며, CSS는 박스의 크기, 위치, 속성을 결정하게 된다.
- 콘텐츠 영역 (Content)
- 안쪽 여백 (Padding)
- 경계선(테두리) (Border)
- 바깥쪽 여백 (Margin)
해당 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.
너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있다!
콘텐츠의 배경을 정의
요소가 문서의 일반적인 흐름에서 제외되어, 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른족에 배치되게 한다.
문서의 흐름에서는 제외되지만, 필요한 만큼의 공간을 차지!
float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소의 아래로 내려가게 할 수 있다.
요소를 어떻게 배치할지 정의