roqkf

❤️‍🔥 Canvas HTML의 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있습니다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있습니다. 기본적인 캔버스 사용법부터 알아봅시다. 일단은 캔버스 태그를 작성하는 것으로 시작됩니다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성됩니다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋습니다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해줍시다. const canvas = document.querySelector("#canvas"); 캔버스를 본..

❤️‍🔥 CSS 애니메이션 CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜줍니다. 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있습니다. ✨ @keyframes 키프레임을 활용하기 위해서는 우선 CSS로 키프레임 블록을 만들어야 합니다. /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다...

레이아웃 각 요소의 위치가 웹 사이트의 목적에 맞게 배치된/ 각각의 요소를 목적에 맞게 배치하는 것 HTML 문서는 기본적인 스타일을 가지고 있어서 HTML 문서가 갖는 기본 스타일이 레이아웃을 설정하는 데에 방해가 됨 → 초기화 꼭 해 주기 레이아웃 초기화 * { margin: 0; padding: 0; box-sizing: border-box;} 와이어프레임 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 와이어로 설계된 모양 단순한 선이나 도형으로 웹으나 앱의 인터페이스를 시각적으로 묘사한 것 - display .block, .inblock, span { width: 80px;; height: 80px; margin: 20px;} 1. 1 2 3 - div: block level이기..

float 이미지와 텍스트들을 어떻게 배치할 건지 정리하기 위해 나타남 float:left = 이미지가 왼쪽으로 정렬되고 나머지 텍스트 float:center = 이미지가 가운데 float:right = 이미지가 오른쪽 Flaxbox 컨테이너에 적용하는 속성값이 존재, 컨테이너 안의 아이템이 적용하는 속성값이 존재 중심축(main axis)과 반대축(cross axis)이 있음 - container 속성 1. display (flex 사용을 위해 선언) - display: flex; 2. flex-direction (방향) - flex-direction: row; (기본) - flex-direction: row-reverse; - flex-direction: column; - flex-direction:..

기본 셀렉터 1. 전체 셀렉터 - 문서의 모든 요소를 선택 - * {} 2. 태그 셀렉터 - 같은 태그명을 가진 모든 요소를 선택(복수로도 선택 가능) - h1 {}, div {}, section, h1 {} 3. ID 셀렉터 - #id 4. class 셀렉터 - 같은 class를 가진 모든 요소 선택 - .center 5. attribute 셀렉터 - 같은 속성을 가진 요소를 선택 6. 자식 셀렉터 - 첫 번째로 입력한 요소의 바로 아래 자식인 요소 - main > p {} - (선택) (선택 안 됨) (선택) (선택 안 됨) 7. 후손 셀렉터 - 첫 번째로 입력한 요소의 후손까지 선택 - main p {} - (선택) (선택) (선택) (선택) 8. 형제 셀렉터 - 같은 부모 요소를 공유하면서 첫 번..

- 박스모델 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨, 항상 직사각형, width와 heigt를 가짐 줄 바꿈이 되는 박스(block 박스) 줄 바꿈이 없이 옆으로 붙는 박스(inline 박스): width값과 height값이 먹지 않음 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는(inline-block 박스) 줄 바꿈이 되는 요소: , , 줄 바꿈이 되지 않는 요소: border를 기준으로 padding(안쪽 여백), margin(바깥 여백)이 있음 1. border: 테두리 border-color: 테두리 색상 설정 border-style: 선 스타일 설정 none, hidden: 테두리 표시X dotted: 둥근 점 표시 dashed: 일련의 짧은 정사각형 끝 대시 또는..