반응형 사이트 만들기 - 콘텐츠 레이아웃, 콘텐츠 타이틀, 메뉴, 게시판(한 줄 효과, 두 줄 효과), 고해상도 이미지

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 89

---

Review


 오늘은 웹스토리보이님의 유튜브 강의를 들으면서 콘텐츠 레이아웃 짜는 법을 배웠다.
정말 신세계다... 사실 아직도 모르는 게 너무 많다고 판단 돼서 포트폴리오 만들기를 중단하고
강의를 들으며 공부하고 있는데, 내가 미처 생각하지 못한 것들을 깨우치게 해주신다.

 요즘 취업보다는 당장 내가 어떻게 공부해나가야할지 방향성에 대한 고민이 많은데, IT의 세계

는 정말 급변하고 평생 공부해야 살아남을 수 있는 직종이라는 걸 깨달아가고 있다 ㅎㅎ

가끔 이런 사실때문에 머리가 아프긴 하지만, 그럼에도 불구하고 내가 재밌어서 버틸 수 있을 것

같다는 생각도 한다.

 

파이팅 !!!!

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 89

 

<콘텐츠 레이아웃 잡기>

 

 

 

미디어쿼리를 이용해서 반응형으로 콘텐츠 레이아웃을 잡는데, 너무너무 신기했다.

내가 반응형 포트폴리오를 만들 때 왜 자꾸 스크롤이 생기지? 이해가 안됐는데, 단박에 해결할 수 

있도록 해주셨다 !!!

 

휴우 - 

 

콘텐츠를 position: absolute;로 고정하고, 화면 크기가 작아지면 position: static;으로 설정해 콘텐

츠를 내려버리기도 하고... 정말 많은 것을 배웠다.

 

 

 

 

<콘텐츠 타이틀, 메뉴 작업>

 

전체 화면 (가로: 1903px)

 

 

 

가로: 960px

 

 

 

가로: 768px

 

 

---

 

 

<고해상도 이미지 작업>

 

전체 페이지 (가로: 1903px)

 

 

 

모바일 창

 

해상도에 따라 이미지를 다르게 표현하는 방법을 배웠다.

지금은 많이 쓰이지는 않고 있지만, 추후에 많이 쓰일 방법이라고 한다.

 

 

 

- 레티나(retina) 디스플레이

 

: 애플이 아이폰4에 처음 탑재한 고해상도 디스플레이.

망막이라는 뜻의 '레티나(retina)'와 '디스플레이(display)'라는 단어가 결합된 용어로 말그대로

화면을 이루는 점이 눈에 보이지 않을 만큼 작고 촘촘한 것이 특징이다.

​아이폰, 맥북은 다 레티나 디스플레이를 쓴다고 생각하면 된다.

 

 

1. 첫 번째 방법 : 미디어쿼리(Media Query) 이용

 

- HTML

<figure>      
     <img src="img.jpg" class="img-normal"  alt="normal image" >                       
     <img src="img.jpg" class="img-retina"  alt="retina image" >   
</figure>

 

 

 - CSS

 

.img-retina {
	display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 2dppx) {
       /* 화면 비율이 해상도가 2인데, 2가 되면 .img-retina의 비는 활성화 시켜주고,
   .img-normal의 img는 없앤다는 뜻 */
        .blog1 .img-retina {display: initial;}
        .blog1 .img-normal {display: none;}

 

이 방법은 호환성을 위해 좋은 방법이나 추천하지는 않는다고 하셨다.

 

normal image와 retina image는 2개의 다른 해상도의 이미지가 있어야 하고,

2 는 normal image 해상도의 x2를 말한다.

 

 

 

2. 두 번째 방법 : 미디어쿼리(Media Query)를 이용해 background-image로 넣는 방법

 

- HTML

 

<div  class="img-retina"> </div>

 

 - CSS

 

.img-retina {
    background-image: url(.../x1이미지 경로);}
  }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
             only screen and (min-device-pixel-ratio: 2),
             only screen and (min-resolution: 2dppx) {
                .blog2 .img_retina {background-image: url(../x2이미지 경로);}
}

@media only screen and (-webkit-min-device-pixel-ratio: 3),
             only screen and (min-device-pixel-ratio: 3),
             only screen and (min-resolution: 3dppx) {
                .blog2 .img_retina {background-image: url(../x3이미지 경로);}
}

 

retina image는 3개의 다른 해상도의 이미지가 있어야 하고, 설정 해상도마다 미디어쿼리를 이용해

설정해야한다.

 

선생님께서는 이 방법을 가장 추천한다고 하셨다.

 

 

3. 세 번째 방법 : srcset 이용

 

- HTML

<!-- <img src="..." srcset="[이미지 위치] [조건], ...">  -->
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" alt="">

 

이 방법은 요즘 유행하고 있고 간편하지만, 호환성이 조금 떨어진다고 한다.

브러우저에 적합한 이미지만 불러오는 srcset 방법이었당 -

 

 

---

 

 

<지금 보고 있는 디스플레이의 해상도를 알아보는 사이트>

 

: https://webkit.org/demos/srcset/

Image srcset attribute example

 

 

 

 

 

 

* 내용 참고 출처

: https://blog.hanlee.io/2018/high-density-display-and-images

해상도에 따라 이미지를 다르게 표현하는 방법