CSS기초
CSS(Cascading style sheets)는 HTML과 함께 웹 표준의 기본 개념이다.
html이 문서의 뼈대를 만든다면 css는 뼈대에 디자인을 입히는 언어이다.
CSS는 위에 있는 속성보다 아래에 있는 속성이 먼저 적용된다는 특징이 있다.
CSS문법을 쓸 때에는 선택자가 가장 먼저 등장하고 그 다음 {}(중괄호)안에
속성과 속성값을 :(콜론)으로 구분하여 나열한다.
하나의 속성 선언이 끝나면 ;(세미콜론)으로 문장의 마침표를 찍어주어야 한다. [기본형]
선택자{
속성1 : 속성값;
속성2 : 속성값;
속성3 : 속성값;
속성4 : 속성값;
}스타일과 스타일시트
웹 문서에서 미리 만들어진 스타일 속성을 입력하여
웹 페이지를 디자인 하는 것을 '스타일'이라고 한다.
즉, css문법을 이용해서 속성과 속성값을 입력한 한 줄을 '스타일'이라고 한다.
스타일시트란 수많은 css속성과 값이 모인 하나의 문서를 뜻한다.
스타일시트는 사용하는 방법에 따라 크게 3가지로 나눠진다.1. 내부 스타일시트
html웹 문서에 <head>태그 안에 <style>태그를 이용해 css를 작성하는 방식을 말한다.
내부 스타일시트는 html코드와 css코드가 길어질 경우 작성과 수정이 불편하고,
파일크기가 커진다는 단점이 있어 잘 쓰이지는 않는다.2. 외부 스타일시트★
css문서를 만들고 css폴더에 따로 분리하여 html과 연결해 쓰는 방식을 말한다.
기본적으로 실무에서 가장 많이 사용되는 방식으로 문서관리가 편하고
수정이 편리하다는 장점이 있다.
외부 스타일시트를 만들었을때 link태그로 html파일과 연결할 수 있다.
link태그는 <head>안에 써야 하며 외부 문서(css, 파비콘 등)를 연결할 때 사용하는 태그이다.
[css파일을 html과 연결하는 link태그의 기본형]
<link rel="stylesheet" href="외부파일 경로" />
- rel : 연결하려는 파일의 형식을 지정하는 속성.
- href : 파일 경로3. 인라인 스타일
태그 내부에 style속성을 이용하여 직접 적용하는 스타일을 말한다.
인라인 스타일은 외부스타일 시트와 내부 스타일시트보다 우선순위가 높다.
우선순위가 높다는 말은 이 스타일이 가장 먼저 적용되어 브라우저에 보인다는 뜻이다.
우선순위가 높으면 다른 방식으로 코드 수정이 어렵기 때문에 인라인스타일은 쓰이지 않는다.
웹 초창기에 쓰이던 방식이다.스타일시트의 우선순위
1번 부터 가장 우선순위가 높다.
1. 인라인 스타일
2. 내부 스타일 시트
3. 외부 스타일 시트
Hi