2023.03.22

반응형 웹이란

• 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 웹사이트를 표시하는 방법
• 화면 크기에 반응해 화면 요소들을 자동으로 바꾸어 사이트를 구현하는것
• 가로 모드에 맞춘 레이아웃 변경 가능
• 사이트 유지보수가 용이

반응형 웹 구현을 위한 기술

• 뷰포트
  • 실제 내용이 표시되는 영역
  • 뷰포트를 지정하면 기기화면에 맞춰 확대/축소해서 내용 표시
  • head태그 안에서 meta태그를 이용해 뷰포트 설정
• 미디어 쿼리
  • 접속하는 장치(미디어)에 따라 특정한 css스타일을 사용하도록 함
  • 기본 형태 : @media [only | not] 미디어유형 [and 조건] * [and 조건]
  • only : 특정 웹브라우저(미디어 쿼리를 지원하는)에서만 조건을 인식하게 한다.
    not : 지정한 미디어유형은 제외하고 적용시킨다.
  • 미디어 유형 :
    all : 모든 미디어 유형 print : 인쇄 장치 * screen : 장치의 화면 * tv : 음성과 영상이 동시 출력되는 tv projector : 프로젝터
  • 미디어 유형 ; screen만 사용해도 무방. 제일 많이 씀.
• 그리드 레이아웃
  • 화면을 여러개의 컬럼(column)으로 나누어, 필요할 때 마다 컬럼들을 묶어서 배치하는 방법
  • column : 열
    row : 행
• 플렉스 박스 레이아웃
  • 그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치
  • 여유공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있다.

---

 

 

 

 <!-- 그리드 레이아웃 예제 -->

        <h3>그리드 레이아웃 예제</h3>

        <div class="wrapper">

            <div>A</div>

            <div>B</div>

            <div>C</div>

            <div>D</div>

            <div>E</div>

            <div>F</div>

        </div>

        <br><hr>

        <div class="wrapper">

            <div class="box1">A</div>

            <div class="box2">B</div>

            <div class="box3">C</div>

            </div>

 /*

            그리드 레이아웃 예제 style

        */

        .wrapper{

            display: grid;

            /* 열의 개수 및 크기 : grid-template-columns

                행의 개수 및 크기 : grid-template-rows

            */

            grid-template-columns: 1fr 1fr 1fr;

            grid-template-rows: 100px 100px;

            /* 요소간의 간격 설정 */

            grid-gap: 10px;

        }

        .wrapper div{

            background-color: rgb(249, 226, 255);

            border: 2px solid rgb(201, 116, 250);

            padding: 10px;

            border-radius: 5px;

        }

        /*  행 기준 위치 :

            열 기준 위치 : */

        .box1{ grid-row: 2; grid-column: 2;}

        .box2{ grid-row: 1; grid-column: 3;}

        .box3{ grid-row: 1; grid-column: 1;}

.wrapper div{

            background-color: rgb(249, 226, 255);

            border: 2px solid rgb(201, 116, 250);

            padding: 10px;

            border-radius: 5px;

        }

 <h3>플렉스 박스 예제</h3>

        <div class="flex-container">

            <div class="flex-item">1</div>

            <div class="flex-item">2</div>

            <div class="flex-item">3</div>

        </div>

 /*

            플렉스 박스 예제style

        */

        .flex-container{

            /* 기본적용 (display: flex) */

            display: flex;

            background-color: lightgray;

            /* 요소 배치 방향 지정(flex-direction)

                row, row-reverse, column, column-reverse */

            /* flex-direction: row; */

            /* 요소 감싸기(자동으로 줄바꿈) (flex-wrap) */

            /* flex-wrap: wrap; */

            /* 요소 정렬 (justify-content) */

            flex-direction: row;

            justify-content: center;

        }

        .flex-item{

            background-color: bisque;

            border: 1px solid red;

            /* 요소 감싸기(줄바꿈) */

            /* width: 300px; */

            /* 요소 정렬 */

            width: 50px;

            height: 50px;

        }