프론트엔드 공부 (134) 썸네일형 리스트형 02 input type="file" + addEventListener codepen.io/fangmin/pen/wvgZwMP frontent js02 ... codepen.io frontent js02 ... codepen.io input 속성의 file을 활용하여 클릭시 파일을 저장할수 있는 폼 만들기 01 prototype 메서드를 활용해 익명함수 만들어 실행하기. prototype의 활용 정리 codepen.io/fangmin/pen/wvgZwMP let f = 140; Number.prototype.toCelcius = function(){ return(this-32)*5/9 }; alert(f.toCelcius()); developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes 웹브라우저 호환성 및 웹표준을 위한 js 라이브러리 1.모더나이저 모더나이저: 모든 웹 화면상에서 동일한 내용을 출력하게 해줌 사용방법 : 모더나이저 사이트에서 다운로드 > 검색창에서 원하는 효과 검색후 상단 polifill나 css 로 view 하여 코드 확인하고, 본인 html 에 모더나이저 js cdn 설치후 오른쪽 상단처럼 no-js 로 작성하면 호환되지 않는 브라우저에서 보이지 않게 효과를 넣어준다. 구글폰트 폰트패밀리 여러가지 선택하기 안녕하세요 MAG 입니다 ! 호옥시 구글폰트 폰트패밀리를 엮어서 가져오는 걸 모르시는 분들 ~ 이 있을수도 있을 것 같아서 ! 캡처본을 하나 첨부해봅니다 ! 1.구글폰트 사이트에 들어가셔서 원하는 폰트명을 입력해주신후, 2.아래와 같은 이미지가 보이면 select this style 로 원하는 글씨 크기와 형태를 추가해줍니다. 3.상단 우측 아이콘을 클릭하면 하단 캡처본처럼 선택한 글씨의 크기와 종류가 나오는데 ! 원하시는 편집기로 붙여넣으실때 html 상단 link 태그에 붙이시려면 주소를 복사, css에 직접 붙이실 경우 @import 주소를 복사하셔서 붙여 넣으시고 ! 직접 사용하실 때는 저 링크 하단으로 스크롤을 하면 보이는 font-family 명을 css에서 사용하시면 됩니다 ! 혹시 모르시는.. css calc() 사용하기 ! 안녕하세요 MAG입니다 ! 오늘은 calc() 함수를 써볼건데요 ! calc 함수 는 css 속성 값으로 계산식을 적어 따로 계산 없이 값을 도출할 수 있습니다! 단위로는 %,px, em 등 모두 사용가능하지만, 상대단위로 사용해야 적용이 가능합니다. ** 중요한 것은 계산식을 쓸때 공백을 꼭 띄워줘야 적용이 된다는것 ! **calc 함수는 주로 전체 document에서 양쪽 패딩값을 줄 때 가장 많이 사용하는데요 ! 동일한 퍼센티지의 값을 줄때도 많이 사용됩니다. 중첩사용도 가능합니다. 하단은 많이 사용하는 calc 함수의 예시입니다 ! 더 자세한 내용이나 브라우저 호환성은 하단 MDN 참고하세요 :) ♡ .container{ width: calc(100% - 1em); margin: 0 auto; /.. 사이트 참고자료 모음집 1.독학용 자료 -사전,검색용 : 모질라, wschool developer.mozilla.org/en-US/docs/Web/ -코드 연습용 : 코드펜 codepen.io/pen -브라우저별 사용 여부 검색 :캔아이유즈 caniuse.com/ 2.실습용 자료 -UX UI 디자인참고 : 비핸스, 애플가이드라인,리메인 developer.apple.com/design/human-interface-guidelines/ios/ remain.co.kr/ www.behance.net/ 3.자동화도구들 -클리핑 마스크 bennettfeely.com/clippy/ -호버효과 ianlunn.github.io/Hover/ -css애니메이션 효과 코드 animista.net/ -2d rpg 게임용 png sprite 이미지 u.. 이전 1 ··· 14 15 16 17 다음
