반응형 웹 사이트 코딩 실무 예제 - RWD

-

코드 보기

클릭하면 코드와 뷰를 함께 확인 할 수 있습니다.

https://codepen.io/lshjju/pen/GLOwMb

 

위 코드 동영상 강의 보기

https://www.youtube.com/playlist?list=PLpK-F7ihqVc2yIYRu_urrDfG9fxGghxu1

rwd-coding

 

 

---

코드 보기

 

이것은 위 코드의 UI를 약간 개선한 버전입니다.

위 코드와 크게 다르지는 않습니다.

https://codepen.io/lshjju/pen/JjOeapy

 

 

---

RWD

 

Responsive Web Design의 약자입니다.

가로 넓이 단위를 보통 % 단위를 사용합니다.

웹브라우저의 가로 넓이에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져 환경에 반응합니다.

탬플릿이 하나이므로 주소가 하나이고, 검색엔진에 친화적입니다.

 

 

 

 

 

end

Screenshot 2025-06-21 at 13.42.28.PNG

0.81MB