3장 CSS3
2.1 CSS의 개념
- 스타일(style): HTML 문서에서 자주 사용되는 서체나 색상, 정렬, 각 요소들의 배치등의 유형
- 스타일시트(stylesheet): 스타일을 관리하기 쉽도록 한 곳에 모아놓은 것
- 기능: 선택자, 박스모델, 배경 및 경계선, 텍스트 효과, 2차원 및 3차원 변환, 애니메이션, 다중 컬럼 레이아웃, 사용자 인터페이스(UI)
2.2 CSS 작성 방법
(1) CSS 기본 구조
- 스타일시트의 위치
- 내부 스타일시트: 웹 페이지 안의 <head> 태그 안의 <style> ~ </style>에 css를 작성해 사용
- 인라인 스타일시트: 태그 안에 별도로 작성하여 사용
- 외부 스타일시트: 스타일시트를 별도의 파일(.css)로 저장한 후 사용
- <head> 태그 안에 파일을 연결하여 사용해야함
- <link type="text/css" rel="stylesheet" href="스타일시트이름.css">
- 문법: 선택자 { 속성:값; } 끝에 반드시 ;을 적어야함. 주석은 /* ~ */ 형식으로 사용
- 선택자: HTML 요소를 선택하는 부분
- 스타일 나열 방법: { } 안에 속성과 속성 값이 한 쌍으로 구성. ;로 구분해 여러 개 사용 가능. 가로로 한 줄 또는 한 줄에 속성 하나도 가능
- 타입 선택자: HTML 태그 이름을 사용. 문서 안에 특정 태그에 모두 적용됨. 태그 { 속성: 값; }
- 전체 선택자: 페이지 안에 모든 요소에 적용됨. * { 속성: 값; }
- 아이디 선택자: 특정한 요소를 선택. 아이디명 중복 불가. #아이디 { 속성: 값; }
- 클래스 선택자: 클래스가 부여된 요소를 선택. 중복 가능. 원하는 부분에만 특정 스타일 적용 가능함. 태그에 class 속성을 작성한 후에 사용가능함
태그.클래스 { 속성: 값; } 또는 .클래스 { 속성: 값; } - 선택자 그룹: 선택자를 쉼표로 분리하여 나열 가능
- 스타일 적용 규칙: 부모 요소로부터 상속 가능. id 스타일 > 클래스 스타일 > 태그 스타일 순으로 적용됨
(2) CSS의 속성
- CSS의 속성
| 특성 | 설명 |
| color | 텍스트 색상 |
| font-weight | 볼드체 설정 |
| padding | 요소의 가장자리와 내용 간의 간격 |
| font-size | 폰트의 크기 |
| backgroung-color | 배경색 |
| border | 요소를 감싸는 경계선 |
| font-style | 이탤릭체 설정 |
| background-image | 배경 이미지 |
| text-align | 텍스트 정렬 |
| list-style | 리스트 스타일 |
- 색상 표현 방법
| 방법 | 설명 |
| 이름으로 표현 | "색상이름" |
| 16진수로 표현 | #FF00FF |
| 10진수로 표현 | RGB(255, 0, 0) |
| 퍼센트로 표현 | RGB(100%, 0%, 0%) |
| RGBA | RGBA(255, 0, 0, 0.5) - 0.5는 투명도 |
- 텍스트 그림자
(3) CSS의 박스 모델
- HTML 요소들을 박스 형태로 그리는 것
- 박스는 배치, 색상, 경계, 등의 속성을 가짐
- 테두리 속성
- border-style
- border-width: 테두리 너비. 키워드나 크기 값
- border-color: 테두리 색상
- border: 테두리 스타일을 한번에 지정. top → right → bottom → left 순서로 적용됨
- border-radius: 둥근 경계선
'기초' 카테고리의 다른 글
| [기초] 8 - 자바스크립트 기초 (0) | 2020.04.27 |
|---|---|
| [기초] 7 - CSS 입문 (0) | 2020.04.24 |
| [기초] 5 - HTML 입문 (0) | 2020.04.22 |
| [기초] 4 - HTML 입문 (0) | 2020.04.21 |
| [기초] 3 - HTML 입문 (0) | 2020.04.20 |
