처음부터 차근차근

accent-color 컨트롤 색상을 바꿀 때 사용하는 css 속성이다. 여기서 말하는 컨트롤은 을 말한다. 사용 예시 이렇게 하면 radio의 색상이 파란색(default)에서 빨간색으로 변경된다. accent-color 다음의 값에는 저렇게 color값을 직접 넣어도 되고, ex) #dedede, rgb(125, 125, 125), white 등 'auto' 를 넣어도 된다. auto를 넣으면 현재 플랫폼에 매치되야 하는 accent-color에 따라 사용자 에이전트(= UA, 웹 맥락에선 브라우저를 의미함)에서 선택한 색상을 나타낸다. 현재 플랫폼에서 매치되야 하는 accent-color가 없으면 default 색상(파란색)을 나타낸다. accent 색상 accent-color 속성을 사용하다보면 ..

다중 파일을 업로드 할 때 드래그 앤 드롭 할 수 있는 기능을 구현해보았다. js $('.content') .on("dragover", dragOver) .on("dragleave", dragLeave) .on("drop", uploadFiles); function dragOver(e) { e.stopPropagation(); e.preventDefault(); $(e.target).css({ "background-color": "#fff", "outline-offset": "-30px", "outline": "2px dashed #ffb341", "color" : "#ffb341", "font-size" : "30pt" }); let str = 'Drop'; $(e.target).html(str); }..

OpenWeatherMap는 날씨와 관련된 데이터를 제공해주는 API이다. https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweathermap.org 사용방법 1..

이벤트 전파를 막는 함수이다. 예를들어 코드의 구조가 이런식으로 되어 있다고 가정해보자. div 2개와 span에 onclick 이벤트가 걸려있으면 span을 클릭했을 때 두개의 div의 클릭 이벤트도 같이 실행된다. 당연히 span은 div들의 자손 노드이기 때문이다. 이런 상황에서 span을 눌러도 div의 이벤트가 실행되지 않게 하는 함수가 있다. 바로 이 함수이다. $('span').onclick = function(e) { // 상위 이벤트(div 두개) 동작하지 않게 하기 e.stopImmediatePropagation(); } 이 함수를 사용하면 상위 노드의 이벤트가 실행되지 않는다! 이벤트 중복 처리 때문에 오류났었는데 한참을 못찾았었다... 결국 오류 발견하고 구글에다 검색해서 찾은 해결..

$("선택자").click(function(){ //코드 }); jquery click 이벤트는 정적 페이지에서는 잘 작동이 되지만 동적 페이지 (예를들어 js 구문으로 추가한 코드라던지...)에서는 작동이 되지 않는다. 그럴 땐 아래의 on 이벤트를 사용하면 된다. $(document).on("click", "선택자", function(){ // 코드 }); 이걸 사용하면 동적 페이지에서도 click이벤트가 잘 실행 된다. 참고 : https://vlog.tion.co.kr/%ED%95%B4%EA%B2%B0-jquery-click-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%95%88%EB%90%A8-%EB%8F%99%EC%A0%81-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC..

fontawesome 5.15.4 free icon을 사용하여 만든 동적 별점 기능이다. html 코드 0 {{-- 나중에 데이터베이스에 저장할 값 --}} js 코드 function change_star(me) { let empty_star = 'far fa-star fa-lg'; let half_star = 'fas fa-star-half-alt fa-lg'; let full_star = 'fas fa-star fa-lg'; let empty_star = 'far fa-star fa-lg'; let half_star = 'fas fa-star-half-alt fa-lg'; let full_star = 'fas fa-star fa-lg'; if (me.value == 0) { $('#star1').at..

컴포넌트 파일 분리 컴포넌트를 만들어서 App.js 안에다 두면 복잡하고 유지보수하기 힘들다. 그래서 컴포넌트를 만들면 각각의 컴포넌트들을 파일로 따로 분리해둔다. 1. src / components 디렉토리를 새로 만든다. 이 안에다가 컴포넌트 파일을 모아둘 것이다. 2. components 파일 안에다 '컴포넌트명.js' 파일을 만든다. 그리고 안에다 코드를 작성한다. import React, {Component} from 'react'; // react랑 Component 임포트 class FooterTab extends Component{ render(){ return ( 제목 ); } } export default FooterTab; // 다른 파일에서 FooterRab을 가져다 쓸 수 있게 만..

반복문(for) vue에서는 반복문으로 for문을 쓴다. for문을 따로 선언하지 않고 태그안에다 끼워서 쓴다. export default { name: 'App', data() { return { animals : ['cat', 'dog', 'mouse'], } }, components: { HelloWorld } } {{ animal }} animals라는 배열을 animal이라는 변수에 하나씩 넣어 출력한다. animals자리에 배열이 아닌 object 자료형도 넣을 수 있다. key는 반복문을 사용할 때 꼭 써야한다.(안쓰면 에러남) key 컴퓨터가 반복문을 돌릴때 각각의 요소를 구분하기 위한 값이라고 보면된다. 그래서 key에다가는 유니크한 숫자같은 값을 넣어준다. 그래서 아래와 같이 사용한다...