- 질문 게시판입니다.
Date 24/03/31 10:45:31
Name   kaestro
File #1   화면_캡처_2024_03_31_104351.png (108.1 KB), Download : 4
Subject   aside를 왼쪽으로 이동시키고 싶습니다


지금 블로그에 목차 하이퍼링크를 만들었는데 계층이 있게 만드니까 더 왼쪽으로 이동시키고 싶어서요

<aside id="header-links" style="position: fixed; right: 0; top: 400px; bottom: 0; width: 300px; overflow: auto; padding-right: 10px; transition: top 0.3s;">
      <h2 style="color: #333; padding-left: 0px">목차</h2>
</aside>


이렇게 작성된 부분인데 혹시 이걸 좌측으로 이동시킬 방법이 있을까요?

padding-left는 건드려봤고, left 값도 수정해봤는데 이러면 화면 크기 바뀔 때 가운데 body에 맞춰서 원하는 위치에 못 놓을 것 같아서 해결을 못하는 중입니다



0


position: fixed는 스크롤과 상관 없이 화면에 항상 떠있는 것이니 적절한 위치에 놓기가 쉽지 않습니다. 알고 계실 것 같지만…

일단 모바일 신경 안쓰고 데스크탑 기준으로 보고 계시는 것 같군요.

left 값을 주시려면 right 값은 지우고 쓰셔야 할 것 같고요.

지금보다 약간만 왼쪽으로 가고 싶다는 뜻이셨다면… right 값을 조금 더 주시면 됩니다. 다만 이건 창 크기에 따라 위치가 바뀔거라… 음 지금의 방식은 다양한 해상더를 맞추기엔 좋지 않군요.

데스크탑의 센터 컨텐츠 영역이 1000px로 고... 더 보기
position: fixed는 스크롤과 상관 없이 화면에 항상 떠있는 것이니 적절한 위치에 놓기가 쉽지 않습니다. 알고 계실 것 같지만…

일단 모바일 신경 안쓰고 데스크탑 기준으로 보고 계시는 것 같군요.

left 값을 주시려면 right 값은 지우고 쓰셔야 할 것 같고요.

지금보다 약간만 왼쪽으로 가고 싶다는 뜻이셨다면… right 값을 조금 더 주시면 됩니다. 다만 이건 창 크기에 따라 위치가 바뀔거라… 음 지금의 방식은 다양한 해상더를 맞추기엔 좋지 않군요.

데스크탑의 센터 컨텐츠 영역이 1000px로 고정되어있다고 가정하면 오른쪽에 둘 aside는
position: fixed;
left: 50%;
top: 400px;
margin-left: 500px;
width: 300px;

요렇게 주는 방법이 있겠습니다.
요러면 창 크기가 달라져도 컨텐츠 옆에 잘 붙을겁니다.
kaestro
와우... 이것이 전문가의 솜씨군요

워낙 주먹구구로 하고 있어서 사실 잘 모르고 쓰고 있습니다 ㅋㅋ... 그래도 위치는 고정된 곳에 놓는게 편하지 않나 해서 쓰고는 있는데 어렵네요

모바일에서는 그냥 날려버렸습니다 시원하게. 그거까지 예쁘게 만드는건 제 실력으론 너무 힘들더라구요

정말감사합니다 이게 정확하게 제가 원한게 맞습니다
고양이
화면 크기에 상관없이 목차를 body 중앙에 맞추어 원하는 위치에 고정하려면 position: absolute를 사용하고,
body의 왼쪽 여백을 계산하여 목차의 위치를 조정해야 합니다. 아래와 같이 수정해 보세요:

<aside id="header-links" style="position: absolute; left: calc(50% - 600px); top: 400px; bottom: 0; width: 300px; overflow: auto; padding-left: 10px; transition: top 0.3s;... 더 보기
화면 크기에 상관없이 목차를 body 중앙에 맞추어 원하는 위치에 고정하려면 position: absolute를 사용하고,
body의 왼쪽 여백을 계산하여 목차의 위치를 조정해야 합니다. 아래와 같이 수정해 보세요:

<aside id="header-links" style="position: absolute; left: calc(50% - 600px); top: 400px; bottom: 0; width: 300px; overflow: auto; padding-left: 10px; transition: top 0.3s;">

Copy code
<h2 style="color: #333; padding-left: 0px">목차</h2>
</aside>
주요 변경 사항:

position: fixed;를 position: absolute;로 변경하여 뷰포트 대신 문서 흐름에 따라 위치 지정
left: 0;을 left: calc(50% - 600px);로 변경하여 body 중앙에서 왼쪽으로 일정 거리 이동
calc(50% - 600px)는 화면 중앙에서 600px만큼 왼쪽으로 이동한 위치를 계산합니다. 이 값은 body의 가로 크기에 따라 조정해야 합니다.
예를 들어, body의 가로 크기가 1200px이고 목차를 body의 왼쪽에 놓고 싶다면 calc(50% - 600px)과 같이 설정할 수 있습니다.

이렇게 수정하면 화면 크기가 변경되어도 목차는 항상 body 중앙을 기준으로 원하는 위치에 고정될 것입니다.

라고 ai가 알려주네요. 답이 맞는 지는 모르겠습니다. 크크
kaestro
찬양해라 ai
목록
번호 제목 이름 날짜 조회 추천
공지 질문 게시판 이용 규정 11 토비 15/06/19 24501 4
16680 기타차량 폐차 관련 질문입니다. 23 + 메존일각 25/04/17 174 0
16679 법률부동산 복비 관련 문의드립니다. 2 [익명] 25/04/17 146 0
16678 IT/컴퓨터24인치 듀얼 모니터 vs 27인치 울트라와이드모니터1대 9 Picard 25/04/17 237 0
16677 체육/스포츠첫 런닝 관련 초보 질문 사항 4 아재 25/04/16 239 0
16676 기타차단기 문제 7 왕킹멍 25/04/15 300 0
16675 체육/스포츠초 6 여아 극기체험용 등산가방추천부탁드립니다. 6 FTHR컨설팅 25/04/15 294 0
16674 의료/건강왼쪽 오른쪽 시력차이가 엄청 크네요 5 OneV 25/04/15 362 0
16672 기타소형차 중고 가격및 유지비 질문드립니다 8 셀레네 25/04/14 329 0
16671 IT/컴퓨터중국산 로봇청소기 사생활 위험 어떻게 보시나요 8 당근매니아 25/04/14 453 0
16670 가정/육아매트리스 추천을 부탁드립니다 :) 10 Broccoli 25/04/14 268 0
16669 법률양도세 계산 관련하여 질문 있습니다. 8 [익명] 25/04/14 315 0
16668 기타서울 남쪽에 아버지 모시고 식사할 곳 찾는 중입니다. 4 퍼그 25/04/14 287 0
16667 기타인터넷 질문입니다 5 김치찌개 25/04/14 219 0
16666 의료/건강건강보험 3자행위 신고 질문입니다. 2 [익명] 25/04/13 369 0
16665 기타1500 이하로 살 수 있는 중고 suv 추천해주십시오 11 개백정 25/04/13 648 0
16664 IT/컴퓨터컴퓨터 정리 프로그램 추천부탁드립니다. 홍차넷 선생님들!! 13 Mandarin 25/04/11 527 0
16663 기타일본여행 항공권 선택장애 질문드립니다 28 쉬군 25/04/10 662 0
16662 법률내용증명 보내는데 주소를 몰라요! 8 유니브로 25/04/10 624 0
16661 체육/스포츠튼튼한 수영복 브랜드 무엇이 좋나요? 16 열한시육분 25/04/10 536 0
16660 기타리클라이너 의자 추천 18 노는꿀벌 25/04/10 508 0
16659 의료/건강신경과? 신경외과? 어디 가야 할까요? 2 키위 25/04/10 441 0
16658 의료/건강신체에 왼편만 불편함을 느끼고 있습니다 어떤 병원을 가야하나요? 5 [익명] 25/04/09 557 0
16657 IT/컴퓨터맥북이 갑지기 먹통이되었습니다 3 FTHR컨설팅 25/04/08 290 0
16656 게임디비전류 게임 추천해주십시오 4 린디합도그 25/04/08 277 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기
회원정보 보기
닫기