반응형 개인 포트폴리오 사이트 Clone Coding(1) Youtube [Bedimcode : Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode] 를 그대로 클론 코딩하면서 작성한 글임을 밝힙니다. https://www.youtube.com/watch?v=27JtRAI3QO8&list=PLMHwCGy6OXi5GoC_S9L75Q2UkIJwxgddb&index=13&t=408s 유튜브 알고리즘에서 뜬 코딩 영상이었다. 퀄리티가 생각한 것보다 좋아 보였고 차후에 포트폴리오 사이트를 제작하는데, 디자인적이나 코드의 짜임새, 그리고 기초적인 html,css,js에 대한 공부가 될 것 같아서 클론코딩을 해보면서 공부해보기로 했다. 영상에는 각 섹션이 나누어져있는데 오늘.. ocean project/clone / 2021. 9. 6. / dankthedust

Ajax JavaScript의 발전으로 정적 웹에서 동적 웹페이로, 그리고 문서적인 성향에서 어플리케이션 적인 성향으로 발전했다. 하지만 언제나 그렇듯 불만이 있었는데, 그 요인으로는 페이지의 변동사항이 있을 경우, 부가적인 수정소요가 많다는 것이다. 페이지의 변동사항이 있을 경우, 다시 웹 페이지 전체를 리로드해야 하고 업데이트 해야한다. 이런 경우 페이지와 서버와의 통신량이 방대해지고 사용자 또한 매번 리로드 되는 경험을 해야할 것이다. 개발자는 수정요소가 있어 변경할 때에 메인 페이지에 수정을 한다하고 그와 연관된 페이지가 무수히 많다면 그 페이지들을 모두 수정하는 불필요한 개발시간을 투자해야한다라는 것이다. 이러한 불편을 해소해주는 기능이 Ajax이며, 하나의 페이지에 정보를 담고 리로드 없이 업데이트를 .. ocean floor/ajax / 2021. 8. 15. / dankthedust

나의 꿈은 평범한 사람이다. 매일 같이 내 자신을 되돌아보았다. 오늘은 말실수를 한 적은 없는지, 혹여나 예전의 모습으로 또다시 나를 돋보이고 싶어 하지는 않았는지. 말실수를 한 것 같으면 대뜸 사과를 하기도 했고 하루 끝에 자책을 하고 다시 되새기기를 반복했다. 사과라는게 내가 잘못을 했건 하지 않았건 중요하지 않았다. 따져볼 기준을 내가 정하기엔 자격이 없을 것 같았고 사과라는 것이 혹여 작은 오해라도 불러온다면 작은 사과일 지라도 막을 수 있지 않을까 싶었다. 돌아오는 대답이 신경 쓰지 않았다 할 지라도 그럼 더더욱 좋은 것이 아닌가 싶은 것이라 생각했고 그냥 '한 것 같으면' 사과를 했다. 하루 단위로 나를 돌아보는 밤이면 내가 배울 것과 버릴 것을 구분했다. 듣는 법과 경청하는 법 그리고 리액션을 배우고 내 말과 입지, 그.. 카테고리 없음 / 2021. 7. 5. / dankthedust

거울을 보는 법을 배우다 누구의 문제인지 모른 채로 여전히 똑같이 살아갔다. 생각해보면 그때엔 그냥 한번 나서는 나를 그대로 받아들여보자 했던 것 같다. 문제가 내 안에 있는지 모른 채 스스로 받아들이겠다, 그게 나다라고 선언했던 것이다. 지금 돌이켜보면 진짜 무모한 자기결정이었다. 그 문제가 사람들과의 단순한 가치관, 시각의 차이었으면 모를까. 그래도 다 잃지는 않았다. 아니 놓치지 않았던게 있다. 나에게 언젠가 도움이 될 것 같았던 그 친구를 여전히 쫓아다녔다. 무작정 그 친구의 마음, 생각도 따라 해보고 싶었다. 내가 따라잡을 수 없는 친구이지만, 그래서 더 놓칠 수 없는 친구다. 결국 중학교 1학년 때의 그 직감이 큰 행운이었을까, 나를 바꾼 한마디 말을 들은 순간이 있다. 평소에 나댄다거나, 안 좋은 별명으로 불릴 때면.. reference book / 2021. 3. 15. / dankthedust

웹 개발 검색 키워드 document - 태그의 삭제, 자식 태그 추가 등 * Document Object Model window - 웹페이지의 주소, 새 창 열기 등 ajax - 새로고침 없이 웹페이지 정보 변경 cookie - 웹 페이지가 새로고침 되어도 현재 상태를 유지 offline web application - 인터넷이 끊겨도 동작하는 웹 페이지 webRTC - 화상 통신 웹 앱 제작 speech - 음성 인식 및 음성과 관련 webGL - 3차원 그래픽 이용 webVR - 가상현실 ocean floor / 2021. 3. 14. / dankthedust

UI와 API #UI, API UI(User Interface)는 사용자들이 시스템을 제어하기 위해서 조작하는 장치를 의미하고 API(Application Programming Interface)는 프로그래머들이 사용하는 조작 장치를 의미한다. 간단히 html에서 버튼을 생성하고 클리 시에 'Hello world'라는 경고창이 뜨도록 코딩을 해보면 버튼은 UI가 되는 것이고, alert()라는 함수는 웹브라우저를 만든 사람들이 미리 만들어둔 API이다. 우선은 이런 API를 응용하고 결합해서 새로운 프로그램을 만들 수 있다라고 간단한 개념만 짚고 넘어가자. www.boostcourse.org/cs124/lecture/147574/?isDesc=false 자바스크립트의 시작 부스트코스 무료 강의 www.boostcour.. ocean floor/js floor / 2021. 3. 14. / dankthedust

JavaScript 연동과 라이브러리(Library) #JavaScript 연동 themeChanger()이라는 함수를 구현하고 코딩한 JavaScript를 1부터 4.html에 모두 붙여 넣어 원활한 구동이 되는 것을 확인했다. 그런데 이런 페이지가 많다면 모두 복사하고 수정 소요가 생겼을 때, 일일이 수정해야 하는 것은 상당히 비효율적인 일이 될 것이다. 보다 효율적으로 코딩하기 위해서 css를 hmtl에 불러왔던 것처럼 JavaScript도 불러온다면 우리는 한번의 수정으로 모든 페이지를 변경할 수 있게 될 것이다. themeChanger는 글씨색과 배경색을 변경하는 기능인만큼 color.js라는 파일을 만들고 html 내 사이에 있던 코딩을 붙여 넣었다. var Links = { SetColor:function (color){ var alist = .. ocean floor/js floor / 2021. 3. 14. / dankthedust

JavaScript 객체(Object) #객체(Object) 객체 또한 코드의 정리, 효율을 위한 개념이 존재하는데, 서로 연관된 함수와 변수가 많아질 때, 이를 정리하고 묶어주는 용도로 이해할 수 있다. 이전에 앞서서 작성하였던 theme코드를 다음과 같이 리팩토링하면 //백그라운드 컬러 변경 function setBgColor(color){ document.querySelector('body').style.backgroundColor= color; } //바디 텍스트 컬러 변경 function setBodyColor(color){ document.querySelector('body').style.color= color; } // a 링크 태그 컬러 변경 function linksSetColor(color){ var alist = docum.. ocean floor/js floor / 2021. 3. 13. / dankthedust