[개발일지 5월 23일] 반응형 웹 소개와 실습-반응형웹이란, 반응형 웹 핵심 기술 / 김희연 강사님

박재준·2022년 5월 23일
CSShtmlresponsive layout반응형 웹웹
0

1. 학습한 내용

필기내용

  • 반응형 레이아웃(Responsive layout)
    @media 위의 부분은 일반적으로 언제든지 적용되는 부분이고,
    @media : min-width: 481px 조건문에 적용되면) → 레이아웃을 어떻게 바꾸겠다는 지정, 브라우저가 481px부터는 밑의 내용으로 변경
    → 내가 기준을 두는 가로 폭(사이즈)이 있음

  • 적응형 레이아웃 : 기기에 따라 세밀한 조정이 가능

  • static layout 적용 사이트 예시 : https://brunch.co.kr
    → 화면의 크기에 상관없이 정적임(배치가 그대로)

  • responsive layout 적용 사이트 예시 :
    http://strongegg.com/,
    https://www.pinterest.co.kr/,
    https://www.coinbase.com/,
    https://nia.or.kr/site/nia_kor/main.do

  • https://mediaqueri.es/ : 미디어 쿼리로 작성된 페이지를 확인할 수 있는 곳

  • https://getbootstrap.kr/ : 기존 css가 만들어져있어서, 어느 정도 퀄리티가 보장된 페이지(반응형 페이지)를 만들 수 있음 / 그리드 시스템 : 레이아웃을 바꾸는 것은 아니지만, 배열만 바꿔서 작업가능 / 컴포넌트도 다양, 자바 스크립트도 제공 → 작업량 줄임

  • flat 형태 : 납작하다 / 웹페이지를 만들 때 아이콘이 형태가 단순한 디자인(메뉴를 평면적으로 나타냄 → 장식적 요소가 빠져서 중요한 것에 집중 가능) / 사이트 로딩할 때, 속도도 줄어듬 / 스큐어 모피즘 이라고 함
    https://flatuicolors.com/ : 플랫 디자인 색상 값을 알 수 있는 사이트
    문구 자체가 내용을 담고 있는 것도 중요하지만, 글자의 폰트가 중요해짐
    구글 material 디자인(플랫 + 공간감, 입체감) : design.google/library/material-design-awards-2017

  • 만약 print 경우 먼저 작성
    이후 덮어쓰기하면 바뀌는 경우가 발생

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

responsive / index.html 내용

<!-- 장점
    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>
    <!-- 미디어가 print이고 별도 css로 작성한 경우 연결 방법 -->
    <link rel="stylesheet" media="print" href=".css/print.css">
    <!-- 768px 이하 태블릿 용 css를 별도로 만들었을 때 연결 방법 -->
    <link rel="stylesheet" media="screen and (max-width:768px)" href=".css/print.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1 class="pc">Responsive-PC</h1>
<h1 class="mobile">Responsive-mobile</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, reiciendis? Deserunt, velit quos voluptates voluptas iusto consequatur fugit ducimus nobis vero modi labore qui soluta itaque eveniet laudantium commodi tempore?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, reiciendis? Deserunt, velit quos voluptates voluptas iusto consequatur fugit ducimus nobis vero modi labore qui soluta itaque eveniet laudantium commodi tempore?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, reiciendis? Deserunt, velit quos voluptates voluptas iusto consequatur fugit ducimus nobis vero modi labore qui soluta itaque eveniet laudantium commodi tempore?</p>


<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, reiciendis? Deserunt, velit quos voluptates voluptas iusto consequatur fugit ducimus nobis vero modi labore qui soluta itaque eveniet laudantium commodi tempore?</p>

</body>
</html>

& responsive / css / style.css 내용

@charset "utf-8";

.pc{
    color:red;
    font-size: px;
    background-color: aquamarine;
    /*display: none;*/ /*화면에서 안 보이고 공간도 차지하지 않음 */
}
.mobile{
    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:767px){
    .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;
    }
}

→ 결과


: 제일 작은 사이즈(max-width:99px)

: 그 다음 큰 사이즈(min-width:600px) and (max-width:767px)

: 제일 큰 사이즈(min-width:100px) and (max-width:599px)

◎ 이렇게 브라우저 창 크기에 따라 내용을 배치 또는 변경할 수 있는 기능이 반응형 레이아웃!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

responsive / card-layout / index.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/style.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>- Jim Bishop</h3>
        </div>
    </div>
</div>
</body>
</html>

& responsive / card-layout / css / style.css

@charset "utf-8";

html, body{
    margin:0;
    padding:0;
    /* width: 컨텐츠, 마진, 패딩 합쳐서 결정
    card에서는 border 1px 포함되기 때문에 border까지 모두 너비로 계산하도록 설정 */
    box-sizing:border-box;
}
body{
    background-color: #0964a0;
}
/* 기본 배치 : 세로 정렬 */
#container{
    width: 320px;
    margin:50px auto;
}

.card{
    position: relative; /* 부모 쪽 position: relative 지정하면 자식쪽에서 abolute 배치 시
                            기준이 되는 위치가 변경(브라우저 -> 부모 위치 ) */
    width: 300px;
    height: 500px;
    margin: 20px 10px;
    border: 1px solid #ccc;
    background-color: #fff;
                        }

.words{
    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{
        position: absolute;
        left:310px;
        top:50px;
        width:200px;
    }
}

@media screen and (min-width:1720px){
    #container{
        width:1710px;
    }
    .card{
        position: relative;
        margin:10px;
        float:left;
        width:550px;
        height: 250px;
    }
    .words{
        position: absolute;
        left:310px;
        top:50px;
        width:200px;
    }
}

: 기본 배치 : 세로 정렬

: 그 다음 큰 사이즈 : screen and (min-width:768px) /*and (max-width:1719px)

: 제일 큰 사이즈 : (min-width:1720px)

→ 기본 배치를 css에 입력한 후,
나머지는 @media 쿼리를 통해서 조건문을 설정 & 조건문에 맞게 새롭게 바뀌게 될 내용들에 대해서만 변경값을 설정!

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) condition에 대한 이해가 부족했음 (모자관계 포함, relative, absolute 등)
2) 여전히 class 설정하면서 배치를 하는 것에 대한 코딩 부족

3. 해결방법 작성

1) condition를 확인할 수 있는 사이트에 계속 확인하고 반복
2) 과제수행한 것 & 수업 내용 병행하면서 계속 이해하기

4. 학습 소감

1) 코딩한다고 수업 내용이 전혀 들리지 않는... 결국 또 다시보기도 해야하고... 힘들다...

profile
박재준
초급 개발자
이전 포스트

[개발일지 4월 5일] [공통교육-AI] AI 알고리즘의 이해와 실습 - 김영욱 강사

다음 포스트

[개발일지 5월 24일] 반응형 웹 소개와 실습-반응형 웹 사이트 만들기1 / 김희연 강사님

0개의 댓글