오늘의 CODE

* transform-origin(x,y,z) : 요소 변환의 기준점 x축 left, right, top, bottom, center, %(기본 설정50%) y축 left, right, top, bottom, center, %(기본 설정50%) z축 0 * transform-style : 3d 변환 요소의 자식요소에 3d 변환 사용 여부 설정(부모요소에 css 적용) flat 자식요소에 사용 안함(기본 설정) preserve-3d 자식요소에 3d 변형 효과 적용 * perspective : 하위 요소를 관찰하는 원근 거리 설정(관찰 대상의 상위/부모 요소에 적용) - perspective 속성과 함수의 차이점 1. 속성은 관찰대상의 상위/부모 요소에 적용되고 함수 transform:perspective(..

transform :변환함수1 변환함수2 변환함수3; transform : 원근법 이동 크기 회원 기울임; * 2D 이동 - translate(x,y) translateX(x) translateY(y) 크기 - scale(x,y) scaleX(x) scaleY(y) 회전 - rotate(deg) 비틀기 - skew(x-deg,y-deg) skewX(x-deg) skewY(y-deg) 전체 적용 - matrix(n,n,n,n,n,n) *3D 이동 - translate3d(x,y,z) translateZ(z) 크기 - scale3d(x,y,z) scaleZ(z) 회전 - rotate3d(x,y,z,a) rotateX(x) rotateY(y) rotateZ(z) 거리 - perspective(n) 전체 적용 ..

css 속성의 시작과 끝을 지정(전환 효과) property : 속성이름 duration : 지속기간 timing-function : 타이밍 함수 지정 delay : 대기시간 ** transition은 바뀌기 전 상태에 입력 .box { width:100px; height:100px; background:tomato; margin:300px; transition: width 1s linear, background 1s linear; } .box:hover { width:300px; background:dodgerblue; } timing-function 종류 ease(기본속성) : 빠르게 느리게 linear :일정하게 ease-in : 느리게 빠르게 ease-out : 빠르게 느리게 ease-in-out..

1 2 3 [attr^=value] 예시) [class^='btn-'] 클래스명이 'btn-'로 시작하는 요소에 css 적용 ** 숫자 1,2가 기재된 버튼에 css 적용 [attr$=value] 예시) [class$='success'] 클래스명이 'success'로 끝나는 요소에 css 적용 ** 숫자 2가 기재된 버튼에 css 적용

태그의 속성으로 요소에 css를 적용. 예시) input 태그의 type이라는 속성으로 css 적용 1. 속성을 가지고 있는 요소에 css 적용 [disabled] { css 적용} disabled라는 속성을 가진 요소에 css 적용 2. 속성의 특정한 value값을 가지고 있는 요소에 css 적용 [type=password] { css 적용} or [type='password] { css 적용} password라는 value를 가진 type에 css 적용

선택자를 제외한 요소에 css 적용 예시) 1 2 3 .box-group li:not(.none) ** box-group 안에 있는 li 중 none이라는 클래스를 가진 요소를 제외하고 css 적용

태그의 타입과 동일한 타입인 형제요소 중 n번째 요소 선택 클래스로 입력한다고 해도 클래스명으로 요소를 찾는 것이 아닌 클래스를 가진 요소의 태그를 가지고 찾음. zero 베이스(0부터 시작) 예시1) 1 2 3 4 .box-group p:nth-of-type(1) - box-group 클래스 안에 첫번째 p태그 ** 숫자 2에 css 적용됨. 예시2) 1 2 3 4 .box-group .small:nth-of-type(1) - box-group 클래스 안에 small이라는 클래스를 가지고 있는 첫번째 태그 *** 위의 예시 html에 적용된 첫번째 li는 small이라는 클래스를 가지지 않기 때문에 아무것도 적용안됨.

외부 자바스크립트 소스를 가져올 때만 사용 가능 (src 속성 필수) defer는 자바스크립트 소스가 html의 문서를 분석(파싱)하기 전에 실행되어 적용되는 소스를 찾지 못할 경우 물리적인 순서와 상관없이 defer를 사용해서 문서 파싱 후 실행하도록 설정한다. 간혹 스크립트 소스를 html 하단에 사용해야 하는 경우가 있는데 그런 경우, 하단 삽입할 필요없이 defer를 사용하여 head안에 입력하면 하단에 삽입한 것과 동일하게 작용됨.

가상 선택자 사용 시 사용되는 '태그:xxx-child'는 태그이면서 첫번째 자식 또는 후손 요소인 것으로 해석할 수 있다. 즉 아래의 예제를 보면 .box-group p:first-child 'box-group'이라는 클래스 안에 있는 첫번째 태그이면서 p태그인 것 *** 만약, 첫번째 자식요소가 p가 아니면 css는 적용되지 않는다. 예시1) 숫자 1과 3의 색상을 빨간색으로 변경 1 2 3 3-1 3-2 3-3 .box-group :first-child { color:red; } *** 'box-group'이라는 클래스의 모든 첫번째 자식요소에 css를 적용한다. 예시2) 숫자 1과 3-1만 색상을 빨간색으로 변경 1 2 3 3-1 3-2 3-3 .box-group div:first-child { ..

1. 가상선택자:after로 clear 하는 방법 부모 엘리먼트 :after에 clear 값을 적용함. 2. overflow:auto / overflow:hidden 부모 엘리먼트에 위의 속성 부여 3. float를 부여 부모 엘리먼트에도 float를 적용 * 부모 엘리먼트의 너비가 브라우저의 크기에 따라 가변적이어야 하는 경우 적용하기 어려움 * 조상 엘리먼트들이 겹겹이 존재할 시 자식 엘리먼트의 높이를 전달하기 위해 상위 엘리먼트에 모두 float를 적용 시켜줘야하므로 사용을 권장하지 않음.