Today I Learned..
- 이번 메인 프로젝트에선 내가 반응형을 구현한건 거의 없고, 같은 팀원인 은정님과 영재님이 대부분 하셨다. 특히 모달을 맡으신 은정님이 반응형에 거의 몇일을 고생하셨는데, 모달 안에 생각보다 많은기능을 넣어야 했고, 그 와중에 깔끔한 UI,UX를 구현하기 위해 팀원들과 많이 상의를 하셨다.
=> 이번 프로젝트가 끝나고, 반응형을 좀더 공부하고 연습해야 겠다.- 특히 팀원중엔 내가 제일 css가 부족했고, 팀원들께 여태껏 했던 그 어느 스터디나 수업들 중에서 css를 제일 많이 배운것 같다.
- 그 와중에 내가 margin과 padding를 잘 구분하지 못하고, 그냥 화면에 띄우면 된다는 안일한 생각으로 화면을 구현했다가 나중에 싹 고치느라 정말 힘들었다...
=> 요소의 자체적인 크기는 padding, 요소와 요소 사이의 간격은 margin이라는 것을 잊지 말자!!!!!- 이번 프로젝트로 화면구현에 제일 신경쓴건 margin과 padding, px이 아닌 rem으로 구현한 것이다.
1. 반응형 웹
반응형 웹이란?
- 반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미
- 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동으로 재조정
반응형 웹의 장점
- 효율적인 유지보수
- 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되기 때문에 유지보수가 효율적
- 검색엔진(SEO) 최적화 유리
- 반응형 웹은 하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일용 URL이 동일, 따라서 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
반응형 웹의 단점
- 사이트의 속도 저하
- 모바일을 전용으로 하는 사이트에 비해 무겁다. 반응형 웹 디자인은 읽어 들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결이 된다.
- 웹브라우저 호환성 문제
- 현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르다
=> 즉 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다. 100% 맞춤 디자인이 어렵다는 점이 발생합니다.
- 현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르다
2. 미디어 쿼리
- 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성
미디어 쿼리 적용법
- CSS 파일을 HTML 파일에 적용하던 것처럼
<head>태그 안에<link>태그를 위치, 다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다. 미디어 속성 내 해당 조건을 만족할 때만 해당 css 파일을 불러오게 된다.
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">- HTML 파일 내
<head>태그 안에서<style>태그를 열어 미디어 쿼리를 작성,
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성. */
</style>- CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
미디어 쿼리 구문
미디어 쿼리의 기본적인 구조
- 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.
- 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
- CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용된다.
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
미디어 타입(Media Type)
- all : 모든 미디어 타입
- print : 프린터
- screen : 컴퓨터 화면
- speech : 스크린 리더
방향성
- 세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}복잡한 미디어 쿼리
논리곱(and) 미디어 쿼리
- and를 사용해 미디어 기능을 합칠 수 있다.
/*HTML 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당*/
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}논리합(or) 미디어 쿼리
- 콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용
/*뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우 텍스트는 파란색이 된다. 이 중 하나라도 조건을 만족한다면 쿼리안의 CSS 스타일이 적용*/
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}부정(not) 미디어 쿼리
- not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용
/* 방향이 세로인 경우에만 텍스트가 파란색으로 적용*/
@media not all and (orientation: landscape) {
body {
color: blue;
}
}3. 메인 프로젝트 반응형 적용
- 스타일드컴포넌트 사용함
@media (max-width: 768px)로 결정
3-1) 메인홈 지도 필터 버튼
- 같은 팀원인 영재님이 구현하심
const ContainerFillter = styled.nav`
display: flex;
justify-content: center;
align-items: center;
padding: 6px 10px 4px 10px;
border-radius: 8px;
background-color: var(--white);
box-shadow: var(--bs-lg);
transition: 0.2s;
.partition {
width: 1.2px;
height: 48px;
margin: 0 10px;
background-color: var(--black-100);
}
@media (max-width: 768px) {
flex-direction: column;
padding: 10px 6px 10px 6px;
transition: 0.2s;
.partition {
width: 50px;
height: 1.2px;
margin: 10px 0 6px 0;
background-color: var(--black-100);
}
}
`;
3-2) 모달
- 같은 팀원인 은정님이 구현
- 모달로 구현한이유는?
- 모달에 들어가는 내용이 워낙 많아서 새로 페이지를 만들지 팀원들과 고민을 많이 했는데,
뒤에 지도 페이지에 지금 현재 보는 약국을 새로고침하지 않고, 약국상세를 띄우기 위해서는 모달로 구현할수 밖에 없었다.
- 모달에 들어가는 내용이 워낙 많아서 새로 페이지를 만들지 팀원들과 고민을 많이 했는데,
- 모달 넓이가 768px이상일 때의 약국이름, 별점, 리뷰갯수 부분과
768px이하일때의 약국이름, 별점, 리뷰갯수 부분이 다른 컴포넌트로 해놓음
=> 768px이하일때 약국사진과 약국정보, 리뷰들을 스크롤로 나타내기 위해서! - 지도, 모달, 리뷰를 작성하는 부분 모두
z-index를 사용하여 위치를 조절하였다.
// < 모달 넓이가 768px이상일때 >
//전체 컨테이너
const InfoContainer = styled.aside`
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 450px;
padding-right: 20px;
border-right: 1px solid var(--black-100);
@media (max-width: 768px) {
height: auto;
margin-bottom: 30px;
padding: 0px;
border-right: none;
border-bottom: 1px solid var(--black-100);
}
`;
// 약국이름, 별점, 리뷰갯수 부분 => 768px이하일땐 안보이게 구현
const InfoHeader = styled.header`
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
gap: 10px;
border-bottom: 1px solid var(--black-100);
@media (max-width: 768px) {
display: none;
}
`;
// < 모달 넓이가 768px이하일때 >
//모달 전체 컨테이너 => flex-direction: column으로
// z-index는 컴포넌트로 전역으로 관리
const ModalContainer = styled.section`
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 30px;
height: 600px;
width: 940px;
background-color: var(--white);
border-radius: 10px;
@media (max-width: 768px) {
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: 20px;
height: 700px;
width: 500px;
background-color: var(--white);
border-radius: 10px;
}
z-index: ${zIndex_Modal.ModalContainer};
`;
// 약국이름, 별점, 리뷰갯수 부분=>768px이상일땐 안보이게 구현
const InfoHeader = styled.header`
display: none;
@media (max-width: 768px) {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 0px 10px 7px 10px;
gap: 10px;
width: 450px;
background-color: var(--white);
border-bottom: 1px solid var(--black-100);
}
`;
//스크롤 구현
const Constant = styled.section`
display: flex;
flex-direction: row;
justify-content: center;
::-webkit-scrollbar-track {
background-color: var(--black-075);
border-radius: 0px 5px 5px 0px;
}
@media (max-width: 768px) {
display: block;
overflow-y: scroll;
}
`;4. 스크롤 바
- 스크롤 할 overflow 가 없는데도 track 이 자꾸 보여서 문제가 발생
- 기본으로 트랙을 안보이게 하고, active 시에는 트랙이 보이게 하는 코드 사용
::-webkit-scrollbar-track{
visibility: hidden;
}
:active::-webkit-scrollbar-track{
width: 0.6rem;
visibility: visible;
}
함께 일하는 프론트엔드 개발자 이성은입니다🐥