[웹프로그래밍기초🎀] 9주차 개발일지

-------

개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을  옮겼습니다.

https://blog.naver.com/0yeonjae2/222334395717

-------

이론 복습하기

1. 반응형 웹

: 디바이스에 따라 반응하도록 구현된 웹

하나의 웹사이트가 데스크톱, 태블릿 pc, 스마트폰에서 볼 때 각각 다르게 나타나는 경우가 있는데, 이때 이 웹사이트가 바로 반응형 웹이다. 이를 구현하기 위해 미디어 쿼리(Media query) 기능을 사용한다.

 

2. 미디어 쿼리

: 특정한 브라우저 및 디바이스 환경에서만 특정한 CSS 속성을 적용할 수 있도록 한다.

미디어 쿼리는 @media로 시작한다. 그 뒤 미디어 타입과 미디어 특성을 포함하는 미디어 쿼리 구문이 나온다. 미디어 쿼리 구문이 참이면 중괄호 내의 스타일 속성이 적용된다.

 

미디어 타입의 종류

미디어 타입	설명
all	모든 장치
aural	음성 장치
braille	표시 전용 점자 장치
handheld	손으로 들고 다니는 작은 장치
print	프린터
projection	프로젝터
screen	화면
tty	터미널 등 그림을 띄울 수 없는 장치
tv	텔레비전
embossed	인쇄 전용 점자 장치

 

미디어 타입 앞에 연산자를 써주는 경우도 있다. only는 '해당 장치에서만' 이라는 뜻을 가지고 기본 적용되는 내용이다. 또 not이라는 연산자도 있는데 '해당 장치를 제외한'이라는 뜻을 가진다.

 

미디어 특성의 종류

 

미디어 특성	설명
width	화면 너비
height	화면 높이
device-width	장치 너비
device-height	장치 높이
orientation	장치 방향 (max, min을 붙일 수 없음)
device-aspect-ratio	화면 비율
color	장치 색상 비트
color-index	장치에서 표현 가능한 최대 색상 개수
monochrome	흑백 장치의 픽셀 당 비트 개수
resolution	장치의 해상도

 

분기점 설정하기

웹의 디자인이 달라지는 지점을 break point(분기점)이라 한다. 분기점을 설정할 때 디바이스별 너비를 각각설정하기 보단 개발 중인 콘텐츠에 맞춰 유연하게 분기점을 설정하는 것이 좋다.

---

실습하기

먼저 github 레포를 private으로 바꿔주었다.

 

내가 선택한 사이트인 지니는 반응형 웹이 아니었다..

 

화면의 크기를 줄여도 변함이 없다.

화면을 줄인 상태에서 다른 기능을 눌러보니 모바일 앱 버전으로 화면이 표현된다.

고민하던 도중 '지니 앱에서의 화면을 웹으로 구현해 볼까?'라는 생각도 들었다. 근데 기본 데스크톱 화면에서 보이는 화면과 구성이 꽤 달라서 어떻게 해야 할지 감이 잘 안 잡혔다. 그래서 일단 이 부분은 비워두고 다른 부분들을 다듬기로 했다.

 

이번 주는 살짝 쉬어간다는 느낌으로 검색창과 로그인 창을 정리했다!

 

1. 검색창

(동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

처음에 만든 검색창은 검색창을 누르면 예시 문구가 사라지지 않는다. 이 부분을 어떻게 처리해야 할지 몰라서 인터넷에 검색해봤다. 검색 전에는 클릭 시 생기는 변화라서 js에서 addEventListener("click", function() {삭제 관련 내용})를 적을 생각이었다. 그래서 stackoverflow와 구글을 떠돌던 중 기쁘게도 관련 내용을 포스트한 블로그를 찾았다. 

https://rgy0409.tistory.com/3029

 

방법은

<input id="search_box" type="search" placeholder="들으면 당장 여행 떠나고 싶어지는 플레이리스트" />라는 기존 태그에

onfocus="this.placeholder=' ' "onblur="this.placeholder='들으면 당장 여행 떠나고 싶어지는 플레이리스트' "를 이어서 적어주면 된다!

 

위에 링크를 달아둔 블로그에도 언급되어 있지만 onfocus는 클릭 시 placeholder의 글씨를 사라지게 하고, onblur는 input이 아닌 부분을 클릭했을 때 다시 원래대로 예시 문구가 나타나게 한다.

 

근데 확인하던 도중 원치 않던 것이 생겼다.

돋보기 옆이 x 표시가 생겼다. 검색해보니 type="search"를 추가해서 생긴 변화인 것 같다. input 태그 내 type="search"를 제거하거나 css에

input::-webkit-search-cancel-button,
input::-webkit-search-results-decoration{
	display:none;
}

 

위와 같은 코드를 넣어주면 x를 없앨 수 있다.

type="search"를 적어서 생긴 변화라는 것을 이미 css에 위의 코드를 넣은 후에 알게 돼서 그냥 type="search"를 지우지 않고 css에서 효과를 줬다.

 

 

2. 로그인/ 회원가입 창 효과 주기

(동영상은 글 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)

5주차 개발 일지에서 고민한 부분을 드디어 해결했다!

 

 

저 때 고민한 내용은 "어떻게 레이아웃 위에 창이 뜨게 하는 거지?" 였는데, css에서 해결했다. position: absolute를 적용하고 top : 원하는 위치에 해당하는 px를 적어 위치를 지니 사이트와 유사하게 만들었다.

 

크게 무리 없이 나아가다가

아래 닫기에 JS가 적용되지 않아서 애를 썼다. 처음에는 document.getElementByClassName를 사용해서 '닫기'가 속한 클래스명을 적어 JS를 적용했는데 되지 않아서 그냥 id 값을 줘서 효과를 표현했다. 지금 생각해도 오타나 오류는 없었던 것 같은데 왜 안됐었는지 잘 모르겠다.

 

---

 

느낀점

 

이번 주에는 쉬어가는 느낌으로 크게 2개만 건드렸는데 다음 주부터는 다시 열심히 해야 한다.

다음에는

① 에디터 추천 콘텐츠를 호버 했을 때 생기는 변화를 좀 더 유사하게 표현하고

② 검색창 클릭 시 나타나는 인기·최근 검색어 칸을 만들고

③ 움직이는 광고창(슬라이더)

를 만들 생각이다.

 

추가적으로

원래 사이트에는 없지만

① Scroll To Top 기능과

② 다크 모드

도 만들어보고 싶어서 조금씩 시도해 볼 예정이다.

 

처음 수업을 들을 때는 겁이 많이 났었는데 계속 수업을 들으면서 연습하고 적용하니 부담감이 많이 줄었다. 이제 절반 이상 수업을 들었는데, 남은 수업들도 열심히 들어서 원하는 결과물을 구현할 수 있었음 좋겠다!