유투브를 통해 사이트를 만들기를 하면서 가장 좋은부분은 기본적인 부분이 습관이 될 수 있도록 항상 말씀을 해주는게 좋은 것 같다! ( 주석표시, 복붙사용, 기본뼈대만들기 등등)
간혹, 습관인 안된다면 코드 정리가 안된거나 오타로 인해 실수를 할 수 있으므로 중요한부분이다
요즘에는 웹 접근성을 준수하여 사이트를 만들어야하기때문에 이번 차트에서도 구조를 잡기위해
IR기법을 사용하고 있다! 이건 따로 정리해둔 자료를 한번더 숙지하고 넘어가는게 좋을 것 같다.
이번 유투브 강의를 다시 들으면서 느낀부분이 인스타그램을 통해서 필요한 정보들을 정리를 잘해두신것같다.
그부분은 내 블로그에서도 바로 확인하고 볼 수있도록 복습할겸 정리를 해볼 생각이다!
이번 영화차트부분에서 새롭게 배우게되는 웹사이트에서 이미지를 표현하는 태그들!
1. <img> : 이미지를 불러올때 사용
2. <figure> : 이미지를 표현할때 사용
3. <fifcation> : 이미지를 설명할때 사용
4. <picture> : 이미지를 화면 크기에 따라 사용 ( 주로 반응형 작업할떄 이미지 크기가 달라져야할때 주로 사용)
해당 태그에 대한 사용방법 등은 아래 자료를 참고하자!
이번 강좌에서는 해상도에 따라 이미지를 다르게 표현하는 방법에 대해서도 알려준다!
기본적으로 반응형 사이트 제작을 위해서는 아래 3가지 개념에 대해서 알고 있어야한다.
1. 유동 레이아웃(flexible layout)
2. 미디어쿼리(media query)
3. 반응형 이미지(responsive image)
이번 영화차트를 만들기 위해서는 반응형이미지(responsive image)에 대한 개념을 정리하고 가자!
* 반응형 이미지(responsive image) 의 경우
.img {width : 100%}로 지정하게 되면은 모든 디바이스에 알맞은 크기로 변하게 된다.
이때 문제점은!
- 이미지 크기와 용량
→ 작은 사이즈의 화면에서도 큰 이미지를 사용하게되면 불필요한 트래픽이 발생하여 용량 낭비 및 페이지 로딩속도가 느려질 수 있다.
- 레티나 디바이스 대응
→ 평소에 잘보이던 이미지도 레티나 디바이스에서 보면 흐릿하게 보이는 현상이 발생할 수 있음
* 반응형 이미지에 대한 문제점 해결방법
이번 메가박스 사이트 만들기 에서는 해상도를 이용한 방법으로 반응형 이미지 작업을 해준다!
참고로, 현재의 디바이스의 해상도를 확인할때에는 아래 사이트에서 확인이 가능하다
https://webkit.org/demos/srcset/
Image srcset attribute example
The srcset Attribute. Below is a image (img) element with both a regular src attribute as well as a srcset attribute. There is a stylesheet that sets the dimensions of images to 400x400px. On browsers without srcset support, the value of the src attribute
webkit.org
내가 사용하는 기기에서는 맥북은 2X / 갤럭시 S20 은 4X 로 확인할 수 가 있고
나중에 내가 만든 사이트에 접속하는 디바이스에 따라 해상도를 최적화 시킬때 도움이 될 것 같다.
* 반응형 이미지에서 해상도를 이용한 방법 관련 사용코드
<figure>
<img src="assets/img/poster01.jpg" srcset="assets/img/poster01@2.jpg 2x" alt="">
</figure>
감사하게도 이번 유투브채널에서는 이미지도 별도로 디자인 작업을 해서 제공을 해주고 있다.
추가로, 이번 강의에서 알아두면 좋을만한 개념도 정리해보고 가자!
1. 인라인요소 와 블록요소
- 블록요소 : <div> , <p> , <h1> , <ul> , <li> 등
→ 블록요소는 영역을 잡는 박스 개념
- 인라인요소 : <span> , <strong> , <em> , <i> , <img> 등
→ 인라인 요소는 글씨 영역
이번 강의에서 가장 어려운 부분은 구조가 복잡해지면서 CSS를 작성하는데 좀 어려웠던것 같다.
이런것처럼, <div>태그가 늘어날수록 하나만 잘못쓰더라도 css가 먹히지 않기때문에
내가 작성한 구조를 정확히 이해하고 코드를 작성해야될것 같다!
그래도 이렇게 한번 따라하고 나니까 이제는 다른 웹사이트의 코드를 보면 이해하고 작성할 수 있을정도는 되는 것 같다.
'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| 웹사이트 따라만들기 코딩일지#3 - 배너영역 (0) | 2021.06.12 |
|---|---|
| 메가박스 사이트 만들기 학습일지#7 - 영화차트탭메뉴 (0) | 2021.06.01 |
| 웹사이트 따라잡기 코딩일지#2 - 헤더영역 (0) | 2021.05.25 |
| 웹사이트 따라잡기 코딩일지#1 - 사이트 정하기 (0) | 2021.05.25 |
| 메가박스 사이트 만들기 학습일지#5 - 배너 반응형 (0) | 2021.05.25 |
