無제

🟦 Images (이미지 파일)가장 자주 사용하는 멀티미디어 요소.JPEG / JPG: 압축률이 뛰어나 사진 이미지에 주로 사용되지만, 투명 배경을 지원하지 않는다.PNG: 무손실 압축 방식으로 화질이 선명하며, 투명 배경(Alpha Channel)을 지원한다.GIF: 256가지 색상만 표현 가능하지만, '움짤'이라 불리는 간단한 애니메이션과 투명 배경을 지원한다.WebP: 구글에서 개발한 차세대 포맷으로, JPEG와 PNG의 장점을 모두 가지면서도 용량은 훨씬 작다.SVG: 수학적 계산으로 그려지는 벡터 방식으로, 아무리 확대해도 깨지지 않아 로고나 아이콘에 필수적이다. 🟦 Audio (오디오 파일)배경음악, 효과음, 팟캐스트 등 재생 시 사용하는 요소.MP3: 전 세계적으로 가장 널리 쓰이는 오..

💡 HTML 에서 이미지를 표시할 때는 용도에 따라 포맷을 선택하는 것이 핵심! 📋 이미지 포맷 비교 📋포맷특징장점단점주요 용도JPG (JPEG)손실 압축 방식사진처럼 색상이 다양한 이미지에 최적화, 용량이 작음투명 배경 불가능, 압축 반복 시 화질 저하실사 사진, 배경 이미지PNG무손실 압축 방식투명 배경(Alpha) 지원, 문자나 로고가 선명함사진의 경우 JPG보다 용량이 훨씬 큼로고, 아이콘, 투명도가 필요한 이미지GIF256색 제한짧은 애니메이션(움짤) 가능, 투명 배경 지원색상 표현 한계로 화질이 낮고 용량이 비효율적간단한 배너 애니메이션, 유머 짤SVG벡터(Vector) 방식아무리 확대해도 깨지지 않음, 코드로 제어 가능복잡한 사진 표현 불가, 파일이 커지면 연산 부담로고, 아이콘, 인..

🟦 Hyper link Tag (Anchor(닻)): 다른 페이지나 같은 페이지의 특정 위치로 이동할 때 사용하는 태그. 특징: 인라인 요소로, 기본적으로 파란색 글씨에 밑줄이 그어진 형태로 나타난다. 🔸  핵심 속성 보고서 다운로드href (Hypertext Reference): 이동할 대상 주소(URL)를 지정하는 필수 속성.target: 링크를 클릭했을 때 어디에서 열지 결정._self: 현재 창에서 열기. (생략 시 기본값)_blank: 새 탭이나 새 창에서 열기. _parent: 현재 프레임의 부모 프레임에서 링크 열기. _top: 현재 브라우저 창의 최상위 프레임에서 링크 열기.title: 링크에 마우스를 올렸을 때 나타나는 풍선 도움말. (비슷한 속성으로 )download: 클릭..

🟦    Img Tag이미지를 삽입해 화면에 출력하는 역할.👉🏻  닫는 태그가 없는 빈 태그(Empty Tag)이며, 속성을 통해 이미지의 경로와 정보를 설정한다. 🔸  핵심 속성src (Source): 필수 속성으로, 이미지, 스크립트, 비디오 등 외부 리소스의 위치(URL)를 지정하는 태그.alt (Alternative Text): 이미지를 표시할 수 없을 때 대신 표시되는 설명 텍스트.alt="설명": 사진을 통한 정보 전달을 위해 내용이 필요한 경우.alt="": 디자인을 위한 이미지로 내용이 불필요할 경우. 🔸  크기 및 제목 관련 속성이미지의 외형과 부가 정보를 제어하는 속성.width, height: 이미지의 너비를 픽셀(px) 단위로 지정. (한가지만 조절하면 원본 비율에 맞춰..

🟦  Text Tag 텍스트를 의미 있게 표현하는 역할. 🔸   블록 레벨 태그 (구조를 잡는 태그)한 줄(블록)로 시작과 끝을 나타내는 성격의 태그로 글의 전체적인 흐름과 구역을 나눈다. (Heading): 제목을 표시하는 태그. ( 부터 까지 있으며 숫자가 낮수록 중요도가 높고, 글자 크기도 크다.) (Paragraph): 본문의 문단을 나눌 때 사용하는 태그. (Break): 단락 내 줄바꿈을 만드는 빈 태그. (닫는 태그가 없는 단독 사용) (Horizontal Rule): 수평 가로선을 구분하는 태그. (주제가 바뀔 때 시각적으로 분리하는 용도) (Block Quote): 인용문의 출처를 나타내는 태그. (보통 들여쓰기가 적용된 모습) 🔸   인라인 태그 (글자 스타일과 의미 강조 태그)특..

🔷   HTML 기본 구조와 주요 태그 🔷표준적인 HTML5 문서는 다음과 같은 계층 구조를 가진다.: 문서의 루트(Root) 요소로, 모든 HTML 태그를 감싸는 가장 바깥쪽의 컨테이너. 안녕하세요! 이것은 HTML 주석 예제입니다. 로 끝나는 방식의미: 코드 설명 추가, 코드 구조 정리, 특정 코드 임시 비활성화. 🔷  주요 시맨틱 태그 🔷웹페이지의 구조와 내용을 명확히 구분하여 표현하는 것.: 머리말(로고˙메뉴)가 들어가는 페이지나 특정 섹션의 상단 부분. (Navigation): 다른 페이지로 이동하는 링크 모음.: 문서의 핵심(주요) 콘텐츠를 담는 영역. (문서 내에서 한번만 사용): 문서의 주요 내용을 논리적으로 구분해 구역을 나눌때 사용.: 블로그 포스트, ..

html 파일- html 파일은 [index.html] 로 만들기.- 기본 html 코드: (! + Enter) 읽는 법(발음)meta charset="UTF-8">앵글브라켓 태그 속성 대입 큰따옴표 값 큰따옴표 앵글브라켓 Tag(태그) Attribute(애트리뷰트) equal(이퀄) "Value(밸류)"> 태그(tag) → HTML 요소의 종류 속성(property / attribute) → 태그의 설정 키워드 값(value) → 속성에 들어가는 실제 값 (변수처럼 사용 가능) CSS 에서는 Attribute (애트리뷰트) 로 읽기보다는 Property(프로퍼티) 로 읽음. 단축키 모음https://homzzang.com/b/html-155https://lshjju.tistory.com/841

필수 확장 프로그램Extensions (Ctrl+Shift+X) 1. Live Server: 코드 파일을 수정하고 저장 (Ctrl+S) 할 때마다 브라우저에서 실시간 화면 확인 기능.- 편집기 오른쪽 하단의 [Go Live] 버튼을 누르거나, HTML 파일 위에서 마우스 우클릭 [Open with Live Server] 선택. 2. Live Preview: VS Code 내부에서 웹 페이지를 실시간으로 미리 보는 기능.- HTML 파일 위에서 마우스 우클릭 [Show Preview] 선택. 3. Auto Rename Tag : HTML 태그 수정 시, 여는태그와 닫는태그 모두 수정할 필요없이 한 곳만 수정해도 둘 다 자동으로 수정해주는 기능. 4. px to rem: px 단위 사용 시 단축키 ..

https://code.visualstudio.com/▶ 우측 상단 다운로드(클릭) https://www.easyspub.co.kr/20_Menu/BookView/696/PUB▶ 구글 드라이브로 다운로드(클릭)