#1. CSS 소개
• CSS란 무엇인가?
• CSS를 사용하는 이유
• CSS가 HTML과 작동하는 방식
#2. CSS 선택자
• 유형 선택자(Type selector)
• 클래스 선택자(Class selector)
• 아이디 선택자(ID selector)
• 전체 선택자(Universal selector)
• 속성 선택자(Attribute selector)
• 자손 선택자(Descendant selector)
• 자식 선택자(Child selector)
• 인접 형제 선택자(Adjacent sibling selector)
• 형제 선택자(General sibling selector)
• 의사 클래스 선택자(Pseudo-class selector)
• 선택자의 우선순위
CSS(Cascading Style Sheets)에는 많은 속성들이 존재합니다.
아래는 CSS의 일부 주요 속성들의 목록입니다.
원하는 속성에 대한 자세한 정보는 CSS 문서나 관련 자료를 참조하시기 바랍니다.
#3. CSS Box Model 속성
• margin
• padding
• border
• width
• height
#4. CSS Text 속성
• font-family
• font-size
• font-weight
• color
• text-align
• text-decoration
• text-transform
#5. CSS Background 속성
• background-color
• background-image
• background-repeat
• background-position
• background-size
#6. CSS Layout 속성
• display
• float
• clear
• position
• top
• right
• bottom
• left
#7. CSS Flexbox 속성
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
▷ 참고: 한 장으로 정리하는 Flex Box
#8. CSS Grid Layout 속성
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end
▷ 참고: 한 장으로 정리하는 Grid Box
#9. CSS Transformation 속성
• transform
• translate
• rotate
• skew
• scale
#10. CSS Transitions과 Animations 속성
• transition
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• animation
• @keyframes
#11. CSS의 색상 이해
• Hexadecimal (hex)
• RGB (Red, Green, Blue)
• RGBA (Red, Green, Blue, Alpha)
• HSL(Hue, Saturation, Lightness)
• HSLA (Hue, Saturation, Lightness, Alpha)
#12. 미디어 쿼리를 사용한 반응형 웹 디자인