본문 바로가기

개발공부_Blog154

javascript - if 아는건데 막상 쓰려고보면 ... 또 생각보다 잘 안되는 ... 허 허 허 알고 있다고 생각한 if문 다시 보기 홀수 짝수 구하기 let num = Number(prompt('숫자를 입력하세요')) if (num > 0) { alert('양수입니다') }else if (num == 0){ alert('0입니다') }else { alert('음수입니다') } # if문 if ( 불 값이 나오는 표현식 ) { 불 값이 참일 때 실행할 문장 } 불 값이 나오는 표현식!!!!!!!!! 입력받은 숫자(num)가 0일때를 표현하려고 num =0 을 했더니 음수가 나왔따 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 난 저렇게 조건을 써 넣은 기억이 없는데 나는 값 비교를 한 게 아니고 num에 0을 입력해 준 것이었고 .. 2021. 12. 21.
css - img사이즈조절 html에서 이미지를 넣으려고 할 때.... box사이즈에 맞춰서 넣어야 되는데... 사이즈가 내 마음대로 되지 않을때 그럴때 화가 난다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉 차도록 설정됩니다. 못생겼어. 용납못한다!!!!!!!!!!!!!! // img가 box사이즈에 맞추기 위해 예쁘지 않은 모양으로 늘어남 .blog-list img { width: 100%; height: 200px; } // object-fit을 넣어 cover 비율 맞게 늘어남 .blog-list img { width: 100%; height: 200px; object-fit: cover; } object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너.. 2021. 12. 20.
javascript - addEventListener('keyup',~ 키보드 이벤드 # event keyup : 키보드에서 키가 떨어질 때 실행된다 # 속성 : 키보드 이벤트를 발생시켰을 때 어떤 키를 눌렀는지와 관련된 속성들 code : 입력한 키를 나타내는 문자열 keycode : 입력한 키를 나타내는 숫자(미리 정해져있음)를 보여줌 altKey , shiftKey, ctrlKey : 각각에 해당하는 키를 눌렀는지 불표현식으로 보여줌 keyup 키보드 이벤드 textarea.value를 통해 textarea에 쓴 글자를 읽어들이고 length 속성을 사용해 글자 수를 구한다 그리고 textContent로 h1태그에 변수 length값을 출력 해준다! 2021. 12. 19.
javascript - addEventListener, removeEventListener 이벤트 설정하기 문서객체.addEventListener( 이벤트명, 콜백함수=이벤트핸들러 ) h1.addEventListener( 'click', ()=>{ 추가할 이벤트 내용ㅇㅇㅇㅇㅇㅇ }) 이벤트 제거하기 문서객체.removeEventListener( 이벤트명, 콜백함수=이벤트핸들러 ) h1.removeEventListener( 'click', ()=>{ 제거할 내용 / 변경할 내용ㅇㅇㅇㅇㅇ }) 클릭 횟수 : 0 coount의 초기화값으로 =0을 넣어준 뒤, 클릭이벤트가 실행되면 count++로 1씩 증가하게 하는 event를 생성한다 그 뒤에는 h1태그애 count를 추가해준다 ==> 클릭할 때마다 h1의 클릭횟수가 1씩 증가한다 클릭 횟수 : 0 이벤트연결 이벤트해제 이벤트 연결 상태: 해제 이.. 2021. 12. 19.
javascript - createElement / appendChild / removeChild 문서 객체를 생성 할 때 # 문서 객체 생성하기 documena.createElement( 문서객체이름 ) # 문서 객체 추가 ( 부모객체 아래에 자식객체 추가 ) document.appendChild( 자식 객체 ) 예제 코드 (1) document.addEventListener('DOMContentLoaded',()=>{ const header = document.createElement('h1') // h1 태그를 생성한다 header.textContent = '문서객체 동적으로 생성하기'// text를 추가한다 header.style.color = 'white' // style속성을 추가한다 header.style.backgroundColor = 'tomato' document.body.appen.. 2021. 12. 19.
javascript - style.backgroundColor = 'red' 문서객체 스타일조작 CSS에서 사용하는 style속성의 이름과 javascript에서 사용하는 style속성 이름이 약간다르다 CSS : backgrund-color , font-size j s : backgroundColor, fontSize (캐멀케이스 : CamelCase) style객체는 아래와 같은 방법으로 사용 가능하다 h1.style.background = 'red' h1.style['backGround']= 'red' h1.style.[back-ground']= 'red' 예 제 25개의div태그를 사용하여 gradient를 만들어보자! querySelectAll을 사용하여 div를 array로 가져왔고 forEach()를 사용하여 divs의 개수만큼 div의 개수만큼 index를 출력하게.. 2021. 12. 19.
javascript - setAttribute / getAttribute메소드 문서 객체의 속성을 조작할 때는 문서객체.setAttribute(속성이름, 값) : 특정 속성에 값을 지정한다 문서객체.getAttribute(속성이름, 값) : 특정 속성을 추출한다 아래 예제는 img태그의 src속성을 조작해서 이미지를 출력하는 예 이미지 url : http://placekitten.com/너비/높이 forEach로 출력되는 index값 [0,1,2,3]에 + 1 을 하고 * 100 을 해서 Width 속성을 지정해 준 것 결 과 width가 다른 고양이img가 출력되었다 2021. 12. 19.
javascript - .textContent / .innerHTML 문서 객체내부의 글자를 조작하는 방법 문서객체.textContent // 입력된 문자열을 그대로 넣는다 문서객체.innerHTML // 입력된 문자열을 HTML형식으로 넣는다 textContent 는 글자가 그대로 입력되었고 innerHTML은 을 h1의 특성? + 문자가 출력되었다 # 깨알 # innerText 속성과 textContent속성 두 속성은 text를 추가하는 기능을 가지고 있다. innerText의 속성 성능의 문제로 textContent 속성이 추가된 것이므로 최신? textContent의 속성을 사용하는 것이 낫다 2021. 12. 19.
javascript - querySelector, querySelectorAll DOMContentLoaded 웹브라우저가 문서 객체(html)를 모두 읽고 나서 실행하는 이벤트 body태그가 생성되기 이전는 head태그 안에 script태그가 작동되지 않는데, javascript의 실행 순서상(위->아래) script문서가 먼저 읽히기 때문에 body태그에 있는 요소에 접근하지 못함 DOMContentLoaded는 body태그를 모두읽고 나서 script를 실행하라는 의미의이벤트이다 문서객체가져오기 querySelector querySelecor : 선택한 요소를 하나만 가져온다 javascript에서 CSS style을 추가한 결과 문서객체가져오기 querySelectorAll querySelecorAll : 문서 객체 여러개를 배열로 읽어들이는 함수이다 내부의 요소에 접근하고 .. 2021. 12. 19.

티스토리툴바