Fullstack-Study-241204-250625

커리큘럼

01. HTML,CSS  (v)
02. git
03. Java
04. Database
05. Jsp
06. 미니프로젝트

07. SpringFramework
08. SrpingBoot
09. React JS
10. 중간프로젝트

11. Linux 명령어
12. AWS 클라우드
13. Kotlin
14. Andriod
15. 최종프로젝트

---

미디어쿼리

• 브라우저 크기별로 다른 디자인을 주는 방법

- min-width - 최소너비 767px이상에서 동작하는 디자인 
- max-width - 최대너비 766px이하에서 동작하는 디자인


    /* 1240px이상에서 동작하는 디자인 */
    @media(min-width:1240px){
        .container>.col-lg-6{
            width:16.666%;
        }
    }
    
    /* 767px이상 1239px이하에서 동작하는 디자인 */
    @media(min-width:767px) and (max-width:1239px){
        .container>.col-md-4{
            width:25%;
        }
    }
    
    /* 766px이하에서 동작하는 디자인 */
    @media(max-width:766px){
        .container>.col-xs-2{
            width:50%;
        }
    }

부트스트랩

<!-- Bootstrap Css적용 -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- JQuery 링크 -->
<script src="js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js적용 -->
<script src="js/bootstrap.js"></script>

그리드 (반응형 영역)

• .container or .container-fluid아래에 .row를 넣어줍니다.
• .col-xx-xx 클래스를 넣어서 영역을 잡습니다.

그리드는 화면을 최대 12개로 나눌수 있음
col-xx-n 에서 
xx에는 lg,md,sm,xs가 들어갈수 있고 브라우저의 화면 크기를 의미    
n에 해당하는 숫자는 12/n개로 화면을 나눈다는 의미 
    

    <div class="container">
        <!-- 모바일에서 2칸,태블릿에서 3칸,웹환경에서 6칸     -->
        <ul class="'row">
            <li class="col-md-2 col-sm-4 col-xs-6">1</li>
            <li class="col-md-2 col-sm-4 col-xs-6">2</li>
            <li class="col-md-2 col-sm-4 col-xs-6">3</li>
            <li class="col-md-2 col-sm-4 col-xs-6">4</li>
            <li class="col-md-2 col-sm-4 col-xs-6">5</li>
            <li class="col-md-2 col-sm-4 col-xs-6">6</li>
            <li class="col-md-2 col-sm-4 col-xs-6">7</li>
            <li class="col-md-2 col-sm-4 col-xs-6">8</li>
        </ul>
    </div>