728x90 HTML52 [NodeJs] 애플 홈페이지 프론트엔드+백엔드 (풀스택) 샘플코드 Apple HomePage / front-end / back-end / Full Stack Sample Code 프론트엔드 + 백엔드 풀스텍 연습겸 애플 홈페이지 스타일의 웹사이트를 만들어보았다. 수정을 통해 본인의 웹사이트로 사용하여도 좋고, 소스를 다운 받아 본인의 학습 용도로 사용해도 좋다. 프론트엔드 사용 기술 목록 1. Html (Html5 표준 사용) 2. Css (프레임워크 없이 순수 CSS5만을 사용하여 가볍게 동작 구현) 3. Javascript (라이브러리 사용 없이 순수 바닐라 자바스크립트만을 사용) 백엔드 사용 기술 목록 1. NodeJs (반응형 메인 페이지를 우선 구현해 보았는데, 이후 포스팅에서 상품 상세페이지 등 다양한 페이지 추가 구현할 예정이다) 2. json (서버측의 .. 2021. 3. 22. [HTML5] Data 속성 (Data Attribute) HTML5 Data-* 속성 Data Attribute HTML5에서 data-* 속성 은근 사용 빈도가 높다. data-* 속성은 거두절미하고 태그에 간략한 데이터를 저장하는 것이다. HTML5 이전에는 Html 문서 내에 데이터를 저장하기위해 태그를 안보이게하고 해당 태그에 밸류값을 넣어놓고 사용하는 등 여러가지 핵스러운 방법이 동원되었는데, data-*속성을 사용하면 간결한 코드에 유지보수가 용이해지고 자바스크립트를 통한 데이터 접근이 간단해진다. 사용 방법은 아래와 같이 간단하다. HTML 태그 내 데이터 속성 사용 Javascript에서 데이터 추출 const element = document.querySelector('...'); const data = element.dataset.데이터속성이.. 2021. 3. 13. 이전 1 다음 728x90
