728x90 프론트엔드5 [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. [CSS] box-sizing border-box content-box CSS 박스 사이즈 관련 속성 box-sizing CSS에서 박스의 크기를 지정하였는데도 원하는 크기로 안바뀌는 경우에는 css의 box-sizing 속성을 확인해볼 필요가 있다. CSS Selector { box-sizing : content-box; (기본값) box-sizing : border-box; } box-sizing 속성을 content-box로 하면, 설정해놓은 사이즈는 padding, border 속성의 사이즈를 제외한 박스 자체의 사이즈로 설정이 된다. 즉, width 와 height 를 100px로 설정해 놓아도, border : 5px; padding : 5px 으로 설정하게 되면, width 는 120px이 되는 것이다. padding, border 의 설정 사이즈를 포함하여 원.. 2021. 3. 4. [CSS] BEM (Block Element Modifier) 표기법 코드는 가독성이 중요하다. 하지만 코드양이 많아지면 그만큼 클래스명도 다양해지고 구조 또한 복잡해진다. 그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는 CSS 표준에는 BEM 표기법이 있다. BEM 은 Block Element Modifier 의 약자이다. 클래스 이름 안에 언더바 두개씩 있고, 마이너스 표시가 그 뒤에 두개씩 있는 경우를 접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다. 예시) main__item--blue 하지만 간혹 보면 BEM 표기법을 아이디에 사용하는 경우도 종종 있는데, 이는 잘못된 방법으로, 클래스에만 사용하여야 한다. 하단의 간단한 예제를 통해 BEM 의 의미를 이해하도록 하자 샘플 예제 Html 설명 Block : Element : Modifier.. 2021. 3. 4. [프론트엔드] 쇼핑몰 상품 정렬 코드샘플 (Html,Javascript,Css) Sample Code 쇼핑몰 상품 정렬 코드 샘플 HTML5 , Vanilla Javascript, Css3 1. 설명 : 온라인 쇼핑몰에서 흔히 볼수있는 상품 정렬 코드 샘플이다 2. 사용언어 : Javascript, Html, Css [플러그인 사용 x] 3. 구동 로직 - 상품 Sample 이 없어서 짱구는 못말려 케릭터로 대체 (1) fetch API 를 통해 서버측의 json 데이터 Get (2) json파일(상품 객체 리스트) 저장 (3) 해당 리스트 출력 (4) 이후 선택 옵션에 따른 filter 처리 후 출력 [샘플 코드 :Html] 짱구 철수 유리 훈이 [샘플코드 :Css] :root{ /* color */ --color-white : #f4f9f9; --color-black : #0d335d; --color.. 2021. 2. 24. [프론트엔드] HTML 데이터 속성 dataset FrontEnd HTML Element Attribute - Dataset HTML 데이터 속성은 엘리먼트 내 attribute명으로 data- + 키이름 으로 사용 Javascript 에서 해당 데이터의 속성을 접근하기 위해서는 엘리먼트명.dataset.키이름 ※일반적인 객체와 같이 dataset[키이름] 으로는 접근 불가! [샘플 예제] [결과 출력] 2021. 2. 23. 이전 1 다음 728x90
