본문 바로가기
반응형

전체 글567

코드스테이츠 소프트웨어엔지지어링 부트캠프 +6일 코드스테이츠에서의 첫번째 토요일 첫번째 토요일이다. 정해진 스케쥴이 없는 상태에서 뭘 할까 인터넷만 뒤적뒤적하느라 2시간은 보낸것같다. 코플릿 반복문을 한바퀴 돌리면서 2중반복문을 집중해서 다시 보았다. 많이봐서 내가 생각하는게 외운걸 기억하는건지, 진짜 알고 생각하는건지 모르겠다. 바로 생각나는 의식의 흐름들을 무시한 채, 일부러 실수했던 코드들을 적고 종이에 나름의 순서도를 그려가며 하나하나 정리했다. 헷갈렸던 2중반복문 코플릿을 복습하고, w3school 홈페이지에서 html을 공부하다가 block, inline 특성 이라는 개념을 알게 되어 정리한 후 게시글을 올렸다. https://wnsdufdl.tistory.com/17 HTML요소의 block 특성과 inline 특성 1. 크기 block은.. 2021. 7. 25.
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.
반응형