소소리네

인터넷에서는 세상을 이롭게 하는 데 대의?를 가진 코딩 능력자님들이 그들이 만든 코딩을 공유한다. 코딩뿐만 아니라, 심지어 디자인까지도 말이다. // 디자인이란 Style, 즉 CSS를 말한다. codepen.io 사이트를 소개한다. 웹 페이지 구조와 시퀀스, 그리고 디자인을 적극 활용하거나, 단순 참조하거나, 본인 입맛대로 수정해서 쓰면 된다. (지금은 오픈소스 시대가 아닌가) AaronVanston씨가 게시한 글을 참조해서 예시로 실행해 보겠다. thanks to my fellow friend, AaronVanston! 위 이미지대로 웹 페이지를 구성하기 위한 HTML, CSS, JS 코드를 모두 제공한다. 일단 무작정 따라해보자. HTML 코드는 우리가 작업하는 html 파일에서 사이에 넣어주고, ..

생활코딩 2024. 1. 18. 12:14

내 웹페이지에 SNS 기능을 추가해 보자. 구글에서 addthis를 검색한다. 그리고 상단에 노출되는 링크를 클릭하자. Get Started, It's free 클릭 // 역시 공짜가 최고다. Share Buttons를 클릭하자. // addthis에서는 기능을 많이 제공한다. 그 중에서도 우리의 목적은 SNS이므로, Share Button을 클릭한다. addthis 기능을 어떻게 시각화할지 등을 설정하는 화면이다. SNS 매체 수를 선택할 수 있고, SNS 매체를 클릭하는 아이콘의 모양과 크기를 설정할 수 있다. 기능을 하나씩 눌러보고 본인 기호에 맞는 SNS UI를 설계해 보자. SNS UI 설계를 마무리하였다면, Activate a Tool을 선택하자. 나는 이미 Tool을 활성화하였기 때문에 Ac..

생활코딩 2024. 1. 18. 12:14

내가 만든 웹 페이지를 이용하는 유저에게 댓글 서비스를 제공해 보자. 구글에서 disqus를 검색하자. 그리고 상단에 보이는 링크를 따라가 보자. // https://disqus.com/ GET Started 클릭 I want to install Disqus on my site 클릭 내 홈페이지 이름을 유일한 값, 그러니까 고유값으로 설정한다. (일반 플랫폼의 계정 아이디의 정책과 같다) 그리고 웹 페이지의 성격이 무엇인지, // 엔터테인먼트, 게임 등 마지막으로 disqus의 언어 환경을 무슨 언어로 할 지를 선택한다. // 내가 만든 홈페이지는 10개의 언어로 구현했으므로, 영어로 하겠다. 선택사항에 한글도 있다! Plan을 선택해야 한다. Plan이 여러 가지 있는데, 나는 무료버전인 Basic을 ..

생활코딩 2024. 1. 18. 12:13

favicon이란? 브라우저에서 모 웹 사이트를 접속할 때 탭 좌측에 보이는 그림을 가리킨다. favicon을 설정하기 위하여 본인이 디자인하거나 혹은 디자인 의뢰한 파일을 확보해 두자 그림 크기는 16x16px로 저장하여야 한다. // 변환 사이트에서 요구하는 규격이다. 그림 디자인은 그림판(Windows OS) 혹은 Adobe Illustrator를 활용하도록 하자. (Mac OS는 무엇을 써야 하는지 잘 모르겠다. 디자이너들은 대부분 Mac을 쓰고 따라서 Adobe Illustrator를 설치해서 쓰더라.) 그림판으로 설정하는 방법은 아래와 같다. 16x16px 그림파일을 획득하였다. 이제 favicon 변환 작업을 하자 구글에서 favicon generator를 검색하자 가장 위에 뜨는 웹 페이지..

생활코딩 2024. 1. 18. 12:10

내가 구현하고자 하는 HTML 기능을 모두 구현하였다. (내 머릿속에서 구상한 선에서는 말이다.) // 완성형 코딩은 없다고 본다. 기능을 보다 추가하거나 개선할 필요성이 끊임없이 제기되기 때문이다 // 실제로도 나는 주식 적정가치 추산과 관련하여 웹 크롤링 프로그램을 구현하였는데, // 이를 한번 실행하고 프로그램 구동을 끝내는 데 1시간 넘게 걸린다는 점에서 최적화가 필요하지만 // 프로그램 실행을 분기별 1회 정도에 그치는 꼴이라 그냥 두었다. (한마디로 뒷짐 지고 있다는 소리다.) 이제는 없는 미적감각을 발휘해서 구현한 기능을 페이지에 시인성있게 배치하고 꾸며야 한다. 이 역시 재능기부 능력자님들의 게시글을 구글링 하여 참조하고 시도해 본다. 뿐만 아니라, 앞서 소개하였던 https://codep..

생활코딩 2024. 1. 18. 12:10

HTML의 div와 같은 tag를 1번 시퀀스에서 안 보이다가 2번 시퀀스에 보이게 하고 싶다. (방법만 알고 있다면 반대로 1번 시퀀스에서 보이다가 2번 시퀀스에 안 보이게 구현할 수 있다.) 만약 div 태그를 function a() 시퀀스에서 보였다가 function init() 시퀀스에서 안 보이게 하고 싶고 // 아래 웹 페이지 그림상 파랑 네모 표시 참조 반대로, img, h 태그를 function a() 시퀀스에서 숨겼다가 function init() 시퀀스에서 보이게 하고 싶다면 // 아래 웹 페이지 그림상 빨강 네모 표시 참조 Loading... AI가 당신의 얼굴 사진을 분석 중입니다. 당신에게 어울리는 컬러와 피해야 할 컬러를 확인해보세요! function a() { $('#loadi..

생활코딩 2024. 1. 18. 12:10

금번 HTML 작업 중 가장 어려웠던 부분이었다. 이것저것 막 하다 보니 얻어걸려 구현했던 내용을 소개해보려 한다. HTML에 이미지를 띄우고 싶을 때 의 형식으로 코딩한다는 것을 우리 모두 알고 있다. 그리고 에서 " " 사이의 값을 작업폴더 경로의 사진파일 혹은 인터넷에 업로드되어 있는 사진의 이미지 인터넷 주소를 활용하는 것이 보통이다. 나는 작업폴더의 경로를 활용하되, // ex)

생활코딩 2024. 1. 18. 12:09

이제 소프트웨어를 채워 넣었으면 하드웨어를 연결해 주자. (적절한 표현일지 모르겠지만) HTML 페이지상 언어를 선택하는 콤보박스?를 만들어주고, 콤보박스 선택에 따른 페이지 이동을 구현해보고자 한다. 구글링을 포함한 검색을 통해 기능을 만들어보자. (세상에는 자기 재능을 잔뜩 기부하여 주시는 하해와 같은 코딩 전문가 선생님들이 많이 계시다.) 사이에 아래와 같이 코딩을 넣어주자. (나는 의문점을 가지지 않고 일단 따라 해 본다.) Language 한국어 English Français español Italiano 日本語 中文 tiếng Việt Bahasa Indonesia ไทย var ua = navigator.userAgent.toLowerCase(); function changeLanguage(..

생활코딩 2024. 1. 18. 12:08