전체 글207 (Javascript) JS & 변수 Javascript(JS) 객체(Object) 기반의 스크립트 언어 HTML로 웹의 뼈대, 틀을 만들고, CSS로 디자인 설정을 하고, JS로 동적인 효과를 구현 가능 대게 웹 페이지를 만들고 위해 사용하는 프로그래밍 언어 서버 측 관련 프레임워크를 사용하면 서버 측 프로그래밍도 가능 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있습니다. 변수 데이터를 담는 상자, 그릇, 공간 등 var var1 = 1; console.log(var1); var1 = 2; console.log(var1); var var1 = "var1"; console.log(var1); var var1; console.log(var1); let let1 = 3; let let2 = 2.. 2023. 1. 12. (CSS) animation animation 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줄 수 있다 CSS에서 애니메이션 속성으로 동적인 효과를 줄 수 있다 애니메이션의 상태를 나타내는 키프레임들로 구성 @keyframes @keyframes name { 0% {...} n% {...} 100% {...} } → name: 애니메이션 이름 설정 0% : 시작할 때의 모양을 설정. from으로 사용해도 가능 n% : n% 일 때의 모양을 설정 100% : 끝날 때의 모양을 설정. to로 사용해도 가능 트랜지션 효과 보다 훨씬 더 규모가 크고 복잡하지만 다양한 효과를 적용해서 좀 더 정밀하고 원하는 CSS효과를 줄 수 있다 JS를 모르더라도 간단하게 애니메이션을 구상할 수 있다 JS를 이용한 애니메이션이 .. 2023. 1. 11. (CSS) pseudo 가상클래스 (pseudo class) 실제로 존재하는 요소에서 가상으로 클래스를 부여하여 CSS로 제어하는 것을 의미 기존의 여러 가지 선택자로도 범위를 지정하기가 어려웠던 대상을 선택하기 위해 사용되는 선택자 가상 클래스 종류 사용자 동작에 반응하는 가상 클래스 ( :link, :visited, :hover, :active, :focus 등등 ) :link : 앞 태그, 클래스명, id명에 대한 스타일을 적용한다. :visited : 이동했던 적이 있던 링크에 스타일을 적용한다. (a 태그) :hover : 마우스가 해당 영역에 올라가 있을 때 스타일을 적용한다. :active : 클릭을 하고 있을 때 스타일을 적용한다. UI 요소 상태에 따라 적용되는 가상 클래스 ( :enabled, : disabl.. 2023. 1. 11. (CSS) position position HTML 상에서 요소들이 배치되는 방식을 결정하는 CSS 명령어 설정 종류 static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다 absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있다. 이전 영역과 같은 위치를 기준으로 한다. 부모의 좌측 상단(top, left)을 기준으로 절대적인 위치를 설정. 단, 부모의 position이 설정이 되어 있어야 기준을 잡고 영역의 위치를 잡을 수 있다. 없으면 부모의 부모 영역까지 position 기준을 확인한다 relative : 원래 있던 위치를 기준으로 좌표를 지정. 이전 영역의 위치를 기준으로 한다. 해당 설정이 된 요소가 첫 번째 자식이라면 부모의 상단에 기준을 잡고, 그 외라면 이전 .. 2023. 1. 11. (CSS) display display 영역을 어떻게 출력할지 설정하는 CSS 명령어 종류 (block, inline, inline-block, flex, none,.... 등등 display : block => div 태그의 기본 설정 값, 내부 content와 상관없이 가로 너비를 전부 차지한다 display : inline => 인라인 설정, span, a 등 기본 값으로 설정되어 있다. 내부 필요한 content 영역만 갖고 그 외 영역은 차지하지 않는다 display : none => 출력을 하지 않는다. 해당 영역이 없다고 취급 display : flex => 플렉스 아이템들의 부모 이자 플렉스 박스라고 명칭 display : grid => 그리드 아이템들의 부모 이자 그리드 박스라고 명칭 display : inher.. 2023. 1. 11. (CSS) 선택자 선택자 (Selector) 더보기 - 특정 요소를 선택해서 스타일을 원하는 설정을 부여해 주기 위해 요소이다 선택자 종류 전체 선택자(Universal Selector) id 선택자(ID Selector) class 선택자(Class Selector) 하위 선택자(Descendant Selector) 자식 선택자(Child Selector) 복합 선택자(Complex Selector) 가상 선택자(Pseudo Selector) 전체선택자 모든 태그에 적용하기 위한 방식 * { } * { box-sizing: border-box; margin: 0; padding: 0; } ID선택자 id속성 선택자를 찾아 style을 적용하는 방식 #id { } #test { background-color: lightg.. 2023. 1. 11. 이전 1 ··· 26 27 28 29 30 31 32 ··· 35 다음
