[HTML]Playlist 음악 스트리밍 사이트 제작 - 1

웹 클론코딩을 함으로써 코드 이해력과 응용력을 기르려고 주제를 찾아보던중 간단한 음악 플레이어를 만들고자 하였습니다 자바스크립트부분은 아직 많이 미흡하여 기존에 있는 음악 재생구현부분을 가져다가 부가기능을 추가하거나 구현하고자하는 내용은 구글링을 많이 하였습니다 해당사이트는 데스크톱 환경에 맞추어 제작되었습니다 버튼이 작동하지않거나 스크립트부분에서 자잘한 오류들을 고치고 위와같은 사이트를 제작하였습니다 웹 이미지파일을 가져왔지만 이미지도 음악부분도 저작권을 피해갈순 없어서 개인 사이트 제작용도로만 사용하였습니다 비상업적 용도이지만 저작권 당사자로부터 삭제요청이 있을경우 해당소스 삭제하겠습니다 현재까지 작동되는 기능은 리플레이 이전,다음곡 재생 플레이리스트 재생목록 보기와 볼륨조절까지 가능합니다 음악자체는..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 11. 22.
• textsms

[html]css :root 가상 클래스를 통해 div색상 변경하기

:root 가상 클래스란? css에서 :root 가상 클래스는 HTML 문서의 루트 요소를 선택합니다 html의 루트 요소는 이기 때문에 root와 선택자와 동일합니다 CSS :root 변수 css에서 :root를 이용하여 재사용할 값을 담아줄 변수를 저장하여 변수로 불러올 수 있습니다 시스템 유지보수를 하려면 웹페이지의 여러 색상들이 담겨있는데 매번 하나하나 해당 클래스의 색의 코드를 검색하여 변경하려면 어렵기 때문에 색뿐만 아니라 재사용 가능한 다양한 값들을 변수에 저장하고 필요한 곳에서 불러와 재사용이 가능합니다 CSS :root 전역변수 선언하기 :root를 사용하여 CSS전역 변수로 설정하면 변수 안에 담긴 값을 원하는 곳에서 언제든 불러올 수 있습니다 *전역변수는 함수외부를 포함하여 모든함수에..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 11. 21.
• textsms

내 웹사이트에 IDE 온라인 컴파일러 추가하는법 (코드 5줄)

온라인 컴파일러 컴퓨터에 따로 컴파일러 설치 없이 온라인 페이지에서 코딩 후에 컴파일러를 통해 코드 작동이 가능한 온라인 컴파일러에 관해서 지난번에 게시물을 작성한 내용이 있는데요 JDoodle - Online Compiler, Editor for Java, C/C++, etc JDoodle is an Online Compiler, Editor, IDE for Java, C, C++, PHP, Perl, Python, Ruby and many more. You can run your programs on the fly online, and you can save and share them with others. Quick and Easy way to compile and run programs onlin..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 11. 18.
• textsms

PHP $_SERVER 함수 정리

지난번에 방문자의 user-agent를 확인하는 사이트를 제작한적이 있는데 접속한 사용자의 아이피를 확인하거나 언어정보나 다양한 정보를 확인하기위해 $_SERVER함수를 사용하였습니다 PHP에서 프로그래밍하다보면 REMOTE_ADDR라던가 자주사용하는 경우가있어서 $_SERVER함수의 일부분을 정리해놓았습니다 $_SERVER['DOCUMENT_ROOT'] = 현재 사이트의 서버상 위치 //xampp/html $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 방식 //gzip,deflate $_SERVER['HTTP_ACCEPT_LANGUAGE'] = 언어 //ko,en $_SERVER['HTTP_USER_AGENT'] = 사용자 정보(User-agent) //Mozilla/5.0 (W..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 9. 18.
• textsms

HTML 일본어 학습 사이트 개발일지 - 1

얼마전 일본어를 공부하면서 히라가나,가타카나를 접하게되었습니다한국어의 가나다라마바사 같은 기본적인 히라가나,가타카나를 알아야 일본어를 할수있는데 공부도할겸 이 히라가나와 가타카나를 랜덤으로 보여주면서 외울수있는 사이트를 만들면 일본어공부도 웹사이트 제작 공부에도 도움이될꺼같아서 시작하게되었습니다.   HTML 내용 수정 japan-study.netlify.app현재 배포중인 사이트 주소입니다. 현재는 히라가나만 테스트로 만들었고 화면 중앙 히라가나 생성버튼을 클릭할시 랜덤으로 히라가나와 발음을 출력해줍니다/ 아직까지는 아주 많이~ 부족하고 단조로워서 화면중앙 디자인을 더하고 가타카나는 물론이며 히라가나,가타카나를 구분해서 따로 학습할수 있도록 확장시키려고 합니다/   사이트 제작 참고자료화면중앙 배치 h..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 9. 18.
• textsms

PHP를 사용하여 방문자 정보 아이피 위치 추적 사이트 만들기

오늘은 PHP를 사용하여 사이트에 방문한 사람의 IP주소 및 접속 정보와 사용자의 위치를 확인하는 방법에 대해서 알아보겠습니다 사용자의 아이피와 아이피 위치정보를 알아내는 방법 간단한 방법으로는 사이트 접속시 User-Agent가 담고 있는 세부 정보를 통해 조회하는 방법이 있습니다 PHP에서 이를 간단하게 사용할수 있도록 제공해주는 Ip Geolocation Api를 사용해보려고 합니다 User-Agent가 뭔데? 우리가 사용하는 인터넷에는 사용자 에이전트(User Agent)가 존재하는데 이 기능 속에는 사용 중인 OS 정보나 해상도 웹브라우저 버전 종류 등등 많은 정보를 담고 있습니다 구글에 user agent check라고 입력 후에 검색하면 현재 저의 에이전트가 노출되는 걸 확인할 수 있습니다 ..

• format_list_bulleted 프로그래밍/HTML, PHP, CSS
• · 2022. 9. 11.
• textsms