Pixel & Process 픽셀의 디테일과 과정의 기록

1. 태그: 동영상 삽입웹 페이지에 동영상을 재생하기 위한 인라인 요소이다. 브라우저가 해당 영상을 지원하지 않을 때를 대비해 태그 사이에 대체 문구를 작성한다.주요 속성:controls: 재생, 일시정지, 볼륨 등 컨트롤러를 표시한다.poster: 영상 재생 전 보여줄 썸네일 이미지 경로를 지정한다.loop / muted: 반복 재생과 음소거를 설정한다.autoplay: 자동 재생 설정이다. 크롬 등 최신 브라우저에서는 muted가 함께 설정되어야 작동한다.playsinline: iOS 사파리에서 영상 재생 시 전체 화면으로 전환되는 것을 방지하고 페이지 내에서 재생되게 한다.preload: 페이지 로드 시 영상을 미리 다운로드할지 결정한다. (none, metadata, auto)2. 태그: 오디..

1. 태그: 이미지 삽입HTML 문서에 이미지를 넣을 때 사용하는 인라인 요소이다. 닫는 태그가 없는 빈 요소(Empty element)인 것이 특징이다.기본 형식: src 속성 (필수): 이미지의 경로를 지정한다. 같은 서버라면 상대 경로, 외부 서버라면 절대 경로를 사용한다. (프로토콜이 다를 경우 //로 시작하여 프로토콜을 생략할 수 있다.)alt 속성 (필수): 이미지가 보이지 않을 때 대신 나올 텍스트이다. 스크린 리더가 읽어주므로 웹 접근성에 중요하며, SEO(검색 엔진 최적화)에도 영향을 준다.팁: 단순 꾸미기용 이미지라면 alt=""와 같이 비워두는 것이 좋다.2. 지원하는 이미지 형식브라우저에서 주로 사용하는 형식은 다음과 같다.GIF: 애니메이션 지원 (.gif)JPG/JPEG: 사진..

1. 태그 (Anchor)텍스트나 미디어에 URL을 연결하여 하이퍼링크를 만든다. 인라인 요소이지만 자식으로 블록 요소도 포함할 수 있는 특이점이 있다.href 속성: 연결할 주소(URL)를 지정한다.target 속성:_self: 현재 탭에서 열기 (기본값)_blank: 새 브라우저 탭에서 열기title 속성: 마우스 오버 시 나타나는 보충 설명(툴팁)이다.2. 하이퍼링크 활용 팁텍스트 링크: "클릭", "이동하기" 대신 "네이버 바로가기"처럼 목적지를 알 수 있는 키워드를 써야 한다. (SEO 및 접근성 향상)이미지 링크: 태그로 를 감싸며, alt 속성에 이동 경로를 적어준다.전화번호 링크: href="tel:번호"를 사용하여 모바일에서 바로 전화를 걸 수 있다.북마크: 이동할 위치의 태그에 id..