css html로 홈페이지 페이지 이동 질문드립니다.

본문 바로가기

css html로 홈페이지 페이지 이동 질문드립니다.

작성일 2023.11.23댓글 2건
    게시물 수정 , 삭제는 로그인 필요

안녕하세요.
아직 기본적인것밖에 구현 못하는 초보입니다.
다름이 아니라 html css js로 간단한 페이지를 만들어보려고 하는데요.
키워드가 잘 떠오르지 않아 검색을 못하다보니.. 답답해서 지식인에 질문글 올립니다.

버튼이나 이미지에 링크를 걸어서 특정 페이지로 이동하는 방법은 알겠는데 
헤더랑 푸터같은 애들을 고정하고 가운데에 바디컨텐츠만 고정할 수있을까요?
예제를 찾아보니 매 html마다 header body 를 중복해서 레이아웃을 짜놓은거같은데
헤더는 고정하고 헤더의 목록[예를 들어 자기소개/찾아오는길 등등]을 누르면
가운데 conent 부분만 해당 html페이지로 이동하게 만들고싶습니다.










profile_image 익명 작성일 -

헤더랑 푸터같은 애들을 고정하고 가운데에 바디컨텐츠만 고정할 수있을까요?

화면을 스크롤해도 해더 푸터가 고정되어 나오는 방법은 css로 처리하시면됩니다

https://codepen.io/jigneshpanchalmj/pen/ExYPGbE

​

​

예제를 찾아보니 매 html마다 header body 를 중복해서 레이아웃을 짜놓은거같은데

헤더는 고정하고 헤더의 목록[예를 들어 자기소개/찾아오는길 등등]을 누르면

가운데 conent 부분만 해당 html페이지로 이동하게 만들고싶습니다.

해당 내용을 정리해서 말하면 클릭시 새로고침없이(스크롤값 그대로 유지한채) 바뀐 화면을 보고 싶다는 의미입니다.

그러면 새로고침없이 컨텐츠를 볼 수 있는 방법은 크게 두가지 입니다

1. AJAX

2. SPA

​

1번 같은경우 보통 같은 ui에서 데이터만 변경될때 다시 값을 뿌려줘서 가져오는 방식입니다. (페이징처리시 사용됩니다)

https://scoring.tistory.com/entry/AJAX%EB%9E%80-JQuery%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-AJAX%EC%82%AC%EC%9A%A9%EB%B2%95

2번 같은 경우 마치 앱처럼 클릭시 새로고침없이 페이지가 변경됩니다.

질문에서 페이지변경이라고 하셨으니 2번으로 작업하시는게 좋습니다

spa는 보통 리액트. 뷰로 작업을 진행하시면 됩니다. 그러면 해더 푸터 매 페이지별로 생성할 필요도 없고 공통으로 컨포넌트를 만들어서 사용할수 있죠

https://codesandbox.io/p/sandbox/navbar-dropdown-v1-yss83?file=%2Fsrc%2FApp.js%3A23%2C5

navbar-dropdown-v1 - CodeSandbox

Unable to start the Sandbox Your changes were saved, but we could not start the Sandbox running your project. Don't worry, reloading the page can often fix this issue. You can do this by clicking the "Reload page" button. If the issue persists, please contact our support team at support@codesandbox....

codesandbox.io

profile_image 익명 작성일 -

아마, iframe 태그를 사용하시면 가능하실거에요.

​

iframe태그는 문서 안의 문서를 그려준다고 해야할까요..

​

head와 footer를 고정하고, 가운데에 iframe 태그를 사용한 문서 A를 만들고

iframe 태그에서 보여질 문서a, 문서b를 만든 뒤.

​

문서 A의iframe 태그안에 보여줄 문서(문서a 혹은 b)를 연결해주시면

원하시는 것 처럼 구현이 가능하실 것 같네요. ㅎㅎ

연관된 질문 답변 리스트

flask, html, css 질문입니다.

... 답변드립니다. 플라스크(Flask), HTML, CSS에 관한 질문이시군요. 플라스크로 만든 테이블이 있는 페이지에서 다른... 다른 페이지에서 해당 페이지로 이동하면 차이를...

html5 css3 jquery 페이지 이동 질문드...

... 메뉴 페이지로 이동 되었으면 합니다. 검색해도 잘 안나와서 질문올립니다. 답변 부탁드리겠습니다. header 와 footer 사이 영역에 표시되는 내용을 iframe 안에...

Html 서브페이지 css질문

... 서브페이지 css도 파일을 따로 만들어서 하나요? 아니면 html파일 안에 스타일 태그를 넣어서 작성하나요?... 관리하는 홈페이지에 그러는 경우 욕처먹기 딱 좋죠

html,css 웹페이지 로딩 속도 느림 질문

html, css로 홈페이지를 만들고 있습니다! 배경에 동영상, 이미지 1개씩 올려놨는데... index.html, 한 페이지로만 연습중이고 css은 3개의 파일을 가지고 있고 용량은 총...