CSS는 Cascading Style Sheets: 종속된 스타일 형식
웹 페이지의 디자인과 레이아웃을 구성하는 데 사용되는 스타일 시트 언어
Cascading: 위에서 아래로 흐르는, 상속 또는 종속하는
Style: HTML 문서의 겉모습(디자인)을 결정짓는것
>> HTML요소의 형태, 색, 정렬, 배치 등을 제어
스타일시트를 사용하는 이유
1) 웹 문서의 내용과 상관없이 디자인만 변경 가능
>>내용을 수정해도 디자인엔 전혀 영향 없음
2) 다양한 기기에 맞게 탄력적으로 바뀌는 문서 제작 가능
>>CSS를 이용하면 HTML로 작성한 내용은 그대로 두고 기기에 맞게 CSS만 바꿔주면 같은 내용을 여러 기기에서 볼 수 있음
3) 반응형 웹 디자인
>>사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법
CSS Style 형식
선택자 { 속성1: 속성값, 속성2: 속성값}
>>스타일 규칙: 속성과 값이 하나의 쌍으로 이루어짐
>> 세미콜론(;)으로 구분하여 스타일 규칙을 여러 개 지정 가능
선택자: 스타일을 어느 태그에 적용할 것인지 지정
중괄호{} 사이에 스타일 정보 입력
CSS 주석
/* */
css에서 주석은 한 줄 또는 여러 줄을 입력할 수 있음
CSS Style Sheets
스타일 시트란? 스타일 규칙을 한눈에 확인하고 필요할때마다 수정하기 쉽도록 한군데 묶어둔것
브라우저 기본 스타일
>>웹 문서에 기본으로 설정된 스타일 값
사용자 스타일
1) 인라인 시트
태그 옆에 style="속성: 값;"을 직접 표기하여 적용
2) 내부 스타일 시트
웹 문서 안 <head>태그 안에 <style> @ </style>사이에 작성
3) 외부 스타일 시트
웹 문서 밖 .css 확장자 파일에 작성하고, link 태그를 통해 웹 문서에 연결
단, 이때 style 태그는 사용하지 않는다
'frontend > css' 카테고리의 다른 글
| CSS.06. Box Model (0) | 2025.04.10 |
|---|---|
| CSS.05. Values & Units (0) | 2025.04.10 |
| CSS.04. Text Style (0) | 2025.04.09 |
| CSS.03. 선택자(Selectors) (0) | 2025.04.02 |
| CSS.02. Cascading (0) | 2025.04.02 |