프론트엔드 (108) 썸네일형 리스트형 앵귤러 템플릿 - Template Reference Variable 템플릿 참조 변수는 템플릿에 한 요소가 다른 요소를 참조할 수 있게 해 줍니다. 변수 생성은 요소에 #과 함께 이름을 지정합니다. 이후 다른 요소에서 해당 요소를 참조하여 값 등을 사용하는 것이 가능합니다. Send 참조 Angular angular.io 앵귤러 템플릿 - directives 디렉티브는 앵귤러 앱에 추가기능을 더해주는 기능을 합니다. 디렉티브는 크게 아래와 같이 나누어지는데요. 컴포넌트 (Components) 속성 (Attribute) 구조 (Structural) 속성 (Attribute) 디렉티브 스타일이나 기능추가 등에 사용되는 디렉티브입니다. 1. ngClass 앵귤러 템플릿 - class binding & ngClass 앵귤러 class 바인딩은 특정요소에 동적으로 클래스를 추가하거나 제거하는 기능입니다. 클래스를 사용하여 상태에 따라 스타일 변경할 때 유용한 기능입니다. 사용문법 사용문법은 아래와 같이 jin-co.tistory.com 요소에 클래스를 추가하거나 없애는 기능을 합니다. 2. ngStyle 앵귤러 템플릿 - style binding & ngStyle 앵.. 데이터 타입 - Blob Blob (Binary Large Object) 은 하나의 개체로 구성된 바이너리 데이터의 집합을 의미합니다. 이름에서 알 수 있는 것처럼 Blob은 용량이 큰 데이터를 의미하는데요 주로 이미지, 오디오 같은 미디어 객체를 저장하는 데 사용됩니다. Blob은 자바스크립트 고유의 데이터 형식 외에도 다양한 데이터 형식을 포함하는데요 File도 Blob의 데이터 형식에 하나입니다. Blob 형식으로 변환하기 1. blob() Blob 형식이 아닌 데이터를 Blob 형식으로 변환합니다. 아래와 같이 배열에 변환하고자 하는 모든 형식을 삽입하면 하나의 Blob 형식으로 반환됩니다. /* index.js */ const blob = new Blob(['type1', 'type2']); 생성된 Blob 객체는 아래.. JavaScript? 웹프로그래밍을 논할 때 빠질 수 없는 세 가지가 있는데요. 첫 번째는 구조를 담당하는 HTML 그리고 스타일을 담당하는 CSS 마지막으로 기능 (동작)을 담당하는 JavaScript(JS)입니다. 자바스크립트는 모질라 그룹의 공동 창시자인 Brendan Eich에 의해 1995년에 웹사이트에 동적기능을 추가하여 웹과 사용자의 상호작용을 위해 출시되었는데요. 설정과 사용의 간편함, 다양한 기능과 지속적인 업데이트로 자바스크립트의 인기는 식을 기미가 보이지 않는데요. 2022년 기준 전 세계의 98%에 달하는 웹사이트의 Frontend가 자바스크립트를 사용하고 있으며 앵귤러, 리액트, TypeScript 등 인기를 끌고 있는 다른 프레임워크나 언어도 작동기반은 자바스크립트라는 점에서 당대에 웹 개발자들에게는.. 캔버스 HTML 요소는 캔버스 에이피아이를 사용하여 단순한 도형부터 게임까지 만들 수 있게 해 주는 유용한 기능입니다. 이 글에서는 캔버스가 가지고 있는 속성들과 그 사용법, 동적으로 캔버스 크지 지정하기, 마지막으로 캔버스를 활용한 애플리케이션 제작방법소개로 구성하였습니다. HTML 삽입 미리보기할 수 없는 소스 프로젝트 - 그림판 그림판 애플리케이션 index.html 5 10 15 20 25 30 35 40 45 50 png jpg jpeg Save main.css @import url('https:fonts.googleapis.com/css?family=Poppins&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } canvas { background-color: aliceblue; } .controls { height: 50px; background-color: rebeccapurple; display: fle.. 단위 CSS에는 글자의 크기나 길이를 표현하기 위한 다양한 단위가 존재합니다. 단위는 크게 상대단위와 절대단위로 구분이 가능한데요. 상대단위는 기준이 되는 대상의 크기에 따라 동적으로 변하는 단위로 아래와 같은 단위들이 존재합니다. 1. em 부모에게 상속받은 현재 폰트를 1em으로 두고 그에 비례하여 크게 또는 작게 하는 단위. 부모에 비례하기 때문에 아래와 같이 여러 대의 부모를 가지는 경우 연속적으로 이전 부모에 의존하여 통제가 힘들어질 수 있습니다. 1 1 2 3 다만, 텍스트 요소가 다른 요소를 포함하는 경우 이러한 크기는 상속되지 않습니다. no no 2. rem 기본 폰트를 1rem으로 두고 그에 비례하여 크게 또는 작게 하는 단위. em에 root가 붙은 형태로 항상 루트를 기준으로 하여 통제가.. 프로젝트 - 계산기 계산기 애플리케이션 index.html 1 2 3 - 4 5 6 + 7 8 9 * . 0 c / = main.css @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background-color: rgb(149, 193, 231); display: flex; align-items: center; justify-content: center; font-size: 'Lato'; } .calculator { border-radius: 5px; width: 375px; } .screen { heig.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 14 다음
