이레

html 구조를 변경하지 않고 css를 통해 span 안의 텍스트를 변경하고 싶은 경우가 있습니다. 그럴 때 '가상 선택자'를 사용하여 변경해줍니다. 저는 클래스를 하나 더 추가해 사용했습니다. 변경하고 싶은 텍스트를 type 2의 가상 선택자의 css에 추가하고 기존 텍스트는 보이지 않게 해줘야 하기 때문에 .txt.type2 의 font-size를 0으로 설정해줍니다. See the Pen span txt by jh-baek-95 (@jh-baek-95) on CodePen. ⭐️ 비슷한 유형 img src를 css로 수정하기 https://sevendays.tistory.com/45 [CSS] img src를 css로 수정하기 보통 img 태그를 쓸 때는 html 안에 아래와 같이 들어가게 됩니다...

제가 사용하고 있는 비주얼 스튜디오 코드의 단축키입니다. 단축키를 사용하게 되면 작업의 속도를 향상할 수 있습니다. 1 ) html 초기 태그 자동완성 ! + Tab 2 ) 주석 주석하려는 줄 블록 + ctrl + / 3 ) 텍스트 찾기 ctril + f 4 ) 텍스트 찾기 + 텍스트 바꾸기 ctrl + h 5 ) 왼쪽 탐색기 창 열기 / 닫기 ctrl + b 6 ) 에디터 폰트 사이즈 조절 ctrl + '+' / ctrl + '-' ❊ 차근차근 추가할 예정입니다 :)

모바일에서 a태그 또는 input 터치 시 하이라이트 효과가 나오는 경우가 있습니다. 이를 제거 하기 위해서는 -webkit-tap-highlight-color 를 사용합니다. input { -webkit-tap-highlight-color:transparent; /*ios 대응*/} input { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); outline:none; /*android 대응*/} 단, div에서는 지원이 안됩니다.

Javascript의 배열 속에 특정 문자열을 포함하는지 체크하는 함수입니다. ✨ 문법 string.includes(찾고싶은 문자, length) 찾고싶은 문자 : 검색할 문자열, 필수 값, 대소문자를 꼭 구분해야 합니다. length : 검색을 시작할 위치를 지정해 줍니다. 필수 값이 아니므로 값이 없으면 전체 문자열이 대상이 됩니다. ✨ 예제 'abcde'.includes('c') //abcde에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'abcdef'.includes('c', 2) //2째 위치 (0부터 시작)인 cdef에 c를 포함하는지 검사합니다. c를 포함하면 true 반환 'ABcdef'.includes('b') //대소문자를 구분해야 하므로, b가 포함되어있지 않습니다. f..

자바스크립트의 삼항 연산자에 대해 알아보겠습니다. if 문을 간략하게 표현할 때 사용합니다. 참, 거짓 중 하나를 선택할 수 있는 조건문으로 '조건 연산자'라고도 합니다. ✨ 삼항 연산자 표현법 (조건) ? value1 : value2 조건이 참인 경우 첫번째 value1이 실행되고 거짓인경우 마지막 value2가 실행됩니다. ✨ 삼항 연산자 예시 //if문 사용 if(a > b){ c = "hi"; }else{ c = "bye"; } //삼항연산자 사용 (a > b) ? c = "hi" : c = "bye";

Swiper Slider 와 같이 자주 사용되는 Slick slider 사용법입니다. 반응형 웹을 지원하는 슬라이더 라이브러리 입니다 :) 제일 먼저 할 일은 슬릭 슬라이드 홈페이지에서 css, js 파일을 다운로드 하는것입니다. 1. 사이트 접속 후 필요한 파일 다운로드하기 http://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 2. 코드 작업란에 ..

scrollLeft를 이용해 특정 위치로 이동시키는 이벤트를 주는 경우가 있습니다. 그럴 때 간혹 딱딱 끊기는 느낌이 들 때가 있는데 그걸 방지하고 부드러운 이동 효과를 원한다면, scrollLeft를 사용하는 영역에 ( 임시로 scrollBox라고 정함) .scrollBox {scroll-behavior: smooth;} 해당 css를 추가해주세요.

자바스크립트에서 연산자는 계산을 돕는 기호를 의미합니다. ✨ 산술 연산자 (Arithmetic Operators) 수식을 계산하도록 도와주는 연산자입니다. 사칙연산과 나머지, 증가, 감소 연산이 있습니다. 연산자 이름 사용법 + 덧셈 a + b - 뺄셈 a - b * 곱셈 a * b / 나누기 (몫) a / b % 나누기 (나머지) a % b ++ 증가 ( +1) a++ -- 감소 ( -1) a-- ✨ 대입 연산자 연산자 이름 사용법 a = b 할당 a = b a += b 더하고 할당 a= a + b a -= b 빼고 할당 a = a - b a *= b 곱하고 할당 a = a * b a /= b 나누고 할당 a = a / b a %= b 나눈 나머지 할당 a= a % b ✨ 비교 연산자 (Comparis..

자바를 실행했을 때 Error occurred during initialization of boot layer라는 오류가 뜬 경우 아래와 같은 오류 내용을 확인 할 수 있습니다. 이러한 경우 modul-info.java 라는 파일 때문인데, 이 파일을 삭제해 주시면 됩니다. 프로젝트를 생성할 때 modul-info.java 파일을 생성하도록 체크되어 있어서 그렇습니다. 자바 모듈 시스템 때문에 발생한 오류입니다.

배열(Array)은 연관된 데이터를 모아서 관리하기 위해 사용합니다. 변수가 하나의 데이터를 저장하기 위한 것이라면, 배열은 여러 개의 데이터를 저장하기 위한 것입니다. ✨ 배열 생성하기 public static void main(String[] args) { String[] testGroup = {"test1", "test2", "test3", "test4"}; } ✨ 값 가져오기 컴퓨터는 숫자를 카운팅 할 때 0부터 하는 특성이 있습니다. 아래의 배열에서 3번째 원소의 값을 가져오려면, public static void main(String[] args) { String[] testGroup = {"test1", "test2", "test3", "test4"}; } System.out.println(..