분류 전체보기25 <css> 탭메뉴만들기(input태그/label태그의 활용) input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각하면 된다. label의 for속성을 통해 input의 id와 연결하는 작업이 필수적이다. 오늘 CSS작업을 통해 탭메뉴만들기는 input의 radio속성을 활용해서 진행될 예정이다. 우선 input태그에 대해 간단히 알아보고 시작해볼까 한다. 이외에도 input태그에 여러 속성이 있으니 참고만 하시길!😉 1. input태그 속성 text 텍스트입력 email 이메일입력 tel 전화번호입력 password 비밀번호입력 color 색상컨트롤 time 사용자지역시간 date 년,월,일 표시달력 month 월 달.. 2024. 4. 12. <Jquery> attr 속성 <javascript> setAttribute 속성 HTML의 속성을 제어하는데 있어서 jquery는 .attr()통해서 제어하고, javascript에서는 setAttribute를 활용하여 제어하게 된다. 나는 이 속성을 활용해서 이미지 속성 변경을 많이 하곤 하지만, 글의 전달을 위해 input태그를 통해 예제를 보여줄까 한다. - jquery와 javascript의 스타일 조건 동일 - button클릭 시 input의 placeholder(미리보기텍스트) 변경 1. jquery jquery의 경우 필수적으로 사용해야 하는 플러그인이 있음에 따라 코드기록으로 대체한다. * 버튼 클릭시 input.attr(변경할속성명:변경할속성값) = input.attr(placeholder:"미리보기가 변경되었습니다") attr(속성명,속성값) DOCTYPE html.. 2024. 4. 11. <CSS> border-gradient 그라디언트 테두리 오늘은 CSS로 테두리에 그라디언트를 삽입하는 방법을 기록하고자 한다.(포트폴리오 작업하다가 추가 공부하게 된 내용) 일반적인 CSS 테두리 속성은 border: 두께 스타일 색상; (border : 1px solid black;)과 같이 입력하여 사용하지만 테두리에 그라디언트가 들어가는 경우 border-image/background-image속성을 사용하게 된다. 1. border-image : gradient 속성 적용/ 다만, border-radius 속성 적용이 안됨 · border : border속성 설정 · border-image : gradient속성 설정 · border-image-slice (필수로 함께 사용 ★) .square{ border: 10px solid; border-imag.. 2024. 4. 10. 작심4일 티스토리 4월부터 시작했는데! 4일하고! 4일쉬고! 다시 달려봅니댜... 열심히 공부해서 도움이되는 기록들을 남겨놓자꾸오..❤ 공부엔 체력도 자산이다! 2024. 4. 9. <javascript> 객체요소의 우선순위 설정 객체요소의 우선순위 설정을 위해선 보통 아래와 같이 활용하게 된다. 1. 객체요소의 우선순위 설정 부모객체>자식객체 부모객체 자손객체(기호>대신 띄어쓰기로 구분) 선택객체선택객체의선택자 ex) #box div{ /* 아이디명=box 의 자손 태그=div 선택*/ #box .click div{ /*아이디명=box이면서 클래스명=click인 부모객체의 자손 태그=div 선택 = 동일한 객체의 우선순위를 높여서 선택 시 사용 = 동일한 객체의 선택자를 공백없이 붙여 모두 작성*/ } # box div.act{ /* 아이디명=box의 자손 태그=div이면서 클래스명=act인 자손 요소 선택*/ } HTML 삽입 미리보기할 수 없는 소스 2. 자바스크립트에서의 클래스 추가&제거 일반적으로 선택자.style.속성값.. 2024. 4. 9. <javascript> 반복되는 요소의 이벤트 적용 ◇ ul-li 형식 구조에 이벤트를 적용하는 경우 1) css에서 스타일 작업 시 각 객체를 자동으로 인식 2) j-query에서 스타일 작업 시 li전체를 인식 - 각 객체를 인식하기 위해 this선택자를 통한 작업 필요 3) javascript에서 스타일 작업 시 문서객체 선택 후 이벤트.currentTarget을 활용한 객체 인식 - es5버전까지는 2)jquery와 같이 this선택자 사용을 통해 각 객체 선택 - es6버전부터는 this 대신 e.currentTarget의 사용(e는 이벤트발생요소) ◇ 번외 j-query : $(선택자).text('내용') ▶ 선택자의 내용으로 text('내용')삽입 javascript : .innerText ▶ 선택객체 요소 안에 있는 텍스트값의 활용 HTML.. 2024. 4. 4. 이전 1 2 3 4 5 다음
