반응형웹 코딩 로드맵
UI Design 은 결국 반응형웹 코딩으로 완성 됩니다.
이 강의는 프론트엔드 반응형 프로젝트 코딩을 위한 로드맵 입니다.
아래 순서대로 프로젝트를 연습하면 UI 디자인을 위한 반응형 코딩을 할 수 있게 됩니다.
본 프로젝트는 HTML CSS 를 어느 정도 학습한 상태에서 공부하는 것을 추천 합니다.
HTML CSS 문법 강의도 포함되므로 프로젝트를 진행하며 문법을 공부하는 것도 가능할 것입니다.
그러니 문법 기조차 좀 부족하다고 생각되어도 바로 도전해 보는 것도 좋은 방법입니다.
로드맵은 아래와 같습니다.
좋은 결과 바랍니다.
HD 해상도에 최적화 된 웹사이트 코딩 실무 예제 -HD
HD 1366 에 최적화 된 예제입니다. https://codepen.io/lshjju/pen/jOwoGBK coding 다운로드 디렉토리에hd 디렉토리 만들기 브이에스 코드 가서hd 디렉토리 오픈 index.htmlstyle.css파일 만들기 기본코드 세팅 hd About
lshjju.tistory.com
브라우저 넓이에 반응하는 웹사이트 실무 코딩 예제 - Flexible and fixed
코드 보기https://codepen.io/lshjju/pen/WBxjev FHD 에 최적화한 웹사이트, 즉, 해상도 1920 넓이에 최적화된 웹사이트를 코딩하겠습니다.부분적으로1000px 픽스100% 플렉스두가지 넓이를 유연하게 적용하는
lshjju.tistory.com
유저의 움직임에 반응하는 웹사이트 실무 코딩 예제 - Active and fixed
코드 보기float box 와 display flex box 를 같이 사용한 버전입니다.https://codepen.io/lshjju/pen/BaBqbYP 위 코드에 대한 유튜브 해설 보기https://www.youtube.com/playlist?list=PLpK-F7ihqVc0OipUonpvuF1-O6vq50DIK coding-hd-device-lec
lshjju.tistory.com
반응형 웹 사이트 코딩 실무 예제 - RWD
-코드 보기클릭하면 코드와 뷰를 함께 확인 할 수 있습니다.https://codepen.io/lshjju/pen/GLOwMb 위 코드 동영상 강의 보기https://www.youtube.com/playlist?list=PLpK-F7ihqVc2yIYRu_urrDfG9fxGghxu1 rwd-coding www.youtube.com 코드
lshjju.tistory.com
적응형 반응형 웹 사이트 코딩 실무 예제 - RWD AND AWD
코드 보기 float box 사용 버전https://codepen.io/lshjju/pen/zYxmQyj 위 코드 동영상 강의 보기https://www.youtube.com/playlist?list=PLpK-F7ihqVc03CuIb-apIjBwwtQtca6SG rwd-and-awd-coding www.youtube.com 코드 보기 이것은 위의 float bo
lshjju.tistory.com
'Index' 카테고리의 다른 글
| Product detail page design Index (0) | 2025.11.21 |
|---|---|
| Next.js project index (0) | 2025.09.27 |
| ca-index (0) | 2025.09.18 |
| Do it! 자바스크립트 웹 표준의 정석 (0) | 2025.08.11 |
| 생활코딩! React 리액트 프로그래밍 index (0) | 2025.06.20 |