728x90 css sample3 [프론트엔드] 애플 메인 페이지 샘플 코드(변경가능) Apple Main Page Sample Code (Feat. 순수 CSS , 바닐라 Javascript) 프론트 엔드 연습을 위해 별도 플러그인없이 순수 CSS와 바닐라 자바스크립트로 애플 메인 페이지를 만들어 보았다. 이를 응용하여 웹개발 학습을 하거나 자신의 홈페이지에 입히고 싶은 사람은 하단의 소스코드를 가져가서, 본인의 입맞에 맞게 데이터를 수정하여 사용하면 된다. 가장 하단에 소스파일을 첨부해놓았으니, 복붙이 귀찮으면 다운받아 사용하도록 하자 데이터는 데이터 베이스에서 넘어온 데이터나 직접 본인이 데이터를 수정하기 쉽도록 자바스크립트 소스 상단에 DbData라는 변수를 선언하고 샘플 데이터를 입혀놓았으므로, 자바스크립트를 잘 모르더라도 페이지 출력결과와 데이터를 비교하며 데이터의 수정이 용이하.. 2021. 2. 20. [프론트엔드] 유튜브 페이지 코드 샘플 FrontEnd Youtube Html, Css, Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 유튜브 페이지를 만들어보았다. 오랜시간에 걸쳐서 만든 페이지가 아니라 허접하다. 필요한 사람은 잘 다듬어서 사용하면 좋을 것같다. 출력화면, 소스코드 순서대로 기재해 두었으니 참고바란다. 구동 로직은 header에 css 파일 을 추가하고 body에 script만 추가하면 해당 페이지에 데이터 베이스 또는 사용자가 미리 설정한 데이터를 토대로 페이지 내 마크업 언어가 작성되는 방식이다. 파일은 가장 하단에 첨부해 놓았으니 참고바람. [CSS] :root { /* color */ --headerColor : #252525; --fontColor : #252525; --logoCol.. 2021. 2. 17. [프론트엔드] 메뉴 바 코드 샘플 (반응형) FrontEnd Menu-bar Html, Css , Javascript Code Sample (반응형) 프론트 엔드 연습을 위해 메뉴바를 만들어 보았다. Pc웹과 모바일웹(768px 기준) 반응형이고, 필요한 사람은 편하게 사용할수 있도록 코드를 구성해보았다. 소스코드는 하단에 있고, 중간에 출력 화면, 사용방법을 순서대로 기재해 두었으니 참고바란다. 출력 화면 ↓ 사용방법↓ 1. 파일 다운 (파일 다운이 부담스러운 사람은 파일다운 하단에 소스코드 복붙해도 됨) 2. html header에 아래 소스 추가 3. html body 마지막에 아래소스 추가 4. menu-script.js 파일 내 메뉴 데이터 입맛에 맞게 변경 (홈페이지명, 로고, 메뉴 이름 등) 5. 출력확인 [Html,Css,Javasc.. 2021. 2. 16. 이전 1 다음 728x90
