다시 쓰는 이력서 by 동퐈

요소는 웹 페이지 안에 다른 웹페이지를 삽입할때 사용하는 HTML요소이다.흔하게 유투브 영상을 퍼가는 소스코드를 보면 자주 볼 수 있다. 속성설명src포함할 컨텐츠 경로width가로 크기height세로 크기title컨텐츠의 제목(스크린 리더용)allowfullscreen전체 화면 허용loadinglazy 또는 eager로 로딩방식 제어sandbox보안 제한 설정 소스코드의 allow 속성과 referrerpolicy속성은 웹 표준에 위배되는 속성으로 사용하지 않는것이 좋다. 속성설명 data삽입할 컨텐츠의 경로type파일의 유형 (type="application/pdf")width가로 크기height세로 크기name객체 이름(자바스크립트로 접근 가능)form 요소와 연결하는 id 값

웹브라우저에서 동영상컨텐츠를 제공하고 싶다면 요소를 사용 할 수 있다.   동영상 콘텐츠는 src에는 영상 경로를, type에는 비디오 코덱 속성을 명시하면 브라우저에서 지원하는 코덱에 따라 그에 맞는 영상을 렌더링한다. 주요 속성으로는 controls(컨트롤러 제공), mute(실행시 음소거), poster(썸네일), autoplay(자동재생)가 있으며 자막파일을 제공한다면 요소를 사용해서 자막있는 동영상을 렌더링 할 수도 있다. src 속성으로 자막파일 경로를 명시해주고 kind는 자막의 유형 srclang은 제공언어의 코드 lang은 자막 선택시 표시될 이름을 나타낸다.

이전에 HTML에서 이미지를 다루는 요소 에 관해 알아봤었다. 는 여러 이미지를 그룹화하고 브라우저가 조건에 따라 적절한 이미지를 선택할 수 있도록 하는 컨테이너 요소이다.요소와 함께 사용하며 는 요소 내부에서 다양한 미디어 소스를 제공하기 위해 사용된다. 외에도 태그 내에서도 소스제공을 하기 위한 요소로 사용된다.    태그를 사용하면 HTML로도 반응형 이미지를 구현할 수 있다. 해당 예제에는 기본적으로 해변사진을 보여주고 있다.하지만 태그의 media 속성에 따라 브라우저 크기가 달라지게 되면 srcset 속성에 명시된 이미지로 교체하게 된다.

몇몇 홈페이지를 보면 홈페이지 최하단에 회사 정보가 적혀있는 것을 볼 수 있다.  요소는 이런 정보들을 기입하는 데 사용하는 요소이다.MDN을 살펴보면 요소 안에는 작성 규칙이 정해진 것은 아니고 실제주소, URL, 이메일, 전화번호, SNS, 좌표 등등 다양한 정보와 이 정보를 제공하는 주체가 반드시 포함되어야 한다고 되어있다. 작성 위치 또한 정해지지 않았으며 다른 섹션에서도 사용될 수 있다고 한다.  (주) 여기어때컴퍼니 주소:서울특별시 강남구 봉은사로 479, 479타워 11층 | 대표이사:정명훈 | 사업자등록번호: 742-86-00224 사업자정보확인 전자우편주소:help@yeogi.com ..