KEEP CODING

Animation 마우스나 focus 상관없이 움직임을 만듬 @keyframs 애니메이션이름 { from {처음상태} to {나중상태}} 정의해줘야함 그리고 element에서 animation: 애니메이션이름 1s linear infinite; infinite없으면 1회로 끝남 from상태=to상태 아니면 연결이 부자연스러움 대신 0%~100%로 설정할 수 있음(여러step만들 수 있음) 0%=100%이면 다시 돌아갔다가 실행됨-부드러움 Media Query CSS만을 이용해 사용자의 스크린의 사이즈를 알 수 있는 방법(데스크톱, 핸드폰, portrate/landscape..) @media screen and (조건) { } min-width : 600px / 최소 600px부터 600px보다 크면 ma..

default로 가지고 있는 설정을 바꾸면 다른 것에도 영향을 미칠 수 있다 (button의 background-color만 바꿔도 border-radius가 사라진다) state에서 바꾼 것은 element에 영항없음 element에서 바꾸면 state영향있음 Transition state에서 property 변화가 있을 때 바뀌는 효과 조절 가능 transition: color 1s easy-in-out; 여러개는 뒤에 , 쓰고 이어붙임 state가 아닌 element 설정에 적용해야함 시간에따라 바뀌는속도 조절 linear ; 속도동일 ease-in; 처음에 부드럽게, 나중에 빨라짐 cubit-bezier로 만들 수 있다 transformation 다른 box요소를 변형시키지 않고 원하는 요소를 변..

father children {} 특정 요소 지정해서 스타일 바꿀 수 있다 div>span(1) >p>span(2) 인 경우 div span - span(1), span(2) 둘 다 바뀜 div > span - div 바로 밑의 span(1)만 바뀜 p span - p 밑의 span(2)만 바뀜 div>p>span(a) >span(b) p + span - p 다음에 오는 span(b)만 바뀜 span먼저있고 p 오는 경우엔 바뀌지 않음 바로 다음에 와야 적용됨(중간에 다른것 있어도 안됨) p ~ span - 바로 뒤에 오지 않는 span attribute selector input:required {} 와 같이 required attribute를 가진 태그의 속성을 바꿀 수 있다 input[type="p..

border ; 박스의 경계 border: width style color; inline요소에도 적용가능 inline 요소엔 margin이 좌우만 적용됨-높이,너비 없음 padding은 사방 가능 inline요소 위아래 margin을 적용하고 싶다면 ->block요소로 바꿔주어야함 *{ } { 모든 속성에 적용 } *id로 각 요소를 바꿔줄 수 있으나 tag마다 id가 겹치면 안됨 ->style에서 각각 바꿔줘야함 class - 여러곳에서 중복해 사용할 수 있음 .class { } 한 태그에서 여러 class 사용가능 id는 한 요소당 하나만 가질 수 있음 공통적인 부분을 class 로 묶어서 여러 요소에 사용한다 inline-block; block을 inline요소처럼 취급함, 옆으로 배치할 수 있음 ..

CSS 추가하기 HTML과 같은 파일 내에 있는 경우 안에 있어야한다 안에 넣는다 HTML과 다른 파일(추천) .css 파일을 link로 연결한다 다른 페이지에서도 같은 양식을 사용하기 편하다 selector { property: value; property: value; } property name - 띄어쓰기 안됨 -으로 연결 value에는 맞는 값을 써야함 색깔지정-숫자크기 안됨 cascading ; 위에서 아래로 순차적으로 읽어들인다 맨 마지막 코드의 결과를 보여준다 *코드의 순서가 결과에 영향을 미친다 block - 옆에 다른 요소를 배치하지 않는다 inline - 이어서 다른 요소들을 배치한다 blockinline 변경가능 display: block; inline은 높이, 너비 가질 수 없음 ..

image 없는 self-closing tag src ; source src="이미지의 주소" 인터넷에 올라와있는 사진, 컴퓨터내의 사진 logo.jpg 확장자까지 정확히 적어줘야함 같은폴더내 - 제목만 적어도 된다 다른위치 - 위치를 적어줘야함 folder/file_name 페이지 구성하기 //html 문서임을 알려줌 내용 구성 페이지내에서는 안보임 보이는 내용은 모두 body 태그 안에 있어야함 브라우저에게 정보를 알려주는 용도 title meta ; 부가정보 content name 사용하는 언어 깨지지 않도록 *사이트에 사용되는 언어를 알려줌, 검색에 도움, 주로 kr사용함 *html, css 구글에 검색시 mdn 같이 검색할것 mozilla developer network 으로 연결됨-자세한설명 ..

youtube에서 JS 무료강의를 듣다가 그것보다 더 이전단계인 HTML/CSS강의를 먼저 듣기로 했다 ->nomadcoders.co/kokoa-clone 모든 사이트는 text로 이루어져 있다. 브라우저가 text를 해석해 사용자에게 보여줌 HTML ; 어떤 내용으로 구성되어 있는지 설명한다 CSS ; 내용을 어떻게 보여줘야 하는지 설명한다(사이트의 디자인 - 색상, 이미지 크기 등) 사이트를 만드는 데 HTML/CSS 둘 다 필요하다 HTML만 있으면 사이트가 초라해지고(디자인요소 없음) CSS는 HTML없이 존재할 수 없다(디자인할 요소가 없음) JavaScript ; 사용자와 웹사이트간의 상호작용을 위한 언어(interactivity), 똑똑한 사이트 *웹 프로그래밍 언어 HTML content ..

코딩 공부 시작 영상 : 초보자를 위한 바닐라 자바스크립트 유튜브 영상 링크 바닐라 자바스크립트를 공부해야 하는 이유 자바스크립트는 웹사이트를 만들 때 사용하는 유일한 언어이다. 모든 컴퓨터에는 웹사이트를 여는 브라우저가 있기 때문에 범용성이 있다. 자바스크립트로 웹사이트를 만드는 것 부터 앱을 만들거나 게임까지 다양하게 사용할 수 있다. 바닐라 자바스크립트란? 패치가 진행되기 이전의 자바스크립트 언어 속도가 빠르며, 기본적인 구조를 이해하면 다른 언어들을 배우는데 쉽게 배울 수 있다. 자바스크립트는 CSS와 같이 html내에서 외부 파일을 불러오는 식으로 사용된다. 내에서 불러야 한다. 형식으로 불러야 한다. 각 줄의 마지막에 세미콜론(;)을 쓰는 것을 습관화하자. alert('message'); me..