본문 바로가기

CSS10

[CSS] CSS 속성 - 전환(transition), 변환(transform) 전환 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition: 속성명 지속시간(필수) 타이밍함수 대기시간; transition-property 전환 효과를 사용할 속성 이름을 지정 기본값 all 모든 속성에 적용 transition-duration 전환 효과의 지속시간을 지정 기본값 0s 전환 효과 없음 transition-timing-function 전환 효과의 타이밍(Easing) 함수를 지정 기본값 ease 느리게 - 빠르게 - 느리게 linear, ease-in, ease-out, ease-in-out transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정 기본값 0s 대기시간 없음 변환 transform transform: 변환함수1 .. 2023. 1. 18.
[CSS] CSS 속성 - 배치(position), 플렉스(flex) 배치 position 요소의 위치 지정 기준 기본값 static 기준 없음 relative 요소 자신을 기준 absolute 위치 상 부모 요소를 기준 fixed 뷰포트(브라우저)를 기준 position 속성의 값으로 absolute, fixed가 지정된 요소는, display 속성이 block으로 변경됨 요소 쌓임 순서(Stack order) 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정 1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외) 2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임. 3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임. z-index 요소의 쌓임 정도를 지정 기본값 .. 2023. 1. 18.
[CSS] CSS 속성 - 글꼴(font), 문자(text), 배경(background) 글꼴 font-style 글자의 기울기 기본값 normal 기울기 없음 italic 이텔릭체 font-weight 글자의 두께(가중치) 기본값 normal, 400 기본 두께 bold, 700 두껍게 100 ~ 900 100단위의 숫자 9개, normal과 bold 이외 두께 font-size 글자의 크기 기본값 16px 기본 크기 line-height 한 줄의 높이, 행간과 유사 요소의 글꼴 크기의 배수로 지정 font-family font-family: 글꼴1, "글꼴2", ... 글꼴계열 문자 color 글자의 색상 기본값 rgb(0,0,0) 검정색 text-align 문자의 정렬 방식 기본값 left 왼쪽 정렬 text-decoration 문자의 장식(선) 기본값 none 장식 없음 text-in.. 2023. 1. 18.
[CSS] CSS 속성 - 박스 모델 (width, height, margin, padding, border, box-sizing, overflow, display, opacity) width, height 요소의 가로/세로 너비 기본값 auto max-width, max-height 요소가 커질 수 있는 최대 가로/세로 너비 기본값 none min-width, min-height 요소가 작아질 수 있는 최소 가로/세로 너비 기본값 0 단위 px : 픽셀 % : 상대적 백분율 (부모 자식) em : 요소의 글꼴 크기 (글꼴 크기가 12px면 1em = 24px) rem : 루트 요소(html)의 글꼴 크기 vw : 뷰포트 가로 너비의 백분율 vh : 뷰포트 세로 너비의 백분율 margin 요소의 외부 여백(공간)을 지정하는 단축 속성 기본값 0 auto : 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용 margin-top margin-bottom margin-left margi.. 2023. 1. 18.

티스토리툴바