[HTML/CSS] 반응형 웹 만드는 방법 (+휴대폰과 컴퓨터에 따른 변화주기)

[HTML/CSS] 반응형 웹 만드는 방법 (+휴대폰과 컴퓨터에 따른 변화주기)FrontEnd2022. 11. 23. 16:33@염염

Table of Contents

HTML로 웹페이지를 만들다 보면 반응형으로 웹을 만들어야 겠다는 생각을 하게 됩니다.

일반적으로 반응형 웹을 고려하고 만들지 않으면 제작한 디바이스가 아닌

다른 디바이스로 들어갔을때 UI 요소들이 이상한 곳에 가있거나 글씨가 깨지게 깨져 있기 때문입니다.

*반응형 웹은 ?

디바이스의 창의 크기에 따라 알아서 요소들이 유기적으로 배치되는 사이트를 의미

이를 해결하기 위한 방법으로는 3단계로

1.html - 특정 meta 태그 삽입하기

2.폰트 사이즈 px 대신 em 이나 rem사용하기

3.css - 미디어 쿼리 사용하기

가 있습니다.

1.html - 특정 meta 태그 삽입하기

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

위와 같이 head 태그 안에 저 meta 태그를 삽입해주면 됩니다.

해당 내용을 자세히 설명해드리자면

viewport는 웹 페이지에서 보이는 영역으로 해당 내용을 통해

width 즉 가로는 device-width 디바이스의 크기로 지정되며

initial-scale을 통해서는 화면에 보여질 픽셀이 1:1을 이루게 됩니다.

2.폰트 사이즈 px 대신 em 이나 rem사용하기

px는 모니터 크기에 맞춰진 단위라

해당 단위를 이용하여 만들면 글꼴을 확대하거나 축소해도 변화가 없습니다.

사이트에서 글꼴 크기 변화에 따른 차이를 주기 위해서는

em 또는 rem 단위를 사용하셔야 합니다.

둘의 차이점은 기준점이 어디댜는 겁니다.

rem은 즉 root + em이 합쳐진 용어로 루트 요소에 의해 크기가 계산됩니다.

html {
  font-size : 16px; 
}

해당 코드가 root의 크기를 지정해 줍니다.

생략 가능으로 설정 하지 않은 경우 브라우저 기본값이 들어갑니다.

em은 부모요소에 따라 상대적으로 크기가 지정되지만

현재 요소의 font-size에 비례하여 값이 커지니 조심해야합니다.

기본적으로 rem 단위를 사용하시기를 추천드립니다.

rem을 쓰는 경우 font-size를 한꺼번에 변경하기 쉽습니다.

(html 태그내 font-size 수정하면 되니까)

3. CSS - 미디어 쿼리 사용하기

(좋은 방법인지 잘 모르겠으나 저는 모바일과 데스크톱에서 사이트의 차이를 해당방법에

거의 90% 이상을 이용하여 구현하였습니다. 참고만 하시길 바랍니다. )

미디어 쿼리란 특정 조건에 따라 CSS 스타일을 차이를 주고 싶을때 사용하는 방법입니다.

@media (조건) {
  변경을 원하는 스타일
}

위와 같은 형식으로

디바이스 별로 화면의 크기가 다르기 때문

이를 기준으로 다른 CSS가 적용될 수 있게 만들면 됩니다.

일반적으로

pc : 최소 1024px 이상
테블릿 : 1023px 이하
모바일 : 768px 이하

이기 때문 각각의 기준에 따른 코드를 작성해주면 됩니다.

@media screen and (max-width : 1023px) {
    .body {
        width : 85%;
    }

위가 화면 크기에 따른 차이를 주게 하는 조건문으로

max-width 을 사용하면 최대 크기가 해당 조건일때까지만을 의미하므로

위의 예시에서는 1023이하인 경우에는 해당 CSS가 적용되고

1023보다 큰 pc일 경우에는 기본적으로 작성한 CSS가 적용되게 됩니다.

위와 같은 3단계를 사용하여 저는 반응형 웹을 만드는데 성공했습니다.

다른 분들도 이를 참고하여 반응형 웹을 만드시는데 성공하시기를 기원합니다.

'FrontEnd' 카테고리의 다른 글

[웹 성능 최적화] 폰트 경량화하는 방법 ( 폰트 용량 줄이는 법 ) (0)	2023.03.04
[Json server 오류 해결법] json-server --watch db.json'json-server'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. (0)	2022.12.22
[html,css] 원 만들고 위에 글자, 이미지 넣는 방법 (0)	2022.07.06
[CSS] 셀렉터 난이도 있는 개념 모음(+ Dinner 게임 하는 법) (0)	2022.05.11
[css] 박스 자체를 가운데 정렬 하고 싶을때 (text-align과 차이) (0)	2022.04.10
[HTML] name과 id의 차이 (0)	2022.03.29

@염염 :: 왕감자

공부하고 정리하는 기록모음

'FrontEnd' 카테고리의 다른 글

티스토리툴바