본문 바로가기
반응형

개발368

forEach() : 버튼을 누르면 버튼에 적힌 색깔로 제목 색깔이 변하는 코드 여러개의 속성(버튼)에 하나의 이벤트핸들러 추가하기. w3school홈페이지를 보면서 혼자 DOM CSS 를 공부하다가 이 코드를 만들게 되었다. 버튼개수만큼 함수를 일일이 여러개 만들면 쉽게 기능을 구현할 수 있었지만, 예전 생활코딩 유튜브 볼때 이고잉님의 '항상 코딩할땐 1억개를 한번에 바꿀 수 있는 기능을 만들어야 해요 여러분' 이라는 대사가 떠올라서 함수하나로 모든걸 퉁쳐보기로 했다. 새로배운것 : forEach const title = document.getElementById('sent')//제목 let btns = document.querySelectorAll('input[type = button')//버튼들을 btns에 할당했다. btns.forEach(function (i){//버튼에 적.. 2021. 7. 24.
Javascript : innerText와 textContent 차이 그리고 innerHTML innerText와 textContent 차이 innerText와 textContent 의 값은 모두 text/plain 으로 파싱한 결과이다. 그래서 혼동하기 쉬우나 중요한 차이점이 있다. innerText : 화면에 보이는 내용만 보여준다. CSS등의 스타일링을 고려하기 때문에 리플로우가 발생한다. (리플로우 계산은 가능하면 피하는것이 좋다) textContent : Dom practice HiHIHI 1. 위의 HTML태그를 innerText를 이용하여 출력한 경우 console.log(document.querySelector('#practice').innerText) //innerText를 이용한 출력 Dom practice HiHIHI 2. 위의 HTML태그를 textContent를 이용하여 출.. 2021. 7. 24.
HTML요소의 block 특성과 inline 특성 1. 크기 block은 화면 크기 전체의 가로폭을 차지하고 항상 새로운 라인에서 시작한다. inline은 문장의 중간에 들어갈 수 있다. content의 너비만큼 가로폭을 차지한다. dasdfasdfasdfasdfasdfasdfasdf adlkfalksdfnlkasfdklsaksldnflaskdnflka 2. width, height, margin, padding block은 width, height, margin, padding 프로퍼티 지정이 가능하다. inline은 width, heigth, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. inline의 margin은 margin-letf, margin-right 만 지정 가능하다. div는 width, height가 바뀌.. 2021. 7. 24.
input radio 와 input checkbox의 차이 input radio 와 input checkbox의 차이 radio 유형의 inpu은 보통 서로 관련된 옵션을 나타내는 라디오 버튼 콜렉션, 라디오 그룹에 사용한다. checkbox 유형의 input은 form 안에서 선택된 단일 값들을 제출할 수 있는 기능을 제공한다. 먼저 radio 및 checkbox 버튼에 사용되는 속성들을 살펴보자. 속성 내용 name 서버로 전송될 이름, key값에 해당한다. radio 버튼은 같은 그룹끼리 같은 name을 지정해야 한다. value 서버로 전송될 값 checked 초기값 (체크 되어있거나 안되어 있거나) 태그 버튼을 정확히 클릭하지 않고 항목 이름을 클릭해도 박스가 체크되도록 해준다. 1. 항목이름으로 연결하거나, 2. ~ 로 을 감싸주면 된다. 밑에 코드와.. 2021. 7. 23.
반응형

티스토리툴바