픽셀 밀도

디바이스 별 픽셀 밀도

이해하기 쉬운 픽셀 밀도
디바이스 별 픽셀 밀도

레티나 디스플레이 대응

레티나 디스플레이 대응
Retina 디스플레이에서 이미지가 흐려지는 문제 대응법

반응형 웹

반응형 작업을 위한 폰트 단위 em / rem 사용
word-break

이 위로 추가학습 필요

---

반응형으로 작업한 페이지 모바일에서 확인하기

1. 로컬의 컴퓨터와 모바일 디바이스 모두 같은 와이파이로 연결하거나
   모바일 디바이스가 핸드폰이라면 테더링으로 컴퓨터 와이파이 연결하기
2. VSC에서 LiveServer로 띄운 뒤 주소http://127.0.0.1:5500/FES_Assignment03/index.html 에서 127.0.0.1을 IP 주소로 바꾸기
3. 바꾼 주소를 모바일 디바이스의 브라우저에서 확인

IP 주소 확인하는 방법

cmd 실행해서 ipconfig 입력 후 IPv4 주소 확인

---

웹 표준 검사

마크업 검사

W3C HTML Validation
마크업을 마치고 난 뒤 유효성을 검사하는 사이트로
1. 웹사이트의 주소를 입력
2. HTML 파일을 업로드
3. 입력창에 직접 입력
이 세가지 방법으로 검증할 수 있다.세가지 방법 중 하나로 검증하면 아래와 같이 세가지의 결과를 보여준다.

CSS 검사

W3C CSS Validation
CSS 또한 HTML과 마찬가지로 검사할 수 있다.

---

vertical-align

vertical-align 속성은 무엇인가?
높이가 다른 글자가 있는 문장을 수직 정렬하고 싶을 땐 폰트 크기가 큰 요소에 vertical-align: top;을 주면 flex 속성의 align-items: center;처럼 수직 방향 중앙으로 정렬할 수 있다.

• vertical-align: baseline(기본값) 적용 시
  
• vertical-align: top; 적용 시
  

---

가상요소에 이미지 넣기

문맥상 중요하지 않은 이미지는 가상요소에 백그라운드로 이미지를 넣을 수 있다.

.tit::after {
    content: "";
    display: block;
    background: url(../images/title_bg.png);
    width: 225px;
    height: 225px;
    background-size: 225px;
}

width, height는 백그라운드 이미지가 들어갈 테두리 역할을 해줄 가상요소의 테두리이고,
background-size는 백그라운드에 들어갈 이미지 자체의 사이즈이다.