[CSS] Day 02 (Note + Code): 반응형 레이아웃

2022/3/3

CSS Media Query와 반응형 레이아웃

적응형 웹: 모바일, PC인지 따라서 다른 사이트를 보여주는 것. ex) 네이버. www.naver.com/m.naver.com
반응형 웹: 웹 주소 동일. 화면 사이즈에 따라 다르게 보임.

pixel: 디스플레이 구성 최소 단위
viewport: 화면상의 표시 영역. 폰트는 12~16픽셀이 보기 좋다. 스마트폰 virtual viewport는 980px로 대부분 해놓는다.
meta viewport: viewport에 원하는 너비를 넣으면, 해당 너비에 맞게 웹브라우저가 페이지를 표시한다.

*다양한 디스플레이에 맞는 웹페이지를 구현하려면 뷰포트를 사용하면 된다.
<meta name="viewport" content="width=device-width,>
device width-> 각 단말기의 디스플레이 가로 화면에 맞추겠다.

1. 미디어 쿼리 (css3)
CSS 미디어(장치) 쿼리를 사용해 반응형 레이아웃 구현 가능
*문법
@media media-type and (미디어 조건) {
//css…… 해당 조건에 따라 css 변경될 거 적어주기
}

*미디어 타입
all
print
screen
speech

*미디어 조건
width: viewport 너비, min-width, max-width 많이 사용
height: viewport 높이 (px)
device-width: 디바이스 물리적 너비 (px)
device-height: 디바이스 물리적 높이
orientation: 디바이스 방향 (가로 landscape, 세로 portrait)
aspect-radio: viewport 가로세로비

*논리 연산자
and 조건 모두 참일 때 참
not 조건이 거짓일 때 참
only 구형 브라우저 지원을 위해 only 붙여줌 (안 붙이면 그냥 스크린만 읽게 됨)
, 조건을 나열 구분자로 사용, 이때 하나만 만족해도 전체가 참

//화면 너비가 1024px 이하일 때 CSS 적용
@media (max-width: 1024px) {…… CSS ……}
//화면 너비가 1024px 이하이고, 브라우저 화면일 때만 CSS 적용
@media only screen and (max-width: 1024px) {……CSS……}
//화면 너비가 1200px 이상이고, 브라우저 화면이며, 디바이스 가로 방향일 때만 css 적용
@media screen and (min-width: 1200px) and (orientation: landscape) {CSS 코드}
//모든 화면에서 디바이스가 세로 방향이 아닐 때 CSS
@media not all and (orientation: portrait) {CSS 코드}

2. 참고 해상도
320~480px 스마트폰
481~768px 태블릿 (세워서 볼 때 기준)
769~1024px 저해상도 노트북
1025~1200px 데스크톱
1201~ 고해상도 데스크톱 및 TV, 노트북 etc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--myCss 삽입-->
    <link href="mycss.css" rel="stylesheet" type="text/css" />
    <!-- fontawesome 쓰기 위해 삽입 -->
    <script src="https://kit.fontawesome.com/57a9f91f4b.js" crossorigin="anonymous"></script>  
    <!--웹폰트 삽입-->
    <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'> 
</head>

<body>
    <header> 
        <div class="inner"> <!-- 브라우저 안에 사이트가 가운데만 배치될수 있게 지정할거임 -->
            <div class="head-container"> <!--밑에 두개가 아이템이 됨-->
                <a href="main.html">Logo</a> <!--현재 페이지로 돌아오게 이동-->
               <div>
                    <a href="loginForm.html">
                        <i class="fa-solid fa-right-to-bracket"></i>
                        login
                    </a>
                    <a href="signupForm.html">회원가입</a>
                </div>
            </div>
        </div>
    </header>

    <section>
        <form action="loginPro.html" method="post">
            <div class="inner">
                <div class="form-container"> 
                    <div class="form-title">Login</div>
                    <div class="form-label"> ID</div>
                    <div class="form-input"> <input type="text" name="id" autofocus placeholder="id를 입력하세요."/> </div>
                    <div class="form-label">Password</div>
                    <div class="form-input"> <input type="password" name="pw" placeholder="비밀번호를 입력하세요"/> </div>
                    <div class="form-submit-btn"> 
                        <button class="btn">로그인</button>
                    </div>
                </div>
            </div>
        </form>

    </section>

    <footer>
        <div class="inner">
            <div class="footer-msg">
                주식회사 메가제이앤씨 <br/>
                대표자 : 김대현|주소 : 서울특별시 서초구 강남대로 279, 5층(서초동, 백향빌딩)<br/>
                사업자등록번호 : 513-87-00088|통신판매신고번호 : 2018-서울서초-0784<br/>
                마케팅제휴 : 정성채 | 메일문의 : sandy500@careergate.co.kr
            </div>
            <div class="footer-contact">
                더조은컴퓨터아카데미
                대표번호 1588.8748
            </div>
            <div class="footer-copyright">
                ⓒ THEJOEUN ACADEMY Corp.
            </div>
        </div>

    </footer>
</body>
</html>

loginForm.html

/*css 파일*/
*{ /*별 달아서 전체에 지정*/
    box-sizing:border-box;
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
}
body{
    margin: 0 auto; /*상하는 마진 0, 좌우는 오토*/
    background-color: #edf0f2;
}
a{
    all: unset; /*a태그 기본속성 없애기. 전체 속성을 없애기 때문에 클릭하면 나오는 반응도 없어진다.*/
}
a:link{ /*링크가 걸려있는 a태그*/
    text-decoration: none;
    color: navy;
}
a:visited{
    text-decoration: none;
    color: navy;
}
a:active{
    text-decoration: none;
    color: navy;
}
a:hover{
    text-decoration: none;
    color: mediumspringgreen;
    cursor: pointer;
}

header{
    width: 100%;
    height: 60px;
    background-color: lightsteelblue;
    top: 0;
    left: 0; /*top0left0 해놓으면 왼쪽 위에 딱 붙음*/
    position: fixed;
    z-index: 100; /*다른 요소에 가려지지 않기 위해. 항상 위로 올라오게*/
}
.inner{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}
.head-container{
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

/*------------------section-----------------*/
section{
    width: 100%;
    height: 700px;
    top: 60px;
    position: relative;
    margin: 1rem 0;
   /* background-color: lightgrey; */
    
}
.form-container{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 50px 5rem 3rem 5rem;
}
.form-title{
    font-weight: bold;
    font-size: 1.1rem;
    margin: 1rem 0;
}
.form-label{
    font-size: 0.8rem;
    width: 100%;
    height: 100%;
    margin: 0.3rem 0;
}
.form-input{
    background-color: #fff;
    width: 100%;
    height: 100%;
    margin: 0.3rem 0;
    padding: 0.5rem; 
}
input:not([type="checkbox"]){
    all:unset;
    font-size: 0.8rem;
    width:100%
}
button{
    border:2px solid #f9aa33;
    color: #f9aa33;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 1rem;
    padding: 0.5rem 1.5rem;
    transition: all ease 0.5s 0s;
}
button:hover{
    color: #fff;
    background-color: #f9aa33;
}
.form-submit-btn{
    margin:0.5rem 0;
}


/*------------------footer-----------------*/
footer{
    background-color: #d2ded2;
    padding: 1rem 0;
    margin: 1rem 0;
}
.footer-msg{
    font-size: 0.6rem;
    color: #5e7380;
    margin: 0.5rem 0;
}
.footer-contact{
    font-size: 0.6rem;
    color: #5e7380;
    margin: 0.8rem 0;
}
.footer-copyright{
    font-size: 0.4rem;
    color: #5e7380;
    /* margin: 0.8rem; */
    margin-bottom: 0.5rem;
}

/* -------------미디어 쿼리는 하단에 넣는게 좋다------------ */
@media only screen and (min-width: 1200px){
    .inner{
        max-width:1200px; 
        /* 브라우저가 1200픽셀 이상일 경우는 이너의 최대 가로를 1200픽셀로 하겠다.  */
    }
}

mycss.css

티스토리툴바