코딩 슬라임 공방

Transition 트랜지션은 속성을 서서히 변화시키는 속성입니다. 트랜지션에서 사용할 수 있는 속성 값은 아래와 같습니다. 속성값은 동시에 작성할 수 있습니다. ex ) transition : property timing-function duration delay transition-property : transition을 적용시킬 속성을 정합니다. transition-timing-function : transition의 진행속도를 정합니다. transition-duration : transition의 총 시간을 정합니다. 초단위를 사용합니다 ex) 1s transition-delay : transition의 시작시간을 지연시킵니다. 초단위를 사용합니다 ex) 1s initial : 기본값으로 설정합니..

브라우저에서의 X,Y,Z축 Transform 트랜스 폼은 여러 효과를 부여하기 위한 함수가 제공됩니다. 단, 애니메이션 효과는 제공하지 않으므로 애니메이션 속성이나 트랜지션 속성을 사용해 줘야 합니다. Transform-origin 속성 이 속성은 요소의 기본 기준점을 설명할 때에 사용합니다. 최초의 기본기준점은 요소의 정중앙(50%,50%)입니다. 단, 이동은 기준점을 변경하여도 일정거리 만큼을 이동하기 때문에 의미는 없습니다. 설정값 단위로는 %,px,top,left,right,bottom이 있습니다. (0,0)은 top,left와 같은 값이고 (100%,100%)는 bottom,right와 같은 값입니다. 아래는 트랜스폼에 부여되어 있는 함수에대해 정리한 표입니다. transform function..

3D에 대한 이해 See the Pen GRpvNLV by Lee Hoyeon (@nixpluvia) on CodePen. 브라우저에서의 x,y,z축 3D에서 회전할때는 축을 중심으로 회전하고 이동할때는 축의 방향을 기준으로 이동한다. 3D에서 x축은 왼쪽이 마이너스 오른쪽이 플러스 3D에서 y축은 상단이 마이너스 하단이 플러스 3D에서 z축은 가까울 수록 플러스 멀어질 수록 마이너스 x축으로 회전할 때는 상단으로의 회전이 플러스 하단으로의 회전이 마이너스 y축으로 회전할 때는 오른쪽으로의 회전이 플러스 왼쪽으로의 회전이 마이너스 z축으로 회전할 때는 오른쪽으로의 회전이 플러스 왼쪽으로의 회전이 마이너스 See the Pen jObLMeo by Lee Hoyeon (@nixpluvia) on CodePe..

See the Pen YzyQLyZ by Lee Hoyeon (@nixpluvia) on CodePen. 하위메뉴 표시 조심 하위 메뉴 표시 때문에 박스 크기가 바뀌어서 약간의 빈틈이 생긴다. 1차에서 2차메뉴 사이의 빈틈은 ul과 li태그가 기본적으로 block과 같은 display크기를 가지고 있어서 사이드 메뉴 바가 적당한 width를 가지고 있지 않으면 추가되는 [+][-]때문에 박스 사이즈가 달라지기 때문에 틈이 벌어 질 수 있다. 2차,3차 메뉴박스가 최소한의 길이를 가져야한다는 조건하에서 2차,3차 메뉴들은 박스에 사이즈를 주지 않으면 메뉴 텍스트들이 자동 줄바꿈이 되어버려서 세로줄이 되어버린다. 세로줄이 되어버리는 이유는 position:absolute를 주었기 때문에 너비가 최소화 되려고..

See the Pen YzyVomV by Lee Hoyeon (@nixpluvia) on CodePen.

가상요소(Pseudo-Element) 별도의 클래스를 지정하지 않아도 지정 할 수 있는 엘리먼트이다. 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분을 선택 할 수 있습니다. 주로 사용하는 가상요소는 아래와 같습니다. ::first-line 요소의 텍스트에서 첫 줄에 스타일을 적용합니다. ex ) p::first-line { color: red; } p태그의 첫번째 줄에 있는 텍스트 색을 red로 칠합니다. ::first-letter 요소의 첫번째 문자에 스타일을 적용합니다. ex ) p::first-letter { color: red; } p태그의 첫번째 문자를 빨간색으로 바꿉니다. ::before 요소의 컨텐츠 앞을 선택합니다. content속성이 '꼭' 같이 쓰입니다. ex ) p:..

선택자 id : 태그에 이름을 지정하는 선택자. class 속성과는 달리 id선택자는 하나의 태그에만 지정해넣는다. class : 태그에 이름을 지정하는 선택자. 여러개의 태그에 집어넣어도 된다. 이름 앞에 "."을 사용해서 선택할 수 있다. ex).name A:hover : A요소에 마우스를 올려 놓았을 때에 선택하는 선택자. :nth-child() : 형제 요소 중에서 ()번째 순서에 있는 태그를 선택하는 선택자. :nth-last-child() : 형제 요소 중에서 뒤에서 부터 ()번째 순서에 있는 태그를 선택하는 선택자. :first-child : 형제 요소 중에서 가장 첫번째에 있는 태그를 선택하는 선택자. :last-child : 형제 요소 중에서 가장 마지막에 있틑 태그를 선택하는 선택자. ..

position 응용하기 See the Pen vYNyVLL by Lee Hoyeon (@nixpluvia) on CodePen. box-sizing:border-box로 border가 사이즈를 늘리는 걸 방지. transform: translateX(n) translateY(n) ; transform의 %는 자신의 크기 기준으로 움직인다. translateX의 음수 값은 좌측으로 움직인다. translateY의 음수 값은 top방향으로 움직인다. 그래서 화면 중앙에 놓이게 할 때에는 2가지 방법을 사용하는데 1. top,left,bottom,right값이 모두 같은 값을 가지고 있다.(width,height사용x) 2. top: 50%; left: 50%; 를 사용하고 transform: transla..