천진난만 코딩 스토리

3) 핸드폰 화면으로 보는 법 브라우저에서 우클릭하여 '검사'를 누른 후 (혹은 F12를 누른 후) 검사창의 상단 부분에 있는 device toolbar (두 번째 이미지에 있는 빨간 [ ]부분)를 누르면 브라우저를 핸드폰에서 사용하는 것처럼 테스트를 할 수 있음. 4) 핸드폰의 가로모드 혹은 세로모드 일 때 박스의 변화 and (orientation:landscape) 을 하여 핸드폰이 가로모드일 때 변하도록 추가 설정해줌. 핸드폰이 세로모드일 때에는 박스의 스타일이 변하지 않다가 핸드폰이 가로모드가 되면 박스의 스타일이 변함. 5) 가로모드일 때 문구 삭제하기 박스 밑에 "가로모드 해주세요 :)"라는 문구를 추가함. 핸드폰이 가로모드가 되면 "가로모드 해주세요:)"라는 span이 삭제되도록 함. 세로..

css만을 이용해서 스크린의 사이즈를 알 수 있는 방법. 현재 화면이 핸드폰이라면 가로 상태인지 세로상태인지, 컴퓨터 화면이라면 창을 크게 하였는지 작게 하였는지 감지하는 것. 스크린의 사이즈에 따라 css를 변경하게 하는 것. 1) 특정 사이즈에 따른 박스의 변화 브라우저의 가운데에 위치하도록 div 박스를 하나 만듬. @media screen and (max-width:600px)를 하여 창의 크기가 600px보다 작으면 변하도록 작성함. 창의 크기가 600px보다 크면 박스의 색이 파란색이고, 창의 크기가 600px보다 작으면 박스의 색이 초록색이 됨. 특정 구간에서만 변화하게 할 수도 있음. @media screen and (mix-width:600px) 를 하면 창 크기가 600px보다 크면 변..

4) from to의 부자연스러움 to에서 자리를 이동시키면 다시 from으로 돌아갈 때 자연스럽게 돌아가는 것이 아닌 갑자기 이동하면서 부자연스럽게 됨. 5) %로 구간 나누기 %로 구간을나눔. 0% -> 50% -> 100로 구간을 나누어, 구간마다 변화를 설정하여 중간에 이미지의 위치가 이동하더라도 자연스럽게 원래 위치로 돌아올 수 있게 하여 자연스럽게 재생되도록 함. 0~100%까지 원하는대로 구간을 설정하여 사용 가능함. 예를 들어, 0% 100% 0% 50% 100% 0% 25% 50% 75%100% . . . 다양하게 구간을 설정하여 사용 가능함. Animate.css 를 참고하면 다양한 애니메이션을 볼 수 있음.

다른 state와 transition 없이 애니메이션 재생하기 위해 사용. 원하는 만큼 만들고 재생할 수 있음. @keyframes 사용하여 만듬. 1) transition과 animation의 차이 transition animation state에서 다른 state로 변하는 것을 애니메이션으로 만듬 다른 state와 transition 필요함 원하는 요소가 선택되어야 재생됨 다른 state가 없어도 재생이 되는 애니메이션을 만듬 다른 state와 transition 필요하지 않음 별도의 선택 없이도 지정된대로 재생됨 2) animation 만들기 (from to) 0도에서 360도로 회전하는 dream이라는 애니메이션을 만들고 이 애니메이션을 3초 동안 초반엔 느리고 중반엔 빠르며 후반엔 느리게 변하도..

transformation을 사용하여 애니메이션 효과를 줄 수 있음. 5) 이미지에 hover 스타일 적용하기 img:hover{ transform: rotate z(180deg); 를 하여 이미지 위에 마우스 커서가 올라가면 z축으로 180도 회전하도록 함. 다만 이미지가 갑작스럽게 변하다보니 자연스럽지 않음. 6) transition 사용하기 transition: transform 2s ease-in-out; 를 하여 이미지가 2초 동안 초반엔 느리다가 중반엔 빨라지고 후반엔 느려지게 회전하도록 함. 이때 transition은 변화하는 hover가 아니라, 변화하지 않는 root에 작성하여야 함. 변화하는 시간을 줄여서 빠르게 움직이도록 할 수 있음. transform: rotate(360deg) ..

한 요소를 tranform(변형)시킬 수 있음. 한 요소에 어떤 변형이든 할 수 있음. CSS로 3D를 구현할 수 있게 하며 형태를 변화시킴. 1) 이미지 불러오기 img폴더에 있는 1.png라는 이미지를 불러옴. 이미지의 boder스타일을 주고, boder-radius: 50%; 를 하여 boder를 원으로 만듬. 2) transform: rotate transform: rotate x(50deg); 를 하여 이미지가 x축으로 50도 돌아가도록 함. rotate x를 하면 x축으로 회전하고, rotate y를 하면 y축으로 회전하고, rotate z를 하면 z축으로 회전함. ,를 사용하여 동시에 여러 개를 적용시킬 수도 있음. x, y축 중 하나라도 90도로 돌리게 되면 일자가 되기 때문에 아무것도 보..

기본적으로 브라우저에게 애니메이션이 어떻게 변할지 말해줌. 1) linear transition: all 1s linaer; 을 하여 변화하는 모든 스타일이 1초 동안 일정한 속도로 변하도록 함. linear: 갑자기 속도가 빨라지거나 느려지지 않고 일정한 속도로 변함. 2) ease-in transition: all 1s ease-in; 을 하여 변화하는 모든 스타일이 1초 동안 초반엔 속도가 느리다가 후반엔 속도가 빨라지게 함. ease-in: 초반엔 속도가 느리다가 후반엔 빨라짐. 3) ease-out transition: all 1s ease-out; 을 하여 변화하는 모든 스타일이 1초 동안 초반엔 속도가 빠르다가 후반엔 속도가 느려지게 함. ease-out: 초반엔 속도가 빠르다가 후반엔 느려..

어떤 상태에서 다른 상태로의 "변화"를 애니메이션으로 만드는 방법 transition이라는 속성은 state가 없는 요소에 붙어야 함 가장 처음 생겨난 기본 위치 (root)인 element에 있어야 함 1) 버튼 만들기 누르면 #이라는 곳으로 연결되는 GO버튼을 만들어줌. 글자의 색은 흰색이고 배경은 골드색으로, 밑줄을 없애고 패딩과 보더에 스타일을 함. 2) transition 적용하기 hover을 사용하여 마우스 커서를 버튼에 올리면 스타일이 변하게 만듬. 스타일이 자연스럽게 변하는 것이 아닌 갑작스럽게 변함. transition을 사용하여 변화에 애니메이션을 주자. transition: background-color 2s ease-in-out; 을 하여 배경을 2초동안 사라지고 나타나도록 설정함...

1. color 입력해서 나오는 색상 적어서 쓰기 2. rgb기법 사용하기 3. 색상코드 사용하기 4. 다른 사이트에 있는 색을 스포이드로 따오기 1) color : color를 적고 :를 하면 많은 색상들이 나옴. 스크롤을 하거나 방향키로 내려가며 원하는 색을 찾아서 사용. 2) rgb 기법 사용하기 red, green, blue의 색을 조합하여 색을 표현할 수도 있음. rgb 뿐 아니라 rgba를 적어서 a=투명도까지 설정할 수 있음. 3) 색상코드 사용하기 색상코드를 알고 있다면 색상코드를 작성해서 색을 표현할 수도 있음. 4) 다른 사이트에서 스포이드로 색 따오기 크롬의 확장 프로그램 중 하나인 color pcker 같은 프로그램을 사용하여 색상을 가져올 수도 있음. 5) variable (변수)..

placeholder의 스타일을 변경함. (작성하게 되는 text는 변경되지 않음) 마우스로 드래그하여 select되는 것의 스타일을 변경함. 첫 글자의 스타일을 변경함. (::first-line은 첫 줄의 스타일을 변경함) 1) ::placeholder input 박스에 적혀 있는 placeholder인 name의 색을 변경해보자 input::placeholder을 하여 placeholder인 name의 색은 변경되었지만, text인 Hello의 색은 변하지 않음. 2) ::selection 이 문단에 selection을 해보자. p::selection을 하여 p태그의 문단에서 마우스로 드래그한 부분의 글자색과 배경색을 바꾸도록 함. 3) ::first-letter (first-line) p::firs..