[웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점)

웹디자인/ 퍼블리싱 디자인 할 때 화면 크기를 어느정도로 잡아야 할지 정확히 잘 모를때가 있다.
가로값 기본은 1980이라면 높이값의 경우 모니터 사이즈인 1080이 아닌 약 1053 으로 해야 한다(상단URL 부분등 제외)

디자인 작업할때 자주 쓰는 해상도와 높이값

1. 1920 x 1080

• 일명 FHD(Full High Definition)라고 불리는 해상도
• 24인치 데스크탑, 보편적인 모니터 크기의 해상도
• XD 나 figma 에서 작업시 뷰포트는 1053px

💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼고 작업을 한다. viewport는 약, 1053px 정도로 설정

2. 1536 x 864

• FHD 노트북의 해상도
• 1920 x 1080에 125% 배율을 적용한 해상도
• 노트북 폰트 사이즈 기본 세팅이 125%로 되어 있는경우가 대부분

💡 브라우저의 상단 부분의 URL 과, 북마크 등의 높이값을 빼면 viewport는 약, 845px 정도로 설정

4. 1280 x 720

• HD(High Definition)
• 옛날 사양의 모니터, 노트북 등에서 사용
• 한국에서는 2.3%밖에 사용하지 않지만 전세계에서는 5.8% 가량 차지

해상도에 맞게 미디어 쿼리 작성 방법

1920 기본값 : 별도의 미디어 쿼리 설정 없이 사용

p{
    font-size: 1.2rem;
}
@media (max-width: 1536px) {
    p{
        font-size:1rem;
    }
}
/* 1280 ~ 1536 해상도 부터 body의 font-size가 1.2rem  */
@media (max-width: 1280px) {
    p{
        font-size:0.8rem;
    }
}
@media (max-width: 1023px) {
}
@media (max-width: 766px) {
}