CSS란? (Cascading Style Sheets)
- HTML문서의 스타일을 지정하는데 사용하는 언어
기본 문법
Selector{
Property: Value;
Property: Value;
....
}
✅ 용어 설명
-Selector : 선택자로 html문서의 각 요소들을 선택
- Property: 요소에 적용될 스타일 속성을 의미
- Value : 해당 속성의 값을 의미
예시)
h2 태그에 색상은 레드, 글자 크기는 15px로 설정 (구분자로 ; 세미콜론 사용)
h2{ color:red; font-size:15px; }
✅ CSS 주석 표기 방법
- 주석을 표시할 때는 /* ~ */ 사이에 내용을 입력하여 주석을 표시한다.
✅ 스타일 시트
적용 우선순위 : 인라인스타일 > 내부스타일 > 외부스타일 > 브라우저 기본 스타일
1. 브라우저 기본 스타일
- CSS를 전혀 사용하지 않는 웹 브라우저라고 하더라도 표시되는 스타일이 존재하는데 이것을 브라우저 기본 스타일이라고 한다.
2. 사용자 스타일( 인라인, 내부, 외부 )
1)인라인 스타일 (각 태그 안에서 적용)
- 간단한 스타일의 정보라면 따로 파일이나 구간을 정하지 않고 표시할 대상에게 직접표시를 한다.
- 원하는 부분만 간편하게 적용할 수 있는 장점이 존재한다.
- HTML코드와 구분을 두고 있지 않기 때문에 스타일을 한눈에 보기 힘들다.
<h2 style="속성:속성값;"> 안녕 </h2>
2)내부 스타일 (스타일을 HTML코드 안에 적용)
- 문서 안에서 사용할 스타일을 따로 선언하여 문서 안에 정리하여 사용한다.
- <head>태그 안에서 보통 정의하여 사용한다.
- <style> ~~ <style> 안에 내용을 적는다.
- 따로 HTTP요청을 발생시키지 않으나 HTML코드와 스타일 코드가 함께 공존하기 때문에 혼용되어 가독성이 다소 떨어질 수 있다.
<style>
h2{ 속성:속성값; }
<style>
3)외부 스타일 (스타일을 따로 파일로 저장 후 적용)
- CSS스타일 시트를 독립적으로 다른 파일에 저장한 후 필요한 HTML 문서에서 불러와 실행시키는 방법이다.
- CSS와 HTML이 분리되어있어서 CSS를 관리하기 용이하지만 HTTP요청을 하나 이상 무조건 발생해야한다는 단점도 존재한다.
- *.css 라는 파일 확장자 명을 사용한다.
- 외부 스타일시트 파일에 스타일을 작성할 때에는 <style>태그를 따로 선언해주지 않고 바로 코드를 작성한다.
- 외부 스타일 시트를 연결할때는 <link>태그를 사용한다.
<link rel="stylesheet" href="외부스타일 시트 경로">