CSS(Cascading Style Sheet)란?
디자인에 최적화된 웹 페이지 마크업 언어입니다.
- 엘리먼트(Element)
웹 디자인의 최소 단위로, 하나의 객체를 의미합니다. 보통은 태그 하나를 지칭할 때 쓰이지만 반드시 태그만을 의미하지는 않습니다.
- 셀렉터(Selector)
선택자라고 불리기도 합니다. 셀렉터를 이용해 css에서 스타일을 적용시킬 대상을 지정할 수 있습니다.
하나의 엘리먼트 일 수도 있고 다수의 엘리먼트 일 수도 있습니다. 선택할 때는 태그, 클래스, 네임, 아이디를 이용합니다.
- 클래스(Class)
개발 언어에서의 클래스와는 다른 개념으로, html에서는 좀 더 한정적인 역할을 합니다. '학년' 혹은 '부서' 정도로 이해할 수 있습니다.
ex) 우리 부서 사람, 1학년 학생들
- 아이디(ID)
단 하나의 엘리먼트를 지칭하며, 절대 중복될 수 없습니다. 일종의 주민등록번호 입니다.
- 네임(Name)
클래스보다는 소수이지만, 단수 혹은 복수일수도 있는 단위입니다. 말 그대로 '이름' 입니다.
ex) 우리 학교 '김민지' 모두 모여라
CSS의 기본 구조
1. 인라인 추가 방식
<div 스타일시작옵션="스타일명:스타일변수;">
ex) <div style="border:1px;">2. 내부 선언 방식
<style>
div {border:1px}
</style>3. 외부 선언 방식(import)
<link rel="stylesheet" href="css파일이름">
ex) <link rel="stylesheet" href="shared_vars.css">엘리먼트 선언
- class
<div class="div_calss">- id
<div id="div_id">- name
<div name="div_name">클래스의 특성
여러개의 클래스를 가질 수 있다.
<div class="클래스명1 클래스명2 클래스명3">
ex) <div class="div_class1 div_class2 div_class3">
미선이네