[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 04 웹 문서에 다양한 내용 입력하기(2)

DAY 5

🔖 오늘 읽은 범위 :

🔥01/09(금) 진도표 알림
👉🏻공부 내용: 04 웹 문서에 다양한 내용 입력하기(2)
👉🏻쪽수: 101~123쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

이미지 삽입하기

scrset 속성

• 이미지 용량이 크거나, 해상도에 따라 최적화해서 표시해야 할 때.
• 이미지 정보를 여러 개 알려줘서 이미지를 적절하게 표시하게 함.
• 사용 조건 : 너비와 화면 픽셀 비율
• w 서술자 : “파일 이름 너비” 형식. ex) small.png 500w, large.png 1000w
• x 서술자 : 장치의 픽셀 비율. ex) sky-1.png 1x, sky-2.png 2x

💡픽셀 비율 값 알아내기

• ~~www.mydevice.io → 2026년 1월 9일 기준으로 동작하지 않음.~~
• “추가로 알게 된 것” 섹션 참고할 것.

오디오와 비디오 넣기

<object>, <embed> : 다양한 멀티미디어 파일 삽입

• <object> : 멀티미디어 파일을 삽입할 때 사용.
  • <object width="너비" height="높이" data="파일"></object>
  • pdf 파일을 삽입하면 pdf 리더가 자동으로 포함되어 보여줌.
• <embed> : 오래 된 브라우저 호환성 고려해 사용하기 좋음.
  • <embed src="file path" width="900" height="100">

웹 브라우저 지원 멀티미디어 종류

• 비디오 : mp4, webm
• 오디오 : mp3, mp4, m4a

<audio>, <video> : 오디오, 비디오 파일 삽입

<audio src="file path" controls></audio>
<video src="file path" controls width="700"></video>

종류	설명
controls	플레이어 화면 컨트롤 바 표시.
autoplay	오디오, 비디오 자동 실행.
loop	반복 재생.
muted	소리 제거.
preload	페이지 로딩 시, 파일 로딩 방식 결정. auto, metadata, none
width, height	너비와 높이. 지정 안된 속성은 자동 계산.
poster=”file name”	<video> 태그에서 사용. 재생 전 표시 될 포스터 이미지 지정.
- 멀티미디어 파일은 자동 재생하지 않도록 해야 한다 ⇒ 웹 접근성 지침.
- 만약 비디오 자동 재생을 하려고 한다면 소리를 제거해야 함. → muted 속성으로 소리 제거. autoplay 로 자동 재생.

하이퍼링크 삽입하기

링크 삽입 <a>, href 속성

<!-- 텍스트 링크 -->
<a href="document path or name"> Text</a>
<!-- 이미지 링크 -->
<a href="document path or name"><img src="image path" alt="description"></a>
<!-- 새 탭에서 문서 열기 -->
<p><a href="order.html" target="_blank">주문서 작성하기</a></p>

• 텍스트 링크의 색 변경 ⇒ CSS 사용.
• 링크 새탭 열기
  • target 속성 에 _blank 를 지정 → 연결된 문서가 새 탭에서 열림.

한 페이지 안에서 이동하는 링크 = 앵커 anchor

• <a> 태그를 이용해서 한 페이지 내에서 이동하는 링크 = 앵커 anchor

<태그 id="anchor_name"> content </태그>
<a href="#anchor_name"> link </a>

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 앵커 기능은 유용한 부분이 있어서 주목됨.
• 이미지 소스셋은 최적화 차원에서 중요.
• 새 탭으로 페이지 여는 게 이거였군~

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• 책 내용 중에 소개된 사이트가 2026년 1월 9일 기준 구동되지 않음. 그래서 따로 찾아 봄.
  • 🔍 지금 화면 해상도 / 픽셀 비율 확인 가능한 웹사이트👉 자동으로 현재 화면 해상도, DPR, 픽셀 비율 등 표시🔗 https://www.whatismyscreenresolution.org/

    ---

    📐 2. Screen Size Checker📌 JavaScript 활성화가 필요할 수 있어요.

    ---

    📏 3. WhatIsMyViewport.com🔗 https://whatismyviewport.com/

    ---

    📊 4. My Screen Size (한국 서비스)📌 브라우저 위치에 따라 해상도를 실시간으로 보여줘요.

    ---

    🖼️ 5. HowBigIsMyBrowser.com🔗 https://howbigismybrowser.com/

    ---

    📌 팁: 개발자 도구로 직접 확인하기

      console.log({
      width: screen.width,
      height: screen.height,
      devicePixelRatio:window.devicePixelRatio,
      innerWidth:window.innerWidth,
      innerHeight:window.innerHeight
      })
    

    이건 별도 사이트 없이도 현재 화면정보를 즉시 출력해줘요.
  • 웹 개발자라면 브라우저 개발자 도구 (F12) → Console 에 아래 자바스크립트 입력하면 바로 확인할 수 있어요:
  • 👉 브라우저의 실제 픽셀 너비/높이 측정 – 반응형 개발할 때 유용.
  • 🔗 https://myscreen.opendocs.co.kr/
  • 👉 국내에서 쓰기 쉬운 화면 해상도 체크 사이트
  • 👉 뷰포트 크기를 빠르게 파악 – CSS Viewport을 확인하는 데 유용해요.
  • 🔗 https://screensizechecker.com/
  • 👉 현재 화면 사이즈, 해상도, 뷰포트 크기 등을 보여주는 도구
  • 📌 접속만 하면 디바이스 해상도와 DPR(Device Pixel Ratio)도 알려줘요.
  • 🖥️ 1. WhatIsMyScreenResolution.org

---

🤟소감 3줄 요약

• 와 힘들다. 내용이 너무 많았어..