기주

-기본적으로 대소문자 구분 ^ : 문자열의 시작,캐럿 $ : 문열의 끝,달러 \ : 정규표현식내 특정의미가 있는 단어를 일반문자로 변경, 이스케이프, 특정 역할로부터 벗어나게 해준다 . : (점), 모든 문자 []: 괄호 안에 문자중에하나, 대괄호전체가 문자하나 의미 []안에있는 - : a부터 b까지 -[]안에있는 ^ : 부정의미 | : or의미 {} : 중괄호안의 숫자만큼의미 ㄴ{3} : 3개 ㄴ{3,} : 3개이상 (?= ) : 해당문자를 기준으로 찾지만 그문자를 선택하지는 않음 예제) ^who ㄴ문장의 시작이 who 의미 ㄴwho is who ㄴ앞의 who를 탐색 who$ ㄴ문장의 끝이 who 의미 ㄴwho is who ㄴ뒤의 who를 탐색 ^\$ : $문자로 시작하는 문자열, 이스케이프 \$$ :..

css - transition a{ font-size : 3rem; display : inline-block; transition-property : all; transition-duration : 1s; = (transition : all 1s ease; ) } a:active{ transform: translate(20px,20px); font-size : 2rem; } ㄴ a:active{} 는 a태그가 클릭되었을때 적용할 속성, (hover는 마우스가 위에있을때, visited는 이미방문한 링크) ㄴ transfrom 속성은 block과 inline-block에만 적용된다. inline 속성에는 적용안됨 ㄴ 그래서 display에 inline-block 지정 ㄴ transition-property..

css - transform 변형 요소의 크기, 회전, 비틀기, 왜곡 등등 포토샵의 기본 기능들을 이용할 수 있다 ㄴ transform의 속성은 한 요소에 2번이상 쓰게되면 나중에 적용된 것 하나만 적용된다 ㄴ 그래서 2개이상의 transform 속성을 하나의 요소에 적용하려면 한 줄에 속성들을 다 써야한다 ㄴ transfrom의 property) scaleX(), scaleY() , scale, rotate,skew, translate, matrix 등 scale(0.5,0.5) ㄴ n배 만큼 축소, 확대 ㄴ x,y축을 동시에 적용, x,y축을 둘다 0.5배로 적용 scaleX(0.5) ㄴ X축을 0.5배로 적용 scaleY(2) ㄴ Y축을 2배로 적용 rotate(n) ㄴ해당 각도만큼 회전 ㄴ양수: ..

position: static ㄴ 기본값, 코드 순서대로 배치됨 ㄴ top,bottom,left,right 값들 무시 position: relative ㄴ 요소가 원래 위치를 기준으로 얼만큼 움직일지 지정 ㄴtop,bottom,left,right를 이용하여 원래위치를 기준으로 이동, 겹치기가능 position: absolute ㄴ 배치기준이 (자신이아니라) 상위 부모들 중에서 position이 static이 아닌 부모를 기준으로 설정 ㄴ 요소 상위에 position 속성이 static이 아닌 요소가 없으면 DOM트리의 최상위인 body가 배치 기준이된다 ㄴ 그래서 (가장 가까운) 부모를 기준으로 top,bottom,left,right 속성 적용 ㄴ 그래서 대부분 어떤 요소의 position을 absolu..

HTML) CSS 코드) .voice_button_box{ position:relative; } .fa-microphone{ position:absolute; top:50%; left:50%; transform: translate(-50%,50%); } css에서 top:50%; left:50%; 만 쓸 경우, 아이콘의 왼쪽 상단 모서리가 가운데로 배치된다 왜냐하면 top:50%; 는 상단 모서리가 가운데로 위치, left:50%; 는 왼쪽 모서리가 가운데로 위치 되기 때문이다 그래서 이 코드만 쓰면 아이콘이 정확한 가운데로 정렬되지는 않는다 transform: translate(-50%, -50%); 그래서 이코드를 통해 요소의 기준점을 왼쪽 위가아니라 가운데로 옮겨놔야한다. 그래야 아이콘의 중앙지점이..

CSS - display : flex; ㄴ 정의 : display : flex는 자식요소들의 정렬을 위해 사용한다 ㄴ 자식요소들이 inline인지 block인지에 상관없이 레이아웃 설정가능 ㄴ 부모에게 길이를 주고 자식들은 flex를 주어 정렬하는 방법을 많이 쓴 - flex container (부모) 속성 : flex-direction, flex-wrap, justify-content, align-items, align-center - flex item (자식) 속성 : flex, flex-grow, flex-shrink, flex-basis, order 와 같은 상황에서 세로로 정렬을 하고 싶다면 flex를 이용한다 display:flex 를 이용하면 자식들이 세로로 정렬된다 여기서 자식1과 자식2의..