1. PNG JPG SVG WebP GIF characteristic, pros and cons
- 이미지 파일 비교
| 포맷 | 특징 | 장점 | 단점 | 주요 용도 |
| JPG (JPEG) | 손실 압축 방식 | 사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음 | 투명 배경 불가능, 압축 반복 시 화질 저하 | 실사 사진, 배경 이미지 |
| PNG | 무손실 압축 방식 | 투명 배경(Alpha) 지원, 문자나 로고가 선명함 | 사진의 경우 JPG보다 용량이 훨씬 큼 | 로고, 아이콘, 투명도가 필요한 이미지 |
| GIF | 256색 제한 | 짧은 애니메이션(움짤) 가능, 투명 배경 지원 | 색상 표현 한계로 화질이 낮고 용량이 비효율적 | 간단한 배너 애니메이션, 유머 짤 |
| SVG | 벡터(Vector) 방식 | 아무리 확대해도 깨지지 않음, 코드로 제어 가능 | 복잡한 사진 표현 불가, 파일이 커지면 연산 부담 | 로고, 아이콘, 인포그래픽 |
| WebP | 구글 제작(차세대) | JPG/PNG보다 용량이 30% 이상 작음, 투명/애니메이션 지원 | 구형 브라우저(IE 등)에서 지원 안 함 | 모던 웹의 거의 모든 이미지 |
- 이미지 속성 정하는 건 프론트엔드 개발자만 가능 (다만, 숙련도 필요)
- WebP로의 전환
대부분의 모던 브라우저가 WebP를 완벽히 지원하기 때문에, 기존의 JPG와 PNG를 WebP로 변환하여 사용하는 것이 기본
왜냐하면 똑같은 화질에 용량만 획기적으로 줄어들어 페이지 로딩 속도가 빨라지기 때문임
-실무자의 시선
실무에서는 단순히 포맷만 정하는 것이 아니라 '최적화' 단계까지 고려해야 합니다.
이미지 다이어트: TinyPNG 같은 도구를 사용하여 파일의 메타데이터를 제거하고 용량을 최소화한 뒤 배포합니다
2. JPG PNG -WEBP로 변환하는 방법
- 온라인 변환 사이트 이용하기 (강사님 추천)
설치 과정 없이 웹상에서 간편하게 파일을 변환할 수 있는 방법입니다. 대표적인 사이트로는 CloudConvert, Convertio, Ezgif 등이 있으며, 해당 사이트에 파일을 업로드한 후 변환할 이미지 형식을 WEBP로 선택하면 쉽게 변환할 수 있습니다.
- 포토샵 및 디자인 툴 활용하기
포토샵 최신 버전에서는 ‘다른 이름으로 저장’ 기능을 통해 WEBP 포맷 선택이 가능합니다. 이 방법은 이미지 품질을 유지하면서 변환할 수 있어 고품질 결과물을 원하실 때 적합합니다.
- 커맨드라인 도구 사용하기
개발자 분들이 많이 활용하는 방법으로, 구글에서 제공하는 cwebp 도구를 설치하여 터미널이나 명령 프롬프트에서 다음과 같이 입력해 변환할 수 있습니다.
3.Web accessibility and alt property
alt를 사용하는 큰 이유
-시각 장애인을 위한 '눈' 역할
시각 장애인은 '스크린 리더'라는 프로그램을 통해 웹사이트를 읽습니다.
이미지에 alt 속성이 있으면 프로그램이 그 내용을 말로 설명해 주지만,
없으면 이미지가 있다는 사실조차 모르거나 파일명(예: IMG_123.jpg)을 그대로 읽어버려 혼란을 줍니다.
- 검색 엔진의 '이해' 도구
alt 속성에 적힌 설명을 통해 "아, 이 이미지는 사과 사진이구나"라고 인식하며,
이는 검색 결과 노출(SEO)에도 긍정적인 영향을 줍니다.
한 줄 요약: 이미지를 볼 수 없는 사람과 기계에게 **"이 사진은 이런 내용이에요"**라고 친절하게 알려주기 위해서입니다.
alt=""
장식용 이미지에 alt=""라고 비워두는 것은 스크린 리더 사용자에게 **"이 이미지는 중요한 정보가 아니니 그냥 지나치셔도 됩니다"**라고 신호를 보내는 아주 중요한 약속입니다.
콘텐츠 집중도 향상
alt=""를 넣어두면 스크린 리더는 해당 이미지를 완전히 무시하고 다음 텍스트로 넘어갑니다. 이를 통해 사용자는 불필요한 장식 정보에 방해받지 않고, 웹사이트의 진짜 핵심 내용에만 집중할 수 있게 됩니다.
실무자의 시선
실무에서는 더 깔끔한 방법을 선호하기도 합니다.
- CSS 배경 처리: 정말 순수하게 꾸미기 위한 용도라면 HTML의 <img> 태그를 쓰지 않고, CSS의 background-image 속성을 사용하는 것이 가장 좋습니다. 그러면 스크린 리더가 아예 인식조차 하지 않아 접근성 측면에서 가장 깔끔합니다.
- 공백( ) 주의: alt=" "처럼 따옴표 사이에 한 칸을 띄우면 안 됩니다. 반드시 붙여서 alt=""라고 써야 '빈 값'으로 정확히 인식됩니다.
4. Multimedia tag and property
<video>: 비디오를 넣을때 사용하는 태그
<src>: 파일 경로 설정
<controls>: 재생, 일시정지, 볼륨 등 컨드롤 바를 표시함 (가장 많이 쓰임) _ 없으면 아무것도 안뜸 주의 해야함
<autoplay>: 페이지가 로드되면 자동으로 재생됨 (대부분 <muted>와 함께 쓰임)
<loop>: 영상이 끝나면 처음부터 다시 재생함
<poster>: 영상이 로딩 중이거나 재생 전일 때 보여주는 썸네일
<audio>: 웹 페이지에 음악이나 음성 파일을 삽입할 때 사용
<src>: 파일 경로 설정
<controls>: 재생, 일시정지, 볼륨 등 컨드롤 바를 표시함 (가장 많이 쓰임) _ 없으면 아무것도 안뜸 주의 해야함
<muted>: 소리를 끈 상태로 재생
<preload>: 페이지를 열 때 파일을 미리 다운할지 정함
| 속성명 | 의미 | 비고 |
| controls | 컨트롤 바 노출 | 사용자가 조작하려면 필수 |
| autoplay | 자동 재생 | muted와 함께 써야 브라우저가 차단 안 함 |
| loop | 반복 재생 | 배경 영상이나 BGM에 유용 |
| muted | 음소거 | 자동 재생을 위한 필수 파트너 |
| poster | 미리보기 이미지 | 비디오 로딩 전 썸네일 역할 |
- 브라우저 정책상 autoplay는 반드시 muted와 함께 사용해야 하는 경우가 많다.
5. Types of multimedia file
WebP 우선 사용: 현재 모던 브라우저들은 대부분 WebP를 지원하므로, 기존 JPG/PNG를 WebP로 변환하여 적용하면 웹사이트 로딩 속도를 30% 이상 개선할 수 있습니다.
6. Hyper link tag and property
<a>는 Anchor의 약자, 현재 위치에서 다른 위치로 연결을 고정한다는 의미
-기본 문법: <a href="주소"
<href>: (Hypertext Reference)이동할 주소를 지정
<target>: 링크 클릭시 어디에서 열지 결정
_self, _default, 공백 : 현재 창
_blank, _new: 새 탭
<title>: 링크에 마우스를 올렸을 때 나오는 풍선 도움말
<download>: 클릭 시 페이지 이동 대신 파일 다운
| 속성 | 역할 | 주요 값 |
| href | 연결할 대상의 경로 | URL, ID, 파일명, 연락처 |
| target | 링크가 열릴 위치 | _blank, _self |
| title | 부가 설명 툴팁 | 자유로운 텍스트 |
| download | 링크 대상을 내려받음 | (파일명 지정 가능) |
외부 주소: href="https://www.google.com"
내부 파일: href="contact.html"
페이지 내 앵커: href="#section1" (특정 ID를 가진 요소로 순간 이동)
이메일 및 전화:
이메일: href="mailto:help@example.com"
전화: href="tel:01012345678"
href="#"은 페이지 상단으로 가는 관습적인 표현으로 자주 쓰인다.
7. Form and input tag
5_mysoul
8. Domain / URL이 무엇인지 설명하세요.
-도메인(Domain)이란?
웹사이트의 이름 또는 주소
(숫자로 된 복잡한 컴퓨터의 주소를 사람이 쉽게 문자로 바꾼 이름)
(Ex: google.com, naver.com)
-URL(Uniform Resource Locator)이란?
인터넷에서 원하는 웹페이지의 정확한 위치까지 포함한 전체 주소
(Ex: https://cafe.naver.com/uksweb202311)
= 도메인은 웹사이트 '이름', URL은 인터넷에서 특정 웹페이지의 위치를 나타내는 '전체 주소'
Ex. https://yoo-storage.tistory.com/5 를 나누면
com: 최상위 도메인
tistory: 2차 도메인
yoo-storage: 서브 도메인
https: Hypertext Transfer Protocol Secure
www: World Wide Web
9. Web hosting / Server hosting이 무엇인지 설명하세요.
웹호스팅 스펙의 디스크/트래픽/DB는 무엇인지 설명하세요.
- 웹 호스팅 > Web hosting
- 웹 사이트 파일을 서버에 저장하여 인터넷에서 접속할 수 있도록 해주는 서비스
- 서버 호스팅 > Server hosting
- 웹 사이트나 애플리케이션을 운영할 수 있도록 서버 자원을 제공하고 관리하는 서비스
| 구분 | 웹호스팅 | 서버호스팅 |
| 비유 | 아파트의 방 한 칸 | 단독 주택 전체 |
| 비용 | 매우 저렴 (커피 몇 잔 값) | 비쌈 (수십만 원대 이상) |
| 관리 주체 | 호스팅 업체 | 사용자 직접 관리 |
| 자유도 | 낮음 (정해진 것만 사용) | 매우 높음 (모든 권한 소유) |
| 난이도 | 쉬움 (초보자용) | 어려움 (전문가용) |
- 디스크 > disk
- 웹 사이트의 모든 데이터를 담아두는 창고(저장 공간)
- 트래픽 > traffic
- 방문자들이 내 웹 사이트에 접속해서 데이터를 가져간 양(전송량)
- DB > Data Base
- 웹 사이트에서 데이터를 저장하고 관리하는 시스템을 의미
| 항목 | 비유 | 중요성 | 부족할 경우 |
| 디스크 | 창고 크기 | 얼마나 많은 자료를 올릴 것인가? | 파일 업로드 불가 |
| 트래픽 | 도로 폭 | 얼마나 많은 사람이 방문할 것인가? | 사이트 접속 차단 |
| DB | 장부 크기 | 얼마나 많은 텍스트 데이터를 쌓을 것인가? | 글 작성/회원가입 불가 |