1. CSS의 특징
캐스케이딩(Cascading)
'캐스케이딩'은 CSS의 핵심 개념으로 스타일 규칙이 계단식으로 적용되고 상속된다는 의미입니다.
- 스타일 충돌 방지를 위한 우선순위 적용
- 부모 요소의 스타일이 자식 요소에 상속됨
CSS 스타일 우선순위
CSS에서는 여러 스타일이 충돌할때 어떤 스타일을 적용할지 결정하는 우선순위가 있습니다.
- !important
- 인라인 스타일
- 아이디 스타일
- 클래스 스타일
- 태그 스타일
같은 우선순위일 경우 나중에 작성된 스타일이 적용됩니다.
스타일 상속
대부분의 스타일은 부모 요소에서 자식 요소로 상속됩니다. 단, 배경색,배경 이미지,border 등은 상속되지 않습니다.
2. CSS 단위
CSS에서는 크기를 지정할 때 다양한 단위를 사용할 수 있습니다.
절대 단위
- px (픽셀)
- pt (포인트)
- cm (센티미터)
- mm (밀리미터)
- in (인치)
상대 단위
- % (퍼센트)
- em (부모 요소의 폰트 크기 기준)
- rem (루트 요소의 폰트 크기 기준)
- vw (뷰포트 너비의 1%)
- vh (뷰포트 높이의 1%)
3. 색상 표현 방식
CSS에서 색상을 표현하는 방법은 여러 가지가 있습니다
- 색상 이름 : red , blue , green 등
- HEX 코드 : #FF0000 (빨강)
- RGB : rgb(255,0,0) (빨강)
- RGBA : rgba(255,0,0,0.5) (50% 투명한 빨강)
4. 텍스트 스타일링
CSS를 사용하여 텍스트의 다양한 속성을 조정할 수 있습니다.
font-family : 글꼴 지정
font-size : 글자 크기 지정
font-weight : 글자 굵기 지정
font-style : 글자 스타일 지정
color : 글자 색상 지정
text-align : 텍스트 정렬
text-decoration : 텍스트 장식
line-height : 줄 간격
5. 목록 스타일링
CSS를 사용하여 목록의 모양을 커스터마이즈 할 수 있습니다.
list-style-type : 목록 기호 지정
list-style-image : 이미지를 목록 기호로 사용
list-style-position : 목록 기호의 위치 지정
6. 표 스타일링
CSS를 사용하여 표의 모양을 조정할 수 있습니다.
border : 테두리 지정
border-collapase : 셀 테두리 합치기
border-spacing : 셀 간격 지정
7. 배경 스타일링
CSS를 사용하여 요소의 배경을 다양하게 꾸밀 수 있습니다.
background-color : 배경색 지정
background-image : 배경 이미지 지정
background-repeat : 배경 이미지 반복 설정
background-size : 배경 이미지 크기 조절
background-position : 배경 이미지 위치 조정
background-attachment : 배경 이미지 스크롤 설정
8. 웹 폰트 사용하기
Google Fonts와 같은 서비스를 이용해 웹 폰트를 쉽게 적용할 수 있습니다.
아니면 CSS 파일 내에서
9. 전환 효과 (Transition)
- 정의 : CSS에서 요소의 스타일 속성값을 다른 값으로 변경하는 것을 의미합니다.
- 주요 속성 :
- transition-property : 전환 효과를 적용할 속성을 지정합니다.
ex) transition-property : background-color; - transition-duration : 전환 효과의 지속 시간을 설정합니다.
ex) transition-duration : 1s; - transition-delay : 전환 효과가 시작되기까지의 지연 시간을 설정합니다.
ex) transition-delay : 0.5s; - transition-timing-function : 전환 효과의 진행 속도를 제어합니다.
- linear : 일정한 속도
- ease : 처음 빨라졌다가 느려짐
- ease-in : 처음 느리다가 빨라짐
- ease-out : 처음 느리다가 빨라짐
- ease-in-out : 처음 느리다가 빨라졌다가 다시 느려짐
- cubic-bezier(p1,p2,p3,p4) : 사용자가 설정한 속도로 진행
- transition-property : 전환 효과를 적용할 속성을 지정합니다.
- 축약 속성 : 모든 전환 효과 속성을 한 번에 설정할 수 있습니다.
- 예 : transition : all 1s ease;
애니메이션 (Animation)
- 정의 : CSS3에서 추가된 속성으로 전환 효과보다 더 정밀하고 부드럽게 제어할 수 있습니다.
- 주요 속성 :
- @keyframes : 애니메이션의 변화 지점을 설정합니다.
- animation-name : 지정된 @feyframes 이름을 사용합니다.
- animation-duration : 애니메이션의 실행 시간을 설정합니다.
- animation-delay : 애니메이션의 시작 시간을 지정합니다.
- animation-iteration-count : 애니메이션 반복 횟수를 설정합니다.
- animation-direction : 애니메이션이 완료된 후 방향을 설정합니다.
- animation-direction : 애니메이션이 완료된 후 방향을 설정합니다.
- animation-timing-function : 키프레임 전환 형태를 설정합니다.
- animation : 모든 애니메이션 속성을 한 번에 설정합니다.
변형 효과 (Transform)
- 정의 : 요소의 크기 , 위치, 회전 등을 변경하는 속성으로 CSS3에서 추가되었습니다.
- 2D 변형 : 요소를 2차원에서 변형하는 다양한 함수 사용.
- 3D 변형 : 3차원에서의 변형도 가능하며 다양한 함수가 제공됩니다.