본문 바로가기

분류 전체보기

 (108)
[GIT 에러] ![rejected] master -> master (fetch first) push하려는데 에러가 발생 기존에 있던 프로젝트를 푸쉬한게 아니라 다시 작업하려고 프로젝트를 새로 만들어서 푸쉬했더니 이렇게 됐다ㅎㅎ 기존 데이터가 손실 될 수 있어서 push를 막은것이라고 한다....! git push origin +master 이 명령어를 통해 강제로 push 해주어 간단하게 해결했따. 1. 강제로 push git push origin + master 2. 동기화를 위해 pull git pull --rebase origin master 다시 찾아보니 원격저장소와 현재 작업중인 로컬 저장소가 동기화 되지 않았을 때 발생한다고 한다. 동기화 되자 않은 상태이므로 다시 push 하면 데이터가 손실될 수 있으니 막아준 것..! 그래서 강제로 push하면 기존 데이터는 보장을 못해주지만, ..
[CSS] alignment - position과 transform으로 가운데 정렬 아래 예시로 가운데 정렬을 해보쟈 부모박스인 container에 position : relative를 주고 box에는 position : absolute / top과 left는 각각 50%씩 주어 box는 부모 박스를 기준으로 50%씩 이동하게 되었다. 그러나 이렇게 하면 정 가운데가 box의 왼쪽 상단에 맞춰져 가운데 정렬이 되지 않는다..! 가운데 정렬을 해주기 위해 box의 절반만큼 가운데로 이동시키면 되므로 transform : translate(-50%,-50%) 해주었다.
[CSS] alignment - 가운데 정렬 하기 요소들을 가운데 정렬하는 여러가지 방법들이 있다. 1. margin : auto 파란 상자에 margin : auto를 주었다. 수평적으로는 가운데정렬이 되었으나 수직은 적용이 안된다..!! 위 박스에 text-align : center를 주면 적용이 안된다. 2. text-align : center text-align은 텍스트가 아니더라도 다른 요소들을 정렬 할 수 있다. 그러나 div같은 경우는 적용이 안된다. block 요소에서만 text-align은 적용이 안되기 때문..! 정렬을 하면 block 요소 안에 있는 inline 요소들만 정렬이 적용된다. -> div에는 적용이 안됨. -> inline요소인 button은 적용됨. 3. transform : translate( n , n ); tran..
background background 태그의 배경을 지정하는 속성이다. background-color : 배경 색을 지정해준다. background-image : 배경 이미지를 지정해준다. background-repeat : 배경 이미지의 반복 여부를 정해준다. no-repeat : 반복하지 X repeat-x : x축으로 반복 repeat-y : y축으로 반복 repeat : 반복해줌 background-position : 배경 이미지의 위치를 정해준다. 왼쪽부터 이미지가 출력되는게 기본값이다. left, top, center, bottom, right를 이용해 위치를 정해줄 수 있고, 픽셀, 상수를 이용해서 위치 지정이 가능하다. background-size : 배경 이미지를 여러 크기로 조절할 수 있다. auto :..
[CSS] transition transition 요소의 움직임을 정의 할 수 있다. transition-property : 트랜지션을 적용시킬 속성을 정한다. ex) transition-property: background-color; (배경 색 속성을 트랜지션 함) all : 모든 속성이 트랜지션 효과를 받는다.none : 트랜지션 효과를 주지 않는다. transition-duration : 변화를 줄 시간을 정한다. 얼마동안 변화를 줄 것인지...! transition-timing-function : 트랜지션의 진행 속도를 정한다. transition-delay : 트랜지션의 시작을 연기한다. transition-initial : 기본값으로 설정한다. transition-inherit : 부모 요소의 속성값을 상속받는다. 속성을..
[CSS] transform-origin transform-origin translate, rotate, scale, skew 등, trasnform의 속성들은 지정 요소의 중심을 기준으로 동작을 시작한다. 이런 기준점을 trasform-origin을 이용하면 변경이 가능하다. transform-origin: x축, y축; // px, 백분율(%), left, center, right를이용한다. 45도 시계방향 회전을 예시로 주었다. 1. 백분율 (%)로 기준점을 변경할 경우 transform-origin: 0% 0%; 박스의 왼쪽 상단 모서리에 위치한다. transform-origin: 100% 100%; 박스의 오른쪽 하단 모서리에 위치한다. 40% 60% 일 경우, 오른쪽에서 40% 아래쪽으로 60%인 곳에 위치하게 된다. 2. right..
[CSS] transform / translate, scale, rotate, skew transform 요소의 모양, 크기등을 조절하고 기울기, 이동효과를 줄 수 있다. transform : translate (); 지정한 위치로 X축, Y축 만큼 이동시킨다. transform : translateX(num); transform : translateY(num); transform : translate(num1,num2); transform : scale(); 지정한 크기만큼 X축, Y축으로 확대 또는 축소할 수 있다. transform : scaleX(num); transform : scaleY(num); transform : scale(num1,num2); trans: rotate(); 지정한 크기만큼(각도만큼) 회전시킨다. transform : rotateX(num); transfor..
[CSS] position - sticky / fixed + ( position 정리 ) 1. position : fixed fixed는 들어있는 박스는 상관 없이 viewport를 기준으로 위치를 설정한다. 웹 페이지가 스크롤 되어도 설정해준 값으로 위치가 고정되어 항상 같은 곳에 위치하게 된다. 2. position : sticky sticky는 static의 속성과 fixed의 속성의 특징을 모두 가지고 있다. sticky는 설정한 위치값에 도달하기 전까지는 변화없이 static처럼 행동하지만, 도달 이후에는 fixed처럼 해당 위치에 고정 된다. sticky를 사용할 때에는 위치를 꼭 정해줘야한다. postion을 정해주지 않으면 변화가 없다! sticky는 들어있는 박스안에서 position 변경이 일어난다. 정리 static / relative / sticky 들어있는 박스안에서 ..

티스토리툴바