내가 한 노력들

반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다. 실제동작 확인 See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen. 간단히 코드 설명 JS const table_container = document.querySelector('#table-scroll'); const table = document.querySelector..

One Two Three Four Five select / option을 사용하면, 드롭박스 형태로 아이템을 표시할 수 있습니다. JS를 이용해서 다양한 조작을 할 수 있는데, 그 중에서 현재 선택된 option의 값을 가져오는 방법에 대해서 설명하겠습니다. selectedIndex dropBox.selectedIndex select요소에 selectedIndex 속성을 사용하면, 현재 선택되어진 option의 index 번호를 가져옵니다. 0부터 시작하게 되므로, 위에서 One이 선택되어 있다면, 0의 값을 가져오게 됩니다. options let seleted_idx = dropBox.selectedIndex; dropBox.options[selected_idx] options[idx]을 사용하게 되면..

원래 input 의 file 타입을 보면, 사진 처럼 되어있습니다. 이번에 만들어 볼려고 하는 것은, 위와 같은 UI를 버튼 하나로 변경해볼려고 합니다. 위의 코드를 입력하게 되면, 버튼 하나만 보이게되고 버튼을 클릭했을 때 input file이 클릭 되었을 때랑 동일한 기능이 실행됩니다.

HTML detail detail ... 각기 다른 value값을 지닌 button 여러개를 준비 JavaScript const buttons = document.querySelectorAll('#button') buttons.forEach(button => button.addEventListener('click', (e) => { console.log(e.target.value) })); 각 버튼 요소를 누르면, 각 요소의 value 값을 console.log로 출력시킴 각 버튼을 클릭해보면, 콘솔창에서 각 button요소의 value값이 출력되는 것을 확인할 수 있습니다.

제가 구현하고 싶었던 내용은 위의 사진처럼 체크박스가 여러개 존재하는데, 각 카테고리마다 내용이 중복이 되고있습니다. 그래서, 만약에 "행"의 카테고리에서 "keyword"를 선택하면, 다른 두개의 "열"과 "값"에서는 "keyword"를 선택 못하도록 막고싶었습니다. JS에대한 지식이 부족해서 검색해보면서, 무식하게 구현한 것 같지만.. CheckBox 태그

deleteContent 함수 생성 App.js deleteContent(_id) { let _content = null; let _contents = Array.from(this.state.contents); for (let i = 0; i < _contents.length; i++) { if (_contents[i].id === _id) { _contents.splice(i, 1) } } this.setState({ contents: _contents, mode: 'read', selected_content_id: 0, }) } delete에서도 마찬가지로 기본 array에는 영향이 없도록 Array.from()을 사용하고 있습니다. 그리고 splice 함수를 사용하는데, splice는 JS 문법으로..

js코드를 파일로 만들어서 html에 가져오는 경우에, script 선언 위치를 어디에 할지에 대한 고민이있습니다. 대부분은 body가 끝나는 부분에 선언하는 경우가 많습니다. 그 이유는 ?? 위의 코드처럼 javascript 코드를 head 부분에 선언한 경우에 어떻게 실행되는지를 설명해보면, 브라우저는 해당 html코드를 한줄한줄 해석하게 됩니다. 그러다가 script 태그를 만나, 해당 array.js라는 js파일을 다운받는 과정이 필요하고 실제로 코드에 적용하기 위해서 js파일을 실행하는 시간이 필요합니다. 그러면, 브라우저는 js파일을 다운받고 실행하는 시간동안은 나머지 HTML 코드를 parsing을 하지 못하게 되고, 유저들은 그만큼 기다리는 시간이 길어지게 됩니다. 그렇기 때문에, body..

전 포스팅에서는 props와 state를 이용해서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 것을 해봤습니다. 그러면, 하위 컴포넌트에서 상위 컴포넌트에 영향을 주는 것은 불가능한가?? 이벤트를 발생시켜 영향을 주는 것이 가능합니다. list 목록을 만들어서, 클릭을 할 때 해당 리스트의 내용을 화면에 보여주는 이벤트를 만들어 볼려고 합니다. 우선 list를 만들어 보겠습니다. 리스트 컴포넌트 추가하기 app.js this.state = { header: {title: 'WEB', subject: 'WORLD WIDE WEB'}, contents: [ {id: 1, title: "HTML", desc: "HTML IS ..."}, {id: 2, title: "CSS", desc: "CSS IS ..