기주 기주

element.style 속성과 getComputedStyle() 메소드의 차이** html, css로 네비게이션을 만들던 도중, 네비게이션이 한번에 동작하지않고 처음 동작할때는 2번을 클릭해야만 동작했다 이 문제를 해결하기위해서는 element.style와 getComputedStyle의 차이를 알아야했다 getComputedStyle() 메소드는 읽기전용* 인 반면, element.style 속성은 새로운 스타일 설정* 하는데에 사용한다 그래서 데이터의 속성을 읽어 확인할때 element.style로 확인을 할경우 문제가 발생했다 잘못된 방법) function menuBarEvent(){ if(nav.style.right == "-300px"){ // element.style 속성은 읽기용이아닌, 새..

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의..

head태그안, style태그안에 CSS코드 작성한다 선택자 ㄴcss에서 자기가 어디에가서 달라 붙어야하는지를 알려주는 역할 1.tag 2.id 3.class ㄴ id 선택자는 태그의 이름으로 하나의 웹페이지에서 하나만 존재해야한다 (중복x) ㄴ 하나만 지정하기에, 선택자중에서 우선순위가 가장 높다 ㄴ그다음은 class, 그다음은 element 선택 ㄴid에 접근할때는 #을 쓴다 ㄴ class에 접근할때는 .을 쓴다. class는 여러개 지정할떄 쓴다 ㄴ선택자는 범위가 넓을수록 우선순위가약하다 ㄴ중복되어 적용시 우선순위가 높은 것이 적용된다 ㄴid가 가장 세고, 태그가 가장 약하다 css 선택자 지정 팁) 1) '>' 쓸때 .box > img{ } 는 box클래스의 직계자손(아들, 1단계 아래만) 중 i..