CSS란?
HTML문서의 색이나 모양 등 외관을 꾸미는 언어
CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다
CSS의 기능
- 색상
- 배경
- 텍스트
- 폰트
- 박스모델
- 비주얼 포맷 및 효과
- 리스트
- 테이블
- 사용자 인터페이스
CSS 작성방법
대소문자 구분없이 작성 가능하다
셀렉터 {프로퍼티 : 값; 프로퍼티 : 값;} /* CSS의 주석처리 */- 셀렉터 : CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름
- 프로퍼티 : 스타일 속성의 이름 (약 200개)
- 값 : 프로퍼티에 해당하는 값
- 주석 : 아무 위치에나 사용 가능
CSS 적용방법 3가지
1. 인라인 스타일 (Inline style)
HTML요소 내부에 style 속성을 사용하여 스타일을 적용
스타일은 해당 HTML요소에만 적용된다
<태그이름 style = "속성이름 : 속성값; 속성이름 : 속성값;">2. 내부 스타일 시트 (Internal style sheet)
<head>태그 내부에 자식으로 <style>태그를 사용하여 CSS 스타일을 적용
스타일은 해당 문서에만 적용된다
<head>
<style>
셀렉터 {
프로퍼티 : 값;
프로퍼티 : 값;
}
</style>
</head>3. 외부 스타일 시트 (External style sheet)
확장자가 ' .css' 인 스타일 시트 파일을 생성하고,
웹 페이지에서 CSS3 스타일 시트 파일을 불러와서 사용한다
<style> 태그는 사용하지 않는다
장점)
웹 페이지 전체 모양의 일관성 확보
동일한 스타일 시트를 웹 페이지마다 적용 가능
외부스타일 시트를 불러오는 방법
-
<link> 태그 사용하기
<head> 태그 내부에 작성한다
- href : 불러올 파일의 경로
- type : 불러오는 파일의 타입 (css언어로 작성된 text파일)
- rel : 스타일 시트를 삽입
<head>
<link href="css파일의 경로" type="text/css" rel="stylesheet">
</head>-
@import 사용하기
3가지 입력방식 중 무엇을 사용해도 된다
<head>
@import url(style.css);
@import url('style.css');
@import "style.css";
</head>[새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅]
프론트엔드