1. 웹 문서를 디자인하는 스타일시트 언어
CSS(Cascading Style Sheets)는 HTML이나 XML 같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 스타일 시트 언어다. HTML이 문서의 구조와 콘텐츠를 정의한다면, CSS는 그 문서를 시각적으로 꾸미고 스타일을 지정하여 레이아웃을 제어한다.
1) 기본 구조
CSS는 주로 HTML 문서의 <head> 요소 안에서 <style> 태그를 사용하여 정의된다. 또는 외부 CSS 파일을 연결하여 사용할 수 있다.
2) 기본 구조인라인 스타일
<style> 요소 내부에 CSS 속성을 직접 입력할 수 있다.
3) 외부 CSS 파일
<link> 요소에 href 속성으로 css파일명을 입력하면 HTML 문서와 외부에 있는 CSS 파일이 연결된다.
스타일 속성이 많지 않다면 인라인 스타일로 작성할 수 있으나 일반적으로는 외부 CSS파일을 사용하는 것을 권장한다.
2. 선택자(Selectors)
CSS는 HTML 요소를 선택하기 위해 선택자를 사용한다. 선택자는 스타일을 적용할 대상을 지정한다.
1) class 선택자
- 사용법:
.클래스 - class 선택자는 여러 요소를 그룹화하고, 해당 그룹에 스타일을 적용한다. 하나의 요소가 여러 클래스를 가질 수 있으며, 여러 요소가 동일한 클래스를 가질 수 있다.
2) id 선택자
- 사용법:
#아이디 - ID 선택자는 문서 내에서 유일한 식별자를 가진 요소를 선택한다. HTML 문서 전체에서 동일한 ID를 가지는 두 개 이상의 요소가 있으면 안 된다. ID는 유일성을 보장하기 위해 사용된다.
3) 속성과 값
스타일을 지정하기 위해서는 속성과 값의 쌍을 사용한다.
4) 주요 스타일 속성
CSS는 다양한 스타일 속성을 제공한다. 몇 가지 주요 속성들은 다음과 같다
color: 텍스트 색상 지정background-color: 배경색 지정font-family: 글꼴 지정font-size: 글자 크기 지정margin,padding: 요소 주위의 여백 및 안쪽 여백 지정border: 테두리 지정width,height: 요소의 너비와 높이 지정display: 요소의 표시 방식 지정 (예:block,inline,flex등)
5)실습
오랜만에 하려니..어렵다..ㅠㅠ
UI/UX디자이너의 코딩 공부