[개발일지 15일차] 웹의 형태

MSJ·2022년 5월 23일
0

WEB

목록 보기
15/41
post-thumbnail

2022-05-23

웹 레이아웃의 형태

static layout

정적 웹.
화면의 가로, 세로 폭을 딱 px로 못박아 놓기 때문에 화면 좁히거나 늘려도 요소의 크기, 배치가 잘려서라도 그대로 표시된다

fluid layout

유동형 레이아웃. 그냥 쓰면 브라우저 폭이 너무 넓을 경우 중앙 컨텐츠 양이 줄어들고, 브라우저 폭이 좁을 경우 중앙 컨텐츠가 너무 길어진다. 단순히 컨텐츠의 폭만 변한다. 화면이 규격 외 경우 보기 불편할 수 있음. 그래서 부분적으로 쓰임.

responsive layout / responsive web

반응형 레이아웃. 플루이드 레이아웃이랑 다르다.
하나의 템플릿으로 모든 기기에 대응할 수 있는 웹이다.

어느 너비 지점에서 트리거 요소, 즉 breakpoint를 만들어서 레이아웃을 새롭게 구성한다.

반응형은 '웹 문서' 안에서 접속한 브라우저의 기기를 식별하고 그에 맞춰 웹페이지를 표시한다. 레이아웃을 재배치 하는 정도.

반응형 웹의 장점
1) 모든 기기에서 접속 가능(콘텐츠를 빠트림 없이 전할 수 있음)
2) 가로모드 레이아웃 변경 가능
3) 하나의 주소를 쓰므로 사이트 유지 관리 용이
4) 최신 웹 표준을 따른다

단점
1) 사이트 디자인이 단순해지는 경향이 있다
2) 하위 버전 브라우저와의 호환성이 문제 될 수 있다
-> 미디어쿼리는 CSS3 최신 기술이기 때문

일반 화면 크기

같은 웹에서 브레이크 포인트 지점(480px 폭부터 레이아웃이 새롭게 바뀜.)

이 때 브레이크 포인트를 거는 것이 @media 쿼리이다.

@media ( min-width: 481px ):'가로폭이 480px이 될 경우' 하고 조건을 거는 것.

Adaptive Website

적응형 웹.
디바이스 별로 독립적인 템플릿으로 만든다. 각각의 디바이스에 맞는 페이지를 별도로 제작하여 랜딩된다.

'서버'에서 프로그래밍으로 접속 기기를 식별하여 그에 맞게 레이아웃을 보여준다. 기기에 따라 반응형 웹보다 더 정밀한 조정이 가능하다.

반응형 웹과 적응형 웹의 차이점

반응형 웹: 웹 사이트에 쓰이는 모든 콘텐츠를 다운 받아 해상도에 맞는 화면으로 랜딩된다. 모바일로 접속하더라도 PC와 모바일의 리소스를 모두 다운 받기 때문에 로딩 속도가 느리다.

적응형웹 : 감지된 디바이스에 맞는 콘텐츠만 다운받아 화면에 랜딩 시켜준다. 로딩 속도가 빠르다.

여담.

윈8은 망했지만 flat한 디자인들에는 큰 획을 그었다. 로딩도 훨씬 빠름.

화면이 플렛해지니 타이포그래피도 중요해졌다. 플랫 형태에서 공간감, 빛 등으로 입체 효과를주어 깊이감을 표현하기도 한다.

html5 입력시 등장하는 태그 일부 해석

<!-- 반응형 웹의 장점
    1) 모든 기기에서 접속 가능(콘텐츠를 빠트림 없이 전할 수 있음)
    2) 가로모드 레이아웃 변경 가능
    3) 하나의 주소를 쓰므로 사이트 유지 관리 용이
    4) 최신 웹 표준을 따른다

    단점
    1) 사이트 디자인이 단순해지는 경향이 있다
    2) 하위 버전 브라우저와의 호환성이 문제 될 수 있다
    -> 미디어쿼리는 CSS3 기술이기 때문

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
        width : 뷰포트 너비
        initial-scale : 초기 확대/축소 값(1 ~ 10) ex1. 1: 확대없이 원래 크기로
        user-scalable : 사용자가 확대/축소를 할 수 있느냐
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<meta>의 속성값들이 없으면 모바일로 표시됐을 때 PC의 기준으로 반영되어 글씨가 너무 작아지는 등의 문제점이 생길 수 있다.

viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
width : 뷰포트 너비
initial-scale : 초기 확대/축소 값(1 ~ 10) ex1. 1: 확대없이 원래 크기로
user-scalable : 사용자가 확대/축소를 할 수 있느냐

media 쿼리, breakpoint만들기

폭 넓이에 따라 설정을 다르게 출력하는 쿼리를 만들어본다. 구분이 잘 안갈 수 있지만 화면이 점점 좁아지는 중이다...ㅎ

예제1

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
        width : 뷰포트 너비
        initial-scale : 초기 확대/축소 값(1 ~ 10) ex1. 1: 확대없이 원래 크기로
        user-scalable : 사용자가 확대/축소를 할 수 있느냐
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 미디어가 print기기이면 별도 css로 작성한 경우 연결할 수 있다 -->
    <link rel="stylesheet" media="print" href="./css/print.css">
    <!-- 조건도 가능. 768px 이하 태블릿 용 css를 연결하겠다 -->
    <link rel="stylesheet" media="screen and (max-width:768px)" href="./css/tablet.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>
<body>
    <h1 class="pc">Responsive</h1>
    <h1 class="mobile">Responsive-mobile</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti sapiente, similique molestias, rem fugiat voluptatum ab ipsum minima ipsa beatae, aspernatur laudantium nam ad ut ea deleniti velit inventore quam!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti sapiente, similique molestias, rem fugiat voluptatum ab ipsum minima ipsa beatae, aspernatur laudantium nam ad ut ea deleniti velit inventore quam!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti sapiente, similique molestias, rem fugiat voluptatum ab ipsum minima ipsa beatae, aspernatur laudantium nam ad ut ea deleniti velit inventore quam!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti sapiente, similique molestias, rem fugiat voluptatum ab ipsum minima ipsa beatae, aspernatur laudantium nam ad ut ea deleniti velit inventore quam!</p>
    
</body>
</html>

css

<style>
@charset "utf-8";

.pc{
    color: red;
    font-size: 50px;
    background-color: aquamarine;
    /* display:none; */
}

/* 미디어쿼리 중단점: 모바일기기 레이아웃을 기본으로 CSS를 만들고, 이를 기준으로 데스트탑 레이아웃을 구성함.
이를 모바일 퍼스트라 한다.
모바일 기기 제약을 고려해 처리속도, 화면크기 최적화를 먼저 진행한다
320px ~ 768px 미만: 모바일기기
768px ~ 1024px 미만: 태블릿
1024px~ : PC
 */
@media (max-width:99px){
    .pc{
        display:none;
    }
    .mobile{
        display:block;
    }
}
 @media (min-width:600px) and (max-width:768px){
     .pc{
         color: blue;
         font-size:20px;
         background-color: green;
     }
 }
 
 @media (min-width:100px) and (max-width:599px){
     .pc{ 
        color:white;
        font-size: 10px;
        /* background-color: green; */
        /* 위에서 이미 아쿠아마린 컬러를 설정했기 때문에 얘를 숨겨도 아쿠아마린은 계속 실해중~ */
     }
 }

 /* landscape: 단말기 가로 방향
    portrait : 단말기 세로 방향 */

 @media screen and (orientation:landscape){
    body{
        background-color: orange;
    }
 }
 @media screen and (orientation:portrait){
    body{
        background-color: crimson;
    }
 }
</style>

예제2


점점 좁아지는 화면에 따라 다른 출력물들...

html

<!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">
    <link rel="stylesheet" href="./css/style2.css">
    <title>Document</title>
</head>
<body>
    <!-- 모바일 퍼스트로 작성해보자 -->
    <h1>모바일 퍼스트로 작성해보기</h1>
</body>
</html>

CSS

<style>
@charset "utf-8";

/* 모바일 코드 : 768이하일 때 보이는 설정*/

h1 {
    font-size: 20px;
    background-color: blue;
}

/* 모바일 퍼스트로 작성할 때
1) 미디어쿼리 작성시
    작은 화면 -> 큰 화면 ==> min-width를 사용
    굳이 코드를 많이 쓸 필요가 없으므로...
 */
/* 최소 768px 이상일 때 적용 : 태블릿 */
/* 미디어쿼리 연속 사용시 max-width: 1023pxd이 있는것과 마찬가지이므로 생략 가능 */
 @media (min-width:768px){
    h1{
        font-size: 40px;
        background-color: pink;
    }
 }
/* 최소 1024px 이상일 때 적용 : PC */
 @media (min-width:1024px){
     h1{
        font-size: 80px;
        background-color: darkcyan;
     }
 }
</style>

예제3

폭에 따라 메뉴바의 배치가 달라진다

html

<!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">
    <link rel="stylesheet" href="./css/style3.css">
    <title>Document</title>
</head>
<body>
    <ul class="media-menu">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</body>
</html>

CSS

<style>
@charset "utf-8";

/* 기본 설정 */
*{
    /* 현업에서 코드를 만들어 쓸 때는 *(전체태그)에 적용하기 보다는 아래와 같이 구체적으로 써주는 것이 좋다 */
}

html, body{
    margin:0;
    padding:0;
}
/* 메뉴 가로 정렬: flex 방식 */
.media-menu{
    list-style: none;
    margin:0;
    padding:0;
    width:700px; /* 메뉴 폭 */
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* a 링크 초기값 지정 */
.media-menu a{
    color:aliceblue;
    text-decoration: none;
}
/* 메뉴 항목에 대한 설정 */
.media-menu li{
    width:150px;
    background-color: aquamarine;
    border: 3px solid red;
    padding: 5px;
    text-align: center;
}

/* 폭이 768px 미만이 됐을 경우 적용되는 스타일 */
@media (max-width:768px){
    .media-menu{
        flex-direction: column;
        align-items: flex-start;
        width:158px; /* 남는 여백 계산법 : content(150) + border(3) + padding(5) */
    }
    .media-menu li{
        margin-bottom: 10px;
    }
    .media-menu li:last-child{
        margin-bottom:0;
    }
}

</style>

media쿼리로 콘텐츠 배치 바꿔보기

html

<!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">
    <link rel="stylesheet" href="./css/style4.css">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="card">
            <img src="https://via.placeholder.com/300x250">
            <div class="words">
                <h2>일 분 전만큼 먼 시간은 없다.</h2>
                <h3>- Jim Bishop</h3>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x250">
            <div class="words">
                <h2>웃음은 마음의 조깅이다.</h2>
                <h3>- Norman Cousins</h3>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/300x250">
            <div class="words">
                <h2>나는 자고 싶다</h2>
                <h3>- Jang nam gwang</h3>
            </div>
        </div>
    </div>
</body>
</html>

CSS

<style>
@charset "utf-8";

html, body{
    margin:0;
    padding:0;
    /* 박스 사이징을 미리 보더 박스로 정해주면 (마진까지 콘텐츠로 포함함) 편함...
        width 가 content, margin, padding 합쳐져 결정됨 */
    box-sizing: border-box;
}
body{
    background-color: rgb(3,38,54);
    color: rgb(30,5,94);
}
#container{
    width: 320px;
    /* 컨테이너 크기가 정해져있을 때는 가운데 정렬을 해줄 수 있음.
    위에서 50px 마진을 줘서 컨텐츠를 띄워주고 나머지 오토로 마진 정렬 */
    margin: 50px auto;
}
.card {
    /* 자식의 컨텐츠를 div 공간 내에서만 움직이기 위해 포지션을 설정해준다 */
    position:relative;
    width: 300px;
    height: 500px;
    margin: 20px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.words {
    /* 부모 쪽에 position:relative;를 지정하면, 자식쪽에서 absolute 배치 시
    기준이 되는 위치가 변경된다  (브라우저 -> 부모)
      */
    position:absolute;
    left: 10px;
    top: 300px;
    padding: 10px;
    text-align: center;
}

/* 내가 화면상에 보여지는 형태의 브레이크 포인트를 지정해주겠다 */
@media screen and (min-width:768px) /* and (max-width:1719px)*/ {
    #container{
        width: 570px;
        /* margin: 50px auto; */
    }
    .card{
        position: relative;
        width: 550px;
        height: 250px;
    }
    .words{
        /* breakpoint로 인해 적용되는 조건문 내용이 달라지면서 position을 비롯한 설정을 새로 지정해야함*/
        position: absolute;
        left:310px;
        top:50px;
        width:210px;
    }
}

@media screen and (min-width:1720px){
    #container{
        width: 1780px; /* card 콘텐츠가 가로로 3번 정렬될 수 있도록 계산을 해야함 */
    }
    .card {
        position: relative;
        /* margin: 10px; */
        float: left;
        width:550px;
        height:250px;
    }
    .words {
        position: absolute;
        left:310px;
        top:50px;
        width:200px;
    }
}
</style>

참고사이트

미디어쿼리로 작성이 된 웹페이지를 볼 수 있다.
-> https://mediaqueri.es/

부트스트랩
기존에 CSS Framework가 만들어져있다. 템플릿을 이용하여 퀄리티가 보장 된 반응형 페이지를 제작가능. JS까지 일부 제공됨.
-> https://getbootstrap.kr/

플랫한 컬러들 추천 사이트
-> https://flatuicolors.com/

google 디자인 라이브러리
-> https://design.google/library/

Good design
-> https://design.google/library/material-design-awards-2017/

어려운 점

오늘 배운 수업에서는 딱히 없다 계속해보니 나름 괜찮은 듯

막힌 것 없음 (언젠가 막히겠지만,,, 계속하려면 무사히 넘어가는 날도 있어야 된다고 생각함)

소감

카드로 배치 변경하는게 매우 재밌었다.
예제가 그럴 듯 해야 할 맛이 난다.

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글