영원히 흘러가는 강

포토폴리오 혹은 회사의 주소를 클립보드에 복사하는 기능 구현! 복사하기 구현 복사 오늘의 배운점 ! text.select() 와 document.execCommand()

html5의 canvas를 활용한 그림판 만들기 canvas에 중점보다는 js와 css에 중점을 두고 구현해봄 range에 대해 처음 알게됨!!! css 에서는 @import "reset.css" 로 css 리셋 display: flex; flex-direction: column; align-items: center; cursor:pointer; 위와 같이 간단한 css 적용 js에서는 canvas에 대한 내용 제외 한다면 Array.from(colors).forEach(color=> color.addEventListener("click",changeColor)); //배열로 변환시켜서 클릭시 함수호출 nomadcoders.co/javascript-for-beginners-2/lobby Watch Now..

바닐라 자바스크립트로 구현해본 타자게임! 자바스크립트의 능력을 위해 따라해보며 배운 코드 js js코드 let score=0; const GAME_TIME=5; let isPlaying=false; let timeInterval; let words=[]; let checkInterval; const wordInput=document.querySelector('.word-input');//단어 입력 input const wordDisplay=document.querySelector('.word-display');//단어 보여주는 div const scoreView=document.querySelector('.score');//점수 const timeView=document.querySelector('.ti..

크로스 브라우징? W3C의 웹표준에 맞는 코딩을 해서 브라우저나 기기마다 동일하게 보여지고 작동하도록 하는것! gs.statcounter.com/browser-market-share/all/ Browser Market Share Worldwide | StatCounter Global Stats This graph shows the market share of browsers worldwide based on over 10 billion monthly page views. gs.statcounter.com 2021년 2월 기준. 우리나라는 1위가 크롬 2위 사파리 3위 삼성인터넷 4위 웨일 5위 엣지 순이며, 전세계적으로 보자면 1위 크롬 2위 사파리 3위 파이어폭스 4위 엣지 5위 UC Browser 이..

float와 inline-block 의 구조 형태에서 Flex는 아마 구원자 같은 느낌이다 엄청 손쉽게 레이아웃을 구성하는 방법으로 gird 또한 존재하지만 IE는.. 그리하여 flex에 대한 정리를 해보려한다! 내가 작성하며 정리 하는 개념이라서 출처에 가보면 더 자세한 설명이 존재! 출처: studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexi..

조금 더 이쁜 웹 디자인을 위해서는 배치가 제일 중요하다고 생각한다. flex 와 gird가 있지만 브라우져들마다의 지원 버전이 다를수 있으니 기초의 position 도 익혀야할것이다. static : default 값으로 , 자동 배치되며 임의로 위치 설정 불가능 relative : 원래 자리하던 위치 기반으로 위치 설정 absolute : 절대 좌표와 함께 위치 지정 fixed : 스크롤과 상관없이 보여지는 화면에 항상 고정 static html 요소는 기본적으로 static .즉 초기값이다. top , bottom , left , right 속성의 값에 영향 받지 않는다. relative 요소를 위의 static처럼 문서 흐름에 배치한다. 그 후에 자기 자신을 기준으로 위치 변경 absolute 가..

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