메인페이지의 주요 아이템을 그리드 시스템활용부분으로 테마중 헤드, 인덱스문 해당테마에서 붙여놓으시고 아래는 진행중인 반응형웹의 페이지입니다.
https://www.w3schools.com/css/css_grid.asp
CSS Grid Layout
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_gap2
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
글관련 그리드 구조 //column-gap
요약 column-count: 2;column-gap: 40px;
부트르트랩5 그리드시스템
https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php
Bootstrap 5 Grid Basic
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
PHP(html) 인클루드문 적용의 예시입니다. 서버에 FTP로 업로드 후 테스트가능합니다.
'UI UX(Web)' 카테고리의 다른 글
그누보드5 최신글 스킨과 서브페이지 비주얼요소 표현 (0) | 2022.04.18 |
---|---|
디지털 제작 도구 (0) | 2022.04.15 |
웹사이트제작 2편 - 그누보드 테마와 스킨 (0) | 2022.04.12 |
웹사이트 제작 1편 - 웹호스팅과 DB셋팅(그누보드5) (0) | 2022.04.08 |
[영상강좌목록] 디지털웹디자인 콘텐츠제작실무 (0) | 2022.04.01 |