CSS 란?
웹 브라우저가 읽을 수 있는 언어는 HTML,CSS,JS 세가지 언어 뿐이다.•
HTML 은 문서 구조를 담당한다.
•
CSS 는 단순한 문서 형태인 HTML 을 예쁘게 꾸며주고 구조를 잡아준다.
◦
페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아준다.
CSS 기본 용법
CSS 를 작성하는 방법
•
CSS 구분은 선택자(Selector), 선언(Declaration) 으로 구분된다.
◦
선택자 : 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정한다.
◦
선언 : 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정한다.
▪
속성(property) : 적용하고자 하는 스타일의 종류
▪
속성 값(property value) : 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정한다.
CSS 적용 방식1.
inline style 작성하기
•
해당 태그에 직접 style 속성을 추가 해 주는 것이다.
•
간편하지만 가독성이 떨어지며, 유지보수가 어렵다.
2.
<style> 태그 사용하기
•
HTML 파일의 head 부분에 style 태그를 추가하는 것이다.
•
나중에 적용되는 스타일이 많아지면 유지보수가 어렵다.
3.
CSS 파일 분리하기
•
<link> 태그로 연결해준다.
•
href : 참조할 css 파일 경로를 적어준다.
•
rel : 해당 파일과의 관계이며 stylesheet 라고 적어준다.
•
type : link 태그로 연결되는 파일이 무엇인지 알려준다.
CSS 선택자
태그 선택자/* 태그 선택자 사용방법 */
태그 {
property : property value;
}
CSS
복사
id 선택자/* id 선택자 사용방법 */
# id {
property : property value;
}
CSS
복사
class 선택자/* class 선택자 사용방법 */
.class {
property : property value;
}
CSS
복사
부모 자식 선택자, 다중 선택자•
자손 선택자
/* 자손 선택자 사용방법 - 선택자 1 안에 있는 선택자 2 를 선택한다. */
선택자1 선택자2 {
속성 : 속성값
}
CSS
복사
•
다중 선택자
여러개의 선택자를 공백 없이 연결하면 다중 선택자로 사용할 수 있다.
다중 선택자는 중첩된 선택자들을 모두 만족하는 요소를 선택한다.
/* 다중 선택자 사용방법 */
선택자1선택자2 {
속성 : 속성값
}
CSS
복사
폰트 기본스타일
폰트 스타일 | 설명 |
font—size | 폰트의 사이즈를 조절하는 속성이다. |
font-weight | 폰트의 굵기를 조절하는 속성이다. |
font-style | 글자의 모양을 정하는 속성으로 기울임 여부를 정한다. |
text-decoration | 텍스트에 장식용 선을 추가한다. |
color | 폰트의 색상을 변경해주는 속성이다. |
박스 모델
박스 모델박스 모델 | 설명 |
content | 요소의 실제 내용이 차지하는 영역 |
padding | 내용과 테두리 사이의 간격, 내부 여백에 해당한다. |
border | 내용가 패딩을 감싸는 테두리 |
margin | 테두리와 이웃하는 요소 사이의 간격, 외부 여백에 해당한다. |
box-sizing | 요소의 너비와 높이를 계산하는 방법을 지정한다. |
box-sizing•
box-sizing 속성
◦
content-box : content 영역을 기준으로 box 의 size 를 적용
◦
border-box : Border 영역을 기준으로 box 의 size 를 적용
•
inline 요소 vs block 요소
◦
block 요소
▪
블록 요소를 여러개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
▪
좌우 양 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
◦
inline 요소
▪
여러개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
▪
태그에 할당된 공간 만큼의 너비만 차지한다.