프레임워크160 [CSS] Cascade Layers Cascade Layers * Control of the cascade, simplified style ordering (캐스케이드, 단순화된 스타일 순서 제어) : 스타일링의 순서를 심플하게 만들어 주는 기능으로써 모든 브라우저에서 지원합니다! CSS를 설명하는 단어 중 가장 중요한 Cascading은 폭포수가 흘러가듯이 우선순위가 정해지는 것을 말합니다. 그중에서 개발자는 "구체적 실렉터"와 "선언된 순서" 이 두 가지만 알고 있으면 됩니다. (그만큼 저 두가지가 개발자에게는 중요하다는 의미) 예를 들어 부트스트랩과 같은 프레임워크 CSS를 사용하는 데 프로젝트 CSS를 사용하여 프레임워크의 스타일을 덮어 씌우고 싶을 때는 어떻게 해야 할까요? 1) 최대한 구체적으로 이름을 정의한다. 2)! impo.. 2022. 6. 8. [jQuery] 파라미터(인자) 사용하기 function을 쓰는 이유 1. 긴 코드를 짧게 축약할 수 있음 2. 파라미터를 사용하면 함수를 업그레이드할 수 있음 (한가지 동작만 주야장천 하는 게 아니라 파라미터를 사용하여 여러 가지 경우의 동작을 시킬 수 있음) 위 사진처럼 함수에 구멍을 뚫어 놓으면 해당 함수를 사용 할 때 구멍이라는 변수에 값을 입력할 수 있다. 이를 활용하면 알림창열기, 알림 창닫기 함수 2개를 알림 창 여닫기 함수 1개로 함축시킬 수 있다. → 코드가 훨씬 간결 해지고, 재활용성도 높아진다. 예시) +(더하기) 연산을 수행하여 2+1, 2+2, 2+3을 수행하는 함수를 만든다고 가정했을 때 - 파라미터를 사용하지 않았을 경우 - 파라미터를 사용했을 경우 둘을 비교 했을 때 누가 보더라도 후자가 코드 양도, 가독성도, 재활.. 2022. 4. 27. [jQuery] Script로 UI 조작하기 (alert box) 요즘은 jQuery나 JS 보다는 React나 Vue처럼 JS를 더 편하게 만들어주는 프레임워크를 사용하고 있고 그게 더 생산성에 이득이라고 하지만 내 생각에는 코드가 조금 길더라도, 불필요한 것 같더라도 기반을 다져 놓은 다음 조금 더 쉬운 프레임워크들을 사용하는 게 좋은 것 같다라고 그 과정의 이득을 본 사람으로써 jQuery를 다시 한번 더 공부하게 되는 것 같다. (비전공자나 신입일 때는 지금 유행하는 프레임워크의 작동법을 배운 다음에 깊게 공부하는 게 더 좋겠지만) 강의 내용을 정리 하기에는 별 내용이 없어서 추가적으로 기능을 더해서 만들었다. 1. 기본적인 UI를 구현한다. 덤으로 index.css 파일을 생성해서 CSS도 입혀 주었다. Alert Box 열기 .alert-box { backg.. 2022. 4. 22. [jQuery] 스크롤 감지 이벤트 (스크롤 이동 / 현재 스크롤 위치) jQuery로 작성된 프로젝트를 수정하던 중 스크롤 감지 이벤트가 있다는 걸 알게 되었다. 기존 코드에서 스크롤을 내릴 경우 Header가 위로 올라가면서 가려지는 현상이 일어나 이를 해결하기 위해 현재 스크롤 위치를 사용하여서 문제를 해결 하려고 했는 데 쉽지 않는 과정이었다.. 다행히 스크롤 감지 이벤트를 사용하여 쉽게 해결 할 수 있었다!!! 첫 시도 때 사용한 현재 스크롤 위치를 출력하는 이벤트를 아래와 같이 사용한다. 현재 스크롤 위치 이벤트 $(window).scroll(function() { // 스크롤 이동 시 실행되는 코드 $(window).scrollTop(); }); $('선택자').scroll(function() { // 스크롤 이동 시 실행되는 코드 $(window).scrollT.. 2022. 4. 18. [jQuery] 선택자 종류 [Jquery] 제이쿼리 선택자 : 직접 선택자 (전체 선택자/아이디 선택자/클래스 선택자/태그 선택자/ 안녕하세요. 이번 포스팅에서는 제이쿼리(jquery) 선택자 중 직접 선택자에 대해서 알아보도록 하겠습니다. 선택자는 HTML 요소를 선택하여 가져옵니다. jquery에서 선택자는 CSS와 마찬가지로 가져 lktprogrammer.tistory.com 제이쿼리(jQuery) 선택자 - #1 1. 기본 선택자 - $('h1').css('color', 'red'); - ('h1') 선택자와, css('color', 'red') 메서드 - 문서 객체를 다룰 때 사용하는 형태 - CSS 선택자와 유사 1.1. 전체 선택자 (Wildcard Selector) - * - HTML.. gangzzang.tisto.. 2022. 4. 18. [jQuery] 시작하기 + $(document).ready() 요즘 계속 React, Next.js를 사용하여 프로젝트를 진행하다 보니까 JavaScript는 원하는 대로 잘 쓰는 것 같은 데 jQuery는 교육원 다닐 때 겉할기로 배운 게 전부였던 것 같아서 다시 공부해보고 싶어졌다. 이상하게 HTML, CSS 보다 JS가 재미있다는... 생각이 들어서!! 다시 공부하면서 마스터해볼 생각이다. JS, jQuery 과정 1. index.html 파일을 생성한다. 2. html:5를 입력해서 HTML 기본 틀을 생성한다. 3. 태그를 하나 만들고, id는 "hello"로 설정한다. 안녕하세요 4. 3번에서 만든 태그 아래에 태그를 생성하고, 아래 코드를 삽입한다. 위 코드는 JQuery는 아니고, JS의 형태이다. 코드 해석 document : 웹문서 . : ~의 g.. 2022. 4. 15. [CSS] Input 태그 > 자동완성 해제 및 입력 기록 제거 [ html ] Input 태그의 자동완성 기능 해제하기, input 입력 기록 제거 자동완성 기능을 해제하는 방법은 아주 간단! autocomplete="off" 속성을 사용해주면 input 태그의 자동완성 기능을 해제할 수 있다. 다른 방법도 있다. input 태그가 포함되어 있는 form 태그에서 비활성 harrydony.tistory.com react-datePicker 라이브러리를 사용한 Calendar의 버전 2를 만들면서 자동완성 기능을 없애는 방법에 대해 찾아보게 되었다. 생각보다 어렵지 않아서 정리를 하지 않을까 하다가 미래의 내가 언제든 지 쉽게 찾아볼 수 있도록 간단하게 정리하였다.😎 위 블로그에서 2가지 방법을 참고하여 현재 만들고 있던 기능에 적용하였다. 첫 번째 방법 autoCo.. 2022. 4. 15. [CSS] text 마우스 드래그 시 CSS 설정 (::selection) [HTML/CSS] 텍스트 마우스 드래그시 색상 변경방법, ::selection CSS에는 다양한 선택자가 존재합니다. 선택자 중에는 pseudo 선택자가 존재하는데 오늘은 이 중에서 ::selection 선택자에 대하여 알아보려합니다. webisfree.com input 태그에 text나 p, span 태그의 text 등등 사용자가 웹 페이지에서 특정 text를 드래그할 때 드래그를 못하는 기능도 있지만, 또 다른 방법으로는 드래그 시 CSS를 커스텀하는 방법도 있다. 특정 text 드래그 CSS 커스텀 하기 테스트를 진행하기 위해 p 태그를 생성하고, text를 삽입 해줬다. 이제 ::selection 선택자를 사용해서 drag 시 p 태그의 CSS를 커스텀해준다. p::selection { back.. 2022. 4. 15. [CSS] Pretendard 웹폰트 적용하는 방법 프리텐다드(Pretendard) 글꼴 웹폰트 적용 방법 프리텐다드 웹폰트 일반적인 경우에는 아래의 코드를 각각 CSS 와 HTML 중에 선택해서 적용하면 된다. CSS @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');.. creativestudio.kr 2022. 4. 7. 이전 1 2 3 4 5 6 7 ··· 18 다음 728x90
