[부트스트랩5] 모바일 해상도에 따라 위치 변경 > CSS
CSS

[부트스트랩5] 모바일 해상도에 따라 위치 변경

조회 253회 댓글 0건

부트스트랩이 반응형 이기 때문에 자동으로 처리가 되는 부분이 있습니다.

여기선 이부분에서 나와야 되는 순서 문제로 조정한 부분에 대한 것으로 아래 이미지를 보시면 쉽게 이해가는 부분입니다.

[부트스트랩5] 모바일 해상도에 따라 위치 변경 

아래는 부트스트랩5 테스트 한 소스 입니다.

중요한 부분만 올립니다. 이정도면 사실상 다 올린것과 다름이 없는 부분입니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PABBURI Bootstrap 5 Layout</title>

    <style>
        .search-box {
            position: relative;
        }
        .search-box input[type="text"] {
            padding-right: 40px;
        }
        .search-box .fa-magnifying-glass {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
        }

        .nav-mobile {
            display: none;
        }

        @media (max-width: 768px) {
            .nav-desktop {
                display: none !important;
            }
            .nav-mobile {
                display: flex !important;
            }
            .nav-mobile a {
                text-decoration: none;
                color: #6c757d !important;
                padding: 5px 0;
                margin-left: 15px;
            }
            .mobile-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }
        }
    </style>
</head>

<body>

    <div class="container mt-5" style="max-width: 1200px; margin: 0 auto;">
        <header class="header-content" style="width: 100%;">
            <div class="row align-items-center py-2 flex-column flex-md-row">
                <div class="col-md-3 order-md-1 mobile-header">
                    <h1 class="m-0">
                        <a href="/" title="파뿌리" class="text-decoration-none">
                            <img src="https://www.pabburi.co.kr/content/img/PABBURI_logo.png" width="123" height="22" alt="파뿌리 로고" class="img-fluid">
                        </a>
                    </h1>
                    <nav class="nav-mobile">
                        <a href="/pabburi-test/" class="nav-item">로그인</a>
                        <a href="/pabburi-test/" class="nav-item">회원가입</a>
                    </nav>
                </div>
                <div class="col-md-4 order-md-3">
                    <nav class="d-flex justify-content-end nav-desktop">
                        <a href="/pabburi-test/" class="btn btn-link text-decoration-none text-secondary">새로운 글</a>
                        <a href="/pabburi-test/" class="btn btn-link text-decoration-none text-secondary">인기글</a>
                        <a href="/pabburi-test/" class="btn btn-info me-2 text-white">로그인</a>
                        <a href="/pabburi-test/" class="btn btn-primary text-white">회원가입</a>
                    </nav>
                </div>
                <div class="col-md-5 order-md-2 mt-0 mt-md-0">
                    <form id="frm_search_main" action="/ab-sch_total_new" method="get" class="d-flex search-box" onsubmit="return frm_search_main_submit()">
                        <input type="text" name="search_value" class="form-control" placeholder="검색" aria-label="검색">
                        <i class="fas fa-magnifying-glass"></i>
                    </form>
                </div>
            </div>
        </header>
    </div>


    <div class="container mt-5" style="max-width: 1200px; margin: 0 auto;">
        <header class="header-content" style="width: 100%;">
            <div class="row align-items-center py-2">
                <div class="col-md-3">
                    <h1 class="m-0">
                        <a href="/" title="파뿌리" class="text-decoration-none">
                            <img src="https://www.pabburi.co.kr/content/img/PABBURI_logo.png" width="123" height="22" alt="파뿌리 로고" class="img-fluid">
                        </a>
                    </h1>
                </div>
                <div class="col-md-5">
                    <form id="frm_search_main" action="/pabburi-test/" method="get" class="d-flex" class="search-box" onsubmit="return frm_search()">
                        <input type="text" name="search_value" class="form-control me-2" placeholder="검색" aria-label="검색">
                        <button class="btn btn-outline-secondary" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>
                <div class="col-md-4 mt-3">
                    <nav class="d-flex justify-content-end">
                        <a href="/pabburi-test/" class="btn btn-link text-decoration-none">새로운 글</a>
                        <a href="/pabburi-test/" class="btn btn-link text-decoration-none">인기글</a>
                        <a href="/pabburi-test/" class="btn btn-info me-2">로그인</a>
                        <a href="/pabburi-test/" class="btn btn-primary">회원가입</a>
                    </nav>
                </div>
            </div>
        </header>
    </div>
 



  • 페이스북으로 공유
  • 트위터로 공유
  • 구글플러스로 공유
전체 17건 1 페이지
  • 부트스트랩5 우측정렬, 좌측정렬, 중앙정렬, 세로 중앙정렬
    profile_image 정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0…
  • [부트스트랩5] 화면 중앙에 알림모달 띄우기
    profile_image 화면의 정 중앙에 알림 모달을 띄우는 방법입니다.이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.<div class="modal-dialog modal-dialog-centered"> 아래는 테스트 해볼 수 있는 소스 입니다.그리고 중요 부분만 있지만 이건 BODY 안에 넣어 두기만 하면 되는것이라서 확인이 무척 간단 합니다.mt-5 부분이 최상위 div에 있는데 상단 부분을 좀 떨어 트리는 부분인데 중앙 정렬에선 필요한 부분은 아닙니다. 중앙 정렬이 아닐때 상단에 너무 붙으면 이부분을 추가해주고 그리고 더 …
  • html 이미지 태그에서 옆으로 커지는 이미지 처리는 가로 세로 비율이 맞지 않아 사람이 뚱뚱하게 나오는 현상
    profile_image 뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가 전체적으로 보이도록 조정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 너비는 100%로 설정하여 부모 요소의 너비에 맞추고 높이는 원하는 값으로 고정합니다. 이렇게 하면…
  • DIV 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리 하는 방법
    profile_image 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다.  &l…
  • 부트스트랩 레이아웃 관련된 사이트
    profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bootstrap.build/apphttps://www.layoutit.com/https://bootsnipp.com/builder
  • 현재 페이지의 스타일 정보를 엊는 방법
    profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyValue('font-size') -글꼴 크기의 문자열 값을 얻으려면 예 : (16px)match(/\d+/)[0]) - 숫자 부분 만 얻으려면 예 : (16) - 문자열Number(…