20220523 개발일지 반응형 웹

신유지·2022년 5월 23일

학습한 내용

반응형 웹

★장점
1) 모든 기기에서 접속 가능.
2) 가로모드에 맞춰 레이아웃 변경 가능.
3) 하나의 사이트로 사용하는 것이라, 사이트 유지 관리 용이.
4) 최신 웹 표준 따름.

☆단점
1) 사이트 디자인이 단순해진다.
2) 하위 버전 브라우저와 호환성 문제 있을 수 있다.
-> 미디어 쿼리는 CSS3 기술 (언젠가는 해결 될 것)

※ 용어 정리 ※

viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
width : 뷰포트 너비
initial-scale : 초기 확대/축소 값(1 ~ 10범위를 가짐)
user0scalable : 확대 축소 가능 여부

미디어가 print이고 별도 css로 작성한 경우 연결 방법

<link rel="stylesheet" media="print" href="print 할 css가 있는 파일로 링크 연결">

768px 이하 태블릿 용 css를 별로로 만들었을 때 연결 방법

<link rel="stylesheet" media="screen and (max-width:768px)" href="tablet용 css가 있는 파일로 링크 연결">

미디어쿼리 중단점: 모바일 / 태블릿 / 데스크탑

모바일기기 레이아웃을 기본으로 CSS 만들고 이 후 데스크탑 쪽으로 맞추는 방식: 모바일 퍼스트
-> 모바일 기기 제약을 고려해 처리속도, 화면크기 최적화를 먼저 진행. (모바일 기기가 화면 크기 상 제약이 제일 많기 때문)
320px ~ 768px미만 : 모바일기기
768px ~ 1024px미만 : 태블릿
1024px~ : PC

CSS3에서 반응형 웹을 설정해 줄 때,
@media 쿼리로
(min-width: px) and (max-width: px) { }
위의 코드를 같이 써준 후 픽셀크기 설정한 후 중괄호 안에서 선택자 하나하나 설정가능하다.

landscape : 단말기 가로 방향
portrait : 단말기 세로 방향
방향은 가로, 세로 중 어느 길이가 더 긴지에 따라 정해진다.

@media screen and (orientation:landscape)
					or
@media screen and (orientation:portrait)

크기를 지정해 준 상태에서, 제목같은 경우 기기마다 다르게 보이게 하기 위해서 각자 다른 설정을 주고 보이고 싶은 것은 태그에 맞게 display를 설정하고 보이지 않는 것은 display:none으로 설정해준다.

예)
@media (max-width:99px){
    .pc { display:none;}
    .mobile{display:block;}
}

이 방법은 mobile-first 방법으로,
일반 CSS코드를 입력 해 준 후, (모바일일때 적용)
미디어쿼리의 px를 설정하여 태블릿, PC의 설정을 따로 해주는 것이다.

-> 기본 설정일 때

-> width가 768px보다 이하일 때
＊원래 backbround-color가 meun옆 세로로 있었는데,
width를 170px로 지정해 준 후 없어졌다

justify-content의 다양한 속성들. 이미지 출처: 네이버 D2, https://d2.naver.com/helloworld/8540176

※중복되는 부분은 작성하지 않아도 된다.※

-> PC버전 일 때 (1720px 이상)/1716px이상이면 됨
float: left 로 가로 정렬

-> 태블릿버전 일 때 (768px 이상)
mobile과 width와 height를 다르게 하여 세로정렬

-> mobile 일 때 (767px 이하)
-mobile-first방법, 기본 세로 정렬 상태