CSS 활용해서 반응형 웹사이트 만들기

 

 

CSS

: Cascading Style sheet(CSS)는 HTML에 스타일을 추가하여 웹페이지의 레이아웃, 색상, 폰트 등을 제어하는 언어이다.

 

 

 

 

외부 CSS 파일 사용법

<link rel="stylesheet" href="styles.css">

 

 

 

 

 

 

반응형 웹사이트란?

반응형 웹사이트는 다양한 디스플레이 크기와 해상도에 대응하여 콘텐츠나 레이아웃이 동적으로 변화하는 웹사이트를 말한다.

사용자가 접속하는 기기에 따라서 사이트의 레이아웃과 디자인을 최적화하여, 최상의 사용자 경험을 제공하려는 웹 디자인 방식이다.

 

 

 

 

CSS를 활용한 반응형 웹디자인 예시

: CSS의 Media Quary를 사용하여 특정 장치나 화면 크기에 따른 스타일을 적용할 수 있다.

@media only screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}

 

위 코드는 브라우저 창의 너비가 768px 이하일 때만 body의 배경색을 'green'으로 설정하는 예제이다.

 

 

 

 

반응형 레이아웃 예시

웹사이트의 레이아웃도 화면 크기에 따라 변화하도록 설정할 수 있다.

.container {
    width: 80%;
    margin: auto;
}

@media only screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
}

 

위 코드는 브라우저 창의 너비가 768px 이하일 때, container 클래스의 너비를 100%로 설정하여, 모바일 화면에서도 콘텐츠가 온전히 보일 수 있도록 하는 예제이다.

 

 

 

 

★ 여기서, 최소 반응형 레이아웃은 가장 많이 사용하는 대중적이고 간결한 기준이다. 대부분 디바이스에 잘맞고 반응형 레이아웃을 위한 CSS 작성도 간결하기 때문에 특별한 레이아웃이 아닌 이상 이 기준으로 미디어 쿼리를 작성하면 된다.

• 모바일 기기: 768px 미만
• 태블릿: 768px ~ 1024px
• 데스크탑: 1024px 이상

 

 

 

 

CSS를 이용한 레이아웃 조정

 

1. Flexbox 이해하기

Flexbox는 CSS의 레이아웃 모델 중 하나로, 아이템 간격을 쉽게 조절하고 레이아웃을 유연하게 만들어 주는 방법이다.

.container {
    display: flex;
    justify-content: space-around;
}

.item {
    flex-grow: 1;
}

 

위의 코드에서 container은 flex의 부모 요소가 되고 item은 그 안의 자식 요소가 된다, justify-content 속성으로 아이템의 간격을 space-around로 설정했으며, flex-grow 속성으로 아이템들이 동일한 공간을 차지하도록 설정했다.

 

 

 

2. Grid System 이해하기

CSS Grid는 2차원(열과 행) 레이아웃 시스템을 제공한다. Grid는 복잡한 레이아웃을 만들 때 유용하게 사용된다.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.item1 {
    grid-column: 1;
}

.item2 {
    grid-column: 2;
}

 

위의 코드에서 container은 grid의 부모 요소가 되며, grid-template-columns 속성으로 두개의 열을 생성하였다. 첫 번째 열은 전체 너비의 1 / 3, 두 번째 열은 전체 너비의 2 / 3를 차지하게 설정했다. item1과 item2는 각각 첫 번째와 두 번째 열에 배치된다.

 

 

 

3. CSS Media Quary 이해하기

Media Quary는 CSS를 통해 다양한 장치 아래에서 접근성을 최적화하고 사용자 경험을 향상시킬 수 있는 방법을 제공한다.

@media only screen and (max-width: 767px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

 

위의 CSS 코드는 화면 너비가 767px 이하일 때, container의 표시 방식을 flex로 변경하고, 방향을 column으로 설정하는 예제이다. 이로써 스마트폰과 같은 작은 화면에서의 레이아웃이 바뀌어 사용자 경험이 향상된다.

 

 

 

 

반응형 웹사이트에 필요한 CSS 속성들

• Viewport

: 반응형 웹사이트를 구현할 때는 viewport 메타 태그를 사용하는 것이 필요하다. 이 태그는 모바일 브라우저가 화면 크기에 따라 페이지의 크기를 조정하는 방법을 제어하는 데 사용된다.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

 

• Media Query

: Media Query는 반응형 웹사이트의 핵심 요소이다. Media Query를 사용하면 화면의 실제 크기에 따라 CSS를 적용시킬 수 있다.

@media screen and (min-width: 768px) {
    body {
        background-color: blue;
    }
}

 

위의 코드는 화면의 너비가 768px 이상인 경우에만 body의 배경색을 파란색으로 설정했다.

 

 

• Flexbox

: Flexbox는 아이템 간 공간을 유연하게 조절할 수 있으며, 아이템의 정렬 방식을 쉽게 제어할 우 있는 CSS 속성이다.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

 

 

• Grid

: Grid는 레이아웃을 더 세밀하게 제어할 수 있는 CSS 속성이다. Grid를 사용하면 복잡한 레이아웃에 대해 더 직관적으로 설계할 수 있다.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

 

위의 예제에서 container는 3개의 열로 구성된 그리드 레이아웃을 생성한다. 각 열의 너비는 부모 요소를 균등하게 나눈값이다.