천진난만 코딩 스토리

한 요소를 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..

active: 마우스로 버튼을 클릭했을 때 스타일이 변경됨. hover: 마우스 커서가 대상 위에 있을 때 (클릭X) 스타일이 변경됨. focus: 마우스 클릭, 키보드로 선택 등 대상을 선택하였을 때 스타일이 변경됨. visited: 링크에 방문했을 때 스타일이 변경됨. (링크에만 적용가능) focus-within: focused된 자식을 가진 부모 element에 적용됨. 1) active 노란색의 Hello 버튼을 만듬. 클릭하면 색이 변하게 하려면? button:active를 하여 버튼이 클릭되었을 때를 선택하여 스타일을 변경함. 마우스로 버튼을 클릭을 하고 손을 뗄 때까지 변경된 스타일을 유지함. 2) hover button:hover를 하여 마우스 커서가 버튼에 올라가면 스타일이 변경되게 함...

특정 속성의 존재여부 및 값 일치 여부에 따라 선택하는 선택자. 1) form 만들기 tape이 다른 박스를 두 개 만듬. 하나는 password를 입력하기에 required를 해줌. 2) 특정 박스 하나만 선택하여 스타일 변경하기 input: required를 하여서 required태그가 들어간 박스만 선택하여 스타일을 변경함. name 박스에는 required가 없어서 스타일이 변하지 않았고, password 박스에는 required가 있어서 스타일이 변함. input[type="password"]를 하여서 type이 password인 박스만 선택하여 스타일을 변경함. name 박스는 type이 text라서 스타일이 변하지 않음. 3) 특정 여러 가지 박스 선택하기 input[placeholder~=..

4) adjacent sibling selector (인접 형제 선택자) (+) p태그 위아래로 span 태그가 있음. 이 두 개의 span 모두 div 바로 밑에 있는 태그기 때문에 스타일이 적용됨. p태그 밑에 있는 span만을 선택하려면? p+span을 해주어 p 다음에 오는 span만을 선택함. 그렇지만 p태그와 span 태그 사이에 무언가가 생기게 되면 적용이 되지 않음. 즉, 인접되어있는 형제 태그여야지 적용이 됨. 5)general sibling elector (일반 형제 선택자) (~) p와 span 사이에 address가 있어서 p와 span이 서로 인접하지 않음. 인접하지 않아도 선택하려면? p~span을 해주어 p 이후에 오는 모든 span 태그를 선택함. 만약 address 밑에 s..

selectors 사이의 관계를 설명하는 문자 1) 중복되는 태그 div박스 안에 span, p가 있고, p안에 또 다른 span이 있음. 단순히 span의 색을 변경하면 모든 span의 색이 변함. 만약 p태그 안의 span태그만 변경하고 싶을 땐 어떻게 해야 할까? id 혹은 class를 사용하여 변경할 수도 있지만, combinators를 사용하여 변경할 수도 있음. 2) descendant selector (자손 선택자) (space) p와 span 사이를 스페이스로 한 칸 띄워주어 p 안에 있는 span 태그를 불러옴. div p span{ 혹은 body p span{ 으로 적어도 됨. 존재하지 않는 부모를 적거나 잘못 적는다면 작동되지 않음. 3) child selector (자식 선택자) (..

좀 더 세부적으로 element를 선택하게 해주는 것 (가상 선택자) 어떤 box나 콘텐츠의 스타일을 변경하고 싶으면 보통은 div, span 등 태그의 이름을 적거나 #으로 아이디를 적거나 .(온점)으로 class를 적어서 원하는 element를 불러와서 사용. 다른 방식으로 해당 elementfmf 선택 시에는? 예를 들어 많은 div 중에 제일 마지막 div를 선택한다거나 제일 처음의 class를 선택할 시에는? pseudo selector를 사용하여 선택할 수 있음. 1) last-child div:last-child를 해주어 마지막 div를 선택하여 변경함. 그럼 처음 상자를 선택하려면? 2) first-child div:first-child를 해주어 처음 div를 선택하여 변경함. 그렇다면 내..