이미지 상품정보 판매가 수량 적립금 배송구분 배송비 합계 선택 상품 13500원 변경 150원 기본배송 무료 13500원 주문하기 관심상품등록 X 삭제 CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } .container{ width: 90%; margin: 0 auto; } div.top{ display: flex; width: 100%; justify-content: space-between; align-items: center; } .box{ width: 10%; display: flex; /* justify-content: center; align-items: center; ..
HTML grocery bud submit clear items CSS /* =============== Fonts =============== */ @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); /* =============== Variables =============== */ :root { /* dark shades of primary color*/ --clr-primary-1: hsl(205, 86%, 17%); --clr-primary-2: hsl(205, 77%, 27%); --clr-primary-3: hsl(205, 72%, 37%); --clr-primary-4: hs..
요소 삭제 설명 및 특징 removeChild() 요소를 제거해 주는 메서드이다. 부무요소.removeChild(자식 요소) 속성 추가 및 제거 설명 및 특징 getAttribute() 요소의 속성 값을 취득할 수 있다. setAttribute() 요소의 속성을 설정할 수 있다. removeAttribute() 요소의 속성 값을 제거할 수 있다. HTML 요소생성 1. 요소생성 버튼 클릭 전 요소생성 버튼을 클릭하면 html 구문을 추가하도록 구성하였다. 하지만 요소 생성 버튼을 클릭 하기 전에는 html 구문이 추가되지 않은 것을 볼 수 있다. 2. 요소생성 버튼 클릭 후 요소생성 버튼을 클릭하면 html구문이 추가된 것을 볼 수 있다. 속성은 태그 안에 들어가는 것이다. ex) * text는 속성이 ..
이전에 실습했던 슬라이드는 ul과 li로 구성했다. 이번에는 div로 구성한 슬라이드 예제를 실습해보았다. HTML CSS *{ margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } input{ display: none; } .section .slidewrap { max-width: 1200px; width: 100%; margin: 0 auto; overflow: hidden; } /*전체적인 사이즈 지정 */ .section .slidelist{ white-space: nowrap; font-size: 0; } .section .slidelist > div { display: inline-blo..
- 이벤트 연결방식 1. html에서 js 연결 (=onclick) 2. js에서 html 연결 (=click) (eventlistener 방식까지해서 3가지 방식이 있다.) ex) 이벤트 연결방식 두가지를 사용하여 코드 작성 예시 HTML 상세 설명 보기 민들레 어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 속 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 상세 설명 닫기 JS document.getElementById('open').addEventListener('click',showdetail); function showdetail(){ document.querySelector('#desc').style.display="block"; document.q..
HTML 여행 준비물 점검 목록 추가 JS var itemlist=[]; var addbtn = document.querySelector('#add'); //#add 버튼 클릭하면 이벤트 발생 addbtn.addEventListener("click",addlist); /*추가 */ function addlist(){ var item = document.querySelector('#item').value; //input 안의 값이 item 변수에 넣음 (=.value) // console.log(item); item변수에 값이 잘 들어갔는지 확인 if(item != null){ /*입력 받은 변수의 값이 있는지 없는지 검사 : 유효성검사*/ itemlist.push(item); //배열에 변수의 값을 추가..
3.1 긱본형식 및 적용방법 적용 방법 위치 태그 설명 및 특징 문서 내부 JavaScript function test(){ var encodeStr='자바스크립트'; console.log(encodeURIComponent(encodeStr)); //인코딩한걸 콘솔에 출력 var decodeStr=encodeURIComponent(encodeStr); //인코딩한것을 변수에 담음 console.log(decodeURIComponent(decodeStr)); //변수에 담긴 인코딩된 데이터를 디코딩을 사용하여 원상태로 복구해 콘솔 출력 var num1='숫자'; if (!isNaN(num1)){ console.log('숫자'); } else{ console.log('숫자아님'); } var num2=1/0..
FEATURES Do more with our app Communication Scheuling Messages Live Chat Communicate with ease Uniquely underwhelm premium outsourcing with proactive leadership skills. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. Ut placerat dui eu nulla congue..
- Total
- Today
- Yesterday