꾸준히 성장하는 개발자

transition : 속성명 지속시간 타이밍 함수 대기시간 transition-property transition-duration transition-timing-function transition-delay ↑지속시간: 단축형으로 작성할 때 필수 포함 속성 -> 요소의 전환(시간과 끝) 효과를 지정하는 단축 속성 transition-property - 전환 효과를 사용할 속성 이름을 지정 all 모든 속성에 적용(기본값) 속성 이름 전환 효과를 사용할 속성 이름 명시 ex) width, color 등 trasition-duration 전환 효과의 지속시간을 지정 0s 전환효과 없음 시간 지속시간을(s)를 지정 transition-timing-function - 전환효과의 타이밍(Easing) 함수를 ..

flex (정렬) display : Flex container의 화면 출력(보여짐) 특성 flex - 블록요소와 같이 flex container 정의 (flex contaiver가 블록 요소처럼 세로로 쌓임) inline-flex - 인라인 요소와 같이 flex container 정의 (인라인 요소처럼 가로로 쌓임) flex-direction : 주축을 설정 row 행축(좌 -> 우) row-reverse 행축(우 -> 좌) column 열축(위 -> 아래 ) column-reverse 열축(아래 -> 위) flex-wrap : flex items 묶음(줄 바꿈) 여부 nowrap 묶음(줄바꿈) 없음 wrap 여러줄로 묶음 justify-content 주축(수평)의 정렬방법 flex-start Flex ..

전체 선택자 *{.....} 태그 선택자 태그명{....} 클래스 선택자 .클래스명{...} 아이디 선택자 # 아이디명{....} 일치 선택자 태그.클래스{....} (띄어쓰기 없음) 자식 선택자 .클래스명 or 태그등 >.클래스명 or 태그등{...} 하위 후손 선택자 클래스명 (띄어쓰기) .클래스{...} 인접 형제 선택자 ex) .orange + li{...} -> .orange 이 선택자의 다음 형제 요소하나를 선택 .... .... .... -> 이 태그 선택 .... 일반 형제 선택자 ex) .orange ~ li{...} -> .orange 이 선택자의 다음 형제 요소 모두 선택 .... .... .... -> 태그 선택 .... -> 태그 선택 가상 클래스 선택자 .box : hover{...

주석처리 /* */ -> 컴파일했을 때 변환된 후에도 내용이 나온다 // ->컴파일했을때 변환된 후 내용으로 나타나지 않음 이렇게 후손요소를 { } 안에 작성하여 사용할 수 있다 자식 요소를 작성할 경우 요소의 앞에 >와 띄어쓰기를 이용하여 작성하여 준다 & - 상위 선택자 참조 엠퍼센드 기호 상위 선택자를 참조하고 있다 중첩된 속성 font와 같은 부분을 [네임스페이스]라고 부른다 주의할 것! 중괄호 뒤에 ; 세미콜론으로 마무리한다

css 전처리 도구라고 할 수 있다 css를 사용시 이렇게 선택자의 겹치는 부분이 많은데 sass의 중첩기능을 사용하면 손쉽게 작성이 가능하다 특정 색의 기호들을 변수로 이용하게 되면 변수 하나로 통일하여 편하게 작성하고 쉽게 사용할 수 있다.