dash-case (kebab-case) the-quick-brown-fox-jumps-over-the-lazy-dog - 주로 사용 : html, css - 단어들을 하이픈(-) 으로 이어서 한 단어로 인식한다. snake_case the_quick_brown_fox_jumps_over_the_lazy_dog - 주로 사용 : html, css - 단어들을 언더바(_) 로 이어서 한 단어로 인식한다. camelCase theQuickBrownFoxJumpsOverTheLazyDog - 주로 사용 : javaScript - 첫 단어의 첫 번째 글자는 소문자, 이어지는 단어들의 첫 번째 글자는 대문자로 작성한다. PascalCase TheQuickBrownFoxJumpsOverTheLazyDog - 주로 ..

transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition: 속성명 지속시간 타이밍함수 대기시간; /* 지속시간: 단축형으로 작성할 때, 필수 포함 속성임 */ div { width: 100px; height: 100px; background-color: blue; transition: 1s; /* 1초, 전환효과가 지속되는 시간 */ } div:active { width: 300px; background-color: pink; } transition-property 전환 효과를 사용할 속성 이름을 지정한다. - 기본값 : all (모든 속성에 적용) - 속성 이름 : 전환 효과를 사용할 속성 이름 명시 div { width: 100px; height: 100px; bac..

transform 요소의 변환 효과 transform: 변환함수1 변환함수2 변환함수3...; transform: 원근법 이동 크기 회전 기울임; 2D 변환 함수 1. translate 이동 / px 단위 사용 - translate(x, y) : 이동 (x축, y축) - translate(x) : 이동 (x축) - translate(y) : 이동 (y축) transform: translate(40px, 40px); transform: translateX(40px); 2. scale 크기 / 단위 없음 (배수 사용) - scale(x, y) : 크기(x축, y축) - scale(x) : 크기(x축) - scale(y) : 크기(y축) 한쪽 축만 명시하면 찌그러질 수 있기 때문에 보통은 크기 제어 시 x, ..

flex (정렬) .parent { display: flex; } display: flex 가 부여된 요소를 container, container 의 자식 요소를 item 이라고 부른다. 또한 flex 는 container, item 에 부여하는 속성들이 각각 나누어져 있다. Flex Container 1. display Flex Container 의 화면 출력(보여짐) 특성 (1) flex : 블록 요소와 같이 Flex Container 정의 요소가 수직으로 쌓인다. 부모 요소의 크기만큼 width 가 자동으로 늘어난다. 자신이 포함하고 있는 콘텐츠의 크기만큼 height 가 자동으로 줄어든다. width, height 가 지정한대로 적용된다. margin, padding 이 정상적으로 적용된다. 자식..

position 요소의 위치 지정 기준 - 기본값: static (기준 없음) - relative: 요소 자신을 기준으로 함 - absolute: 위치 상 부모 요소를 기준으로 함 - fixed: 뷰포트를 기준으로 함 - sticky: 스크롤 영역을 기준으로 함 position 과 같이 사용하는 CSS 속성들 모두 음수 사용 가능 - top - bottom - left - right - z-index relative 요소 자신을 기준으로 배치한다. .child { width: 100px; height: 100px; background-color: pink; position: relative; } relative 라는 특정 기준이 부여되었지만 화면에는 아무런 변화가 없다. .child { width: 10..

background-color 요소의 배경 색상 배경 색상의 배경 이미지보다 뒤에 출력된다. - 기본값: transparent (투명) - 색상: 지정 가능한 색상 background-image 요소의 배경 이미지 삽입 - 기본값: none (이미지 없음) - url("경로"): 이미지 경로 (따옴표를 붙이는 것이 좋음) background-repeat 요소의 배경 이미지 반복 - 기본값: repeat (이미지를 수직/수평 반복) - repeat-x: 이미지를 수평 반복 - repeat-y: 이미지를 수직 반복 - no-repeat: 반복 없음 background-position 요소의 배경 이미지 위치 보통 방향, 단위로 지정한다. - 기본값: 0% 0% (0% ~ 100% 사이의 값) - 방향: to..