영원히 흘러가는 강

display를 활용한 예제는 수없이 많을 것이다. 하지만 속성 값에 대한 헷갈리는점이 있어서 정리해보려한다! 간단히 정리해보자면 display : none : 보이지 않음 , 없는것처럼 반응 block: div , p , h , li 줄바꿈 크기지정 가능 inline: span, b , i , a 줄바꿈 없음 , 크기 지정도 불가능 inline-block : 줄바꿈 없음, 크기 지정 가능 display: none 말 그대로 보여주지 않는다! 이때 중요한게 visibility 에서 hidden 값과의 차이 일것이다!! display:none은 해당 영역을 차지하지 않는다! display: block div , p , h , li 태그 등이 이에 해당된다 기본적으로 가로 영역을 모두 채우며 줄바꿈이 된 것..

유튜브 채널 노마드 코더에서 제공한 바닐라 자바스크립트에 대한 강의가 있어서 따라해보고 올리는 내 소감 + 변함 없는 상수는 대문자로 선언!! setInterval 을 이용한 현재시각 화면 출력 function getTime() {//시간 구하는 함수 const date=new Date(); const m=date.getMinutes(), h=date.getHours(), s=date.getSeconds(); clockTitle.innerText=`${h}:${m

슬라이더를 설명 할때에 위의 그림이 이해하기에 가장 적합한거 같다 (내용말고 그림만 보자면!) ul> li 를 위와 같이 container 안에서 이동 하는것으로 li를 위와 같이 옆으로 쭉 나열하고 버튼 클릭시에 container에는 옆의 값이 들어오는 로직이다 코드로 보자면 컨테이너 값을 변경 잘하는게 중요한점인거 같다!!! css 값은 언제나 어렵다.. 위치 설정은 더더욱..

QnA에서 많이 사용하는 아코디언! 자기 값일때만 해당 글을 보여준다! 배운점 : 1. 해당 로직! 코드와 함께 보자면 변수로는 버튼,글과 제목을 감싸는 클래스, 제목, 글에 대한 btncollapse ,question, heading, answer 제목을 클릭을 받으려면 for문으로 heading을 다돌면서 클릭 이벤트를 받으면 안에서 question 클래스에 기존 active 값 삭제하고 target이 된 부모에 active 추가 한다 그 외 나머지 for문은 초기에 모두 안보이도록 해주고 밑의 activePanel에서 지목된 active만 display해준다 그리고 버튼 클릭시 모든 anwer display=>none

html+css+js 바닐라 자바스크립트로만 구현해본 코드 수 많은 글과 컨텐츠가 존재할때에 맨위로 올라가기 버튼이 필요할텐데 이를 위해 구현 배운점 : 1. document.documentElement : documentElement 속성은 문서의 documentElement를 Element 객체로 반환합니다. HTML 문서의 경우 반환 된 객체는 요소입니다. 2. document.documentElement.scrollHeight, document.documentElement.offsetHeight 크로스 브라우징에서의 해결점 높이 구할때! let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHe..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. The source for this interactive example is stored in a GitHub repository. If you'd like to cont developer.mozilla.org

조건에 따른 값변화로 알고 넘어가면 될것같다/ 전에 사용하던 useState, useEffect를 사용한 코딩이라 익숙해지는데 초점을 잡아야할것 같다 import React,{useEffect,useState} from 'react'; function App() { const[condition,setCondition]=useState(false); //useState 값으로 condition 초기값 false const toggle= ()=> setCondition(!condition);// toggle 실행시 condition 값 변경 const renderCondition=condition//renderCondition 값으로 같다면 true ? 'True' : 'False' return ( {ren..

props는 property의 약자로, 부모에게 받아온 데이터입니다. 리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다. 따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다. props는 위와 같이 정의되어 있다. 내가 생각한 props는 App.js는 메인으로 건재할테니 하위 파일에다가 값을 전달해주는 그리고 매개변수처럼 props를 받아오는 것이다. 아래 코드를 보면 이해 갈 것이다. 아래는 App.js import React,{useEffect,useState} from 'react'; import Counter from './components/Counter'; function App() {..

이전에 useState와 함께 useEffect useEffect는 렌더링이 될때마다 특정 작업 수행하도록 설정할수 있다! 아래는 버튼 클릭시 증가하는 간단한 코드 import React,{useEffect,useState} from 'react'; function App() { const [count,setCount]=useState(0); useEffect(()=>{ console.log('effect');//버튼 클릭시마다 실행되어 로그찍힘 }) console.log('rendering') const incre=()=>{ setCount(count+1); } return ( good! click {count} ); } export default App; 위는 값 변경시에 무조건 useEffect를 ..

컴퓨터에 관한 모든 언어에 있어서 "hello world" 가 처음 작성되는 것이라면 js에서는 이벤트로 alert 찍어보는게 가장 먼저이지 않을까 생각한다 :) 그렇다면!! 리액트에서의 App.js에다가는 어떻게 해야 이벤트를 설치하고 alert를 찍을까 아래는 버튼 클릭시 함수 실행 function App() { const func=()=>{ alert('hello'); }; return ( //리액트에서는 onClick ! 대문자이다 submit ); } export default App; 그렇다면!! 이벤트 설치를 알았으니 하나더! 아래는 onKeyUp (글자 입력후 눌릴때가 아니라 떼어질때) function App() { const func=()=>{ console.log('key 눌렸다가 떼어..